library-mermaidlisted

# Mermaid Diagramming Patterns ## Contents - [When This Skill Applies](#when-this-skill-applies) - [Core Guidance](#core-guidance) - [Quick Reference](#quick-reference) ## When This Skill Applies - Creating technical documentation with visual diagrams - Illustrating system architecture, data flows, or state machines - Generating entity-relationship diagrams for database design - Documenting API sequences and interaction patterns - Building project timelines with Gantt charts - Creating knowledge maps and decision trees ## Core Guidance ### 1. Diagram Type Selection | Diagram | Use For | Complexity | |---------|---------|------------| | Flowchart | Decision logic, process flows, system overview | Low-Medium | | Sequence | API calls, service interactions, auth flows | Medium | | ERD | Database schema, entity relationships | Medium | | Class | OOP structure, interface hierarchy | Medium-High | | State | State machines, lifecycle transitions | Medium | | Gantt | Project timelines, sprint planning | Low | | Mindmap | Brainstorming, topic exploration | Low | | C4 (Context/Container) | Architecture overview, system boundaries | High | ### 2. Flowchart Patterns **Basic Process Flow**: ```mermaid flowchart TD A[Start] --> B{Condition?} B -->|Yes| C[Action 1] B -->|No| D[Action 2] C --> E[End] D --> E ``` **Subgraph for Grouping**: ```mermaid flowchart LR subgraph Frontend A[React App] --> B[API Client] end subgraph Backend C[API