0.008px mean node offset over 15 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
---
title: This is a complicated flow
---
graph LR
accTitle: This is a complicated flow
accDescr: This is the description for the complicated flow.
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
提交申请
熊大
"];
class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
负责人审批
强子
"];
class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
DBA审批
强子
"];
class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
SA审批
阿美
"];
class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
主管审批
光头强
"];
class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
DBA确认
强子
"];
class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
SA确认
阿美
"];
class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
结束
"];
class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
SA执行1
强子
"];
class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
sid-6C2120F3-D940-4958-A067-0903DCE879C4["
SA执行2
强子
"];
class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
DBA执行1
强子
"];
class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
DBA执行3
强子
"];
class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
DBA执行2
强子
"];
class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
DBA执行4
强子
"];
class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
负责人确认
梁静茹
"];
class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
Example 2
match
0.008px mean node offset over 15 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
---
title: This is another complicated flow
config:
theme: base
flowchart:
curve: cardinal
---
flowchart LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
提交申请
熊大
"];
class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
负责人审批
强子
"];
class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
DBA审批
强子
"];
class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
SA审批
阿美
"];
class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
主管审批
光头强
"];
class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
DBA确认
强子
"];
class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
SA确认
阿美
"];
class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
结束
"];
class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
SA执行1
强子
"];
class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
sid-6C2120F3-D940-4958-A067-0903DCE879C4["
SA执行2
强子
"];
class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
DBA执行1
强子
"];
class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
DBA执行3
强子
"];
class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
DBA执行2
强子
"];
class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
DBA执行4
强子
"];
class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
负责人确认
梁静茹
"];
class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
Example 3
match
0.007px mean node offset over 6 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
---
title: What to buy
---
graph TD
accTitle: What to buy
accDescr: Options of what to buy with Christmas money
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssssxsssssssssssssssssssuuutttsssssssssssssssssssssss}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
Example 4
match
0.007px mean node offset over 6 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
flowchart TD
accTitle: What to buy
accDescr: Options of what to buy with Christmas money
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssssxsssssssssssssssssssuuutttsssssssssssssssssssssss}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
Example 5
match
0.007px mean node offset over 6 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TD
A[/Christmas\]
A -->|Get money| B[\Go shopping/]
B --> C{Let me thinkssssssssssssssssssssssssssssssssssssssssssssssssssssss}
C -->|One| D[/Laptop/]
C -->|Two| E[\iPhone\]
C -->|Three| F[Car]
Example 6
match
0.007px mean node offset over 6 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
flowchart TD
A[/Christmas\]
A -->|Get money| B[\Go shopping/]
B --> C{Let me thinkssssssssssssssssssssssssssssssssssssssssssssssssssssss}
C -->|One| D[/Laptop/]
C -->|Two| E[\iPhone\]
C -->|Three| F[Car]
Example 7
match
0.021px mean node offset over 14 nodes0.00% width difference
0.008px mean node offset over 2 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TB
subgraph One
a1-->a2
end
Example 12
match
0.008px mean node offset over 2 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
flowchart TB
subgraph One
a1-->a2
end
Example 13
match
0.001px mean node offset over 7 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TB
A
B
subgraph foo[Foo SubGraph]
C
D
end
subgraph bar[Bar SubGraph]
E
F
end
G
A-->B
B-->C
C-->D
B-->D
D-->E
E-->A
E-->F
F-->D
F-->G
B-->G
G-->D
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
Example 14
match
0.001px mean node offset over 7 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
flowchart TB
A
B
subgraph foo[Foo SubGraph]
C
D
end
subgraph bar[Bar SubGraph]
E
F
end
G
A-->B
B-->C
C-->D
B-->D
D-->E
E-->A
E-->F
F-->D
F-->G
B-->G
G-->D
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
0.012px mean node offset over 5 nodes0.01% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{{Let me think...Do I want something for work,something to spend every free second with,or something to get around?}}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
click A "flowchart.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
Example 18
match
0.012px mean node offset over 5 nodes0.01% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{{Let me think...Do I want something for work,something to spend every free second with,or something to get around?}}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
click A "flowchart.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
Example 19
match
0.012px mean node offset over 5 nodes0.01% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TD
A([stadium shape test])
A -->|Get money| B([Go shopping])
B --> C([Let me think...Do I want something for work,something to spend every free second with,or something to get around?])
C -->|One| D([Laptop])
C -->|Two| E([iPhone])
C -->|Three| F([Carwroom wroom])
click A "flowchart.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
Example 20
match
0.012px mean node offset over 5 nodes0.01% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
flowchart TD
A([stadium shape test])
A -->|Get money| B([Go shopping])
B --> C([Let me think...Do I want something for work,something to spend every free second with,or something to get around?])
C -->|One| D([Laptop])
C -->|Two| E([iPhone])
C -->|Three| F([Carwroom wroom])
click A "flowchart.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
Example 21
match
0.015px mean node offset over 5 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph LR
A[[subroutine shape test]]
A -->|Get money| B[[Go shopping]]
B --> C[[Let me think...Do I want something for work,something to spend every free second with,or something to get around?]]
C -->|One| D[[Laptop]]
C -->|Two| E[[iPhone]]
C -->|Three| F[[Carwroom wroom]]
click A "flowchart.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
Example 22
match
0.015px mean node offset over 5 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
flowchart LR
A[[subroutine shape test]]
A -->|Get money| B[[Go shopping]]
B --> C[[Let me think...Do I want something for work,something to spend every free second with,or something to get around?]]
C -->|One| D[[Laptop]]
C -->|Two| E[[iPhone]]
C -->|Three| F[[Carwroom wroom]]
click A "flowchart.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
Example 23
match
0.027px mean node offset over 7 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph LR
A[(cylindricalshapetest)]
A -->|Get money| B1[(Go shopping 1)]
A -->|Get money| B2[(Go shopping 2)]
A -->|Get money| B3[(Go shopping 3)]
C[(Let me think...Do I want something for work,something to spend every free second with,or something to get around?)]
B1 --> C
B2 --> C
B3 --> C
C -->|One| D[(Laptop)]
C -->|Two| E[(iPhone)]
C -->|Three| F[(Car)]
click A "flowchart.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
Example 24
match
0.027px mean node offset over 7 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
flowchart LR
A[(cylindricalshapetest)]
A -->|Get money| B1[(Go shopping 1)]
A -->|Get money| B2[(Go shopping 2)]
A -->|Get money| B3[(Go shopping 3)]
C[(Let me think...Do I want something for work,something to spend every free second with,or something to get around?)]
B1 --> C
B2 --> C
B3 --> C
C -->|One| D[(Laptop)]
C -->|Two| E[(iPhone)]
C -->|Three| F[(Car)]
click A "flowchart.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
Example 25
match
0.000px mean node offset over 12 nodes0.00% width difference
0.000px mean node offset over 1 node0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TB
TITLE["Link Click Events(click the nodes below)"]
A["link test (open in same tab)"]
B["link test (open in new tab)"]
C[anchor test]
D[mailto test]
E[other protocol test]
F[script test]
TITLE --> A & B & C & D & E & F
click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
click C "#link-clicked"
click D "mailto:user@user.user" "mailto test"
click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test"
Example 30
match
0.000px mean node offset over 1 node0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
flowchart TB
TITLE["Link Click Events(click the nodes below)"]
A["link test (open in same tab)"]
B["link test (open in new tab)"]
C[anchor test]
D[mailto test]
E[other protocol test]
F[script test]
TITLE --> A & B & C & D & E & F
click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
click C "#link-clicked"
click D "mailto:user@user.user" "mailto test"
click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test"
Example 31
match
0.000px mean node offset over 5 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph LR
A[redtext] -->|redtext| B(bluetext)
C[/redtext/] -->|bluetext| D{bluetext}
E{{defaultstyle}} -->|defaultstyle| F([defaultstyle])
linkStyle default color:Sienna;
linkStyle 0 color:red;
linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
style A color:red;
style B color:blue;
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "flowchart.html#link-clicked" "link test"
click D testClick "click test"
Example 32
match
0.000px mean node offset over 5 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
flowchart LR
A[redtext] -->|redtext| B(bluetext)
C[/redtext/] -->|bluetext| D{bluetext}
E{{defaultstyle}} -->|defaultstyle| F([defaultstyle])
linkStyle default color:Sienna;
linkStyle 0 color:red;
linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
style A color:red;
style B color:blue;
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "flowchart.html#link-clicked" "link test"
click D testClick "click test"
Example 33
match
0.008px mean node offset over 4 nodes0.01% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TD
A[myClass1] --> B[default] & C[default]
B[default] & C[default] --> D[myClass2]
classDef default stroke-width:2px,fill:none,stroke:silver
classDef node color:red
classDef myClass1 color:#0000ff
classDef myClass2 stroke:#0000ff,fill:#ccccff
class A myClass1
class D myClass2
Example 34
match
0.008px mean node offset over 4 nodes0.01% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
flowchart TD
A[myClass1] --> B[default] & C[default]
B[default] & C[default] --> D[myClass2]
classDef default stroke-width:2px,fill:none,stroke:silver
classDef node color:red
classDef myClass1 color:#0000ff
classDef myClass2 stroke:#0000ff,fill:#ccccff
class A myClass1
class D myClass2
Example 35
match
0.000px mean node offset over 28 nodes0.00% width difference
11.398px mean node offset over 5 nodes3.50% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph LR
A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
Example 40
differs
11.398px mean node offset over 5 nodes3.50% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
flowchart LR
A["$$f(\relax{x}) = \int_{-\infty}^\infty \hat{f}(\xi)\,e^{2 \pi i \xi x}\,d\xi$$"] -->|"$$\Bigg(\bigg(\Big(\big((\frac{-b\pm\sqrt{b^2-4ac}}{2a})\big)\Big)\bigg)\Bigg)$$"| B("$$1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots}}}}$$")
A -->|"$$\overbrace{a+b+c}^{\text{note}}$$"| C("$$\phase{-78^\circ}$$")
B --> D("$$x = \begin{cases} a &\text{if } b \\ c &\text{if } d \end{cases}$$")
C --> E("$$x(t)=c_1\begin{bmatrix}-\cos{t}+\sin{t}\\ 2\cos{t} \end{bmatrix}e^{2t}$$")
Example 41
differs
128.389px mean node offset over 2 nodes29.48% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph LR
A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
Example 42
differs
128.389px mean node offset over 2 nodes29.48% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph LR
A["$$\alpha\beta\gamma\delta\epsilon\zeta\eta\theta\iota\kappa\lambda\mu\nu\xi\omicron\pi\rho\sigma\tau\upsilon\phi\chi\psi\omega$$"] --> B["$$\Alpha\Beta\Gamma\Delta\Epsilon\Zeta\Eta\Theta\Iota\Kappa\Lambda\Mu\Nu\Xi\Omicron\Pi\Rho\Sigma\Tau\Upsilon\Phi\Chi\Psi\Omega$$"]
Example 43
differs
402.500px mean node offset over 2 nodes53.25% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph LR
A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
Example 44
differs
402.500px mean node offset over 2 nodes53.25% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph LR
A["$$\forall\complement\therefore\emptyset\exists\subset\because\empty\exist\supset\mapsto\varnothing\nexists\mid\to\implies\in\land\gets\impliedby\isin\lor\leftrightarrow\iff\notin\ni\notni\lnot$$"] --> B["$$\nabla\Im\Reals\jmath\partial\image\wp\aleph\Game\weierp\alef\Finv\N\Z\alefsym\cnums\natnums\beth\Complex\R\gimel\ell\Re\daleth\hbar\real\eth\hslash\reals$$"]
Example 45
match
0.008px mean node offset over 15 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph LR
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1["
提交申请
熊大
"];
class sid-B3655226-6C29-4D00-B685-3D5C734DC7E1 node-executed;
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A["
负责人审批
强子
"];
class sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A node-executed;
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221["
DBA审批
强子
"];
class sid-E27C0367-E6D6-497F-9736-3CDC21FDE221 node-executed;
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD["
SA审批
阿美
"];
class sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD node-executed;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7["
主管审批
光头强
"];
class sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7 node-executed;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89["
DBA确认
强子
"];
class sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89 node-executed;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937["
SA确认
阿美
"];
class sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937 node-executed;
sid-4FC27B48-A6F9-460A-A675-021F5854FE22["
结束
"];
class sid-4FC27B48-A6F9-460A-A675-021F5854FE22 node-executed;
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E["
SA执行1
强子
"];
class sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E node-executed;
sid-6C2120F3-D940-4958-A067-0903DCE879C4["
SA执行2
强子
"];
class sid-6C2120F3-D940-4958-A067-0903DCE879C4 node-executed;
sid-9180E2A0-5C4B-435F-B42F-0D152470A338["
DBA执行1
强子
"];
class sid-9180E2A0-5C4B-435F-B42F-0D152470A338 node-executed;
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD["
DBA执行3
强子
"];
class sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD node-executed;
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756["
DBA执行2
强子
"];
class sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756 node-executed;
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93["
DBA执行4
强子
"];
class sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93 node-executed;
sid-1897B30A-9C5C-4D5B-B80B-76A038785070["
负责人确认
梁静茹
"];
class sid-1897B30A-9C5C-4D5B-B80B-76A038785070 node-executed;
sid-B3655226-6C29-4D00-B685-3D5C734DC7E1-->sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7;
sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A-->sid-1897B30A-9C5C-4D5B-B80B-76A038785070;
sid-E27C0367-E6D6-497F-9736-3CDC21FDE221-->sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89;
sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD-->sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937;
sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-9180E2A0-5C4B-435F-B42F-0D152470A338-->sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756;
sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD-->sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93;
sid-6C2120F3-D940-4958-A067-0903DCE879C4-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-1897B30A-9C5C-4D5B-B80B-76A038785070-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-19DD9E9F-98C1-44EE-B604-842AFEE76F1E;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-9180E2A0-5C4B-435F-B42F-0D152470A338;
sid-A1B3CD96-7697-4D7C-BEAA-73D187B1BE89-->sid-03A2C3AC-5337-48A5-B154-BB3FD0EC8DAD;
sid-D5E1F2F4-306C-47A2-BF74-F66E3D769756-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-8C3F2F1D-F014-4F99-B966-095DC1A2BD93-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-BED98281-9585-4D1B-934E-BD1AC6AC0EFD;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-E27C0367-E6D6-497F-9736-3CDC21FDE221;
sid-3E35A7FF-A2F4-4E07-9247-DBF884C81937-->sid-6C2120F3-D940-4958-A067-0903DCE879C4;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4DA958A0-26D9-4D47-93A7-70F39FD7D51A;
sid-7CE72B24-E0C1-46D3-8132-8BA66BE05AA7-->sid-4FC27B48-A6F9-460A-A675-021F5854FE22;
Example 46
match
0.007px mean node offset over 6 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me thinksssssxsssssssssssssssssssuuutttsssssssssssssssssssssss}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
Example 47
match
0.007px mean node offset over 6 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TD
A[/Christmas\]
A -->|Get money| B[\Go shopping/]
B --> C{Let me thinkssssssssssssssssssssssssssssssssssssssssssssssssssssss}
C -->|One| D[/Laptop/]
C -->|Two| E[\iPhone\]
C -->|Three| F[Car]
Example 48
match
0.021px mean node offset over 14 nodes0.00% width difference
0.008px mean node offset over 2 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TB
subgraph One
a1-->a2
end
Example 51
match
0.001px mean node offset over 7 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TB
A
B
subgraph foo[Foo SubGraph]
C
D
end
subgraph bar[Bar SubGraph]
E
F
end
G
A-->B
B-->C
C-->D
B-->D
D-->E
E-->A
E-->F
F-->D
F-->G
B-->G
G-->D
style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
0.012px mean node offset over 5 nodes0.01% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{{Let me think...Do I want something for work,something to spend every free second with,or something to get around?}}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[Car]
click A "index.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
Example 54
match
0.012px mean node offset over 5 nodes0.01% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TD
A([stadium shape test])
A -->|Get money| B([Go shopping])
B --> C([Let me think...Do I want something for work,something to spend every free second with,or something to get around?])
C -->|One| D([Laptop])
C -->|Two| E([iPhone])
C -->|Three| F([Carwroom wroom])
click A "index.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
Example 55
match
0.015px mean node offset over 5 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph LR
A[[subroutine shape test]]
A -->|Get money| B[[Go shopping]]
B --> C[[Let me think...Do I want something for work,something to spend every free second with,or something to get around?]]
C -->|One| D[[Laptop]]
C -->|Two| E[[iPhone]]
C -->|Three| F[[Carwroom wroom]]
click A "index.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
class C someclass;
Example 56
match
0.027px mean node offset over 7 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph LR
A[(cylindricalshapetest)]
A -->|Get money| B1[(Go shopping 1)]
A -->|Get money| B2[(Go shopping 2)]
A -->|Get money| B3[(Go shopping 3)]
C[(Let me think...Do I want something for work,something to spend every free second with,or something to get around?)]
B1 --> C
B2 --> C
B3 --> C
C -->|One| D[(Laptop)]
C -->|Two| E[(iPhone)]
C -->|Three| F[(Car)]
click A "index.html#link-clicked" "link test"
click B testClick "click test"
classDef someclass fill:#f96;
class A someclass;
Example 57
match
0.000px mean node offset over 12 nodes0.00% width difference
0.000px mean node offset over 1 node0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TB
TITLE["Link Click Events(click the nodes below)"]
A["link test (open in same tab)"]
B["link test (open in new tab)"]
C[anchor test]
D[mailto test]
E[other protocol test]
F[script test]
TITLE --> A & B & C & D & E & F
click A "https://mermaid-js.github.io/mermaid/#/" "link test (open in same tab)"
click B "https://mermaid-js.github.io/mermaid/#/" "link test (open in new tab)" _blank
click C "#link-clicked"
click D "mailto:user@user.user" "mailto test"
click E "notes://do-your-thing/id" "other protocol test"
click F "javascript:alert('test')" "script test"
Example 60
match
0.000px mean node offset over 5 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph LR
A[redtext] -->|redtext| B(bluetext)
C[/redtext/] -->|bluetext| D{bluetext}
E{{defaultstyle}} -->|defaultstyle| F([defaultstyle])
linkStyle default color:Sienna;
linkStyle 0 color:red;
linkStyle 1 stroke:DarkGray,stroke-width:2px,color:#0000ff
style A color:red;
style B color:blue;
style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
style D stroke:#0000ff,fill:#ccccff,color:#0000ff
click B "index.html#link-clicked" "link test"
click D testClick "click test"
Example 61
match
0.008px mean node offset over 4 nodes0.01% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TD
A[myClass1] --> B[default] & C[default]
B[default] & C[default] --> D[myClass2]
classDef default stroke-width:2px,fill:none,stroke:silver
classDef node color:red
classDef myClass1 color:#0000ff
classDef myClass2 stroke:#0000ff,fill:#ccccff
class A myClass1
class D myClass2
Example 62
match
0.004px mean node offset over 9 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
graph TD
A([Start]) ==> B[Step 1]
B ==> C{Flow 1}
C -- Choice 1.1 --> D[Step 2.1]
C -- Choice 1.3 --> I[Step 2.3]
C == Choice 1.2 ==> E[Step 2.2]
D --> F{Flow 2}
E ==> F{Flow 2}
F{Flow 2} == Choice 2.1 ==> H[Feedback node]
H[Feedback node] ==> B[Step 1]
F{Flow 2} == Choice 2.2 ==> G((Finish))
linkStyle 0,1,4,6,7,8,9 stroke:gold, stroke-width:4px
classDef active_node fill:#0CF,stroke:#09F,stroke-width:6px
classDef unactive_node fill:#e0e0e0,stroke:#bdbdbd,stroke-width:3px
classDef bugged_node fill:#F88,stroke:#F22,stroke-width:3px
classDef start_node,finish_node fill:#3B1,stroke:#391,stroke-width:8px
class A start_node;
class B,C,E,F,H active_node;
class D unactive_node;
class G finish_node;
class I bugged_node
Example 63
match
0.002px mean node offset over 4 nodes0.00% width difference
SebastianJSno browser
mermaid-cliheadless Chrome
Mermaid source
---
title: Subgraph nodeSpacing and rankSpacing example
config:
flowchart:
nodeSpacing: 1
rankSpacing: 1
---
flowchart LR
X --> Y
subgraph X
direction LR
A
C
end
subgraph Y
direction LR
B
D
end
