🗣️

Mermaid Grammar (FlowChart)

Flow Chart

A node (default)

Flow Chart

A node (default)

---
title: Node
---
%% meta, title: title of diagram, on this example, Node

flowchart LR 
    id

%% flowchart: Diagram type
%% LR: Direction (Left to Right) 
%% Other Option:
	%% TB - Top to bottom
	%% TD - Top-down/ same as top to bottom
	%% BT - Bottom to top
	%% RL - Right to left
	%% LR - Left to right
%% id : displayed text
Mermaid
복사

A node with text

---
title: Node with text
---
flowchart LR
    id1[This is the text in the box]

%% id1 get a text in square bracket
Mermaid
복사

Unicode text

flowchart LR
    id["This ❤ Unicode"]

%% Without double quote, raise error
Mermaid
복사

Markdown formatting

%%{init: {"flowchart": {"htmlLabels": false}} }%%
flowchart LR
    markdown["`This **is** _Markdown_`"]
    newLines["`Line1
    Line 2
    Line 3`"]
    markdown --> newLines


%% Use double quotes and backticks "` text `" to enclose the markdown text.
Mermaid
복사

Node shapes

flowchart LR
    id1(This is the text in the box)
		%% A node with round edges
		id2([This is the text in the box])
		%% A stadium-shaped node
		id3[[This is the text in the box]]
		%% A node in a subroutine shape
		id4[(Database)]
		%% A node in a cylindrical shape
		id5((This is the text in the circle))
		%% A node in the form of a circle
		
		id6{This is the text in the box}
		%% A node (rhombus)
		
Mermaid
복사

Links between nodes

flowchart LR
		A[this is A]
		B{this is B}
		C[this is C]
		D{this is D}
		E[this is E]
		F{this is F}
		G[this is G]
		H{this is H}
    A -->   B
		B --- C
		D -.->|D to E|E
		E ==> |E to F| F
		G ~~~ H		
		G & H --> A & B
Mermaid
복사

Subgraphs

flowchart TB
    c1---->a2
    subgraph 1[this is one]
    a1-...->a2
    end
    subgraph two
		direction RL
    b1====>b2
    end
    subgraph Three
    c1-->c2
    end

		1 ==> two
		
Mermaid
복사

Styling 추가하기

%% Styling line curves

flowchart LR
    A:::someclass --> B:::someclass2
		linkStyle 0 stroke:blue;
    classDef someclass fill:#f96, color:red, stroke:#f0f, stroke-width:10px
		%% link can be seleted by order index(started from 0)
		%% fill bg
		%% color test color
		%% stroke line color
		%% stroke-width

    classDef someclass2 fill:#f96
		
Mermaid
복사

flowchart LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px
    style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray:
Mermaid
복사