AI Flowchart Syntax

1. Introduction
2. Define node
3. Node shapes
4. Links between nodes
5. Line length
6. More advanced usages
7. AI Flowchart / Mermaid Online Editor

Introduction

AI Flowchart is base on Mermaid.js, so it follows the Mermaid.js syntax. The Flowchart is composed of nodes (geometric shapes) and edges (arrows or lines). The Mermaid.js code defines how nodes and edges are made and accommodates different arrow types, multi-directional arrows, and any linking to and from subgraphs.

Define node

type	code	graph	syntax
node	flowchart LR apple		Just input the node name.
node with text	flowchart LR node["This is text"]		Put text in brackets, use double quotes to enclose the text.
node with markdown	flowchart LR node["`This **is** _Markdown_`"]		Put markdown in brackets, use double quotes and backticks to enclose the text.

Node shapes

type	code	graph	syntax
A node with round edges	flowchart LR node(Content)		Put text in (...)
A stadium-shaped node	flowchart LR node([Content])		Put text in ([...])
A node in a subroutine shape	flowchart LR node[[Content]]		Put text in [[...]]
A node in a cylindrical shape	flowchart LR node[(Content)]		Put text in [(...)]
A node in the form of a circle	flowchart LR node((Content))		Put text in ((...))
A node in an asymmetric shape	flowchart LR node>Content]		Put text in >...]
A diamond node	flowchart LR node{Content}		Put text in {...}
A hexagon node	flowchart LR node{{Content}}		Put text in {{...}}
Parallelogram A	flowchart LR node[/Content/]		Put text in [/.../]
Parallelogram B	flowchart LR node[\Content\]		Put text in [\...\]
Trapezoid A	flowchart LR node[/Content\]		Put text in [/...\]
Trapezoid B	flowchart LR node[\Content/]		Put text in [\.../]
Double circle	flowchart LR node(((Content)))		Put text in (((...)))

Links between nodes

type	code	graph	syntax
A link	flowchart LR A --- B		Use ...---...
A link with text	flowchart LR A ---|label| B flowchart LR A -- label --- B		Use ---|...| Use --...---
A link with arrow head	flowchart LR A --> B		Use ...-->...
A link with arrow head and text	flowchart LR A -->|label| B flowchart LR A -- label --> B		Use -->|...| Use --...-->
Dotted link	flowchart LR A -.-> B		Use ...-.->...
Dotted link with text	flowchart LR A -.->|label| B flowchart LR A -. label .-> B		Use -.....->
Thick link	flowchart LR A ==> B		Use ...==>...
Thick link with text	flowchart LR A ==>|label| B flowchart LR A == label ==> B		Use ==>|...| Use ==...==>
A link with ● symbol	flowchart LR A --o B		Use ...--o...
A link with ● symbol and text	flowchart LR A --o|label| B flowchart LR A -- label --o B		Use --o|...| Use --...--o
A link with ✖ symbol	flowchart LR A --x B		Use ...--x...
A link with ✖ symbol and text	flowchart LR A --x|label| B flowchart LR A -- label --x B		Use --x|...| Use --...--x
Double-headed arrow	flowchart LR A <--> B		Use ...<-->...
Double-headed arrow with text	flowchart LR A <-->|label| B flowchart LR A <-- label --> B		Use <-->|...| Use <--...-->
Double-headed arrow with ● symbol	flowchart LR A o--o B		Use ...o--o...
Double-headed arrow with ● symbol and text	flowchart LR A o--o|label| B flowchart LR A o-- label --o B		Use o--o|...| Use o--...--o
Double-headed arrow with ✖ symbol	flowchart LR A x--x B		Use ...x--x...
Double-headed arrow with ✖ symbol and text	flowchart LR A x--x|label| B flowchart LR A x-- label --x B		Use x--x|...| Use x--...--x

Line length

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

More advanced usages

Advance usages includes subgraph, interaction, styling and classes and etc. Please view Mermaid.js official site.