Creating Diagrams

Mermaid basics

Mermaid uses simple text to create diagrams. Each diagram starts with a type declaration.

Flowcharts

The most common diagram type. Perfect for processes and workflows.

flowchart TD
    Start --> Process --> End

Direction options:

• TD or TB — Top to bottom
• LR — Left to right
• BT — Bottom to top
• RL — Right to left

Shapes

Different brackets create different shapes:

• [text] — Rectangle
• (text) — Rounded rectangle
• (curly braces around text) — Diamond
• ((text)) — Circle

Connections

Connect nodes with arrows:

• --> — Arrow
• --- — Line without arrow
• -.->- — Dotted arrow
• ==>> — Thick arrow

Adding labels

Add text to your connections:

A -->|Yes| B
A -->|No| C

Other diagram types

MermaidSnap supports many diagram types:

• Sequence diagrams — Show interactions between systems
• Class diagrams — Show code structure
• State diagrams — Show states and transitions
• ER diagrams — Show database relationships
• Gantt charts — Show project timelines
• Pie charts — Show proportions
• Mindmaps — Organize ideas