deniz.in

Markets

Weather

Loading weather

· via dev.to (home feed)

OpenDiagram generates editable Excalidraw diagrams by letting AI write specs, not layouts

A developer has open-sourced OpenDiagram, an AI generator that turns prompts into properly laid-out, editable Excalidraw diagrams by splitting semantic work from layout code.

OpenDiagram generates editable Excalidraw diagrams by letting AI write specs, not layouts

A developer has released OpenDiagram, an open-source AI diagram generator that renders its output as native, editable Excalidraw elements rather than Mermaid code. In a post on dev.to, the author pitches the tool as an answer to a familiar disappointment: asking a chatbot for an architecture diagram and getting back code that either fails to parse or turns into an unreadable tangle. The project is live in a free beta at opendiagram.ink, and its full code is published under AGPL-3.0 with self-hosting support.

The problem with AI-generated Mermaid

The post opens with a controlled comparison. The author asked ChatGPT and Gemini to design a URL shortener — API, cache, database and click analytics — five times, each time requesting the result as a Mermaid diagram. Two of the five answers failed to parse at all because the models placed curly braces inside edge labels, which Mermaid interprets as the start of a shape definition. The three that did render shared the same defects: intersecting arrows and labels printed on top of one another.

The author's diagnosis is that the model is being asked to do two unrelated jobs at once: reason about a system and lay it out on a page. Current models are reasonably good at the first task and poor at the second, and Mermaid offers no recovery path — elements cannot be dragged into place, so the only recourse is more text editing. The author's usual workaround, asking the AI for the system description and then arranging boxes by hand in Excalidraw for an hour, is precisely the labour the tool is meant to remove.

A spec from the model, layout from code

OpenDiagram's core design decision is a strict division of labour. The language model never emits Mermaid, coordinates, colours or fonts. It produces a small typed specification, one entry per component, with fields such as label, sublabel and category. Everything visual is then handled by deterministic code: the Eclipse Layout Kernel places nodes and groups, a custom router draws edges and positions labels against the final boxes so they do not collide, and a themed renderer converts the result into ordinary Excalidraw elements. Two themes ship: a hand-drawn Sketch theme and a cleaner Classic theme for documentation.

Because appearance is computed rather than generated, the author argues, output quality stays consistent instead of varying with the model. The example images in the post were produced with the same Gemini model used in the Mermaid comparison, showing technology icons for Postgres, Redis and Kafka grouped by function, with edges routed around obstacles rather than across them.

Diagram types and a stress test

According to the post, the tool handles system design and cloud architecture with real AWS, GCP and Kubernetes icons; sequence diagrams with numbered messages, dashed replies and opt fragments; ER diagrams with typed columns, primary and foreign key markers, and crow's foot notation; plus flowcharts.

A deliberately difficult prompt — one paragraph describing a multi-tenant commerce platform with roughly 30 components and mixed consistency requirements — did not collapse into a single overloaded picture. The agent planned four diagrams on its own: an overview plus separate diagrams for checkout, search and fulfilment. It respected the requested split between strongly consistent money paths and asynchronous analytics, but it also left some items out entirely: disaster recovery, cross-region failover and circuit breakers appear on none of the diagrams. Each output remains editable on one shared canvas, and the author notes the missing diagrams can be requested in a follow-up.

Agent features and availability

Beyond one-shot generation, OpenDiagram works as a conversational agent, so a request such as adding a Redis cache between two components updates the existing drawing. It can also import a GitHub repository and generate an architecture diagram from it. Users who prefer their own billing can plug in API keys for OpenAI, Anthropic, Google or OpenRouter, and a guest mode requires no account during the beta. The author is explicitly soliciting failure cases — large real-world systems, messy monorepos, sequence diagrams with nested fragments — to be filed as issues on the project's GitHub repository, Itz-Agasta/OpenDiagram.

Why it matters

The interesting idea here is less the diagrams than the architecture. OpenDiagram treats the language model as a semantic component extractor and delegates all spatial reasoning to classical, deterministic tooling — the same separation that makes structured-output pipelines dependable in other domains. And for anyone who has abandoned AI diagram tools because the output could not be corrected, editable native Excalidraw elements change the practical calculus: a diagram you can fix is a diagram you can actually ship.

Two caveats deserve stating plainly. Every claim comes from the developer's own post and unreviewed evaluation runs, not independent testing, and the stress test shows the tool trades completeness for readability, omitting content rather than representing all of it. Still, as a design pattern — and as an AGPL-licensed, self-hostable option in a space dominated by closed services — it is a useful data point for where AI-assisted tooling is heading.

  • #open-source
  • #excalidraw
  • #diagrams
  • #ai
  • #developer-tools

Related posts