Mermaid Diagram

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

Diagram Selection

Quick Examples

Flowchart

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

Sequence

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

Class

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

ER

erDiagram
    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:

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

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