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: