Mermaid Editor

Create and preview text-based Mermaid.js diagrams in real time.

Local RendererLocal

Mermaid Code

Diagram Preview

Renderer idle. Type some Mermaid syntax to see the magic.

Why sketch visual code logic and Mermaid.js diagrams here?

Textual diagrams allow devs to export architecture and exchange Sequence, Gantt or Git Graphs over any corporate document, saving very expensive licensing on office suites.

Local Vector Design, Locally Erased

The hierarchical structure of your software never cascades into third-party databases or telemetry. Interpreting relational edges to native SVG layout happens safely off-grid.

What this tool does

This page gives you a quick place to write and preview Mermaid syntax so diagrams are easier to draft, refine and share during documentation or planning work.

Renders Mermaid.js diagrams in real time as you write the source text so you can see the result without leaving the browser.
Supports flowcharts, sequence diagrams, class diagrams, Gantt charts, entity-relationship diagrams and more.
Provides a lightweight alternative to installing Mermaid tooling locally when you just need to draft, test or share a quick diagram.

How to use it

1
Write or paste Mermaid diagram syntax into the editor.
2
Watch the preview update in real time as you type.
3
Adjust the diagram until the layout and content match what you intend to communicate.
4
Copy the source for use in a Markdown file, repository, wiki or documentation page that supports Mermaid rendering.

Example

A developer drafts a sequence diagram to explain an OAuth flow for a design review, writes the Mermaid syntax and confirms the rendering before pasting the source into the pull request description.

sequenceDiagram
  Client->>Auth: POST /token
  Auth-->>Client: access_token

Rendered sequence diagram showing the token request and response arrows between participants.

Use cases

Drafting architecture and workflow diagrams for documentation.
Testing Mermaid syntax before pasting it into a repo or wiki.
Reviewing quick sequence or flow diagrams during technical discussions.

Common mistakes

Using a diagram type that does not fit the content

Mermaid has specific diagram types for specific needs. Forcing a flowchart to describe a sequence of events works, but a sequence diagram is clearer and easier to read.

Over-complicating the diagram

Diagrams that try to capture everything become hard to read. Focus on the most important flow or relationship and split complex diagrams into smaller ones.

Forgetting that Mermaid rendering varies by platform

GitHub, GitLab, Notion and other tools each support a slightly different subset of Mermaid diagram types and features. Test in the target platform.

FAQ

Which diagram types does Mermaid support?

Flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, pie charts, git graphs and more depending on the Mermaid version.

Can I export the diagram as an image?

Mermaid renders to SVG in the preview. Exporting as PNG or SVG file depends on the specific tool or copy-paste approach.

Does GitHub render Mermaid in Markdown files?

Yes, GitHub natively renders Mermaid diagrams in Markdown files using fenced code blocks with the mermaid language identifier.

Is diagram source uploaded anywhere?

No. Rendering happens locally in the browser.

Can I use this for architecture documentation?

Yes. Mermaid is widely used for lightweight architecture diagrams, flow documentation and sequence modelling in repositories and wikis.

Privacy and security

Diagram source stays in the browser while you edit and preview it.
No diagram text is uploaded for rendering.
That is useful for internal system design, roadmap notes or unreleased architecture work.

Related tools

Related tools for the next step in the same workflow:

Markdown Previewer HTML -> Markdown Converter Diff Checker

Next step

Draft the diagram locally, then continue into markdown or diff tools if the documentation workflow needs another step.