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
!