Mermaid for Beginners: From Zero to Diagram Hero in 10 Minutes

Okay, I'm going to let you in on a little secret.

Those fancy diagrams you see in technical documentation? The flowcharts in presentations? The architecture diagrams that make engineers look like they have their stuff together?

They're just text. Seriously.

What is Mermaid?

Mermaid is a way to create diagrams using simple text commands. Instead of dragging boxes around in PowerPoint (painful), you write something like this:

flowchart LR
    A[Start] --> B[Do Something]
    B --> C[Done!]

And boom — you get a beautiful flowchart. Magic.

Your first diagram in 60 seconds

Let's create a simple process flow. Open MermaidSnap and paste this:

flowchart TD
    Wake[Wake Up] --> Coffee[Make Coffee]
    Coffee --> Work[Start Working]
    Work --> Lunch[Lunch Break]
    Lunch --> Work2[Back to Work]
    Work2 --> Done[Go Home]

That's it. You just made a diagram. Notice how readable the code is? TD means "top to down" — the diagram flows vertically.

The basic building blocks

Every Mermaid diagram has two parts:

1. Nodes — the boxes (A, B, C, etc.)
2. Connections — the arrows between them (-->)

Different brackets give you different shapes:

• [text] — rectangle
• (text) — rounded rectangle
• (curly braces around text) — diamond (for decisions)
• ((text)) — circle

Try it yourself

The best way to learn is to experiment. Go to MermaidSnap, pick a template, and start changing things. Break it. Fix it. That's how you learn.

Welcome to the world of diagrams. You're going to love it here.