Skip to content
Mermaid Studio Logo Mermaid Studio
Limited Time 40% off for early adopters — Get discount →

Your First Diagram

Last updated:

This guide walks you through creating your first Mermaid diagram with Mermaid Studio.

Create a Mermaid File

Section titled “Create a Mermaid File”

  1. Right-click on a folder in your project and select New > File

  2. Name it diagram.mmd (or use the .mermaid extension)

  3. The editor opens with a live preview panel

Write a Flowchart

Section titled “Write a Flowchart”

Type the following code:

flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Check installation]
    D --> A

As you type, you’ll see:

  • Syntax highlighting for keywords, punctuation, nodes and more
  • Code completion contextually relevant suggestions for flowchart syntax and element refererences as you type
  • Live preview updating automatically
  • Error detection for invalid syntax

Try Other Diagram Types

Section titled “Try Other Diagram Types”

Mermaid Studio supports more than 20 diagram types. Here are a few to try:

Sequence Diagram

Section titled “Sequence Diagram”
sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!

Pie Chart

Section titled “Pie Chart”
pie title Project Status
    "Complete" : 70
    "In Progress" : 20
    "Planned" : 10

Mindmap

Section titled “Mindmap”
mindmap
    root((Project))
        Planning
        Development
        Testing

Next Steps

Section titled “Next Steps”