Vloam Mermaid

Docs

Start here with Mermaid

Learn what Mermaid is, how this editor works, and draw your first small diagram in minutes.

Scroll to zoom · drag to pan

Mermaid turns plain text into diagrams. You write a few lines. The editor draws boxes, arrows, and labels for you.

You do not need a design tool. You need a clear story: who acts, what happens next, and where the path ends.

How this editor works

  • Type on the left. The preview updates on the right.
  • Your draft stays in this browser. Nothing is uploaded unless you share a URL yourself.
  • Use Templates for a ready start. Use the cheatsheet when you forget a keyword.

The first line of every diagram names the type. That word tells Mermaid which rules to follow.

Your first diagram

Paste this into the editor:

flowchart TD
  Start([Begin]) --> Decide{Ready?}
  Decide -->|No| Prep[Gather inputs]
  Prep --> Decide
  Decide -->|Yes| Draw[Render]
  Draw --> Done([Done])

Read it top to bottom:

  1. flowchart TD means “flow chart, top to bottom”.
  2. Each line is a step or a link between steps.
  3. {Ready?} is a decision. |Yes| and |No| label the branches.

Change the words inside the boxes. Keep the arrows. The shape of the chart stays. The story becomes yours.

What to learn next

Start with Flowcharts if you map a process. Use Sequence diagrams for “who talks to whom”. Use Class and State when you model software structure or life cycles.

When the preview fails, open Fix common errors. Most problems are one missing keyword or one unclosed quote.