Consider adding this shell script to the docs so users can render images easily

[David-Else]

I spent a long time trying to render the diagrams using many outdated and broken programs, in the end, this was the best solution:

#!/bin/bash

# "devDependencies": {
#   "@mermaid-js/mermaid-cli": "^8.4.8",
# },

# extract all mermaid text diagrams in all markdown files to individual files for processing
awk '/^```/{if (f) close(f); f = ""} /^```mermaid/ { f = sprintf("%02d.mmd", ++i); next } f { print > f }' ./*.md
# run mermaid-cli on each extracted file and create a corresponding .png file
for i in *.mmd; do npx mmdc -i "$i" -o "${i%.*}.png" -b transparent -t forest; done
# remove all temporary .mmd files
rm ./*.mmd
# move the pngs into an images directory
mkdir -p images
mv ./*.png images

You will need to do the final step of inserting them manually.

Is there actually a decent tool that can do this? If so, I can't find a working up-to-date one. You need the latest official @mermaid-js/mermaid-cli to do things correctly.

[mjbvz]

This seems like it would be more at home in the mermaid docs or published as a helper cli package

[David-Else]

I found this today: https://github.com/neenjaw/compile-mermaid-markdown-action , which contains the code to finish the job and swap the diagram code for the image file references.

If you were to test users had awk on the system you could probably fork that script and add it as a feature of this extension to convert all the diagrams to actual .png images. That would be truly awesome! Only dependencies are awk and @mermaid-js/mermaid-cli.

Please close the issue if you like, cheers.