Diagram openers
Mermaid Diagram Syntax
Each Mermaid diagram type starts with a different keyword. Load a template, replace the labels, and confirm that this diagram syntax parses in the browser.
Paste Mermaid code or load a template to render a diagram.
No upload. The current source stays in this tab.
Flowchart syntax
flowchart LR or flowchart TB is the opener. Later lines connect node ids. Direction belongs on the first line, not on each arrow.
Sequence diagram syntax
sequenceDiagram introduces participants. A solid message uses ->> and a dashed reply uses -->>. The text after the colon is the message, not a flowchart label.
Class diagram syntax
classDiagram names classes and relationships. A class block can list members, and an arrow such as Guide --> Chapter connects two class names.
State diagram syntax
stateDiagram-v2 uses [*] for the start or end. State --> State: label moves between states. The label after the colon is the transition, not a node name.
ER diagram syntax
erDiagram relates entity names with a cardinality mark such as one-to-many and a label after the colon. An entity block can list a field type and a field name. Shared node rules live on the Mermaid syntax page.
Mermaid diagram syntax FAQ
Which diagram type should the first line declare?
Use the keyword for the picture you want: flowchart, sequenceDiagram, classDiagram, stateDiagram-v2, or erDiagram. Mixing a sequence message into a flowchart does not parse.
Do these templates cover every Mermaid diagram?
No. They cover five common types. The parser on this page still accepts other diagram types Mermaid provides when the text is valid.
Can I export these diagrams?
Use Mermaid code to diagram to download SVG or PNG. This page is for checking the diagram syntax.