Appearance
Mermaid Styles Comparison
Welcome! This site helps you compare different Mermaid diagram styles to pick your preferred design.
Quick Preview
Default Theme
Navigation
- Built-in Themes - Compare default, neutral, dark, forest, base
- Color Palettes - Google, Neon, Pastel, Corporate, Custom
- Node Shapes - Rectangles, rounded, circles, diamonds, etc.
- Flowchart Styles - Different layout approaches
- Your Workflow - The Explore-Plan-Code-Commit flow in all styles
Original ASCII Art
This is what we're converting to Mermaid:
┌─────────────────────────────────────────────────────────────────────┐
│ EXPLORE-PLAN-CODE-COMMIT FLOW │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ [1] EXPLORE [2] PLAN │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ Read Files │ │ Think/Design │ │
│ │ Understand │ ────────► │ Architecture │ │
│ │ Context │ │ Approach │ │
│ └──────────────┘ └──────────────┘ │
│ │ │ │
│ └─────────┬─────────────────┘ │
│ ▼ │
│ [3] CODE [4] COMMIT │
│ ┌──────────────┐ ┌──────────────┐ │
│ │ Implement │ │ Test & Fix │ │
│ │ Iterate │ ────────► │ Git Commit │ │
│ │ Verify │ │ PR if needed │ │
│ └──────────────┘ └──────────────┘ │
│ │ │
│ ▼ │
│ [5] COMPLETE │
│ │
└─────────────────────────────────────────────────────────────────────┘