Mermaid Diagrams

Mermaid is a diagramming tool that renders diagrams from Markdown code blocks. It provides an automated way to create high-resolution SVG diagrams with minimal work required.

However, Mermaid does not support customizing the layout of its diagrams, which makes it difficult to improve the readability of large and complex diagrams. For this reason, please only use Mermaid for diagrams small enough to be readable. Alternatively, consider using draw.io to manually create a more readable or stylized diagram.

For more detailed documentation on all of Mermaid’s options, see their official documentation.

Quickstart

First, create a Mermaid code block:

```mermaid
TODO
```

Then, determine the orientation of the flowchart (LR, meaning “left to right,” is standard):

```mermaid
flowchart LR
```

Then, determine subgraphs. Subgraphs are large nodes that contain all nodes listed within it. You can nest as many as you want. For each subgraph you create, add an end to close it out:

```mermaid
flowchart LR
    subgraph Datacenter Region
        subgraph VPC 10.0.220.0/16
            TODO
        end
    end
```

Add nodes in the format InternalName({{% mermaid-icon "icon-filename" %}} Display Name), using the mermaid-icon shortcode to add icons from /images/icons/diagram/:

```mermaid
flowchart LR
    subgraph Datacenter Region
        subgraph VPC 10.0.220.0/16
            ServerA({{% mermaid-icon "SSDs" %}}  Web Server)
            ServerB({{% mermaid-icon "SSDs" %}}  Web Server)
            ServerC({{% mermaid-icon "SSDs" %}}  Web Server)
        end
    end
    Internet({{% mermaid-icon "global-data-centers" %}}  Internet)
```

Connect those nodes to each other using arrows (-->):

```mermaid
flowchart LR
    subgraph Datacenter Region
        subgraph VPC 10.0.220.0/16
            ServerA({{% mermaid-icon "SSDs" %}}  Web Server)
            ServerB({{% mermaid-icon "SSDs" %}}  Web Server)
            ServerC({{% mermaid-icon "SSDs" %}}  Web Server)
        end
    end
    ServerA --> Internet({{% mermaid-icon "global-data-centers" %}}  Internet)
    ServerB --> Internet
    ServerC --> Internet
```

The previous code block renders to the following:

flowchart LR subgraph Datacenter Region subgraph VPC 10.0.220.0/16 ServerA( Web Server) ServerB( Web Server) ServerC( Web Server) end end ServerA --> Internet( Internet) ServerB --> Internet ServerC --> Internet