knsv
commented
1 year ago Hi, I am sorry you are having issues.
This seems like a mermaid issue and not related to mermaid chart. I would transfer/report the issue there instead. https://github.com/mermaid-js/mermaid/issues Good luck.
Describe the bug A clear and concise description of what the bug is.
To Reproduce Steps to reproduce the behavior:
Expected behavior I would expect the flow chart to render on the html page in both environments
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context My partial package.json looks like this: "dependencies": { "@parcel/core": "^2.8.3", "@parcel/optimizer-image": "^2.8.3", "@parcel/workers": "^2.8.3", "c3": "^0.7.20", "d3": "^7.4.0", "mermaid": "^10.2.4",}
My code looks like this: import mermaid from 'mermaid' mermaid.initialize({ flowchart: { useMaxWidth: false, htmlLabel
s: true
}
});
The following function is called from my UI
async function drawDiagramExportToPNG() {
'use strict'
console.warn('Here', mermaid);
const diagramCode =
flowchart TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car]const { svg } = await mermaid.render('diagram-frame', diagramCode); let svgUrl = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(svg); let img = new Image(); img.onload = function () { let canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; let ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); canvas.toBlob(function (blob) { saveAs(blob, 'diagram.png'); }, 'image/png'); } img.src = svgUrl; }Note: The browser reports the error at: const { svg } = await mermaid.render('diagram-frame', diagramCode); and clicking on error it show this: let root = select("body"); See Chrome dev tools screen shots (2):