Mermaid example for demo.backstage.io is broken

[rhass]

I was looking at docs for the backstage-demo and the mermaid example appears to be broken.

https://demo.backstage.io/catalog/default/component/backstage-demo/docs/examples/mermaid/

Error : Image not created
Args : ['mmdc', '-p', '/tmp/tmpgh06520w/puppeteer-config.json', '-o', '/tmp/tmpgh06520w/out.svg']
stdout : 
stderr : 
No input file specified, reading from stdin. If you want to specify an input file, please use `-i 
.` You can use `-i -` to read from stdin and to suppress this warning.


Error: Could not find Chromium (rev. 1108766). This can occur if either
 1. you did not perform an installation before running the script (e.g. `npm install`) or
 2. your cache path is incorrectly configured (which is: /app/.cache/puppeteer).
For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
    at ChromeLauncher.resolveExecutablePath (file:///usr/local/share/.config/yarn/global/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:263:27)
    at ChromeLauncher.executablePath (file:///usr/local/share/.config/yarn/global/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:176:25)
    at ChromeLauncher.computeLaunchArguments (file:///usr/local/share/.config/yarn/global/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:93:37)
    at async ChromeLauncher.launch (file:///usr/local/share/.config/yarn/global/node_modules/puppeteer-core/lib/esm/puppeteer/node/ProductLauncher.js:57:28)
    at async run (file:///usr/local/share/.config/yarn/global/node_modules/@mermaid-js/mermaid-cli/src/index.js:416:19)
    at async cli (file:///usr/local/share/.config/yarn/global/node_modules/@mermaid-js/mermaid-cli/src/index.js:192:3)

[awanlin]

Thanks @rhass, so I'm not going crazy, it was broken when I merged this Mermaid refactor #542. Then when I had time to look at it again it was working. But now it's broken again. Will pick this up on Friday and see what I can do to fix it.

[awanlin]

Finally found some time to work on this, decided to change direction and use the TechDocs Mermaid Addon. See #630

[AhmedRaafat14]

Hi!

To add more related issues I faced here, I had the same error which I got fixed by installing puppeteer , this was based on this: mermaid-js/mermaid-cli#701

But once fixed it is exactly like @awanlin it worked for me, then it failed again with this error now:

Error : Image not created
Args : ['mmdc', '-p', '/tmp/tmpn6c8h401/puppeteer-config.json', '-o', '/tmp/tmpn6c8h401/out.svg']
stdout : Generating single mermaid chart
stderr : 
No input file specified, reading from stdin. If you want to specify an input file, please use `-i 
.` You can use `-i -` to read from stdin and to suppress this warning.


ProtocolError: Network. enable timed out. Increase the 'protocolTimeout' setting in launch/connect calls for a higher timeout if needed.

Not sure, if the fix in MR #630 can fix this, but am testing it as well.

[awanlin]

Hi @AhmedRaafat14, yes, the changes in #630 do fix this issue by taking a different path. 👍

[AhmedRaafat14]

Yeah, the only benefit I had for the breaking path now, was publishing a docker image for the TechDocs where am allowing people at my company to pull it in to test their docs quickly before publishing.

Where now the image won't render the mermaid graphs, this approach has this downside. But will see to find A way.

Thanks 🙌