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
- Confirm a diagram actually rendered: open devtools and check that document.querySelector('#output svg') returns a node before exporting.
- Fix the Mermaid source so it renders (resolve the parse error shown in #output) and re-run, then export.
- Guard the export entry point so it no-ops or shows a message when no SVG exists.
- 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
- Wire the export button's disabled state to a successful mermaid.render() callback.
- Log mermaid.render() errors so a failed render is visible instead of silently leaving #output empty.
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.