Module diagrams 

Mermaid diagram rendering for fenced mermaid code blocks. Mermaid diagram rendering for fenced code blocks tagged mermaid.

Rather than rasterising server-side (which would require a headless browser or equivalent heavy runtime), mdx-gen rewrites each mermaid code block into a sanitizer-safe <pre class="mermaid">…</pre> container that the client-side mermaid.js library hydrates into inline SVG at page-load time. This matches what github.com does natively in README rendering.

Usage

Enable the transform with crate::MarkdownOptions::with_diagrams. Emit the hydration script into your page shell exactly once with hydration_script_html. The output is SVG.

use mdx_gen::{process_markdown, MarkdownOptions};

let md = "```mermaid\ngraph TD\nA --> B\n```\n";
let options = MarkdownOptions::new()
    .with_custom_blocks(false)
    .with_enhanced_tables(false)
    .with_syntax_highlighting(false)
    .with_diagrams(true);
let html = process_markdown(md, &options).unwrap();
assert!(html.contains("<pre class=\"mermaid\">"));

Functions

hydration_script_html

Returns the <script type="module">…</script> block users should drop into their page shell (usually just before </body>) to hydrate every <pre class="mermaid"> container on the page. The script is safe to include on pages that have no diagrams — it short-circuits when no mermaid container is present.

process_diagram_code_blocks

Walks the comrak AST and replaces every NodeValue::CodeBlock whose info-string names mermaid with a NodeValue::HtmlBlock containing the sanitizer-safe <pre class="mermaid"> container.