Mermaid syntax
Flowchart
Edges
Edges are the arrows and lines that make up a flowchart. They are used to connect nodes and represent the flow of data between them.
Arrow
No text
-->
graph LR
A --> B
Text
-- text -->
graph LR
A -- text --> B
Multi directional
<-->
graph LR
A<-->B
Multi directional with text
<-- text -->
graph LR
A<-- text -->B
Open
Open without text
---
graph LR
A --- B
Open with text
-- text ---
graph LR
A -- text --- B
Circle
Circle edge without text
---o
graph LR
A ---o B
Circle edge with text
-- text --o
graph LR
A -- text --o B
Multi directional circle
o---o
graph LR
A o---o B
Multi directional circle edge with text
o-- Text --o
graph LR
A o-- Text --o B
Cross
Cross edge marker without text
---x
graph LR
A ---x B
Cross edge marker with text
-- text --x
graph LR
A -- text --x B
Multi directional cross edge marker
x---x
graph LR
A x---x B
Multi directional cross edge marker with text
x-- Text --x
graph LR
A x-- Text --x B
Length
Edges with no text
| Edge type | length: 1 | length: 2 | length: 3 |
|---|---|---|---|
| Normal | — | ---- | ----- |
| Invisible | ~~~ | ~~~~ | ~~~~~ |
| Normal with arrow | –> | —> | ----> |
| Normal with cross | –x | —x | ----x |
| Normal with circle | –o | —o | ----o |
| Thick | === | ==== | ===== |
| Thick with arrow | ==> | ===> | ====> |
| Thick with cross | ==x | ===x | ====x |
| Thick with circle | ==o | ===o | ====o |
| Dotted | -.- | -…- | -…- |
| Dotted with arrow | -.-> | -…-> | -…-> |
| Dotted with cross | -.-x | -…-x | -…-x |
| Dotted with circle | -.-o | -…-o | -…-o |
| Multi directional with arrow | –> | —> | ----> |
| Multi directional with cross | –x | —x | ----x |
| Multi directional with circle | –o | —o | ----o |
| Multi directional thick | === | ==== | ===== |
| Multi directional thick with arrow | ==> | ===> | ====> |
| Multi directional thick with cross | ==x | ===x | ====x |
| Multi directional thick with circle | ==o | ===o | ====o |
| Multi directional dotted | -.- | -…- | -…- |
| Multi directional dotted with arrow | <-.-> | <-…-> | <-…-> |
| Multi directional dotted with cross | x-.-x | x-…-x | x-…-x |
| Multi directional dotted with circle | o-.-o | o-…-o | o-…-o |
Edges with text
| Edge type | length: 1 | length: 2 | length: 3 |
|---|---|---|---|
| Normal | – text — | – text ---- | – text ----- |
| Invisible | ~~~ | na | na |
| Normal with arrow | – text --> | – text —> | – text ----> |
| Normal with cross | – text --x | – text —x | – text ----x |
| Normal with circle | – text --o | – text —o | – text ----o |
| Thick | == text === | == text ==== | == text ===== |
| Thick with arrow | == text ==> | == text ===> | == text ====> |
| Thick with cross | == text ==x | == text ===x | == text ====x |
| Thick with circle | == text ==o | == text ===o | == text ====o |
| Dotted | -. text .- | -. text …- | -. text …- |
| Dotted with arrow | -. text .-> | -. text …-> | -. text …-> |
| Dotted with cross | -. text .-x | -. text …-x | -. text …-x |
| Dotted with circle | -. text .-o | -. text …-o | -. text …-o |
| Multi directional with arrow | <-- text --> | <-- text —> | <-- text ----> |
| Multi directional with cross | x-- text --x | x-- text —x | x-- text ----x |
| Multi directional with circle | o-- text --o | o-- text —o | o-- text ----o |
| Multi directional thick with arrow | <== text ==> | <== text ===> | <== text ====> |
| Multi directional thick with cross | x== text ==x | x== text ===x | x== text ====x |
| Multi directional thick with circle | o== text ==o | o== text ===o | o== text ====o |
| Multi directional dotted with arrow | <-. text .-> | <-. text …-> | <-. text …-> |
| Multi directional dotted with cross | x-. text .-x | x-. text …-x | x-. text …-x |
| Multi directional dotted with circle | o-. text .-o | o-. text …-o | o-. text …-o |
© Mermaid Chart 2024