Skip to content

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.

What we looked at:Live diagram codeOpen sourceWorks offlineSVG exportPrice per seat
  • Mermaid Chart logo

    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 logo

    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 logo

    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 logo

    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.

AppLive diagram codeOpen sourceWorks offlineSVG exportDocumented
D2 logoD2YesYesYesYes4 of 4
PlantUML logoPlantUMLYesYesYesYes4 of 4
Eraser logoEraserYesPartlyNot statedYes2 of 4 1 not stated
Mermaid Chart logoMermaid ChartYesPartlyNot statedYes2 of 4 1 not stated
draw.io logodraw.ioYesYesYesYes4 of 4
Lucidchart logoLucidchartYesNoPartlyYes2 of 4
Miro logoMiroYesNoNot statedYes2 of 4 1 not stated
Visual Paradigm Online logoVisual Paradigm OnlineYesNoPartlyYes2 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.

Other guides