Agentic Mermaid
Menu

Browser demo

One script tag, no bundler: Agentic Mermaid rendering a diagram live in your browser.

Your browser rendered the diagram below from one <script src> tag. The ESM entry would need a bundler or an import map; this file needs neither, and the diagram source never leaves the page.

<script
  src="https://unpkg.com/agentic-mermaid@0.3.0/dist/browser.global.js"
  integrity="sha384-YcMQSsCGfs4ZfuWkYNET2L2z0f+YNPJftR5krUhTWrHDQ9cUcsRRp5ux5zbBYKd9"
  crossorigin="anonymous"></script>
<script>
  const svg = agenticMermaid.renderMermaidSVG(source, {
    style: 'zinc-dark',
    security: 'strict',
  })
  const parsed = new DOMParser().parseFromString(svg, 'image/svg+xml')
  if (parsed.querySelector('parsererror') || parsed.documentElement.localName !== 'svg') {
    throw new Error('renderer returned invalid SVG')
  }
  document.querySelector('#diagram').replaceChildren(
    document.importNode(parsed.documentElement, true),
  )
</script>

The version in that URL is pinned because dist/browser.global.js ships from v0.3.0. Earlier releases are ESM-only, so the same URL without a version answers 404. This page serves the identical artifact from its own origin instead of unpkg, so the demo keeps working offline and makes no third-party request.

Keep strict rendering and parsed-node insertion for authored or user-provided source. For a strict Content Security Policy, self-host the bundle under script-src 'self', or allow the pinned CDN origin and authorize the initializer with an external file, nonce, or hash. This demo uses a same-origin bundle and a generated external initializer; it does not need 'unsafe-inline'.

Runs on Chrome 97, Firefox 104, Safari 15.4, Edge 97 and newer. docs/browser.md covers what sets that floor, how to pre-render at build time instead, and the two traps in rolling your own bundle.

Live render

The source

timeline
  title History of Social Media
  2002 : LinkedIn
  2004 : Facebook : Google
  2005 : YouTube
  2006 : Twitter

Should you use this?

Usually not. When the diagram source is already fixed at publish time, as it is in a blog post or a docs page, render it during the build and send no JavaScript at all. renderMermaidSVG is synchronous and never touches the DOM, so a static site has no reason to put 873 KB of gzipped renderer in front of a reader. This page sends it because proving the dynamic path is its only job.

If you already run a bundler, import the ESM entry described in the Library API instead: it tree-shakes, and this file cannot.