Diagrams as Code

Diagrams as Code enable you to add concise visuals to your documentation that are easily maintained in version control and can often be converted to multiple output formats, possibly using different themes. They also open a path to generate those diagrams from existing information.

Tools

• See also related projects at 1and1/c4-notation
• robbie-cao/awesome-diagrams – Awesome Diagram Tools.
• Crashedmind/docdac – Documentation-Of-Code / Documentation-As-Code.
• yEd Graph Editor is not strictly ‘by code’, but stores .graphml files which are somewhat SCM-friendly.
• Sphinx extensions:
  • sphinx.ext.graphviz – Add Graphviz graphs to Sphinx documents.
  • sphinxcontrib-blockdiag – Embed block-diagram images from .diag files (similar to Graphviz’s DOT files).
  • shkumagai/sphinxcontrib.nvd3 – Sphinx extension for python-nvd3.
• mingrammer/diagrams – Diagram as Code for prototyping cloud system architectures.
• RaoulMeyer/diagram-as-code – Create diagrams of infrastructure in code.
• plantuml/plantuml – Generate UML diagram from textual description.
• mermaid-js/mermaid – Generation of diagrams and flowcharts from text in a similar manner as markdown.
• tonybaloney/python-railroads – A script to generate railroad diagrams for Python grammar.
  • tabatkins/railroad-diagrams – A small JS+SVG library for drawing railroad syntax diagrams.
• Frimkron/Ascidia – A command-line utility for rendering technical diagrams from ASCII art.
• bramp/js-sequence-diagrams – Draws simple SVG sequence diagrams from textual representation of the diagram.
• adrai/flowchart.js – Draws simple SVG flow chart diagrams from textual representation of the diagram.
• pmsipilot/docker-compose-viz – Docker compose graph visualization.