mermaid cliで画像化してGoogleDocsやJIRAで使う方法

Github以外のサポートは微妙

仕事でGithubを使う場面は日常になった。
ソースコードだけではなくドキュメントの保存やissue管理などで使っていると思うが、
その際、図があると助かる場面がある。

そこでmermaidを使いたいのだが、
Github以外の対応度合いが微妙だったりする。
バージョンが古かったり対応してない図があったり。
(zennはフルサポートしてるみたい)

(゜゜) なんとかならないかな

ちょっと探してみたら、
SVGやPNGに変換する方法があった。
それが、

mermaid-cli

コマンドラインでmermaidをSVGやPNGに変換するツール。
公式が出しているので安心だな。

ヾ(・ω<)ﾉ"　三三三●　ⅱⅲ コロコロ♪

------------------- ↓ 本題はここから ↓-------------------

mermaid元データを作成

編集にはVSCodeを使う。
VSCodeにMarkdown Preview Mermaid Support拡張を追加しておく。

適当なmarkdownファイルを作成して、
図を作成する。

 ```mermaid
graph TB
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
 `` `    

作成したmarkdownからmmdデータを作成する。
mmdデータとは上記マークダウンからmermaid記述だけを抜き取ったもの。

graph TB
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]

mmdから画像ファイルを生成

mermaid-cliを使って画像化する

bash

npx @mermaid-js/mermaid-cli -i input.mmd -o output.svg  # SVG出力
npx @mermaid-js/mermaid-cli -i input.mmd -o output.png  # PNG出力

あとは画像を自身の使っているクラウドにアップする

(^o^) 簡単やん

------------------- ↓ 後書きはここから ↓-------------------

podman(docker)を使う場合

コンテナ越しに使えば環境を整備する必要がない。
Linuxで使うときは二次的に利用されているchromeが必要なので、
こちらの方が楽でいい

powershell

podman run --userns keep-id -u 1000:1000 --rm -v ${pwd}:/data:z ghcr.io/mermaid-js/mermaid-cli/mermaid-cli -i ./input.md -o ./output.png