no png gets created from tmp file

[ghost]

Hi there,

so I found my intial problem: On the original Ticket you said to install
npm install -g mermaid cli, but it must be mermaid.cli, which is correct in this repo...

Now, I have set up mkdocs in docker and it seems to be installed correctly.

1. Does your tool require Pupeteer/Chromium that is installed as a dependency? This blows up the image quite much, would love to skip that.

2. I am getting the following error. When I check /tmp a file tmp_9oziujc exists with my mermaid instructions inside. png creation seems to have failed somehow...

ERROR   -  Failed to load image at "file:///tmp/tmp_9oziujc.png" (URLError: <urlopen error [Errno 2] No such file or directory: '/tmp/tmp_9oziujc.png'>)

EDIT:

Here's my Dockerfile:

# Step 1: local DEV
FROM python:3 as DEV
# Use Node LTS Version
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
RUN apt-get install -y nodejs
# Install mermaid.cli -- TODO: check if Chromium needed
RUN npm i npm@latest -g && npm install -g mermaid.cli --unsafe-perm=true
RUN pip install mkdocs \
    mkdocs-material \
    markdown-include \
    mkdocs-with-pdf \
    mkdocs-mermaid2-plugin \
    mkdocs-awesome-pages-plugin \
    mkdocs-mermaid-export-to-svg

WORKDIR /app
CMD ["mkdocs", "serve"]

# Step2: Build the site folder
FROM DEV as BUILD
COPY ./app/ /app
WORKDIR /app
RUN rm mkdocs.yml && mv mkdocs.prod.yml mkdocs.yml
RUN mkdocs build

# Step3: Run Webserver in Production
FROM nginxinc/nginx-unprivileged:stable as RUN
COPY --from=BUILD /app/site/ /usr/share/nginx/html
COPY /nginx-custom.conf /etc/nginx/conf.d/default.conf

[pawelsikora]

Hi,

Could you sent output log from mkdocs build generation?

To answer your question:

1. This plugin does not require chromium/pupeteer as a dependency, it simply manipulates markdown page content with
   when it detects mermaid diagram and include it in img src html tag in html page content

2. Yes, it looks like png creation failed... but It would be helpful to get output log from mkdocs build command
   as was stated above. Additionally could you try to generate .png from this file with mermaid diagram content
   from command line?
   $ mmdc -s 1.8 -t default -b transparent -i /tmp/tmp_9oziujc -o /tmp/tmp_9oziujc.png

I did actualy failed with generation on some setup with another version of mermaid.cli, where the -s (for scale)
option was not available.

Regards,
Pawel

[ghost]

Hi there,

thanks for the quick help.
So first of, it seems I have missed the output complaining that -s is an unknown option.
npm installl -g mermaid.cli installs this https://www.npmjs.com/package/mermaid.cli old package. I'm now using npm install -g @mermaid-js/mermaid-cli instead.

When running command from 2. it complains about the browser missing, so I do install the browser.
Running again now has the output

root@145b539d03ca:/tmp# ls
mkdocs_mb1rn3mk  npm-8-fd2a21ef  tmpuyde2k1o
root@145b539d03ca:/tmp#  mmdc -s 1.8 -t default -b transparent -i tmpuyde2k1o -o tmpuyde2k1o.png
(node:66) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
/usr/lib/node_modules/@mermaid-js/mermaid-cli/node_modules/puppeteer/.local-chromium/linux-818858/chrome-linux/chrome: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory


TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md

    at onClose (/usr/lib/node_modules/@mermaid-js/mermaid-cli/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:193:20)
    at Interface.<anonymous> (/usr/lib/node_modules/@mermaid-js/mermaid-cli/node_modules/puppeteer/lib/cjs/puppeteer/node/BrowserRunner.js:183:68)
    at Interface.emit (events.js:326:22)
    at Interface.close (readline.js:416:8)
    at Socket.onend (readline.js:194:10)
    at Socket.emit (events.js:326:22)
    at endReadableNT (_stream_readable.js:1241:12)
    at processTicksAndRejections (internal/process/task_queues.js:84:21)
(node:66) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:66) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Seems that running Chromium/Puppeteer in Docker needs some additional work on my side...

[pawelsikora]

Hmm, there are some tips for installing from docker:
https://github.com/mermaid-js/mermaid-cli

Maybe it would help you. It looks like some missing
Dependency

[ghost]

Got it to work. It is rather messy now, because it is a pain to get Chromium running with sandboxing. In the end, I just ran it with --no-sandbox as this is a container just to build the PDF.

I have noticed that the graphs are a bit blurry. Might be my Retina Mac. Is it possible to use double DPI for the images or am I completely wrong?

[pawelsikora]

Probably because of the scale and .png

using .svg should help, please let me know.

Also, use your own css file for fonts etc, it may be useful to use the fonts that looks good on retina ;)

[ghost]

stupid question: how to switch to svg? :)

[pawelsikora]

I believe it is just using .svg extention in the output file :P

mmdc -s 1.8 -t default -b transparent -i tmpuyde2k1o -o tmpuyde2k1o.svg