Skip to content
Mermaid Studio Logo Mermaid Studio

    Your First Diagram

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

    Create a Mermaid File

    Section titled “Create a Mermaid File”

    1. In your project, create a new file:

      • Right-click on a folder → New → File
      • Name it my-diagram.mmd or my-diagram.mermaid

    2. The file will automatically open with Mermaid language support

    Write Your First Flowchart

    Section titled “Write Your First Flowchart”

    Type the following code in your new file:

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

    As you type, you’ll notice:

    • Syntax highlighting: Keywords like flowchart are colored, nodes have distinct colors
    • Code completion: Press Ctrl+Space (or ⌘+Space on macOS) for suggestions
    • Error detection: Invalid syntax is underlined with error messages

    Open the Live Preview

    Section titled “Open the Live Preview”

    To see your diagram rendered:

    1. Using the toolbar: Click the preview icon in the editor toolbar

    2. Using the menu: View → Tool Windows → Mermaid Preview

    3. Using the context menu: Right-click in the editor → Show Mermaid Preview

    The preview updates automatically as you edit your diagram.

    Preview Layout Options

    Section titled “Preview Layout Options”

    Choose your preferred preview layout:

    • Side-by-side: Editor on left, preview on right
    • Vertical split: Editor on top, preview on bottom
    • Preview only: Full-screen preview mode

    Configure the default layout in Settings → Tools → Mermaid Studio.

    Try Different Diagram Types

    Section titled “Try Different Diagram Types”

    Sequence Diagram

    Section titled “Sequence Diagram”
    sequenceDiagram
        participant Alice
        participant Bob
        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
                Requirements
                Timeline
            Development
                Frontend
                Backend
            Testing

    Export Your Diagram

    Section titled “Export Your Diagram”

    Once your diagram looks good:

    1. Open the preview panel
    2. Click the Export button in the preview toolbar
    3. Choose your format:
      • PNG: Raster image, great for documentation
      • SVG: Vector format, scalable for any size

    Use Mermaid in Markdown

    Section titled “Use Mermaid in Markdown”

    Mermaid Studio also works in Markdown files. Create a file named README.md:

    # My Project
    

    Here's the architecture:
    

    ```mermaid
    flowchart LR
        Client --> API --> Database
    ```

    The Mermaid code block will have full syntax highlighting and preview support.

    Next Steps

    Section titled “Next Steps”