[DH] Converting Mermaid Diagrams to Image with mermaid-cli

Overview

I usually work on upcoming Hashnode articles on my local machine in Markdown. And I am a big fan in using Mermaid.js diagrams to illustrate workflows in the form of flowcharts and other available format.

Hashnode editor currently do not support the rendering of Mermaid diagrams.

Tools to help

I use Mermaid CLI tool, mmdc to help convert the Mermaid diagrams in my Markdown documents in place.

1. This reduces the manual effort required to take screenshots of the Mermaid diagrams I have crafted while retaining the correct position in the document.

2. This also makes it easier to reference when I transfer the article to Hashnode itself.

Installation

1. Install the NPM package at the global level, so that you can access the mmdc command

2. Please note that the mermaid-cli should be > v8.9.1 or at least v10.9.1 at the time of writing.

npm install -g @mermaid-js/mermaid-cli
mmdc --version

Usage

Referencing to the solution from this Stack Overflow post. These are the commands I used to convert my Mermaid diagrams into images while creating a copy of the Markdown document using these images.

1. Convert Mermaid diagrams into images (No Markdown document)

   • mmdc will prefix the images with incremental numercial value if there are more than 1 diagram in the Markdown document.

mmdc -i <MARKDOWN_DOC_FILENAME>.md -o IMAGE_NAME_PREFIX.png

2. Convert Mermaid diagrams into images with Markdown document using them

mmdc -i <MARKDOWN_DOC_FILENAME>.md --outputFormat=png \
     -o <ANOTHER_MARKDOWN_DOC_FILENAME>.md