mermaid-embed — Drop-in Mermaid widget for any webpage

Why mermaid-embed

Render diagrams without the baggage

Built for blog posts, dashboards, docs, and any HTML page where you don't want to wire up a full framework just to show a flowchart.

Tiny bundle

~2.8 kB of widget code. Mermaid itself loads from CDN on demand, so it never bloats your initial page load.

Shadow DOM scoped

Custom CSS targets only the diagram — your page styles can't leak in, and the diagram can't leak out. No !important wars.

Drop in, done

One script tag, mark any element with .mermaid-embed, write Mermaid. Works with React, Vue, Astro, plain HTML — any stack.

Install

Two ways to ship it

Use as a CDN script tag for static pages, or as an npm package in your bundler.

CDN recommended

<script src="https://unpkg.com/mermaid-embed/dist/mermaid-embed.iife.js"></script>

<div class="mermaid-embed" data-css=".node rect { fill: #eef; }">
  <script type="text/mermaid">
    graph TD
      A --> B
  </script>
</div>

npm

# install
npm install mermaid-embed

# import — side-effects auto-init any .mermaid-embed elements
import { render, autoInit } from 'mermaid-embed';

await render('#diagram', 'graph TD; A --> B', '.node rect { fill: #fce7f3; }');

Theming

Same diagram, three themes

Each card embeds the same Mermaid markdown — only the data-css changes. Shadow DOM keeps every diagram's styles isolated.

Default

Sunset

Midnight

Live playground

Try it right here

Edit the Mermaid source on the left — the diagram on the right re-renders through the same widget you'd embed on your site.

Example: