Skip to content.

Styling MermaidJS

What’s better than a graph? A graph with style!

Using Mermaid’s class definitions we can style blocks and subgraphs to reflect the ecosystem they belong to; In this case I want to style my infrastructure diagrams to Google’s branding.

The class colour definitions below define blue, red, yellow & green classes with the fill set to their hex colour code, color sets the text colour and stroke setting the connecting line colour.

Below the classDef we list each element in the graph against the class we want to assign to them, so class Web green assigns the Web subgraph to our green class! Multiple elements are comma-deliminated with no spacing, Mermaid is quite phobic of spurious spaces.

	%% Google brand
	classDef blue fill:#4285f4,color:#fff,stroke:#333;
	classDef red fill:#db4437,color:#fff,stroke:#333;
	classDef yellow fill:#f4b400,color:#fff,stroke:#333;
	classDef green fill:#0f9d58,color:#fff,stroke:#333;
	class Servers,Storage blue
	class Web green
	class Network red
	class Users yellow

An example graph that incorporates these colours:

flowchart LR subgraph Servers Server1 Server2 end subgraph Storage disk1[("Disk1")] disk2[("Disk2")] end subgraph Network VPN Internet end web["πŸ•ΈοΈ Website"] users["πŸ§‘β€πŸ€β€πŸ§‘ Users"] Servers --> Storage Servers --> VPN VPN --> Internet Internet --> web users --> web %% Google brand classDef blue fill:#4285f4,color:#fff; classDef red fill:#db4437,color:#fff; classDef yellow fill:#f4b400,color:#fff,stroke:#333; classDef green fill:#0f9d58,color:#fff,stroke:#333; class Servers,Storage blue class web green class Network red class users yellow

Full graph source code:

flowchart LR
    subgraph Servers
        Server1
        Server2
    end
    subgraph Storage
        disk1[("Disk1")]
        disk2[("Disk2")]
    end
    subgraph Network
        VPN
        Internet
    end
    web["πŸ•ΈοΈ Website"]
    users["πŸ§‘β€πŸ€β€πŸ§‘ Users"]
    Servers --> Storage
    Servers --> VPN
    VPN --> Internet
    Internet --> web
    users --> web
    %% Google brand
    classDef blue fill:#4285f4,color:#fff,stroke:#333;
    classDef red fill:#db4437,color:#fff,stroke:#333;
    classDef yellow fill:#f4b400,color:#fff,stroke:#333;
    classDef green fill:#0f9d58,color:#fff,stroke:#333;
    class Servers,Storage blue
    class web green
    class Network red
    class users yellow

By the way, the syntax highlighter I’m using on the MermaidJS snippets is actually fsharp!

avatar
Joe Heaton
Cloud HPC Engineer

Joe Heaton’s technology-focused murmurings.
comments powered by Disqus

Settings

Reveal the cookie consent prompt

Use Dyslexia-friendly font OpenDyslexia

Toggle advertisements