Mermaid Diagram Color Style Guide

When creating or editing mermaid diagrams, apply this pastel color palette using the %%{init}%% directive and per-node style directives.

Init Directive (Required)

Every mermaid block must start with this line immediately after the opening fence:

%%{init:{'theme':'base','themeVariables':{'primaryTextColor':'#1e293b','lineColor':'#475569','edgeLabelBackground':'#ffffff','tertiaryTextColor':'#1e293b'}}}%%

This ensures:

• Node text: dark slate (#1e293b) — readable on pastel backgrounds
• Arrow/line color: dark grey (#475569) — visible connectors
• Edge label background: white (#ffffff) — clean label readability
• Edge label text: dark slate (#1e293b) — black text on white background

Color Palette by Node Semantic Role