Reference
Shapes and lines it reads
Every shape and line the reader knows, the Mermaid it writes for each, and how to change a look or a style.
On this page
A shape is only a look. Mermaid gives no shape a meaning, and neither does mermaidify: every shape starts as a plain node, named by its place in the reading. Draw every step as a box if you like, or a diamond for something that is not a question. If your own work gives shapes meanings, the meanings are yours to keep.
What Mermaid writes#
| You draw | Mermaid writes |
|---|---|
| A box | A["Node 1"] |
| A box in a box | A[["Node 1"]] |
| A wide oval | A(["Node 1"]) |
| A circle | A(("Node 1")) |
| A circle in a circle | A((("Node 1"))) |
| A diamond | A{"Node 1"} |
| A hexagon | A{{"Node 1"}} |
| A trapezoid, wide at the bottom | A[/"Node 1"\] |
| A trapezoid, wide at the top | A[\"Node 1"/] |
| A parallelogram | A[/"Node 1"/] |
| A parallelogram leaning left | A[\"Node 1"\] |
| A triangle | A@{ shape: tri, label: "Node 1" } |
| A triangle pointing down | A@{ shape: flip-tri, label: "Node 1" } |
| A small shape filled in | A@{ shape: sm-circ, label: "Node 1" } |
| A small circle around a filled dot | A@{ shape: fr-circ, label: "Node 1" } |
| A shape around other shapes | subgraph G1 ["Group 1"] |
| An arrow, or a line with no head | A --> B |
| Heads at both ends | A <--> B |
| A line drawn as dashes | A -.-> B |
| A line gone over again | A ==> B |
| A line you named | A -->|"yes"| B |
| Green, blue, red, or amber ink | classDef, style, linkStyle |
Mermaid draws a filled dot as a start and a ring around one as a stop, with no name; in a state diagram they are its start and its end, [*]. Triangles, filled dots, and rings around dots are written in Mermaid's newer shape syntax, which Mermaid 11.3 and later read; an older copy of Mermaid elsewhere will not draw them.
The example on the Draw page reads as this code, leaving out its colors:
flowchart TD
A(["Node 1"])
B["Node 2"]
C{"Node 3"}
D((("Node 4")))
A --> B
B --> C
C --> D
C --> BLooks, styles, and names#
To change a shape's look or a line's style after reading it, pick another from its menu under Names: the code and the diagram follow, and the choice stays with that shape or line as you draw more.
Names are written with Mermaid's character codes, so a quote or an angle bracket in a name stays a character and does not break the code: "Ready? #34;yes#34;" shows as Ready? "yes".