Diagrams as Code

Did you know that you can do Diagrams as Code? In this post, discover how to generate machine-made diagrams of Azure Management Groups structure using a declarative approach.

I never liked to draw, but as a cloud architect, drawing is a regular part of my job. Computers have certainly made my lines neater, but I still find myself spending too much time tweaking objects for that perfect alignment or losing interest altogether.

This is why I always liked the idea of declarative drawing. With this approach, I can simply state what I want to see, and the machine takes care of the rest.

One of the most common candidates for drawing automation in my everyday job is creating diagrams of Azure Management Groups structure.

With the use of Mermaid, you can create machine-generated diagrams from simple declarative descriptions, and it gets rendered automatically from markdown on Azure DevOps and GitHub.

Mermaid Documentation is well organized with useful examples for some common diagram scenarios.

Mermaid Live Editor allows you to generate the diagrams on the fly.

ChatGPT may help you to get started with this prompt:

build mermaid diagram for reference CAF azure management group structure

Here is my example declarative definition that was used to generate the picture in this post:

::: mermaid
graph TD

subgraph "Tenant Level"
    RMG[Root Management Group]
end

subgraph "Organization Level"
    ORG[Contoso]
end

subgraph "Domain Level"
    PL[Platform]
    BS[Business]
    SB[Sandbox]
    DC[Decom]
end

subgraph "Service Level"
    PM[Management]
    PC[Connectivity]
    PI[Identity]
    WSS[Shared Services]
    WA[AVD]
    WS[SAP]
    LZ[Landing Zones]
end

subgraph "Environment Level"
    PRD[Production]
    QA[QA]
    TST[Test]
    DEV[Dev]
end


RMG --> ORG

ORG --> PL
ORG --> BS
ORG --> SB
ORG --> DC

PL --> PM
PL --> PC
PL --> PI

BS --> WSS
BS --> WA
BS --> WS
BS --> LZ

LZ --> PRD
LZ --> QA
LZ --> TST
LZ --> DEV
:::

You’re welcome to comments to discuss this topic.