Mermaid Diagram Editor

Create flowcharts, sequence diagrams, and more with Mermaid syntax. Live preview, export to PDF, and integrate seamlessly with markdown.

Try It Now

Edit the diagram code below and see live preview

Diagram Code
Live Preview

Yes

No

Start

Is it working?

Great!

Debug

Need more diagram types, themes, and advanced customization?

What is Mermaid?

Mermaid is a JavaScript-based diagramming tool that uses text-based definitions to create diagrams dynamically. Instead of drawing, you describe your diagram using simple syntax, and Mermaid renders it as SVG.

Mermaid integrates perfectly with markdown, making it ideal for documentation, README files, and technical writing. Just wrap your diagram code in a mermaid code block, and it renders automatically.

Supported Diagram Types

Flowchart

Process flows and decision trees

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

Sequence Diagram

Interactions between components

sequenceDiagram
    participant User
    participant API
    participant DB
    User->>API: Request
    API->>DB: Query
    DB-->>API: Data
    API-->>User: Response

Class Diagram

Object-oriented structures

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +fetch()
    }
    Animal <|-- Dog

State Diagram

State machines and transitions

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing: Start
    Processing --> Complete: Success
    Processing --> Error: Failure
    Complete --> [*]
    Error --> Idle: Retry

Entity Relationship

Database schemas

erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains
    PRODUCT ||--o{ LINE_ITEM : "ordered in"
    USER {
        int id PK
        string email
        string name
    }

Gantt Chart

Project timelines

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
    Research    :a1, 2024-01-01, 30d
    Design      :a2, after a1, 20d
    section Phase 2
    Development :a3, after a2, 60d
    Testing     :a4, after a3, 14d

Pie Chart

Data distribution

pie title Browser Market Share
    "Chrome" : 65
    "Safari" : 19
    "Firefox" : 10
    "Edge" : 4
    "Other" : 2

Git Graph

Branch and merge visualization

gitGraph
    commit
    branch feature
    checkout feature
    commit
    commit
    checkout main
    merge feature
    commit

Mind Map

Hierarchical idea mapping

mindmap
  root((Central Idea))
    Topic A
      Subtopic 1
      Subtopic 2
    Topic B
      Subtopic 3
    Topic C

Timeline

Chronological events

timeline
    title Project History
    2023 : Project Started
         : Initial Design
    2024 : Beta Launch
         : User Testing
    2025 : Public Release

Quadrant Chart

Four-quadrant analysis

quadrantChart
    title Prioritization Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Do First
    quadrant-2 Schedule
    quadrant-3 Delegate
    quadrant-4 Eliminate
    Task A: [0.7, 0.8]
    Task B: [0.3, 0.6]
    Task C: [0.8, 0.3]

User Journey

User experience mapping

journey
    title User Onboarding Journey
    section Discovery
      Search: 5: User
      Visit Site: 4: User
    section Signup
      Create Account: 3: User
      Verify Email: 2: User
    section First Use
      Tutorial: 4: User
      First Task: 5: User

C4 Context Diagram

System architecture

C4Context
    title System Context Diagram
    Person(user, "User", "A user of the system")
    System(app, "Application", "Main application")
    System_Ext(api, "External API", "Third party service")
    Rel(user, app, "Uses")
    Rel(app, api, "Calls")

Why Use Mermaid in Markdown Studio?

Live Preview

See your diagrams render in real-time as you type. No need to compile or refresh.

PDF Export

Export your documents with embedded diagrams to PDF for sharing and printing.

Theme Support

Diagrams automatically adapt to light and dark themes for consistent appearance.

Quick Insert

Use the Insert menu or slash commands to quickly add diagram templates.

How to Create a Mermaid Diagram

  1. Open Markdown Studio — Click "Start Creating Diagrams" above or navigate to the editor.
  2. Create a mermaid code block — Type three backticks followed by "mermaid"
    ```mermaid
  3. Write your diagram code — Use the syntax for your chosen diagram type.
  4. Close the code block — Add three closing backticks.
  5. See the result — The preview pane shows your rendered diagram instantly.

Frequently Asked Questions

Is Mermaid syntax hard to learn?

Mermaid uses intuitive, human-readable syntax. Most users can create basic flowcharts within minutes. The syntax is consistent across diagram types, so learning one makes others easy to pick up.

Can I style my Mermaid diagrams?

Yes! Mermaid supports custom styling through theme configuration and inline styles. You can change colors, fonts, and shapes to match your documentation style.

Do diagrams export to PDF?

Absolutely. When you export your markdown document to PDF, all Mermaid diagrams are rendered as high-quality vector graphics that scale perfectly.

Can I use Mermaid diagrams in GitHub?

Yes! GitHub natively supports Mermaid in markdown files. Any diagrams you create in Markdown Studio will render correctly when pushed to GitHub.

Start Creating Diagrams

Open Markdown Studio and bring your ideas to life with professional diagrams.