mermaid/docs/n00b-syntaxReference.md

Diagram syntax

Edit this Page

If you are new to mermaid, read Getting Started and Overview sections, to learn the basics about the basics.

This section is a list of diagram types supported by mermaid, each one explains the syntax with which a diagram or chart can be called. These are called Diagram Definitions, since they describe the manner with which the diagram is to be rendered by the renderer.

mermaid tag:

These Diagram Definitions can be entered within a <div class=mermaid> tag. like so :

<div class="mermaid">
     graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
</div>

live ediotr

These definitions can also be entered into the mermaid live editor, to render them immediately. This would then offer

• Flowchart
• Sequence diagram
• Class Diagram
• State Diagram
• Gantt
• Pie Chart
• Entity Relationship Diagram
• User Journey Diagram
• Directives