big popup as svg is created

[amunger]

Describe the bug
Using the CLI programmatically in node.js causes a large pop-up that takes up most of the screen for a few seconds as the SVG is created

To Reproduce

Here is an excerpt of the code I'm running

const tmpDir = fs.mkdtempSync(os.tmpdir());
fs.writeFileSync(path.join(tmpDir, 'diagram.md'), this.content);
const mermaidCLIModule = await import('@mermaid-js/mermaid-cli');
await mermaidCLIModule.run(
    `${tmpDir}/diagram.md`,     // input
    `${tmpDir}/diagram.svg`,    // output
    {
        outputFormat: 'svg',
    }
);

This video shows the popup happening twice for two attempts to create an svg from an md file.

validationPopup.mp4

Desktop (please complete the following information):

• OS: windows
• Browser: Edge is my default browser
• Version [e.g. 22]

[aloisklink]

Hi @amunger, unfortunately, I suspect this might a Windows related bug, and unfortunately I don't have a Windows machine to test with.

However, you might be able to play around by using a custom PuppeteerConfig.

The first thing I'd recommend trying is:

await mermaidCLIModule.run(
    `${tmpDir}/diagram.md`,     // input
    `${tmpDir}/diagram.svg`,    // output
    {
        outputFormat: 'svg',
        puppeteerConfig: {
            // uses Chrome headless shell, a faster version of chrome
            // see https://developer.chrome.com/blog/chrome-headless-shell
            headless: 'shell',
        },
    }
);

Chrome headless shell tends to be much faster than the default settings, since it's a stripped out version of Chrome that doesn't have support for extensions.

Alternatively, you could also try pointing puppeteer to use Microsoft Edge browser (see https://learn.microsoft.com/en-us/microsoft-edge/puppeteer/), e.g. with:

await mermaidCLIModule.run(
    `${tmpDir}/diagram.md`,     // input
    `${tmpDir}/diagram.svg`,    // output
    {
        outputFormat: 'svg',
        puppeteerConfig: {
            // Replace with your browser path
            executablePath: 'C:\\Program Files (x86)\\Microsoft\\Edge Dev\\Application\\msedge.exe',
        },
    }
);

---

Also, this is unrelated to your issue, but if you're trying to use Mermaid in VS Code, I'd highly recommend not using mermaid-cli to render the mermaid diagram, but instead use VS Code's JavaScript/HTML engine to render it instead. It should be much much faster (you can probably look at the code of one of the open-source Mermaid VS Code plugins for inspiration!)

And I love the name @mermAId! By the way, there's also a Mermaid GitHub Copilot Extension that I helped worked on: https://github.com/marketplace/mermaid-chart (but as it isn't a Copilot-enabled Visual Studio Code, it can't render diagrams without the user having to open a separate page).

[joshspicer]

Also, this is unrelated to your issue, but if you're trying to use Mermaid in VS Code, I'd highly recommend not using mermaid-cli to render the mermaid diagram, but instead use VS Code's JavaScript/HTML engine to render it instead.

(I'm also working on this with Aaron). Thanks for the ideas here! We're primarily wanting to use the mermaid-cli (or similar) to validate that the output of the LLM is creating a valid diagram. If there's any parsing error, we provide that error to the LLM and have it try again. Since the mermaid npm package is web-only and we couldn't get it working happily in a VS Code extension, this seemed like the best way to validate. Curious if you have any other ideas for us :)

[aloisklink]

We're primarily wanting to use the mermaid-cli (or similar) to validate that the output of the LLM is creating a valid diagram. If there's any parsing error, we provide that error to the LLM and have it try again. Since the mermaid npm package is web-only and we couldn't get it working happily in a VS Code extension, this seemed like the best way to validate.

Unfortunately, I'm not a VS Code expert, but would it be possible to somehow "render" it in VS Code if you have access to a browser-environment (e.g. https://code.visualstudio.com/api/extension-guides/webview)? You could hide it so it's not visible to the user.

You could also try mermaid.parse(). Although it it's browser-only, if you're using Node.JS and you use JSDOM, I've seen it mostly work in Node.JS. Unfortunately, some invalid diagrams still pass mermaid.parse(), so you'd probably still need a browser environment to validate the diagram completely, but mermaid.parse() does seem to fail on most invalid diagrams.

An alternate approach is to use an external server (e.g. like https://kroki.io/), but if you're sending a lot of traffic their way, you'd probably want to self-host Kroki, or sponsor them!

It's also worth looking at https://github.com/remcohaszing/mermaid-isomorphic! It's basically a Node.JS API for running Mermaid, but unlike mermaid-cli which uses Puppeteer, https://github.com/remcohaszing/mermaid-isomorphic uses Playwright, so it might not have this large pop-up issue.

[joshspicer]

Thanks for the ideas! With your hints I was able to successfully call mermaid.parse within an “intermediate” webview, signaling back to the extension any parse errors. On success, we swap out the webview to do the rendering. This approach seems to be working well and is lot faster for us than using the CLI. Thanks again!