Mermaid Diagrams

Create interactive diagrams and visualizations using Mermaid syntax.

What is Mermaid?

Mermaid is a JavaScript-based diagramming tool that renders text definitions into diagrams. MD Editor fully supports Mermaid, allowing you to create complex diagrams using simple text syntax.

Basic Usage

Create Mermaid diagrams using code blocks with the mermaid language identifier:

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

Flowcharts

Basic Flowchart

```mermaid
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
```

Flowchart Directions

TD or TB - Top to bottom
BT - Bottom to top
LR - Left to right
RL - Right to left

```mermaid
graph LR
    A[Square Rect] --> B((Circle))
    B --> C{Decision}
    C -->|Yes| D[Result 1]
    C -->|No| E[Result 2]
```

Node Shapes

```mermaid
graph TD
    A[Rectangle]
    B(Rounded Rectangle)
    C([Stadium])
    D[[Subroutine]]
    E[(Database)]
    F((Circle))
    G>Asymmetric]
    H{Diamond}
    I{{Hexagon}}
    J[/Parallelogram/]
    K[\Parallelogram\]
    L[/Trapezoid\]
    M[\Trapezoid/]
```

Sequence Diagrams

Visualize interactions between different actors or systems:

```mermaid
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    loop Healthcheck
        John->>John: Fight against hypochondria
    end
    Note right of John: Rational thoughts!
    John-->>Alice: Great!
    John->>Bob: How about you?
    Bob-->>John: Jolly good!
```

Message Types

```mermaid
sequenceDiagram
    Alice->>Bob: Solid line (request)
    Bob-->>Alice: Dotted line (response)
    Alice-)Bob: Async message
    Bob--)Alice: Async response
    Alice-xBob: Cross at end
    Bob-xAlice: Cross at end
```

Class Diagrams

Model object-oriented systems:

```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }
```

State Diagrams

Represent state machines:

```mermaid
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

Entity Relationship Diagrams

Model database relationships:

```mermaid
erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
    
    CUSTOMER {
        string name
        string email
        int age
    }
    ORDER {
        int orderNumber
        date orderDate
    }
    LINE-ITEM {
        int quantity
        decimal price
    }
```

Gantt Charts

Create project timelines:

```mermaid
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task           :a1, 2024-01-01, 30d
        Another task     :after a1, 20d
    section Another
        Task in Another  :2024-01-12, 12d
        another task     :24d
```

Pie Charts

Display proportional data:

```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
```

Git Graph

Visualize git branching:

```mermaid
gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
    commit
```

User Journey

Map user experiences:

```mermaid
journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 5: Me
```

Mindmap

Create hierarchical mind maps:

```mermaid
mindmap
  root((MD Editor))
    Features
      Markdown
      Math
      Diagrams
    Tools
      Converters
      Generators
      Analyzers
    Export
      PDF
      HTML
      DOCX
```

Flowchart with Styling

```mermaid
graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
    C --> E[End]
    
    style A fill:#90EE90
    style E fill:#90EE90
    style B fill:#FFD700
    style D fill:#FF6B6B
```

Quadrant Charts

```mermaid
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
```

Timeline

```mermaid
timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter
```

C4 Diagrams

Model software architecture:

```mermaid
C4Context
    title System Context diagram for Internet Banking System
    
    Person(customerA, "Banking Customer A", "A customer of the bank")
    System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts")
    
    SystemDb(SystemC, "Mainframe Banking System", "Stores all banking information")
    
    Rel(customerA, SystemAA, "Uses")
    Rel(SystemAA, SystemC, "Uses")
```

Tips for Mermaid Diagrams

Keep it simple - Start with basic diagrams and add complexity as needed
Use meaningful labels - Clear labels make diagrams easier to understand
Choose the right diagram type - Each type serves a specific purpose
Test as you build - Preview diagrams frequently to catch syntax errors
Add comments - Use %% for comments in your diagram code

Common Syntax

Adding Comments

```mermaid
graph TD
    %% This is a comment
    A[Start] --> B[End]
```

Line Breaks in Text

Use <br/> for line breaks in node text:

```mermaid
graph TD
    A[Line 1<br/>Line 2<br/>Line 3]
```

Error Handling

MD Editor includes:

Syntax validation - Catches common Mermaid syntax errors
Auto-fixing - Automatically fixes certain syntax issues
Error messages - Clear error messages when diagrams fail to render
Graceful fallback - Shows code if diagram cannot be rendered

Advanced Features

Subgraphs

```mermaid
graph TB
    subgraph one
        a1-->a2
    end
    subgraph two
        b1-->b2
    end
    a2-->b1
```

Links

```mermaid
graph LR
    A-->B
    click A "https://mdedit.ai" "Go to MD Editor"
```

Interactions

Mermaid diagrams in MD Editor are interactive:

Zoom and pan capabilities
Click handlers for links
Tooltip support

Limitations

Very large diagrams may impact performance
Some advanced Mermaid features may not be supported in all export formats
Complex diagrams may need simplification for PDF export

Learn More

For complete Mermaid syntax documentation, visit Mermaid's official documentation (opens in a new tab).

Math Equations Frontmatter