---

name: mermaid-diagram description: Generate well-structured Mermaid diagrams for visual documentation. Use when designing systems, documenting workflows, creating architecture diagrams, or any task requiring visual representation of processes, relationships, or structures. Triggers include requests like "create a diagram", "visualize this", "show the flow", "draw the architecture", or when explaining complex systems that benefit from visual aids.

Mermaid Diagram

Generate proper, well-structured Mermaid diagrams for visual documentation and design presentations.

Diagram Selection

Quick Examples

Flowchart

Copyflowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[Other]
    C --> E[End]
    D --> E

Sequence

CopysequenceDiagram
    Client->>+API: Request
    API->>DB: Query
    DB-->>API: Data
    API-->>-Client: Response

Class

CopyclassDiagram
    class Animal {
        +String name
        +makeSound()
    }
    Animal <|-- Dog
    Animal <|-- Cat

ER

CopyerDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ITEM : contains

Best Practices

1. Choose the right diagram - Match diagram type to what you're representing
2. Keep it readable - Limit nodes, use clear labels, avoid crossing lines
3. Use direction - LR for wide diagrams, TD for tall ones
4. Group related items - Use subgraphs, boundaries, or namespaces
5. Add context - Use notes and labels to explain non-obvious elements
6. Style sparingly - Only highlight what needs attention

Output Format

Always wrap diagrams in fenced code blocks:

Copy```mermaid
flowchart LR
    A --> B
```

Consult the appropriate reference file for detailed syntax before generating complex diagrams.