Embeddable Mermaid Diagrams

I needed Mermaid diagrams in my frontend, but getting them to work across environments and frameworks was a pain. So I built the easiest way to add Mermaid.js diagrams to any site using a simple iframe—no build tools, no config, just paste and go.

What Is It?#

A hosted Mermaid renderer. You write the diagram, it gives you an iframe. It supports all Mermaid types—flowcharts, sequence diagrams, class diagrams, Gantt charts, ER diagrams—and includes pan, zoom, and theme support.

How It Works#

The diagram above was rendered using the following code:

<embed
  title="Mermaid Diagram"
  width="100%"
  height="500"
  class="rounded"
  src="https://mermaid.brew.build/#graph%20TD%0A%20%20A%5BUser's%20Website%20or%20App%5D%20--%3E%7Ciframe%20embed%7C%20B%5BMermaid%20Diagram%20Embed%20App%5D%0A%20%20B%20--%3E%7CParses%20Mermaid%20code%7C%20C%5BMermaid.js%20Renderer%5D%0A%20%20C%20--%3E%7CRenders%20SVG%2FPNG%7C%20D%5BInteractive%20Diagram%20Display%5D%0A%20%20D%20--%3E%7CDisplayed%20in%20iframe%7C%20A%0A%20%20B%20-.->%7CAPI%20optional%7C%20C"
/>

URL Encoding Mermaid Syntax#

To properly include your Mermaid diagram in the URL, you’ll need to URL-encode your Mermaid code. Here’s how:

Start with your Mermaid code:

graph TD
  A[Start] --> B{Is it?}
  B -->|Yes| C[OK]
  C --> D[Rethink]
  D --> B
  B ---->|No| E[End]

Remove indentation and newlines (optional but recommended):

graph TD A[Start] --> B{Is it?} B -->|Yes| C[OK] C --> D[Rethink] D --> B B ---->|No| E[End]

URL-encode the string (JavaScript example):

const mermaidCode =
  'graph TD A[Start] --> B{Is it?} B -->|Yes| C[OK] C --> D[Rethink] D --> B B ---->|No| E[End]';
const encoded = encodeURIComponent(mermaidCode);
const url = `https://mermaid.brew.build/embed?code=${encoded}`;

Resulting URL:

https://mermaid.brew.build/embed?code=graph%20TD%20A%5BStart%5D%20--%3E%20B%7BIs%20it%3F%7D%20B%20--%3E%7CYes%7C%20C%5BOK%5D%20C%20--%3E%20D%5BRethink%5D%20D%20--%3E%20B%20B%20---%3E%7CNo%7C%20E%5BEnd%5D

URL Parameters#

code: (Required) URL-encoded Mermaid diagram code
theme: (Optional) Force light/dark theme (light or dark)
width: (Optional) Iframe width (e.g., 800px or 100%)
height: (Optional) Iframe height (e.g., 600px or 100%)

Example with all parameters:

https://mermaid.brew.build/embed?code=graph%20TD%20A%5BStart%5D%20--%3E%20B%5BEnd%5D&theme=dark&width=100%25&height=500px

Contributing#

Ccontributions are welcome! Please read our Contributing Guide for details on our code of conduct and the process for submitting pull requests.

Source Code:

trentbrew

mermaid.brew.build

Waiting for api.github.com...

00K

Waiting...