mermaid-direction-cheat-sheet.md

mermaid-direction-cheat-sheet.md

Mermaid Graph Direction Cheat Sheet

Mermaid diagrams support different flow directions using the graph keyword followed by a direction specifier.

📌 Supported Directions

Keyword	Meaning	Layout Direction
TD	Top Down	Nodes flow Top → Down (default)
TB	Top Bottom (alias of TD)	Same as TD
LR	Left to Right	Nodes flow Left → Right
RL	Right to Left	Nodes flow Right → Left
BT	Bottom to Top	Nodes flow Bottom → Top

---

🔄 Visual Examples

graph TD

graph TD
    A[Start] --> B[Process] --> C[End]

Loading

graph LR

graph LR
    A[Start] --> B[Process] --> C[End]

Loading

graph RL

graph RL
    A[Start] --> B[Process] --> C[End]

Loading

graph BT

graph BT
    A[Start] --> B[Process] --> C[End]

Loading

---

📝 How to Use

In a Markdown file:

```mermaid graph LR A --> B ```

That's it!

---

Made for: Ed Burns