TryMermaid

Mermaid embed and badge generator

Paste a diagram and get everything you need to put it somewhere else: a README block with an "Open in TryMermaid" badge, a Notion embed link, an iframe and a web component. Free, and links never expire.

flowchart LR
    Diagram --> README
    Diagram --> Notion
    Diagram --> Website
Loading the tool…

How to do it

  1. Step 1

    Paste your diagram

    Paste your Mermaid code into the box above.

  2. Step 2

    Choose the look

    Pick a theme, the widget appearance, the height and a badge style.

  3. Step 3

    Copy a snippet

    Copy the README block, Notion link, iframe or web component.

  4. Step 4

    Paste it

    Paste it into your README, Notion page or website.

Why a badge

A diagram in a README is code, so it renders on GitHub and can be reviewed in a pull request. The badge underneath gives readers a one-click way to open that exact diagram in an editor, edit it, and suggest a change.

Live embeds

The embed widget shows the live diagram with pan and zoom, in light or dark chrome, and follows the theme you choose. Because the diagram travels in the link, there is no account to keep and nothing to expire.

What this does not do

  • Very large diagrams make very long links; some platforms cap URL length at about 8,000 characters.
  • Embeds are read-only; the badge opens an editable copy, which never changes the original.

Frequently asked questions

How do I add a Mermaid diagram to a GitHub README?

Copy the README snippet. It contains the diagram as a ```mermaid block, which GitHub and GitLab render natively, plus an "Open in TryMermaid" badge linking to an editable copy, so readers can tweak the diagram without cloning the repository.

How do I embed a diagram in Notion?

Copy the Notion embed link, type /embed in a Notion page, and paste it. Notion shows the live diagram with pan and zoom. Notion's own Mermaid code block also works, but shows the code by default; the embed shows only the diagram.

Where is the diagram stored?

The diagram is stored in the link itself, compressed in the part after the #, so nothing is saved on a server and the link works forever. Change the diagram and you get a new link.

Iframe or web component?

Use the iframe for any page that accepts HTML: Confluence, WordPress, a docs site. The web component is lighter and keeps the code in your page, so it suits sites you build yourself.

More Mermaid tools

All tools