Diagram Types

• graph: creates a flowchart
• sequence: creates a sequence diagram
• gantt: creates a Gantt chart
• class: creates a class diagram
• pie: creates a pie chart

Nodes

• -->: creates a directed edge
• ---: creates an undirected edge
• =>: creates a directed link
• ==>: creates a directed solid link
• ---|: creates a right angle link
• --x|: creates a right angle link with a cross
• --o|: creates a right angle link with a circle
• -->|: creates a right angle link with an arrowhead
• --*|: creates a right angle link with an asterisk
• ==>|: creates a solid right angle link with an arrowhead
• ==*|: creates a solid right angle link with an asterisk
• ->>: creates a message arrow
• alt: creates an alternative condition
• opt: creates an optional condition
• loop: creates a loop condition
• par: creates a parallel condition
• note: creates a note

Shapes

• rect: creates a rectangle
• roundRect: creates a rounded rectangle
• circle: creates a circle
• ellipse: creates an ellipse
• stadium: creates a stadium shape
• parallelogram: creates a parallelogram
• trapezoid: creates a trapezoid
• diamond: creates a diamond
• hexagon: creates a hexagon
• box: creates a box

Example Usage

Here are a few examples of Mermaid diagrams in Markdown using the above syntax:

Flowchart

graph LR
    A --> B
    B --> C
    C --> D` 

Loading

Sequence Diagram

sequenceDiagram
    participant A
    participant B
    A->>B: Message 1
    B->>A: Message 2

Loading

Gantt Chart

gantt
    dateFormat  YYYY-MM-DD
    title Example Gantt Chart
    section Section 1
    Task 1           :a1, 2014-01-01, 30d
    Task 2           :after a1, 20d

Loading

Class Diagram

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

Loading

Pie Chart

pie
    title Browser market share
    "Chrome" : 64
    "Firefox" : 16
    "IE" : 10
    "Other" : 10

Loading