Mermaid Diagram Generator

Create Diagrams with Code or Visual Mode

A powerful tool for creating professional diagrams using Mermaid syntax. Build flowcharts, sequence diagrams, class diagrams, state diagrams, and more with real-time preview and export options.

FlowchartsSequence DiagramsClass Diagrams8 Diagram Types

Getting Started

The Mermaid Diagram Generator is a powerful tool for creating professional diagrams using the Mermaid declarative syntax. Whether you need to document system architectures, visualize workflows, or create technical documentation, this tool provides an intuitive interface for building complex diagrams.

Quick Start Steps:

Choose a diagram type from the Library sidebar
Start with a template or write your own Mermaid code in the editor
Preview your diagram in real-time on the right panel
Customize colors and styling through the Settings
Save your diagram or export it as PNG/SVG

Tip: You can switch between visual template selection and direct code editing. The live preview updates instantly as you type.

Supported Diagram Types

The tool supports eight different types of diagrams, each with its own Mermaid syntax and use cases. Templates are provided for each type to help you get started quickly.

Flowchart

Create process flows, decision trees, and workflows. Perfect for visualizing algorithms, business processes, and step-by-step procedures.

Sequence Diagram

Visualize interactions between systems and components over time. Ideal for documenting API calls, system communications, and user flows.

Class Diagram

Design object-oriented architectures and class relationships. Great for software design, system architecture, and documentation.

State Diagram

Model state machines and application workflows. Useful for understanding state transitions in applications and systems.

ER Diagram

Design entity-relationship models for databases. Essential for database design and data modeling projects.

Gantt Chart

Create project timelines and schedules. Perfect for project management, milestone tracking, and task planning.

Pie Chart

Visualize data as proportional segments. Great for showing distributions, statistics, and data breakdowns.

Git Graph

Visualize version control flows and branching strategies. Useful for documenting git workflows and repository history.

Editor Interface

The editor provides a split-screen interface with the Mermaid code editor on the left and a live preview on the right. This allows you to see your diagram updates in real-time as you write code.

Code Editor

Write and edit Mermaid syntax with a responsive code editor. Supports undo/redo and auto-save functionality.

Live Preview

View your rendered diagram instantly. Zoom in/out and toggle fullscreen for better visualization.

Library Sidebar

Access templates, saved diagrams, and diagram type selection from the collapsible sidebar.

Templates Library

The templates library provides starting points for each diagram type. Each template includes a basic structure that you can customize for your needs.

How to Use Templates:

Open the Library sidebar by clicking the sidebar toggle
Browse the available templates under "Templates"
Click on any template to load it into the editor
Modify the code to fit your specific needs
The template provides a starting point - customize as needed

Note: Templates are pre-configured examples. Clicking a template will replace your current code. Make sure to save your work before loading a new template.

Saving Diagrams

Your diagrams are automatically saved to your browser's local storage, ensuring you don't lose your work. You can also manually save diagrams with custom names for easy organization.

Manual Save

Click the save button in the toolbar to save your diagram. You'll be prompted to enter a name for your diagram.

Auto-Save

Enable auto-save in settings to automatically save changes as you type. Never lose your work again.

Managing Saved Diagrams:

View Saved: Click on any saved diagram in the Library sidebar to load it
Delete: Hover over a saved diagram and click the trash icon to delete it
Refresh: Use the refresh button to update the list after external changes

Export Options

Export your diagrams in multiple formats for use in various contexts. Both PNG and SVG exports maintain high quality and are ready for professional use.

PNG Export

Export as a high-resolution PNG image. Perfect for presentations, documents, and web use. Includes proper scaling for clear visibility.

SVG Export

Export as scalable vector graphics. Ideal for technical documentation, printing, and cases where scalability is important. Can be edited in vector graphics software.

Tip: SVG exports are recommended for documentation and print materials as they remain crisp at any size. Use PNG for web images and social media.

Settings

Customize your editor experience through the settings panel. Adjust appearance and behavior to match your preferences.

Auto-Save

Enable automatic saving of changes as you type. Your work is protected from browser crashes and accidental closures.

Theme

Switch between dark and light themes for the editor interface. The diagram preview adapts to maintain visibility.

Diagram Theme

The Mermaid renderer uses a dark theme by default with blue accents. Diagram colors can be customized through Mermaid configuration options in your code.

Mermaid Syntax Guide

Understanding Mermaid syntax is key to creating effective diagrams. Below are basic syntax patterns for each diagram type.

Flowchart Syntax:

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

Sequence Diagram Syntax:

sequenceDiagram
    participant A as Alice
    participant B as Bob
    
    A->>B: Message
    B-->>A: Response

Class Diagram Syntax:

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

Learn More: For complete syntax documentation, visit the official Mermaid.js documentation.

Keyboard Shortcuts

Speed up your workflow with these keyboard shortcuts available in the editor.

Save diagramCtrl + S

UndoCtrl + Z

RedoCtrl + Y

Zoom InCtrl + +

Zoom OutCtrl + -

FullscreenF11

Related Tools

Code Playground

Test and experiment with code snippets in multiple languages

Text Difference

Compare text and code differences with visual highlighting

GraphQL Generator

Generate GraphQL schemas and queries with visual tools

API Client

Test and debug APIs with a powerful REST client

← Back to Documentation Open Tool

Mermaid Diagram Generator

Create Diagrams with Code or Visual Mode

A powerful tool for creating professional diagrams using Mermaid syntax. Build flowcharts, sequence diagrams, class diagrams, state diagrams, and more with real-time preview and export options.

FlowchartsSequence DiagramsClass Diagrams8 Diagram Types

Getting Started

Quick Start Steps:

Choose a diagram type from the Library sidebar
Start with a template or write your own Mermaid code in the editor
Preview your diagram in real-time on the right panel
Customize colors and styling through the Settings
Save your diagram or export it as PNG/SVG

Tip: You can switch between visual template selection and direct code editing. The live preview updates instantly as you type.

Supported Diagram Types

The tool supports eight different types of diagrams, each with its own Mermaid syntax and use cases. Templates are provided for each type to help you get started quickly.

Flowchart

Create process flows, decision trees, and workflows. Perfect for visualizing algorithms, business processes, and step-by-step procedures.

Sequence Diagram

Visualize interactions between systems and components over time. Ideal for documenting API calls, system communications, and user flows.

Class Diagram

Design object-oriented architectures and class relationships. Great for software design, system architecture, and documentation.

State Diagram

Model state machines and application workflows. Useful for understanding state transitions in applications and systems.

ER Diagram

Design entity-relationship models for databases. Essential for database design and data modeling projects.

Gantt Chart

Create project timelines and schedules. Perfect for project management, milestone tracking, and task planning.

Pie Chart

Visualize data as proportional segments. Great for showing distributions, statistics, and data breakdowns.

Git Graph

Visualize version control flows and branching strategies. Useful for documenting git workflows and repository history.

Editor Interface

The editor provides a split-screen interface with the Mermaid code editor on the left and a live preview on the right. This allows you to see your diagram updates in real-time as you write code.

Code Editor

Write and edit Mermaid syntax with a responsive code editor. Supports undo/redo and auto-save functionality.

Live Preview

View your rendered diagram instantly. Zoom in/out and toggle fullscreen for better visualization.

Library Sidebar

Access templates, saved diagrams, and diagram type selection from the collapsible sidebar.

Templates Library

The templates library provides starting points for each diagram type. Each template includes a basic structure that you can customize for your needs.

How to Use Templates:

Open the Library sidebar by clicking the sidebar toggle
Browse the available templates under "Templates"
Click on any template to load it into the editor
Modify the code to fit your specific needs
The template provides a starting point - customize as needed

Note: Templates are pre-configured examples. Clicking a template will replace your current code. Make sure to save your work before loading a new template.

Saving Diagrams

Your diagrams are automatically saved to your browser's local storage, ensuring you don't lose your work. You can also manually save diagrams with custom names for easy organization.

Manual Save

Click the save button in the toolbar to save your diagram. You'll be prompted to enter a name for your diagram.

Auto-Save

Enable auto-save in settings to automatically save changes as you type. Never lose your work again.

Managing Saved Diagrams:

View Saved: Click on any saved diagram in the Library sidebar to load it
Delete: Hover over a saved diagram and click the trash icon to delete it
Refresh: Use the refresh button to update the list after external changes

Export Options

Export your diagrams in multiple formats for use in various contexts. Both PNG and SVG exports maintain high quality and are ready for professional use.

PNG Export

Export as a high-resolution PNG image. Perfect for presentations, documents, and web use. Includes proper scaling for clear visibility.

SVG Export

Export as scalable vector graphics. Ideal for technical documentation, printing, and cases where scalability is important. Can be edited in vector graphics software.

Tip: SVG exports are recommended for documentation and print materials as they remain crisp at any size. Use PNG for web images and social media.

Settings

Customize your editor experience through the settings panel. Adjust appearance and behavior to match your preferences.

Auto-Save

Enable automatic saving of changes as you type. Your work is protected from browser crashes and accidental closures.

Theme

Switch between dark and light themes for the editor interface. The diagram preview adapts to maintain visibility.

Diagram Theme

The Mermaid renderer uses a dark theme by default with blue accents. Diagram colors can be customized through Mermaid configuration options in your code.

Mermaid Syntax Guide

Understanding Mermaid syntax is key to creating effective diagrams. Below are basic syntax patterns for each diagram type.

Flowchart Syntax:

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

Sequence Diagram Syntax:

sequenceDiagram
    participant A as Alice
    participant B as Bob
    
    A->>B: Message
    B-->>A: Response

Class Diagram Syntax:

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

Learn More: For complete syntax documentation, visit the official Mermaid.js documentation.

Keyboard Shortcuts

Speed up your workflow with these keyboard shortcuts available in the editor.

Save diagramCtrl + S

UndoCtrl + Z

RedoCtrl + Y

Zoom InCtrl + +

Zoom OutCtrl + -

FullscreenF11

Mermaid Diagram Generator

Table of Contents

Getting Started

Quick Start Steps:

Supported Diagram Types

Flowchart

Sequence Diagram

Class Diagram

State Diagram

ER Diagram

Gantt Chart

Pie Chart

Git Graph

Editor Interface

Code Editor

Live Preview

Library Sidebar

Templates Library

How to Use Templates:

Saving Diagrams

Manual Save

Auto-Save

Managing Saved Diagrams:

Toolbar Actions

Save

Undo / Redo

Zoom

Fullscreen

Export

Settings

Export Options

PNG Export

SVG Export

Settings

Auto-Save

Theme

Font Size

Diagram Theme

Mermaid Syntax Guide

Flowchart Syntax:

Sequence Diagram Syntax:

Class Diagram Syntax:

Keyboard Shortcuts

Related Tools

Code Playground

Text Difference

GraphQL Generator

API Client

Mermaid Diagram Generator

Table of Contents

Getting Started

Quick Start Steps:

Supported Diagram Types

Flowchart

Sequence Diagram

Class Diagram

State Diagram

ER Diagram

Gantt Chart

Pie Chart

Git Graph

Editor Interface

Code Editor

Live Preview

Library Sidebar

Templates Library

How to Use Templates:

Saving Diagrams

Manual Save

Auto-Save

Managing Saved Diagrams:

Toolbar Actions

Save

Undo / Redo

Zoom

Fullscreen

Export

Settings

Export Options

PNG Export