Skip to main content

Docker - Diagrams as code

· 3 min read
Christophe
Christophe
Markdown, WSL and Docker lover ~ PHP developer ~ Insatiable curious.

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!

More example

Retrieve more samples on https://diagrams.mingrammer.com/docs/getting-started/examples

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.