Mermaid Flowchart Syntax Tutorial

Master Mermaid flowchart syntax with this interactive guide. Learn node shapes, connections, and advanced features.

Every Mermaid flowchart starts with a direction declaration. Use `flowchart TD` for top-down, `flowchart LR` for left-right, `flowchart BT` for bottom-top, or `flowchart RL` for right-left.

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

Live Editor

Mermaid Visualizer
Mermaid Code
Loading Monaco Editor...
Preview