⌘ K
Flowchart · sequence · class · state · gantt · ER

Markdown Mermaid Preview

Renders ```mermaid fenced blocks inside Markdown — flowcharts, sequence diagrams, class, state, Gantt, and ER charts.

Markdown Mermaid Preview
Blocks
2
found
Rendered
0
diagrams
Errors
0
clean
Source
169 B
loading
Theme
input · markdown + mermaid
diagrams · 2

Loading Mermaid…

Quick Start

How to render Mermaid

Wrap any Mermaid syntax in a code fence tagged 'mermaid' — diagrams render below.

  1. 01

    Fence with `mermaid`

    Triple-backtick mermaid → diagram block, end with another fence.

    Parsing runs through marked with GFM extensions enabled — tables, task lists, strikethrough, and fenced code blocks all match GitHub’s rendering.

    fenceGFMmarkedCommonMarklive
    lang · markdownmermaid · GFM
    ```mermaid
flowchart LR
  A --> B
```
    loaded · GFMGFM · ready
  2. 02

    Pick diagram type

    flowchart, sequenceDiagram, classDiagram, gantt, erDiagram, etc.

    Soft-break behaviour is configurable: by default a single newline becomes a space (CommonMark), toggle on for chat-style <br> insertion.

    typesoft-breaksoptionsconfiglive
    type · optionsflow · live
    sequenceDiagram
Alice->>Bob: Hi
    options applied · livelive
  3. 03

    Mermaid renders

    Diagrams render as SVG with the selected theme.

    The preview is scoped under a .mde class so its CSS doesn’t bleed into the rest of the page. Output HTML is whitespace-controlled for clean diffs.

    svgpreviewscoped CSSrenderstable
    svg · renderedrender · ready
    <svg>…</svg>
    rendered · liverendered
  4. 04

    Copy SVG

    Grab the raw SVG markup for blogs or embeds.

    Export covers both raw Markdown and rendered HTML; downloads stream as text/markdown or text/html via Blob + object URL.

    exportclipboard.md.htmlblob
    ✓ · exportedsvg · done
    ✓ Copied SVG
    shipped · ready to shipsuccess
Pro tips

Author Markdown that renders everywhere

GFM is the safe default

GitHub-Flavored Markdown is the de-facto baseline (tables, task lists, strikethrough). CommonMark is stricter but ubiquitous as a fallback.

Soft-break behaviour varies

A single newline is a space in CommonMark, a <br> in GFM. Toggle soft breaks when source matters.

Escape inside code fences

Backticks inside fenced blocks need a longer fence — three becomes four. Use ~~~ if your content has many backticks.

Anchors are slugified

GitHub lowercases, strips punctuation, and joins with hyphens. Duplicate headings get -1, -2 suffixes.

Tables need a header row

The dash row sets alignment (:---, :-:, ---:). Use Table Aligner for diff-friendly columns.

Front matter is YAML

Triple-dash blocks at the top of files are parsed by static-site generators. Use the Front-Matter Validator to catch syntax errors.

Related toolsGitHub PreviewMath PreviewEditorSyntax HighlighterMD to HTMLSnippet Runner
Use Cases

When to render Mermaid

Architecture, ops, planning.

Architecture diagrams

Sketch services and dependencies inline in docs. Render path uses marked with GFM extensions enabled (tables, task lists, strikethrough, autolinks), so what you preview matches what GitHub publishes bit-for-bit. Soft-break behaviour is configurable for chat-style vs prose Markdown.

GFM-compliant

Sequence flows

Document API request/response chains. Pairs cleanly with the Markdown Cheatsheet for syntax you can't quite remember — callout blocks, footnotes, definition lists. Output stays diff-friendly so style-only changes don't drown out real edits in PRs.

GitHub-perfect

ER models

Show database schema next to query examples. Cross-platform safe: anchors, code fences, and tables behave identically on GitHub, GitLab, Bitbucket, and Gitea. Heading-anchor slugs follow GitHub's lowercase-and-hyphenate rules so deep links survive a docs migration.

diff-friendly

RFCs

Embed decision flows in design docs. No server roundtrip — perfect for proprietary content you can't paste into a public tool. The full marked + GFM bundle ships with the page, so it works offline once loaded.

render-stable

Gantt charts

Plan releases inside the README. Front matter (YAML / TOML / JSON) passes through unchanged so static-site pipelines (Jekyll, Hugo, Astro, Eleventy) read it correctly. Pair with the Front-Matter Validator to catch syntax errors before deploy.

cross-platform

Onboarding

Visualise system flow for new hires. Output is reproducible: identical input always produces identical Markdown, so doc-generation scripts can rely on it for snapshot tests and embedded into release workflows.

SEO-friendly
FAQ

Frequently asked questions

The latest mermaid npm package, dynamically imported only when this tool loads.
Open the browser console — Mermaid logs parse errors. The most common is a missing diagram-type header.
Copy the SVG, paste into any vector tool, and re-export as PNG at any resolution.
Yes — every ```mermaid fence is rendered separately.
No — Mermaid runs locally in your browser.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!