Compare syntax, layouts, outputs between languages for generating diagrams with text.
Full disclosure: This site and D2 were originally created at Terrastruct. Today, the site is maintained by the independent D2 project, fiscally sponsored by Hack Club. D2 appears first; otherwise, it gets no special treatment. Contributions and corrections are welcome—even ones that make D2 look bad. We'll include them without bias and then furiously improve D2.
High-quality comparisons take a lot of work, which will only get more as the number of examples grows. Other than D2, the currently supported set are what seem to be the most popular tools for text-to-diagram.
- D2
- Mermaid
- GraphViz
- PlantUML
For completeness, you may want to also evaluate less popular tools/languages. The best catalog we've found is https://xosh.org/text-to-diagram/.
# Only needed first run
git submodule update --init --recursive
yarn
yarn devPlease follow the examples in src/examples.
- Create a folder in
src/exampleswith a short name of the example - Add in that folder:
description.txtto describe what the example aims to demonstrate.render/for SVG renderssyntax/for texts- If there are languages with errors for this example,
error/
- Create the text for as many languages as you can. It's okay if not totally complete. We or others can fill.
- Run
./ci/render.sh(with the respective tools installed)
- Pre-requisite tools:
mermaid-cli(mmdc)plantumlgraphviz(dot)d2
If you think there's a significant feature that people want to compare against, feel free
to add a line in src/components/Features.tsx.
If you wish to add a new language, please fill out as many of the examples and features as possible. It's a lot of work, but if there's enough interest in the language, perhaps others will help out.

