Mermaid Live Editor: Step-by-Step Guide to Creating Diagrams

The Mermaid Live Editor at mermaid.live is the most popular tool for creating Mermaid diagrams in a browser. It is free. It requires no account. With 14,800 monthly searches according to DataForSEO in 2026, it is where developers, technical writers, and software architects go to prototype flowcharts, sequence diagrams, and Gantt charts without installing anything on their machines or configuring a single setting in any preferences menu. This guide covers creating your first diagram, navigating the interface, exporting results, sharing via URL, and understanding when a desktop viewer makes more sense than the Mermaid Live Editor for your daily documentation workflow. For offline rendering, MacMD Viewer is a native macOS Markdown viewer ($9.99, SwiftUI, 2 MB) that does not require a browser or internet connection to display Mermaid diagrams.

TL;DR: Go to mermaid.live. Write syntax on the left. See the rendered diagram on the right. Export as SVG or PNG. Share via URL. For local .md files containing Mermaid diagrams, use MacMD Viewer instead — it renders everything offline without uploading anything.

What Is the Mermaid Live Editor?

The Mermaid Live Editor is a free, open-source browser application at mermaid.live, maintained by the Mermaid.js team. It provides a split-pane interface: write Mermaid syntax on the left panel, see the rendered diagram instantly on the right panel. No account registration. No software download. No configuration files whatsoever. Just open the URL. The editor runs entirely in your browser and supports every single diagram type that Mermaid.js offers, from simple flowcharts to complex entity-relationship models spanning dozens of interconnected tables and relationships.

Because the Mermaid Live Editor loads the latest version of the Mermaid.js library directly, it always supports the newest diagram types and syntax features. When the Mermaid.js team ships an update, the Live Editor reflects those changes immediately. This makes it the definitive reference tool for testing whether your syntax is valid before embedding it in documentation, GitHub READMEs, or local Markdown files.

How Do You Create Your First Diagram in the Mermaid Live Editor?

It takes under 60 seconds. Seriously. Follow these five steps to go from a completely blank canvas to a fully rendered, exportable flowchart inside the Mermaid Live Editor.

Step 1: Open mermaid.live

Navigate to mermaid.live in any modern browser — Chrome, Firefox, Safari, or Edge. The editor loads instantly with a default example diagram already rendered in the preview pane on the right side.

Step 2: Clear the Default Code

Select all text in the left editor panel and delete it. Done. You now have a blank canvas ready for your own diagram syntax, and the preview pane on the right side of the screen will show absolutely nothing until you type valid Mermaid code that the rendering engine can parse and display as a visual diagram.

Step 3: Write Your Diagram

Type your Mermaid syntax. The preview updates in real-time as you type each character. Here is a simple flowchart to get started:

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

Paste that code. The Mermaid Live Editor parses the syntax and renders a top-down flowchart with a start node, a diamond-shaped decision node, and two outcome paths that branch based on the condition you specified in the decision diamond. Every change you make appears instantly. No save button. No compile step. No refresh.

Step 4: Try a Sequence Diagram

Switch diagram types by changing the first keyword. Replace the flowchart code with a sequence diagram:

sequenceDiagram
    Alice->>Bob: Hello Bob
    Bob-->>Alice: Hi Alice
    Alice->>Bob: How are you?
    Bob-->>Alice: Great, thanks!

The preview immediately shows a sequence diagram with two participants exchanging messages. Solid arrows represent requests and dashed arrows represent responses. For the full syntax reference, see our Mermaid sequence diagram guide.

Step 5: Try a Gantt Chart

Gantt charts are another popular diagram type in the Mermaid Live Editor. Paste this example to see a project timeline:

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Planning
    Requirements    :a1, 2026-01-01, 14d
    Design          :a2, after a1, 10d
    section Development
    Implementation  :b1, after a2, 30d
    Testing         :b2, after b1, 14d

The rendered Gantt chart shows task dependencies, durations, and sections with color-coded bars representing each phase of the project timeline from start to finish. That is the pattern. Change the first keyword. The rendering engine adapts automatically. For flowchart-specific syntax details, see our Mermaid flowchart syntax reference.

How Do You Export and Share Diagrams from the Mermaid Live Editor?

Three export methods cover every use case: SVG for scalable vector graphics, PNG for raster images at fixed resolution, and URL sharing where anyone with the link sees your exact diagram without needing any tool installed.

The export buttons sit in the toolbar above the preview pane. Click the SVG button to download a vector file that scales to any size without losing quality — ideal for documentation, presentations, and print. Click the PNG button for a raster image at fixed resolution — useful for embedding in platforms that do not support SVG, such as Slack messages or email.

URL sharing works differently here. No server stores your content. The entire diagram syntax encodes directly in the URL query string itself, which means every character of your Mermaid code lives inside the link as a compressed, base64-encoded parameter that the recipient’s browser decodes and renders locally when they open it. Clever. Your diagrams remain accessible as long as the mermaid.live site is running, and absolutely nobody stores your intellectual property on any remote server or cloud infrastructure.

For embedding in documentation, copy the raw Mermaid syntax from the editor and paste it into ```mermaid code fences in your Markdown files. GitHub renders these natively, and desktop tools like MacMD Viewer display them locally without any internet connection. See our online Mermaid diagram tools roundup for more embedding options.

What Configuration Options Does the Mermaid Live Editor Offer?

The Mermaid Live Editor includes a configuration panel that lets you customize the appearance and behavior of your rendered diagrams. These settings apply instantly to the preview without modifying your diagram syntax.

Themes. Four built-in themes ship with the editor: default (neutral gray), dark (dark background with light text), forest (green tones), and neutral (minimal styling). The theme dropdown in the config panel switches between them. Each theme changes colors, backgrounds, and line styles across all diagram types.

Direction. Flowcharts and some other diagram types support direction overrides: TD (top-down), LR (left-right), BT (bottom-top), and RL (right-left). Change the direction keyword in your syntax to control layout flow. The Mermaid Live Editor re-renders the diagram immediately when you switch directions.

Config JSON. Advanced users can pass a JSON configuration object that controls font sizes, curve styles, padding, and rendering behavior. The config tab in the editor accepts raw JSON following the Mermaid.js configuration schema. This is the same configuration format used by VS Code extensions and other integrations.

Pan and zoom. Large diagrams benefit from the built-in pan and zoom controls. Scroll to zoom in and out. Click and drag to pan across the canvas. These controls help when working with complex flowcharts or sequence diagrams that extend beyond the visible preview area inside the Mermaid Live Editor window.

What Are the Limitations of the Mermaid Live Editor?

Every tool has tradeoffs. The Mermaid Live Editor excels at rapid prototyping and quick syntax verification, but it has constraints that matter significantly for certain professional workflows and enterprise documentation pipelines that require offline access, version control integration, or team collaboration capabilities.

• No offline access. The editor requires an internet connection. It is a web application hosted at mermaid.live with no installable offline mode or progressive web app support.
• No file system integration. You cannot open local .md files directly. The editor only accepts syntax pasted or typed into the left panel.
• No collaboration features. For real-time team editing with version history, you need Mermaid Chart, the commercial platform built by the same team. See our Mermaid Chart Online guide for details.
• Large diagram performance. Diagrams with hundreds of nodes can slow down the real-time preview. The browser rendering engine struggles with extremely complex layouts.
• No version history. Every edit overwrites the previous state. There is no undo history beyond the browser’s built-in text undo (Cmd+Z / Ctrl+Z) in the editor panel.

For local .md files containing Mermaid diagrams, a desktop viewer renders them without uploading anything to a server. MacMD Viewer ($9.99) opens any Markdown file and renders every Mermaid diagram instantly on Mac. See our Mermaid viewer comparison for more desktop alternatives.

When Should You Use the Mermaid Live Editor vs a Desktop Tool?

The right tool depends on what you are trying to accomplish. Here is a decision guide based on workflow:

• Quick prototype or syntax check — use the Mermaid Live Editor. Open a browser tab, paste code, verify the output, and export. Fastest path from idea to diagram.
• Local documentation with Mermaid diagrams — use MacMD Viewer or VS Code. Both render Mermaid in local files without uploading content.
• Team collaboration on diagrams — use Mermaid Chart. Real-time editing, version history, and integrations with developer toolchains.
• Repository documentation — use GitHub or GitLab. Mermaid renders natively in .md files.
• Offline or air-gapped environment — use MacMD Viewer (Mac, $9.99). No internet required. Native macOS rendering.

For a comprehensive comparison of all online Mermaid tools, read our Mermaid diagram online roundup. For Mac-specific Markdown viewing, see the complete Markdown viewer Mac guide.

Conclusion

The Mermaid Live Editor is the fastest way to create, preview, export, and share Mermaid diagrams. Open mermaid.live, write your syntax, and see results instantly. Export as SVG or PNG. Share via URL. For local Markdown files containing Mermaid diagrams, use MacMD Viewer to render everything offline on Mac without uploading anything to a remote server.

Frequently Asked Questions