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:

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!