Skip to content

Mermaid flowchart syntax

Mermaid flowchart syntax refers to the specific code structure used to generate diagrams, such as flowcharts, sequence diagrams, and Gantt charts, directly within text-based environments like [[Obsidian]] or Markdown^[600-developer__tools__obsidian__Johnny-OB-037.md].

Graph direction and structure

The core of a flowchart is defined using the graph keyword, followed by a direction specifier^[600-developer__tools__obsidian__Johnny-OB-037.md]:

  • LR: Indicates a Left-to-Right (horizontal) layout^[600-developer__tools__obsidian__Johnny-OB-037.md].
  • TD: Indicates a Top-to-Down (vertical) layout^[600-developer__tools__obsidian__Johnny-OB-037.md].

Node shapes

Nodes in the diagram represent specific steps or states and can use different bracket styles to define their shape^[600-developer__tools__obsidian__Johnny-OB-037.md]:

  • Square: Defined by text inside square brackets, e.g., A[Square Text]^[600-developer__tools__obsidian__Johnny-OB-037.md].
  • Rounded: Defined by text inside parentheses, e.g., B(Rounded Text)^[600-developer__tools__obsidian__Johnny-OB-037.md].
  • Diamond (Condition): Defined by text inside curly braces, e.g., C{Condition}^[600-developer__tools__obsidian__Johnny-OB-037.md].

Connections and Logic

Connections between nodes are established using arrows (-->)^[600-developer__tools__obsidian__Johnny-OB-037.md].

  • Standard Arrows: A simple connection is written as A --> B^[600-developer__tools__obsidian__Johnny-OB-037.md].
  • Labeled Arrows: To add context to a connection, such as conditions, text can be appended to the arrow^[600-developer__tools__obsidian__Johnny-OB-037.md]. For example, C -- a=1 --> D indicates the path is taken when "a=1"^[600-developer__tools__obsidian__Johnny-OB-037.md].
  • Vertical Syntax: When using TD (Top-to-Down) layout, labels can also be applied using vertical bars, such as C --> |a=2| E^[600-developer__tools__obsidian__Johnny-OB-037.md].

Other Diagram Types

In addition to standard flowcharts, Mermaid supports other diagram structures via specific keywords^[600-developer__tools__obsidian__Johnny-OB-037.md]:

  • Sequence Diagrams: Used to visualize interactions between entities over time, initiated with sequenceDiagram^[600-developer__tools__obsidian__Johnny-OB-037.md].
  • Gantt Charts: Used for project management and scheduling, initiated with gantt^[600-developer__tools__obsidian__Johnny-OB-037.md].

Sources

^[600-developer__tools__obsidian__Johnny-OB-037.md]