](https://www.npmjs.com/package/mermaid)
[](https://discord.gg/AgrbSrBer3)
[](https://twitter.com/mermaidjs_)
+[](https://argos-ci.com)
<img src=){kind=link}
+
+ + flowchart LR + id1([This is the text in the box]) ++
| + + | Dagre | +Dagre with rough | +ELK | +ELK with rough | +
|---|---|---|---|---|
|
+
+
+
+
+
+ + flowchart LR + id1([This is the text in the box]) ++ |
+
+ +flowchart LR + id1([This is the text in the box]) + ++ |
+
+
+%%{init: {"look": "handDrawn"} }%%
+flowchart LR
+ id1([This is the text in the box])
+
+ |
+
+
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
+flowchart LR
+ id1([This is the text in the box])
+
+ |
+
+
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
+flowchart LR
+ id1([This is the text in the box])
+
+ |
+
| + + | ||||
|
+
+
+
+
+
+ + flowchart LR + id1[[This is the text in the box]] ++ |
+
+ +flowchart LR + id1[[This is the text in the box]] ++ |
+
+
+%%{init: {"look": "handDrawn"} }%%
+flowchart LR
+ id1[[This is the text in the box]]
+
+ |
+
+
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
+flowchart LR
+ id1[[This is the text in the box]]
+
+ |
+
+
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
+flowchart LR
+ id1[[This is the text in the box]]
+
+ |
+
| + + | ||||
|
+
+
+
+
+
+ + flowchart LR + id1[(Database)] ++ |
+
+ + flowchart LR + id1[(Database)] ++ |
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart LR
+ id1[(Database)]
+
+ |
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1[(Database)]
+
+ |
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1[(Database)]
+
+ |
+
| + + | ||||
|
+
+
+
+
+
+ + flowchart LR + id1((This is the text in the circle)) ++ |
+
+ + flowchart LR + id1((This is the text in the circle)) ++ |
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart LR
+ id1((This is the text in the circle))
+
+ |
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1((This is the text in the circle))
+
+ |
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1((This is the text in the circle))
+
+ |
+
| + + | ||||
|
+
+
+
+
+
+ + flowchart TD + id1(((This is the text in the circle))) ++ |
+
+ + flowchart TD + id1(((This is the text in the circle))) ++ |
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart TD
+ id1(((This is the text in the circle)))
+
+ |
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart TD
+ id1(((This is the text in the circle)))
+
+ |
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart TD
+ id1(((This is the text in the circle)))
+
+ |
+
| + + | ||||
|
+
+
+
+
+
+ + flowchart LR + id1>This is the text in the box] ++ |
+
+ + flowchart LR + id1>This is the text in the box] ++ |
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart LR
+ id1>This is the text in the box]
+
+ |
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1>This is the text in the box]
+
+ |
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1>This is the text in the box]
+
+ |
+
| + + | ||||
|
+
+
+
+
+
+
+ flowchart LR
+ id1{This is the text in the box}
+
+ |
+
+
+ flowchart LR
+ id1{This is the text in the box}
+
+ |
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart LR
+ id1{This is the text in the box}
+
+ |
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1{This is the text in the box}
+
+ |
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1{This is the text in the box}
+
+ |
+
| + + | ||||
|
+
+
+
+
+
+
+ flowchart LR
+ id1{{This is the text in the box}}
+
+ |
+
+
+ flowchart LR
+ id1{{This is the text in the box}}
+
+ |
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1{{This is the text in the box}}
+
+ |
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1{{This is the text in the box}}
+
+ |
+ |
| + + | ||||
|
+
+
+
+
+
+ + flowchart TD + id1[/This is the text in the box/] ++ |
+
+ + flowchart TD + id1[/This is the text in the box/] ++ |
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart TD
+ id1[/This is the text in the box/]
+
+ |
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart TD
+ id1[/This is the text in the box/]
+
+ |
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart TD
+ id1[/This is the text in the box/]
+
+ |
+
| + + | ||||
|
+
+
+
+
+
+ + flowchart TD + id1[\This is the text in the box\] ++ |
+
+ + flowchart TD + id1[\This is the text in the box\] ++ |
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart TD
+ id1[\This is the text in the box\]
+
+ |
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart TD
+ id1[\This is the text in the box\]
+
+ |
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart TD
+ id1[\This is the text in the box\]
+
+
+ |
+
| + + | ||||
|
+
+
+
+
+
+ + flowchart TD + A[/Christmas\] ++ |
+
+ + flowchart TD + A[/Christmas\] ++ |
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart TD
+ A[/Christmas\]
+
+ |
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart TD
+ A[/Christmas\]
+
+ |
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart TD
+ A[/Christmas\]
+
+ |
+
| + + | ||||
|
+
+
+
+
+
+ + flowchart TD + A[\Christmas/] ++ |
+
+ + flowchart TD + A[\Christmas/] ++ |
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart TD
+ A[\Christmas/]
+
+ |
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart TD
+ A[\Christmas/]
+
+ |
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart TD
+ A[\Christmas/]
+
+ |
+
| + + | ||||
|
+
+
+
+
+
+ + flowchart LR + id1(This is the text in the box) ++ |
+
+ + flowchart LR + id1(This is the text in the box) ++ |
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart LR
+ id1(This is the text in the box)
+
+ |
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1(This is the text in the box)
+
+ |
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1(This is the text in the box)
+
+ |
+
| + + | ||||
|
+
+
+
+
+
+ + flowchart LR + id1[This is the text in the box] ++ |
+
+ + flowchart LR + id1[This is the text in the box] ++ |
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart LR
+ id1[This is the text in the box]
+
+ |
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1[This is the text in the box]
+
+ |
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1[This is the text in the box]
+
+ |
+
| + + | ||||