Mermaid

p:: Docs f:: JavaScript

• Flowchart - Wikipedia

About Mermaid | Mermaid

Mermaid lets you create diagrams and visualizations using text and code.

It is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Diagram Syntax

Flowcharts Syntax | Mermaid

Flowcharts are composed of nodes (geometric shapes) and edges (arrows or lines). The Mermaid code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.

A node with text​

---
title: Node with text
---
flowchart LR
	id1[This is the text in the box]
    id["This ❤ Unicode"]
	markdown["`This **is** _Markdown_`"]
	newLines["`Line1
	Line 2
	Line 3`"]
	markdown --> newLines

Direction

This declares the flowchart is oriented from top to bottom (TD or TB).

flowchart TD
    Start --> Stop

This declares the flowchart is oriented from left to right (LR).

flowchart LR
    Start --> Stop

Possible FlowChart orientations are:

• TB - Top to bottom
• TD - Top-down/ same as top to bottom
• BT - Bottom to top
• RL - Right to left
• LR - Left to right

Node shapes​

flowchart LR
    A(["Start"]) --> B{"Decision"}
    B --> C["Process"] o--o E <--> F x--x Z
    B -- "Text on links" --> B2 --> D[("Database")] --> Z
    B2[["Predefined Process"]]
    E[/"Input/Output"/]
    F>"Manual Input Alternative"]
    Z(["End"])

Minimum length of a link​

For dotted or thick links, the characters to add are equals signs or dots, as summed up in the following table:

Length	1	2	3
Normal	---	----	-----
Normal with arrow	-->	--->	---->
Thick	===	====	=====
Thick with arrow	==>	===>	====>
Dotted	-.-	-..-	-...-
Dotted with arrow	-.->	-..->	-...->

Subgraphs

flowchart LR
  subgraph TOP
    direction TB
    subgraph B1
        direction RL
        i1 -->f1
    end
    subgraph B2
        direction BT
        i2 -->f2
    end
  end
  A --> TOP --> B
  B1 --> B2