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 Code
Loading Monaco Editor...

More Tutorials

Mermaid Sequence Diagram Guide

Learn to create professional sequence diagrams with Mermaid. Cover participants, messages, and advanced features.

Mermaid Gantt Chart Tutorial

Create professional project timelines with Mermaid Gantt charts. Learn tasks, dependencies, and scheduling.

Mermaid ER Diagram Tutorial — Entity-Relationship Syntax Guide

Design database schemas visually with Mermaid ER diagrams. Learn entity declarations, attribute types, relationships, and cardinality notation.