Markdown Mermaid Diagram Preview

Write a Mermaid diagram and see it rendered live in your browser, then copy it as a Markdown code fence or export it as SVG/PNG for platforms that can't render Mermaid. Free, no signup.

Mermaid diagram source

flowchart TD
    A[Start] --> B{Ready to deploy?}
    B -- Yes --> C[Run tests]
    B -- No --> D[Fix issues]
    C --> E{Tests pass?}
    E -- Yes --> F[Deploy to production]
    E -- No --> D
    D --> B

Examples:

Rendered diagram

Loading renderer…

Markdown Mermaid Diagram Preview

Mermaid lets you describe flowcharts, sequence diagrams, ER diagrams, Gantt charts, and more as plain text — a diagram-as-code convention that GitHub, GitLab, and Obsidian all render automatically when it's wrapped in a ```mermaid fenced code block. The catch: if the syntax is wrong, you usually don't find out until you've already committed the file and refreshed the page on the platform that renders it. This tool renders your diagram live in the browser as you type — using the same underlying mermaid.js engine those platforms use — so you can catch syntax errors immediately, and export a static SVG or PNG image for the many places (Slack, Jira, Confluence, Word, email) that don't render Mermaid at all.

Syntax basics

Every diagram starts with a keyword declaring its type, followed by the diagram body. A basic flowchart looks like this:

flowchart TD
    A[Start] --> B{Ready to deploy?}
    B -- Yes --> C[Run tests]
    B -- No --> D[Fix issues]
    C --> E[Deploy]

The eight buttons above the input load a working starter template for a common diagram type — flowchart, sequence, class, state, entity-relationship, Gantt, pie, and user journey — but this tool isn't limited to those eight. Any diagram type mermaid.js supports (git graphs, mind maps, timelines, quadrant charts, and more) will render here too, since it's the same rendering engine, not a curated subset.

Exporting for the platform you're actually targeting

Three export options, because "does this platform render Mermaid at all" has three different answers depending on where you're pasting:

Copy Markdown fence — wraps your source in ```mermaid ... ``` for platforms that render it natively: GitHub, GitLab, and Obsidian.
Download SVG — a crisp, infinitely scalable vector image for wikis, docs sites, or anywhere that accepts an image upload but not live Mermaid syntax.
Download PNG — a universal raster fallback (rendered at 2x scale for a sharp result on high-DPI screens) for the platforms that need a plain image: Slack messages, Jira and Confluence pages, Word documents, and HTML email, none of which execute the JavaScript a live Mermaid render needs.

Renderer support — be honest about it

Getting valid Mermaid syntax doesn't mean every place you might paste it will draw the diagram:

GitHub renders ```mermaid fenced blocks natively in READMEs, issues, PRs, and wikis (supported since 2022) — no configuration needed.
GitLab renders Mermaid natively too, in project READMEs, issues, merge requests, and wikis.
Obsidian renders Mermaid natively out of the box (bundled, not a community plugin) in both Live Preview and Reading View.
Notion does not auto-render a ```mermaid fence the way GitHub does — it shows as a plain code block, exactly as documented by our own Markdown → Notion tool. Render it here and paste in the exported image instead.
Confluence needs a marketplace add-on for Mermaid rendering — there's no built-in support in either Cloud or Server/Data Center.
Jira has no Mermaid support in its wiki markup at all, in any version.
Slack, Word (.docx), and HTML email render nothing — as our own Markdown → Slack, Markdown → Word (.docx), and Markdown → Email HTML tools already document, a Mermaid fence just becomes a plain-text code block there, since none of them run JavaScript. This is exactly the gap the SVG/PNG export above is for.
MkDocs (Material theme) needs Mermaid support explicitly wired up via pymdownx.superfences custom fences in mkdocs.yml — it's off by default. Docusaurus needs the official @docusaurus/theme-mermaid theme enabled, also off by default. Sphinx needs the sphinxcontrib-mermaid extension.

Test on your actual target platform before relying on it — and remember the version of mermaid.js a given platform has integrated can lag behind this tool's, so an exotic or very recently added diagram type or syntax feature might render here but not (yet) on GitHub or GitLab.

Known limitations

Limitation	Detail
HTML inside node labels	This preview runs Mermaid with its `strict` security level, which escapes raw HTML tags typed inside node labels rather than rendering them. If your diagram intentionally relies on HTML tags (e.g. `<br/>` for a manual line break) inside a label and your target platform allows it, this preview may look slightly different there.
PNG is a fixed-scale raster	The PNG export is rendered once at 2x scale — good for chat, docs, and slides, but it won't scale up cleanly beyond that the way the SVG export will. Prefer SVG wherever the target accepts it.
Very large diagrams	Extremely large or deeply nested diagrams can render slowly (or hit Mermaid's own internal node/edge limits) entirely in your browser, with no server-side fallback.

Common use cases

README architecture diagrams — draw a system or data-flow diagram that stays in version control as text
Sequence diagrams — document an API call flow or an incident postmortem timeline
Entity-relationship diagrams — sketch a database schema alongside its migration docs
Gantt charts — a release or sprint plan that lives in the same repo as the code
Sharing a diagram somewhere that can't render Mermaid — export the SVG/PNG for a Slack message, Jira ticket, or Word doc

For a broader tour of diagramming options in Markdown (including Mermaid diagram types beyond the examples above), see our companion guide: Markdown Diagrams and Flowcharts: Complete Guide for Visual Documentation.

Related tools

Markdown Live Editor — write and preview your full document alongside your diagrams
Math Preview — another "preview non-native syntax before pasting" tool, for LaTeX math
Markdown Linter — check the rest of your document for style issues