Mermaid Diagrams Skill

Create diagrams using Mermaid syntax.

Flowchart

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

Sequence Diagram

sequenceDiagram
    participant User
    participant API
    participant DB
    User->>API: POST /login
    API->>DB: Check credentials
    DB-->>API: User found
    API-->>User: JWT token

Gantt Chart

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Design    :a1, 2024-01-01, 14d
    Develop   :a2, after a1, 21d
    section Phase 2
    Testing   :a3, after a2, 7d
    Deploy    :a4, after a3, 3d

ER Diagram

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    PRODUCT ||--o{ LINE-ITEM : "is in"

Guidelines

• Use clear, descriptive node labels
• Keep diagrams simple — split complex ones into multiple
• Choose the right diagram type for the information
• Add titles to Gantt charts and pie charts