🐛 Bug Report: Setting up mermaid docs outdated

[Ryangr0]

📜 Description

https://backstage.io/docs/features/techdocs/how-to-guides#using-markdown-inline-mermaid
This mentions to add RUN yarn global add @mermaid-js/mermaid-cli. However, yarn global has been removed from yarn a while ago.

👍 Expected behavior

Generate mermaid diagrams without erroring out

👎 Actual Behavior with Screenshots

When I add RUN npm install -g @mermaid-js/mermaid-cli instead of the yarn command, I get this on the actual techdocs page:

Error : Image not created

Args : ['mmdc', '-p', '/tmp/tmp_fdzluvc/puppeteer-config.json', '-o', '/tmp/tmp_fdzluvc/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.


Error: Could not find Chrome (ver. 130.0.6723.116). This can occur if either
 1. you did not perform an installation before running the script (e.g. `npx puppeteer browsers install chrome-headless-shell`) or
 2. your cache path is incorrectly configured (which is: /home/node/.cache/puppeteer).
For (2), check out our guide on configuring puppeteer at https://pptr.dev/guides/configuration.
    at ChromeLauncher.resolveExecutablePath (file:///usr/local/lib/node_modules/@mermaid-js/mermaid-cli/node_modules/puppeteer-core/lib/esm/puppeteer/node/BrowserLauncher.js:266:27)
    at ChromeLauncher.executablePath (file:///usr/local/lib/node_modules/@mermaid-js/mermaid-cli/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:202:25)
    at ChromeLauncher.computeLaunchArguments (file:///usr/local/lib/node_modules/@mermaid-js/mermaid-cli/node_modules/puppeteer-core/lib/esm/puppeteer/node/ChromeLauncher.js:83:37)
    at async ChromeLauncher.launch (file:///usr/local/lib/node_modules/@mermaid-js/mermaid-cli/node_modules/puppeteer-core/lib/esm/puppeteer/node/BrowserLauncher.js:45:28)
    at async run (file:///usr/local/lib/node_modules/@mermaid-js/mermaid-cli/src/index.js:498:17)
    at async cli (file:///usr/local/lib/node_modules/@mermaid-js/mermaid-cli/src/index.js:203:3)

Adding the following to my docker image solved the problem:

RUN --mount=type=cache,target=/var/cache/apt,sharing=locked \
    --mount=type=cache,target=/var/lib/apt,sharing=locked \
    apt-get update && \
    apt-get install -y --no-install-recommends chromium && \
    rm -rf /var/lib/apt/lists/*

ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium

👟 Reproduction steps

Should be clear

📃 Provide the context for the Bug.

No response

🖥️ Your Environment

No response

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Are you willing to submit PR?

None

[alexlorenzi]

Hi @Ryangr0 - Thanks for the report and the info on the fix. I just confirmed that your solution works, so will work on updating the docs with the correct instructions.

Also, just in case you were not aware, we're now using the backstage-plugin-techdocs-addon-mermaid plugin for mermaid scripts in our demo docs site, which does the rendering in the browser, so you don't need this setup anymore if that's an easier solution for you too