DEV Community

Simon Brown
Simon Brown

Posted on

Diagrams as code 2.0

Diagrams as code is becoming a popular way to diagram software architecture, particularly for long-lived high-level documentation. You write the diagram source in a text-based domain specific language (e.g. PlantUML, C4-PlantUML, Mermaid, WebSequenceDiagrams, Graphviz/DOT) or a programming language (e.g. Diagrams), and render diagrams using web-based or command line tooling. The benefits are well understood - writing the diagram source as text allows for easy integration into software development practices and toolchains, plus the automatic layout facilities allow authors to focus on content.

But there's a problem with this approach, which I'm going to call "diagrams as code 1.0" - if you need to create multiple diagrams, you need to create multiple diagram source files, and ensure that you keep these files in sync.

Diagrams as code 1.0

Some tools do provide a way to "include" snippets, but most don't, forcing you to repeat information across those diagram definitions. Once you violate the "DRY principle", you need to ensure that any changes you make to one diagram are reflected elsewhere. Easy in theory ("we'll just use global search and replace", etc), but that doesn't necessarily happen in the real world.

Keeping diagrams in sync is important

One way to resolve this problem is to generate multiple diagrams from a single source file. To do that, we need to shift our thinking away from "diagrams", and towards "views of a model". That's the essence of "diagrams as code 2.0" - it's a way to define a model of our software architecture and the views that we'd like to see, ultimately resulting in a consistent set of diagrams that are generated for us.

Diagrams as code 2.0

This is the concept implemented by the Structurizr tooling, the majority of which is open source. Structurizr builds upon "diagrams as code", providing a way to create multiple diagrams from a single model, using a number of tools and programming languages. There are three key concepts:

  1. Workspace - this is the definition of the model and views, described using an open JSON format.
  2. Authoring tools - these provide a way to create a workspace. The most popular is the text-based Structurizr DSL.
  3. Rendering tools - these provide a way to render the views as diagrams. Supported diagram formats include PlantUML, C4-PlantUML, Mermaid, DOT, WebSequenceDiagrams, Ilograph, and the Structurizr cloud service/on-premises installation.

Alt Text

The separation of authoring and rendering reduces lock-in to any particular diagramming tool. And having a model of your software architecture provides a way to slice and dice it to create many different views, which can then be rendered using the best tool for the task ... a static PNG, an interactive and zoomable SVG, or perhaps an interactive force-directed graph.


To summarise the key differences:

  • Diagrams as code 1.0: you write diagram definitions by hand
  • Diagrams as code 2.0: diagram definitions are generated automatically, by tooling, based upon views of a model

Although many teams define their models by hand, there's nothing preventing you from generating the model automatically, in part or in whole, by parsing infrastructure as code definitions, parsing distributed log files, performing static analysis of a code base, etc. Such techniques are especially useful for teams seeking ways to diagram their larger and more complicated distributed architectures.

Top comments (4)

voipconsultamt profile image
Robert Cambell

Awesome I am currently using Architecture-as-Code (AaC)
The AaC Modeling Language
AaC is a distinctly different take on Model-Based System Engineering (MBSE) that allows a system modeler to define a system in code (YAML). AaC defines the Architecture-as-Code modeling language specification based upon ideas from the DevOps Infrastructure-as-Code (IaC). IaC streamlines the flow from Development to Operations. AaC was created to streamline the flow from System Engineering to Development.
We will start testing Structurizr just got the VSC ext last night.

dcsh0x profile image

Can you create a C++ skeleton based on your diagram code?
Also I was wondering, how about languages like C or straight ASM? I do work quite a bit at this level and usually all this tools don't tend to help you much once you're out of the OO world. I feel this is different with Structurizr. Do you have any tips for procedural languages?


simonbrown profile image
Simon Brown

Can you create a C++ skeleton based on your diagram code?

I don't know of anybody doing this, but yes, you could.

Do you have any tips for procedural languages?

It depends what you're asking, but yes, the C4 model (and therefore the Structurizr tooling) is equally applicable to procedural languages ... C4 model "components" are groupings of code level elements (e.g. files, functions, etc).