What causes "mermaid rendered but produced no measurable svg viewBox." in iOfficeAI/OfficeCLI?

Update or clear the cached mermaid.js so a known-good build is used.

iOfficeAI/OfficeCLI · error · InvalidOperationException

mermaid rendered but produced no measurable svg viewBox.

Error message

mermaid rendered but produced no measurable svg viewBox.

What it means

The DOM carried the success marker <title>MMDREADY</title> (mermaid parsed and rendered), but ParseSvgSize returned a width or height <= 0 — the injected SVG had no measurable viewBox/size. The code treats a real render with no geometry as a failure because the second pass needs exact pixel dimensions.

Source

Thrown at src/officecli/Core/Diagram/MermaidImageRenderer.cs:384

            // The <title> is the AUTHORITATIVE outcome — not the presence of an <svg>.
            // On a syntax error mermaid.parse() rejects (we capture the message) but
            // STILL injects its red "Syntax error" bomb graphic into the DOM anyway
            // (suppressErrorRendering doesn't stop it). So a viewBox is present even on
            // failure; keying off the svg would screenshot the bomb and "succeed".
            // Trust the title: MMDREADY = real render, MMDSYNTAX = bad input, else infra.
            if (dom.Contains("<title>MMDSYNTAX</title>", StringComparison.Ordinal))
                throw new MermaidSyntaxException(
                    "mermaid syntax error: " + ExtractMermaidMessage(dom)
                    + "\n(fix the mermaid source, or use render=native for the built-in subset).");
            if (!dom.Contains("<title>MMDREADY</title>", StringComparison.Ordinal))
                throw new InvalidOperationException(
                    dom.Contains("<title>MMDERR</title>", StringComparison.Ordinal)
                    ? "mermaid failed to render: " + ExtractMermaidMessage(dom)
                    : "mermaid produced no diagram (mermaid.js failed to load or the render timed out).");

            var (w, h) = ParseSvgSize(dom);
            if (w <= 0 || h <= 0)
                throw new InvalidOperationException("mermaid rendered but produced no measurable svg viewBox.");

            var pngPath = Path.ChangeExtension(htmlPath, ".png");
            if (!HtmlScreenshot.CaptureChromeSized(htmlPath, pngPath,
                    (int)Math.Ceiling(w) + 2, (int)Math.Ceiling(h) + 2))
                throw new InvalidOperationException("headless screenshot failed.");
            return pngPath;
        }
        finally { try { File.Delete(htmlPath); } catch { /* best effort */ } }
    }

    /// <summary>Cache → one-time download → live CDN. Returns a URL usable as a
    /// &lt;script src&gt; (a <c>file://</c> for a cached/downloaded copy, else the CDN).</summary>
    private static string ResolveMermaidJsRef()
    {
        try
        {
            if (File.Exists(CachedJsPath) && new FileInfo(CachedJsPath).Length > 500_000)
                return new Uri(CachedJsPath).AbsoluteUri;

View on GitHub (pinned to 1ced45e900)

Solutions

Update or clear the cached mermaid.js so a known-good build is used.
Try render=native, which computes size itself and doesn't depend on the injected SVG's attributes.
If reproducible, report the diagram — ParseSvgSize may need to handle the new attribute shape.

Defensive patterns

Strategy: try-catch

Validate before calling

// No general pre-check; this is a render-shape corner case. Prefer render=native for diagram types known to size oddly.

Try / catch

try { png = MermaidImageRenderer.RenderViaChrome(mermaid, bg); }
catch (InvalidOperationException ex) when (ex.Message.Contains("no measurable svg viewBox", StringComparison.Ordinal))
{
    png = MermaidImageRenderer.RenderNative(mermaid, bg);
}

Prevention

Keep the cached mermaid.js at a version known to emit standard SVG sizing attributes.
For diagram types that size via CSS only, use render=native.

When it happens

Trigger: mermaid rendered but the SVG it injected had no width/height/viewBox attributes ParseSvgSize understands — a mermaid version that emits a differently-structured SVG, a diagram type that produces zero-size output, or an edge case where the size regex misses.

Common situations: Bundled mermaid.js version produces an SVG whose sizing attributes live in a style block or a non-standard attribute; a pie/mindmap diagram that mermaid sizes via CSS only; a mermaid upgrade that changed the SVG shape.

Related errors

AI-assisted analysis of iOfficeAI/OfficeCLI@1ced45e900 (2026-08-13). Data as JSON: /api/errors/4be1e735da63c28d. Report an issue: GitHub.