Generation of diagrams and flowcharts from text in a similar manner as markdown.

Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?

This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.

Syntax

Graph

This statement declares a new graph and the direction of the graph layout.

graph TD
            

This declares a graph oriented from top to bottom.

graph LR
            

This declares a graph oriented from left to right.

Possible directions are:

• TB - top bottom
• BT - bottom top
• RL - right left
• LR - left right
• TD - same as TB

Nodes

A node (default)

id1;
            

Note that the id is what is displayed in the box.

A node with text

It is also possible to set text in the box that differs from the id. If this is done several times, it is the last text found for the node that will be used. Also if you define edges for the node later on, you can omit text definitions. The one previously defined will be used when rendering the box.

id1[This is the text in the box];
            

A node with round edges

id1(This is the text in the box);
            

A node in the form of a circle

id1((This is the text in the box));
            

A node in an asymetric shape

id1>This is the text in the box];
            

A node (rhombus)

id1{This is the text in the box};
            

Styling a node

It is possible to apply specific styles such as a thicker border or a different background color to a node.

graph LR;
                id1(Start)-->id2(Stop);
                style id1 fill:#f9f,stroke:#333,stroke-width:4px;
                style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;
            

Classes

More convenient then defining the style everytime is to define a class of styles and attach this class to the nodes that should have a different look.

a class definition looks like the example below:

    classDef className fill:#f9f,stroke:#333,stroke-width:4px;
            

Attachment of a class to a node is done as per below:

    class nodeId1 className;
            

It is also possible to attach a class to a list of nodes in one statement:

    class nodeId1,nodeId2 className;
            

Default class

If a class is named default it will be assigned to all classes without specific class definitions.

    classDef default fill:#f9f,stroke:#333,stroke-width:4px;
            

Links between nodes

Nodes can be connected with links/edges. It is possible to have different types of links or attach a text string to a link.

A link with arrow head

A-->B;
            

An open link

A---B;
            

Text on links

A---|This is the text|B;
            

Styling links

It is possible to style links for instance a link that is going back in the flow. This is done by the linkStyle statement as in the example below:

linkStyle 3 stroke:#ff3,stroke-width:4px;
            

Interaction

It is possible to bind a click event to a node:

click nodeId callback
            

• nodeId is the id of the node
• callback is the name of a javascript function defined on the page displaying the graph, the function will be called with the nodeId as parameter.

Credits

Many thanks to the d3 and dagre-d3 projects for providing the graphical layout and drawing libraries!