TryMermaid

Markdown and Mermaid previewer

Paste a README or any Markdown file and see it rendered the way GitHub would, with every ```mermaid block drawn as a diagram. Catch broken diagrams before you push. Free and runs in your browser.

flowchart LR
    README[README.md] --> Preview{Renders?}
    Preview -->|Yes| Push([Push it])
Loading the tool…

How to do it

  1. Step 1

    Paste your Markdown

    Paste Markdown, or upload a README.md.

  2. Step 2

    Watch it render

    The preview renders as you type, with diagrams drawn in place.

  3. Step 3

    Check both themes

    Switch between light and dark to check both.

  4. Step 4

    Fix and push

    Fix any diagram that shows an error, then copy the Markdown back.

Why preview before pushing

GitHub only shows you a rendered README after you push, and a broken diagram shows up as a red error box on your project's front page. Previewing first, with the same Markdown flavour and stylesheet, catches that before anyone sees it.

Not just GitHub

The same syntax works in GitLab, Bitbucket, Azure DevOps wikis, Obsidian, Notion code blocks and most documentation generators, so a README that renders here will render in most places.

What this does not do

  • Relative links and images cannot resolve without a repository.
  • GitHub extras such as emoji shortcodes, mentions, issue references and math are not rendered.
  • GitHub may run a slightly different Mermaid version; very new syntax can render here but not there.

Frequently asked questions

What does it render?

GitHub-flavoured Markdown: headings with anchors, tables, task lists, strikethrough, autolinks, fenced code, GitHub alerts such as > [!NOTE] and > [!WARNING], and ```mermaid code blocks drawn as diagrams. It is styled with GitHub's own Markdown stylesheet, in light or dark.

Is it exactly what GitHub shows?

Very close, but not identical. GitHub runs its own Mermaid version and adds features this preview does not, such as emoji shortcodes, @mentions, issue links and math. Relative image links will not resolve here because there is no repository to resolve them against.

What if a diagram has an error?

The diagram shows the parser's error in place of the drawing, as GitHub does, so you can fix it before pushing. Open it in the validator for the exact line.

Is my README uploaded?

No. The Markdown is rendered in your browser. Raw HTML in it is sanitised, as GitHub sanitises it, so scripts never run.

More Mermaid tools

All tools