mermaidlisted

# Mermaid Diagram Skill This skill provides guidance on creating beautiful, professional Mermaid diagrams that render correctly on GitHub and work well in both light and dark mode. ## Core Principles 1. **Use dark fills with light strokes** — Ensures readability in both light and dark mode 2. **Set subgraph fills to `none`** — Allows subgraphs to adapt to any background 3. **Use rounded shapes** — `([text])` for stadium shapes, `((text))` for circles 4. **No Font Awesome icons** — GitHub doesn't support `fa:fa-*` icons, they render as text 5. **Quote subgraph labels** — Use `subgraph Name["Label Text"]` syntax 6. **Define classDef styles at the top** — Keep all styling together for maintainability ## The Golden Rule: Dark Fills + Light Strokes The key insight for dark/light mode compatibility: ``` classDef myStyle fill:#DARK_COLOUR,stroke:#LIGHT_COLOUR,stroke-width:2px,color:#fff ``` - **Fill**: Use a darker shade (the node background) - **Stroke**: Use a lighter shade of the same colour family (the border) - **Color**: Always `#fff` (white text on dark background) This approach ensures nodes are readable regardless of the page background. ## GitHub-Compatible Template This is the canonical template for GitHub-rendered Mermaid diagrams: ```mermaid flowchart TD %% --- COLOUR PALETTE & STYLING --- %% Dark fills + light strokes = readable in both light and dark mode classDef user fill:#374151,stroke:#d1d5db,stroke-width:2px,color:#fff classDef primary