icsharpcode/ILSpy · error · Error

svg not found

Error message

svg not found

What it means

Thrown by the Mermaid 'exportImage' helper (script.js) when document.querySelector('#output svg') returns null. It means the diagram output region has no rendered <svg> element, so there is nothing to rasterize to PNG. The exporter cannot proceed because every later step (bounding box, canvas, drawImage) depends on that node.

Source

Thrown at ICSharpCode.ILSpyX/MermaidDiagrammer/html/script.js:758

            width && svg?.setAttribute('width', `${width}px`); // Workaround https://stackoverflow.com/questions/28690643/firefox-error-rendering-an-svg-image-to-html5-canvas-with-drawimage
            if (!svg) svg = getSvgEl();

            return svg.outerHTML.replaceAll('<br>', '<br/>')
                .replaceAll(/<img([^>]*)>/g, (m, g) => `<img ${g} />`);
        };

        const toBase64 = utf8String => {
            const bytes = new TextEncoder().encode(utf8String);
            return window.btoa(String.fromCharCode.apply(null, bytes));
        };

        const getBase64SVG = (svg, width, height) => toBase64(getSVGstring(svg, width, height));

        const exportImage = (event, exporter, imagemodeselected, userimagesize) => {
            const canvas = document.createElement('canvas');
            const svg = document.querySelector('#output svg');
            if (!svg) {
                throw new Error('svg not found');
            }
            const box = svg.getBoundingClientRect();
            canvas.width = box.width;
            canvas.height = box.height;
            if (imagemodeselected === 'width') {
                const ratio = box.height / box.width;
                canvas.width = userimagesize;
                canvas.height = userimagesize * ratio;
            } else if (imagemodeselected === 'height') {
                const ratio = box.width / box.height;
                canvas.width = userimagesize * ratio;
                canvas.height = userimagesize;
            }
            const context = canvas.getContext('2d');
            if (!context) {
                throw new Error('context not found');
            }
            context.fillStyle = 'white';

View on GitHub (pinned to 60c08fcb74)

Solutions

  1. Confirm a diagram actually rendered: open devtools and check that document.querySelector('#output svg') returns a node before exporting.
  2. Fix the Mermaid source so it renders (resolve the parse error shown in #output) and re-run, then export.
  3. Guard the export entry point so it no-ops or shows a message when no SVG exists.
  4. Disable/hide the export buttons until mermaid reports a successful render.

Example fix

// before
const exportImage = (event, exporter, imagemodeselected, userimagesize) => {
    const canvas = document.createElement('canvas');
    const svg = document.querySelector('#output svg');
    if (!svg) {
        throw new Error('svg not found');
    }
    // ...
};

// after
const exportImage = (event, exporter, imagemodeselected, userimagesize) => {
    const svg = document.querySelector('#output svg');
    if (!svg) {
        alert('No diagram to export. Render a diagram first.');
        event.preventDefault();
        return;
    }
    const canvas = document.createElement('canvas');
    // ...
};
Defensive patterns

Strategy: validation

Validate before calling

// run before calling exportImage / enabling the export button
function hasRenderedDiagram() {
    return document.querySelector('#output svg') instanceof SVGSVGElement;
}
if (!hasRenderedDiagram()) {
    // do not offer export
}

Type guard

function isRenderedSvg(el) {
    return el instanceof SVGSVGElement;
}
// const ok = isRenderedSvg(document.querySelector('#output svg'));

Try / catch

try {
    exportImage(event, downloadImage, 'width', 1024);
} catch (e) {
    if (e.message === 'svg not found') {
        console.warn('Export skipped: no diagram rendered yet.');
    } else {
        throw e;
    }
}

Prevention

When it happens

Trigger: The user clicks the PNG/SVG export/download action in the MermaidDiagrammer UI before any diagram is present in #output, or after a render failure (syntax error, empty graph) left #output without an <svg>.

Common situations: Mermaid source has a syntax error so mermaid.render() failed silently; the diagram type produced no SVG; the user clicked export while #output still shows an error/empty state; a markup change moved the SVG outside the #output container.

Related errors


AI-assisted analysis of icsharpcode/ILSpy@60c08fcb74 (2026-08-13). Data as JSON: /api/errors/4a531acdd6c19ad0. Report an issue: GitHub.