Skip to content

Mermaid node shapes and syntax

Mermaid is a syntax for creating diagrams from text, allowing for the definition of node shapes and directional flow within graphs^[600-developer-tools-obsidian-johnny-ob-037.md].

Flowchart direction

The direction of the graph is defined in the opening declaration^[600-developer-tools-obsidian-johnny-ob-037.md].

  • graph LR: Creates a Left-to-Right (horizontal) flow^[600-developer-tools-obsidian-johnny-ob-037.md].
  • graph TD: Creates a Top-to-Down (vertical) flow^[600-developer-tools-obsidian-johnny-ob-037.md].

Node shapes

The shape of a node is determined by the syntax wrapping the node's ID^[600-developer-tools-obsidian-johnny-ob-037.md].

  • Rectangle (Square): Use square brackets, e.g., A[Square Node].^[600-developer-tools-obsidian-johnny-ob-037.md]
  • Rounded Rectangle (Stadium): Use parentheses, e.g., B(Rounded Node).^[600-developer-tools-obsidian-johnny-ob-037.md]
  • Rhombus (Diamond): Used for conditional statements, use curly braces, e.g., C{Condition}.^[600-developer-tools-obsidian-johnny-ob-037.md]

Connecting nodes

Nodes are connected using arrows (-->) and can include text labels to describe the relationship^[600-developer-tools-obsidian-johnny-ob-037.md].

  • Basic link: A --> B
  • Labeled link:
    • Horizontal: C -- a=1 --> D^[600-developer-tools-obsidian-johnny-ob-037.md]
    • Vertical: C --> |a=2| E^[600-developer-tools-obsidian-johnny-ob-037.md]

Example syntax

Below is an example of a horizontal flowchart utilizing different shapes and labeled connections^[600-developer-tools-obsidian-johnny-ob-037.md]:

graph LR

A[方形]
B(圆角)
C{条件a}
D[结果1]
E[结果2]


A --> B
B --> C
C -- a=1 --> D
C -- a=2 --> E

Sources

^[600-developer-tools-obsidian-johnny-ob-037.md]