Mermaid Color Reference

Quick copy-paste reference for maintaining brand-consistent Mermaid diagrams.

Standard Class Definitions

Copy these class definitions to every Mermaid diagram:

classDef dtPrimary fill:#EBEDE9,stroke:#002336,stroke-width:2px,color:#002336
classDef dtInfo fill:#93DFF0,stroke:#002336,stroke-width:2px,color:#002336
classDef dtAlert fill:#F65400,stroke:#002336,stroke-width:2px,color:#ffffff
classDef dtNeutral fill:#ffffff,stroke:#808080,stroke-width:2px,color:#002336
classDef dtEmphasis fill:#002336,stroke:#002336,stroke-width:2.5px,color:#ffffff

Color Usage Guide

Class Name	Visual	When to Use
dtPrimary	Silver	Standard processes, main flow steps
dtInfo	Non-Photo Blue	Decisions, questions, input validation
dtAlert	Signal Orange	Errors, warnings, critical alerts
dtNeutral	White/Gray	Optional steps, helpers, metadata
dtEmphasis	Prussian Blue	Start/end states, key milestones

Complete Example Template

Applying Classes

After defining your classDef declarations, apply them using:

class NodeName1,NodeName2,NodeName3 dtPrimary
class DecisionNode dtInfo
class ErrorNode dtAlert

Color Hex Values

For reference in other tools:

• Prussian Blue: #002336
• Silver: #EBEDE9
• Signal Orange: #F65400
• Non-Photo Blue: #93DFF0
• Construction Green: #808080

Obsidian Integration

If creating diagrams in Obsidian notes that will be published to docs:

1. Include the class definitions in every diagram
2. Test locally before committing
3. Ensure diagram renders correctly in both light/dark themes
4. Add a legend if using multiple colors

Troubleshooting

Diagram not showing colors?

• Ensure class definitions come after all nodes are defined
• Check that node names in class statements match diagram exactly
• Verify Mermaid syntax is valid

Colors look different in dark mode?

• Test in both modes using the theme toggle
• Adjust if needed, but maintain semantic meaning

Need a new color?

• Consult with design team first
• Document the new color's semantic meaning
• Update this reference page
• Add to standard class definitions

Quick Copy Blocks

Minimal Flowchart

flowchart TB
    A[Start] --> B[Process] --> C[End]
    classDef dtPrimary fill:#EBEDE9,stroke:#002336,stroke-width:2px,color:#002336
    classDef dtEmphasis fill:#002336,stroke:#002336,stroke-width:2.5px,color:#ffffff
    class B dtPrimary
    class A,C dtEmphasis

Decision Flow

flowchart TB
    A[Input] --> B{Valid?}
    B -->|Yes| C[Process]
    B -->|No| D[Error]
    classDef dtPrimary fill:#EBEDE9,stroke:#002336,stroke-width:2px,color:#002336
    classDef dtInfo fill:#93DFF0,stroke:#002336,stroke-width:2px,color:#002336
    classDef dtAlert fill:#F65400,stroke:#002336,stroke-width:2px,color:#ffffff
    class A,C dtPrimary
    class B dtInfo
    class D dtAlert

System Architecture

flowchart LR
    Main[Main System] --> Comp1[Component A]
    Main --> Comp2[Component B]
    Comp1 --> Helper[Helper Service]
    classDef dtPrimary fill:#EBEDE9,stroke:#002336,stroke-width:2px,color:#002336
    classDef dtNeutral fill:#ffffff,stroke:#808080,stroke-width:2px,color:#002336
    classDef dtEmphasis fill:#002336,stroke:#002336,stroke-width:2.5px,color:#ffffff
    class Comp1,Comp2 dtPrimary
    class Helper dtNeutral
    class Main dtEmphasis