{"record":{"id":"4a531acdd6c19ad0","repo":"icsharpcode/ILSpy","slug":"svg-not-found","errorCode":null,"errorMessage":"svg not found","messagePattern":"svg not found","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"ICSharpCode.ILSpyX/MermaidDiagrammer/html/script.js","lineNumber":758,"sourceCode":"            width && svg?.setAttribute('width', `${width}px`); // Workaround https://stackoverflow.com/questions/28690643/firefox-error-rendering-an-svg-image-to-html5-canvas-with-drawimage\n            if (!svg) svg = getSvgEl();\n\n            return svg.outerHTML.replaceAll('<br>', '<br/>')\n                .replaceAll(/<img([^>]*)>/g, (m, g) => `<img ${g} />`);\n        };\n\n        const toBase64 = utf8String => {\n            const bytes = new TextEncoder().encode(utf8String);\n            return window.btoa(String.fromCharCode.apply(null, bytes));\n        };\n\n        const getBase64SVG = (svg, width, height) => toBase64(getSVGstring(svg, width, height));\n\n        const exportImage = (event, exporter, imagemodeselected, userimagesize) => {\n            const canvas = document.createElement('canvas');\n            const svg = document.querySelector('#output svg');\n            if (!svg) {\n                throw new Error('svg not found');\n            }\n            const box = svg.getBoundingClientRect();\n            canvas.width = box.width;\n            canvas.height = box.height;\n            if (imagemodeselected === 'width') {\n                const ratio = box.height / box.width;\n                canvas.width = userimagesize;\n                canvas.height = userimagesize * ratio;\n            } else if (imagemodeselected === 'height') {\n                const ratio = box.width / box.height;\n                canvas.width = userimagesize * ratio;\n                canvas.height = userimagesize;\n            }\n            const context = canvas.getContext('2d');\n            if (!context) {\n                throw new Error('context not found');\n            }\n            context.fillStyle = 'white';","sourceCodeStart":740,"sourceCodeEnd":776,"githubUrl":"https://github.com/icsharpcode/ILSpy/blob/60c08fcb74fcc183130f73c861ed35cf944d0bf1/ICSharpCode.ILSpyX/MermaidDiagrammer/html/script.js#L740-L776","documentation":"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.","triggerScenarios":"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>.","commonSituations":"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.","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."],"exampleFix":"// before\nconst exportImage = (event, exporter, imagemodeselected, userimagesize) => {\n    const canvas = document.createElement('canvas');\n    const svg = document.querySelector('#output svg');\n    if (!svg) {\n        throw new Error('svg not found');\n    }\n    // ...\n};\n\n// after\nconst exportImage = (event, exporter, imagemodeselected, userimagesize) => {\n    const svg = document.querySelector('#output svg');\n    if (!svg) {\n        alert('No diagram to export. Render a diagram first.');\n        event.preventDefault();\n        return;\n    }\n    const canvas = document.createElement('canvas');\n    // ...\n};","handlingStrategy":"validation","validationCode":"// run before calling exportImage / enabling the export button\nfunction hasRenderedDiagram() {\n    return document.querySelector('#output svg') instanceof SVGSVGElement;\n}\nif (!hasRenderedDiagram()) {\n    // do not offer export\n}","typeGuard":"function isRenderedSvg(el) {\n    return el instanceof SVGSVGElement;\n}\n// const ok = isRenderedSvg(document.querySelector('#output svg'));","tryCatchPattern":"try {\n    exportImage(event, downloadImage, 'width', 1024);\n} catch (e) {\n    if (e.message === 'svg not found') {\n        console.warn('Export skipped: no diagram rendered yet.');\n    } else {\n        throw e;\n    }\n}","preventionTips":["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."],"tags":["mermaid","javascript","dom","ui","export"],"backgroundTag":null,"analyzedSha":"60c08fcb74fcc183130f73c861ed35cf944d0bf1","analyzedAt":"2026-08-13T11:34:51.223Z","schemaVersion":2},"datasetVersion":"2026-08-13T14:17:21.547Z"}