๐ŸŽจ MermaidEase Pro

Auto-save

๐Ÿ‘๏ธ Live Preview

Rendering diagram...
Zoom: 100%

โš™๏ธ Settings

๐ŸŽจ Theme

๐Ÿ“ Layout & Structure

50px
100px

๐ŸŽจ Appearance

2px
5px

๐Ÿ“ค Export Settings

โŒจ๏ธ Keyboard Shortcuts

Render Diagram Ctrl + Enter
Save Diagram Ctrl + S
Toggle Fullscreen F11
Zoom In Ctrl + Plus
Zoom Out Ctrl + Minus
Reset Zoom Ctrl + 0
Toggle Grid Ctrl + G

๐Ÿ“– Mermaid Syntax Tutorial

๐Ÿ”„ Flowchart Syntax

Basic Structure:

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

Node Shapes:

graph LR
    A[Rectangle] --> B(Round edges)
    B --> C((Circle))
    C --> D{Diamond}
    D --> E>Flag]
    E --> F[/Parallelogram/]

Styling:

graph TD
    A[Start] --> B[Process]
    B --> C[End]

    style A fill:#e1f5fe
    style B fill:#fff3e0
    style C fill:#e8f5e8

๐Ÿ“ž Sequence Diagram Syntax

Basic Structure:

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello Bob!
    B-->>A: Hello Alice!

Advanced Features:

sequenceDiagram
    participant U as User
    participant S as System
    participant D as Database

    U->>S: Login Request
    activate S
    S->>D: Validate User
    D-->>S: User Valid
    S-->>U: Login Success
    deactivate S

    Note over U,S: User is now logged in

๐Ÿ—๏ธ Class Diagram Syntax

Basic Structure:

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }

    class Dog {
        +String breed
        +bark()
    }

    Animal <|-- Dog

Visibility & Relationships:

classDiagram
    class BankAccount {
        +String owner
        +Decimal balance
        -String accountNumber
        #validateTransaction()
        +deposit(amount)
        +withdraw(amount)
    }

    class SavingsAccount {
        +Float interestRate
        +calculateInterest()
    }

    BankAccount <|-- SavingsAccount

๐Ÿ—„๏ธ ER Diagram Syntax

Basic Structure:

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    PRODUCT ||--o{ LINE-ITEM : "ordered in"

With Attributes:

erDiagram
    CUSTOMER {
        int customer_id PK
        string first_name
        string last_name
        string email
    }

    ORDER {
        int order_id PK
        int customer_id FK
        date order_date
        decimal total_amount
    }

    CUSTOMER ||--o{ ORDER : places

๐Ÿ“… Gantt Chart Syntax

Basic Structure:

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD

    section Planning
    Requirements    :done, req, 2024-01-01, 2024-01-10
    Design         :active, design, 2024-01-08, 2024-01-20

    section Development
    Frontend       :frontend, 2024-01-15, 30d
    Backend        :backend, 2024-01-20, 25d

๐Ÿ”„ State Diagram Syntax

Basic Structure:

stateDiagram-v2
    [*] --> Idle
    Idle --> Running : start
    Running --> Paused : pause
    Running --> Stopped : stop
    Paused --> Running : resume
    Paused --> Stopped : stop
    Stopped --> Idle : reset

Composite States:

stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> Processing
        Processing --> Validating
        Validating --> Processing
        Processing --> Complete
    }

    Active --> Inactive : timeout
    Inactive --> Active : restart