Skip to main content

Docker - Diagrams as code

ยท 3 min read
Christophe

Docker - Diagrams as code

But what a joy it is to be able to draw diagrams by, well, just writing text. Some tools are better known than others, e.g. Mermaid.

Did you know https://diagrams.mingrammer.com/? Let's explore it using, of course, a Docker ready-to-use image.

Take a look on the different examples you can retrieve on https://github.com/mingrammer/diagrams.

Like always, for the demo, please start a Linux shell and run mkdir -p /tmp/docker-diagrams && cd $_ to create a folder called java in your Linux temporary folder and jump in it.

Please create a new file called team.py with this content:

from diagrams import Diagram
from diagrams.aws.compute import EC2
from diagrams.aws.database import RDS
from diagrams.aws.network import ELB

with Diagram("My Team", show=False, direction="TB"):
ELB("Olivier") >> [
EC2("Christophe"),
EC2("Jason"),
EC2("Niki"),
EC2("Rudy"),
EC2("Stijn") ] >> RDS("Work together")

To run the conversion, go back to your console and run the following command:

cat team.py | docker run -i --rm -v $(pwd):/out -u 1000:1000 gtramontina/diagrams:0.23.3
Windows notation

If you're working Windows, replace $(pwd) by %CD%. And replace cat by type.

And bingo, the script is converted to the image here below:

Team

0.23.3 is the latest version available when writing this document. See https://hub.docker.com/r/gtramontina/diagrams/tags to retrieve the latest one.

Easy no?

Another example:

from diagrams import Cluster, Diagram
from diagrams.k8s.compute import Pod, StatefulSet
from diagrams.k8s.network import Service
from diagrams.k8s.storage import PV, PVC, StorageClass

with Diagram("Stateful Architecture", show=False):
with Cluster("Apps"):
svc = Service("svc")
sts = StatefulSet("sts")

apps = []
for _ in range(3):
pod = Pod("pod")
pvc = PVC("pvc")
pod - sts - pvc
apps.append(svc >> pod >> pvc)

apps << PV("pv") << StorageClass("sc")

And the resulting image:

Stateful Architecture

Crazy no? And all without installing anything!

The Docker image code base is here: https://github.com/gtramontina/docker-diagrams.

Icons (called Nodes)โ€‹

A tremendous list of icons/nodes is available on multiple pages at https://diagrams.mingrammer.com/docs/nodes/onprem. See OnPrem, AWS, Azure, GCP, IBM, K8S, ... and also how to create our owns (using local .png images): Custom.

Other toolsโ€‹

  • DB Diagram
  • DBML-renderer, dbml-renderer renders DBML files to SVG images
  • Graphviz, Graphviz is open source graph visualization software
  • JSON Crack, seamlessly visualize your JSON data instantly into graphs
  • Kroki, creates diagrams from textual descriptions
  • Mermaid, his live editor, the preview addon for vscode and the convert tool as a CLI tool
  • Nomnoml, tool for drawing UML diagrams based on a simple syntax
  • Pikchr, Pikchr (pronounced "picture") is a PIC-like markup language for diagrams in technical documentation
  • Plantuml, generate diagrams from textual description
  • Sequence diagram (seems based on Mermaid)
  • Structurizr, a way to create Structurizr software architecture models based upon the C4 model using a textual domain specific language
  • svgbob, convert your ascii diagram scribbles into happy little SVG
  • Vega, a Visualization Grammar
  • yEd Graph Editor, Graphical interface, you'll need to drag & drop objects, resize, ... It doesn't support text files like the other tools already mentioned here.