mermaid

Mermaid Markdown

Mermaid UML Syntax Guide

Basic Flowchart

Simple flowchart with basic shapes and connections:

graph TD
    A[Rectangle] --> B(Rounded Rectangle)
    B --> C{Diamond}
    C --> D[Rectangle]
    C --> E[Rectangle]

Loading

Flowchart with Text Styles

Demonstrates text formatting and line styles:

graph LR
    A[Normal] --> |One way| B[Bold]
    B -.-> |Dotted line| C[Italic]
    C ==> D[Bold and Italic]
    D --> E[Text<br/>on multiple<br/>lines]

Loading

Sequence Diagram

Shows interaction between components:

sequenceDiagram
    participant Browser
    participant Server
    participant Database
    
    Browser->>Server: GET /data
    Server->>Database: Query
    Database-->>Server: Results
    Server-->>Browser: JSON Response

Loading

Class Diagram

Represents system structure:

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

Loading

State Diagram

Illustrates state transitions:

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: Start
    Processing --> Complete: Success
    Processing --> Error: Fail
    Complete --> [*]
    Error --> Idle: Retry

Loading

Entity Relationship Diagram

Database structure representation:

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER {
        string name
        string email
    }
    ORDER {
        int orderNumber
        date created
    }

Loading

Gantt Chart

Project timeline visualization:

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Requirements    :2024-01-01, 7d
    Design         :2024-01-08, 5d
    section Development
    Implementation :2024-01-15, 10d
    Testing       :2024-01-25, 5d

Loading

Git Graph

Git branch visualization:

gitGraph
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    branch feature
    checkout feature
    commit

Loading

Pie Chart

Data distribution:

pie
    title Market Share
    "Product A" : 40
    "Product B" : 30
    "Product C" : 30

Loading

Complex Flowchart

Advanced example combining multiple features:

graph TB
    subgraph Backend
    A[API Gateway] --> B{Load Balancer}
    B --> C[Server 1]
    B --> D[Server 2]
    end
    
    subgraph Database
    C --> E[(Primary DB)]
    D --> E
    E --> F[(Replica)]
    end
    
    subgraph Frontend
    G[Web Client] --> A
    H[Mobile Client] --> A
    end

Loading