MDEx plugin that renders Mermaid diagrams server-side using Mermex (Rust NIF).

Diagrams are rendered to SVG at build time and embedded as base64 <img> tags, providing full ID isolation between diagrams and preventing XSS from SVG content.

Each rendered diagram is wrapped in an interactive container with zoom, pan, and fullscreen controls. CSS and JS assets are injected once per document by default, or can be imported manually from assets/mdex_mermex.css and assets/mdex_mermex.js in the package.

Usage

MDEx.to_html!(markdown, plugins: [MDExMermex])

Options

• :class - Additional CSS class(es) to add to the wrapper <div>. The wrapper always has mdex-mermex; your classes are appended.

  MDEx.to_html!(md, plugins: [{MDExMermex, class: "my-diagram"}])
  # produces: <div class="mdex-mermex my-diagram" tabindex="0">

• :inject_css - Whether to inject the <style> block into the document. Defaults to true. Set to false when including CSS separately.

• :inject_js - Whether to inject the <script> block into the document. Defaults to true. Set to false when including JS separately (e.g. in a root layout for LiveView).

• :css_layer - When set, wraps the injected CSS in a @layer rule. Useful for controlling specificity in projects that use CSS cascade layers.

  MDEx.to_html!(md, plugins: [{MDExMermex, css_layer: "components"}])

Including Assets Manually

When injection is disabled, import the assets directly from the package:

• CSS — assets/mdex_mermex.css (e.g. via @import in your CSS bundle)
• JS — assets/mdex_mermex.js (e.g. via import in your JS bundle)

The JS uses a MutationObserver so new diagrams added via DOM patches (e.g. LiveView navigation) are automatically initialized.