# Mermaid

**Mermaid** simplifies the creation of diagrams and flowcharts with its Markdown-like script, enabling easy generation of sequence, Gantt, class, and flowcharts, directly in web-based tools.

[Learn more about Mermaid](https://mermaid-js.github.io/mermaid/#/user-journey)

## [#](#examples)Examples

### [#](#user-journey-diagram)User journey diagram

![User Journey](https://help.gocapable.com/images/att1072431818.svg)

### [#](#state-diagram)State diagram

![State Diagram](https://help.gocapable.com/images/att1071448707.svg)

### [#](#flowchart-diagram)Flowchart diagram

![Flowchart](https://help.gocapable.com/images/att1072203479.svg)

### [#](#sequence-diagram)Sequence diagram

![Sequence Diagram](https://help.gocapable.com/images/att1072203485.svg)

### [#](#class-diagram)Class diagram

![Class Diagram](https://help.gocapable.com/images/att1072333547.svg)

### [#](#quadrant-chart)Quadrant chart

![Quadrant Chart](https://help.gocapable.com/images/att1072203494.svg)

## [#](#editor)Editor

![Screenshot 2024-10-22 at 15.00.22.png](https://help.gocapable.com/images/c64a2e99-2200-4e40-9377-cd4114061e51.webp)

Mermaid Editor

![Screenshot 2024-10-22 at 15.01.00.png](https://help.gocapable.com/images/c6ae0c56-737f-4f12-b2cf-02770c2192b3.webp)

Mermaid Templates

## [#](#examples-1)Examples

### [#](#flowchart)Flowchart

![Screenshot 2026-02-20 at 07.59.53.png](https://help.gocapable.com/images/1bef27ed-b912-4f43-bdab-7d73281cfbd6.webp)

```
flowchart TD
  A[Start] --> B{Is it?}
  B -->|Yes| C[OK]
  C --> D[End]
  B -->|No| E[Stop]
  E --> D
```

### [#](#sequence-diagram-1)Sequence Diagram

![image-20260220-080042.png](https://help.gocapable.com/images/29e41ba0-4841-4388-8f48-0369ee5660a0.webp)

```
sequenceDiagram
  participant A
  participant B
  A->>B: Request data
  B->>A: Send data
  A->>B: Thank you
```

### [#](#gantt-chart)Gantt Chart

![Screenshot 2026-02-20 at 08.01.12.png](https://help.gocapable.com/images/191b61b3-b249-42cd-9c37-5a733d9f67e1.webp)

```
gantt
  title Project Timeline
  dateFormat YYYY-MM-DD
  section Task1
  Design :a1, 2026-02-01, 10d
  section Task2
  Review :after a1, 5d
```

### [#](#class-diagram-1)Class Diagram

![image-20260220-080334.png](https://help.gocapable.com/images/c64a389b-bd0c-4771-ade6-1fe81fc6ff4f.webp)

```
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()
```

### [#](#entity-relationship-diagram)Entity-relationship diagram

![Screenshot 2026-02-20 at 08.04.06.png](https://help.gocapable.com/images/8ca6c730-b710-41e1-b720-6546a1a6c6fd.webp)

```
erDiagram
  CUSTOMER {
    string id PK
    string name
  }
  ORDER {
    string id PK
    string customerId FK
    date orderDate
  }
  CUSTOMER ||--o{ ORDER : places
```

### [#](#git-graph)Git Graph

![Screenshot 2026-02-20 at 08.05.18.png](https://help.gocapable.com/images/971f76d7-6608-400f-bed9-5051b355b4bb.webp)

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

### [#](#pie-chart)Pie chart

![Screenshot 2026-02-20 at 08.05.51.png](https://help.gocapable.com/images/e699dc12-ab4d-42f0-bcbe-0db5adae384f.webp)

```
pie
  title Pet Popularity
  "Dogs" : 386
  "Cats" : 85
  "Hamsters" : 15
```

### [#](#mindmap)Mindmap

![image-20260220-080721.png](https://help.gocapable.com/images/75192445-c37c-4ede-b809-2238cd7bc515.webp)

```
mindmap
  root(( ))
    Origins
      Long history
      Popularisation
    Research
      On effectivness<br/>and features
      On Automatic creation
    Tools
      Pen and paper
      Mermaid
```