Best diagram-as-code tools
Tools that turn a few lines of text into a diagram and keep it editable as code: Mermaid, PlantUML, D2 and Eraser's own syntax, with what each costs and where it renders.
Mermaid Chart
Mermaid Chart
The editor from the makers of Mermaid, the syntax GitHub and many wikis render natively. Mermaid.js itself is open source under MIT. The free plan holds 3 diagrams with 15 AI credits; Plus is $10 a month billed yearly.
All Mermaid Chart facts- How you draw
- Code, Words
- Paid from
- $10/user/mo
- Live diagram code
- YesMermaid
- Open source
- PartlyPartly
PlantUML
PlantUML project
Open source (GPL-3.0, with more permissive builds) and free with no limits. It runs offline on Windows, Mac and Linux and outputs SVG, PNG and PDF. Strong for UML: sequence, class and component diagrams.
All PlantUML facts- How you draw
- Code
- Paid from
- Free
- Live diagram code
- YesPlantUML, Graphviz
- Open source
- YesYes

D2
Terrastruct
A newer declarative language under MPL-2.0 with a free command-line tool that runs offline and exports SVG, PNG and PDF. Terrastruct's paid D2 Studio is closing at the end of 2026, so this pick is the open-source language.
All D2 facts- How you draw
- Code
- Paid from
- Free
- Live diagram code
- YesD2
- Open source
- YesYes

Eraser
Eraser Labs
Its own diagram syntax plus AI that writes it for you, built for engineering docs, with GitHub and VS Code integrations. The free plan has 3 files and 3 AI diagrams, and free exports carry a watermark; Starter is $15 a month billed yearly.
All Eraser facts- How you draw
- Code, Words
- Paid from
- $15/user/mo
- Live diagram code
- YesIts own syntax
- Open source
- PartlyPartly
Every app that could fit, checked
8 apps, with the facts that matter here. Picks are outlined. The count is facts documented, out of 4.
| App | Live diagram code | Open source | Works offline | SVG export | Documented |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | 4 of 4 | |
| Yes | Yes | Yes | Yes | 4 of 4 | |
| Yes | Partly | Not stated | Yes | 2 of 4 1 not stated | |
| Yes | Partly | Not stated | Yes | 2 of 4 1 not stated | |
| Yes | Yes | Yes | Yes | 4 of 4 | |
| Yes | No | Partly | Yes | 2 of 4 | |
| Yes | No | Not stated | Yes | 2 of 4 1 not stated | |
| Yes | No | Partly | Yes | 2 of 4 |
Worth knowing. Code-first tools trade layout control for diffs you can review. If people outside engineering need to edit the diagram, pair the code with an app that also lets them drag shapes, like draw.io, which renders Mermaid and PlantUML.