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

#Examples

#User journey diagram

#State diagram

#Flowchart diagram

#Sequence diagram

#Class diagram

#Quadrant chart

#Editor

#Examples

#Flowchart

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

#Sequence Diagram

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

#Gantt Chart

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

#Class Diagram

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

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

#Git Graph

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

#Pie chart

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

#Mindmap

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