← All workCase study 04 / 07

Diagram Studio

A visual editor for grid diagrams that cannot overlap, shipped as one offline HTML file.

WhenSep 2026
StackJavaScriptSVGPython

How it works

A visual editor for grid diagrams, shipped as a single offline HTML file with no dependencies. Nodes sit in grid cells and edges run through the gutters between them, which is what guarantees no overlapping labels and no edge cutting through a box. Every edit re-renders through the real layout engine, whose lint shows under the canvas; the spec's rules live only in the engine's validator, so the studio and the CLI cannot drift apart, and an imported spec round-trips byte-identical.

It imports JSON specs or Mermaid flowcharts and exports SVG, PNG, a paste-in figure block, or a standalone page. Share links carry the whole diagram, deflated, in the URL fragment, so no server ever sees it. Coding agents can use it without the repo: an llms.txt entry point, a JSON schema, and a stdlib-only Python CLI that lints and renders specs.

Headless-Chrome end-to-end tests cover the studio, and a snapshot corpus fails the build if any reference figure renders differently.