Try / Mermaid in Y minutes

Mermaid lets you create diagrams and visualizations using text and code.

It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Let's see some of Mermaid's features in action! You can edit a diagram definition at any time and click the Run button to see the updated diagram.

Flowchart · Sequence diagram · Gantt chart · Class diagram · Git graph · Entity relationship diagram · User journey diagram · Quadrant chart · XY chart · Further reading

✨ This is an open source guide. Feel free to improve it!


A flowchart consists of nodes (geometric shapes) and edges (arrows or lines). It supports different arrow types, multidirectional arrows, and subgraphs.

flowchart TD

A[Start]-->B[Step 1];
A-->C[Step 2];

A more complex example with subgraphs:

flowchart TB

subgraph one
subgraph two
subgraph three

Sequence diagram

A sequence diagram is an interaction diagram that shows how processes interact with each other and in what order.


Alice->>John: Hello John, how are you?
John-->>Alice: Great!
Alice-)John: See you later!

A more complex example with a loop and a note:


participant Alice
participant Bob

Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

Gantt chart

A Gantt chart illustrates a project schedule and the time it will take to complete the project.


title A Gantt Diagram
dateFormat YYYY-MM-DD

section Section
    A task          :a1, 2014-01-01, 30d
    Another task    :after a1, 20d
section Another
    Task in Another :2014-01-12, 12d
    another task    :24d

Class diagram

A class diagram is the fundamental building block of object-oriented design. It is used to model the structure of an application. Class diagrams can also be used to model data.


class Student {
    idCard: IdCard

class IdCard{
    id: int
    name: string

class Bike{
    id: int
    name: string

Student "1" --o "1" IdCard : carries
Student "1" --o "1" Bike : rides

A more complex example with inheritance and methods:

note "From Duck till Zebra"

Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
Animal <|-- Fish
Animal <|-- Zebra

Animal: +int age
Animal: +String gender
Animal: +isMammal()
Animal: +mate()

class Duck{
    +String beakColor

class Fish{
    -int sizeInFeet

class Zebra{
    +bool is_wild

Git graph

A git graph is a pictorial representation of git commits and git actions (commands) on different branches.


branch develop
checkout develop
checkout main
merge develop

Entity relationship diagram

An entity-relationship (ER) diagram describes interrelated things of interest in a particular domain of knowledge. A basic ER model consists of entity types (which classify the things of interest) and specifies relationships that can exist between entities (instances of those entity types).


CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains

A more complex example with attributes:


    string name
    string custNumber
    string sector

    int orderNumber
    string deliveryAddress

    string productCode
    int quantity
    float pricePerUnit

CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains

User journey diagram

A user journey describes the steps a user takes to complete a specific task within a system, application, or website.

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

Quadrant chart

A quadrant chart is a visual representation of data that is divided into four quadrants. Quadrant charts are often used to identify patterns and trends in data, and to prioritize actions based on the position of data points within the chart.

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]

XY chart

An XY chart includes several types of charts that use both the x-axis and the y-axis to display data. Currently, it includes two basic chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data involving two numerical variables.

title "Sales Revenue"

x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000

bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Further reading

Mermaid also supports other diagram types such as state diagrams, pie charts, mind maps, and timelines. See the documentation for details.

See the Getting started guide to start using Mermaid on your website or in your product.

Mermaid team + 1 others · original · CC-BY-SA-4.0 · 2024-02-23