Diagrams-as-code

Diagrams-as-code solutions are becoming increasingly popular as modeling solutions. Tools such as Structurizr DSL offer a middle ground between lightweight diagramming and heavyweight modeling solutions. Some of the DSLs are close to modeling languages, and the plain-text syntax can be version controlled and maintained alongside the source code it describes. By comparison, diagramming tools tend to use binary formats (such as images) or heavyweight plain-text formats that are difficult to diff.

Diagrams-as-code tools

Below is a not-exhaustive list of diagrams-as-code solutions. Most modeling tools also generate visual representations of models that are defined in a structured data format. The distinction between modeling and diagrams-as-code is not always clear-cut, and some tools could be listed in both categories – bpmn-js and Structurizr, for example. For me, the distinguishing characteristic of modeling tools is that they depend on a formal modeling notation that describes the semantics of a system, whereas the syntax used by diagrams-as-code tools is less formal and more focused on the visual characteristics of the rendered image.

Kroki is a noteworthy tool as it encapsulates most of the other text-to-diagram tools listed here, and abstracts them all behind a unified HTTP API. It is available as a free web service, and also as a Docker image for self-hosting. Integrations are available for Markdown and AsciiDoc, allowing for automatic rendering of diagrams that are embedded in these document types.

  • bpmn-js — JavaScript library for rendering BPMN 2.0 diagrams. BPMN (Business Process Model and Notation) specifies its own XML DSL, which this library parses and renders.

  • blockdiag — Python tool for rendering diagrams as images from plain text files. Supports simple block diagrams (flowcharts), sequence diagrams, activity diagrams, and logical network diagrams.

  • Bytefield — LaTeX package for creating illustrations of network protocol specifications, or anything else that uses fields of data.

  • C4# — .Net library for building C4 diagrams from code.

  • C4 InterFlow — Inspired by the C4 Model, this project allows for generation of architecture and business process diagrams from code.

  • Chart Mage — Web tool to generate sequence diagrams and flowcharts.

  • CUE4Puml4C4 — A CUE-based tool for generating PlantUML code for C4 diagrams. The C4 model is described using the CUE [schema language], which is translated to a PUML representation, which is finally rendered using the PlantUML server.

  • D2Lang — Open-source "declarative diagramming" language, used by Terrastruct.

  • Database Diagram — Online tool for generating entity-relationship diagrams from text.

  • Database Markup Language (DBML) — See data modeling.

  • Diagram.codes — Online diagramming tool that supports a simple text-to-diagram syntax.

  • Diagrams-as-Code — Draw cloud architecture diagrams using Python code. Also supports the C4 model.

  • Ditaa — Command line utility written in Java that converts ASCII art diagrams into images.

  • erd — CLI utility for generating entity-relationship diagrams from a plain-text description. Requires GraphViz.

  • flowchart.fun — Online flowchart generator, uses an intuitive indentation-based syntax.

  • Graphviz — Open-source text-to-diagram generation tool.

  • Ilograph — Interactive diagramming tool using YAML.

  • Markdeep — Markdown-like lightweight text markup language that natively supports embedded diagrams, calendars, and equations – all written as ASCII art.

  • Mermaid — JavaScript-based diagramming and charting tool. Supports a text-to-diagram syntax inspired by Markdown.

  • Model — Define C4 models in Go code.

  • nomnoml — Creates basic, but good-looking, UML diagrams from a lightweight text notation. Open-source JavaScript library, and also available as a free-to-access web app.

  • Pikchr — Pikchr (pronounced "picture") is a simple markup language for defining diagrams in technical documentation. It is specifically designed to be embedded in fenced code blocks in Markdown or similar lightweight plain text markup languages. The syntax is inspired by PIC, which was an early domain-specific language for describing line diagrams, originally for use in typesetting.

  • PlantUML — Popular text-to-diagram language and tool that supports a wide range of diagram types – not only UML. The C4 model is supported through this extension. C4 Builder is a Node.js CLI for building C4 diagrams using the C4-PlantUML extension.

  • pumla ("PlantUML Manager") — Attempts to extend PlantUML with the ability to reuse components and compose design from components, making it a bit closer to a proper modeling solution.

  • Quick Database Diagrams — Does what it says on the tin.

  • RDB Model — Lightweight web GUI for creating C4-inspired system designs.

  • Structurizr — Developed by Simon Brown, who also created the C4 model, Structurizr is an online diagrams-as-code tool that generates C4 models from a plain-text language, the Structurizr DSL.

  • SVGbob — Converts ASCII art shapes into smooth SVG vector art.

  • Swimlanes.io — Free online tool for generating sequence diagrams.

  • Typograms — JavaScript library that will transform ASCII art embedded in <script type="text/typogram"> tags in a web page, into "typographic diagrams".

  • Umple — Modeling language and tool. It can be used to create UML class and state diagrams from textual representations, and it adds UML abstractions such as Associations, Attributes and State Machines to object-oriented programming languages such as Java, C++, PHP and Ruby – and is thus somewhat closer to a proper modeling tool than your typical text-to-diagram tool. Runs on a JVM. An online editor is available.

  • Wavedrop — Cross-platform desktop editor to render timing diagrams from a simple textual description.

  • Web Sequence Diagrams — Online tool for generating sequence diagrams from text.

  • yuml — Online tool for generating UML diagrams from text.