フローチャート等の様々なダイアグラムを定義するマークアップ言語のMermaid。以下のような記法。
カレーの作り方.mmd
flowchart TD
A[材料を準備する] --> B[玉ねぎを炒める]
B --> C[肉を加えて炒める]
C --> D[野菜を加える（にんじん・じゃがいも）]
D --> E[水を加えて煮込む]
E --> F[アクを取る]
F --> G[材料が柔らかくなるまで煮る]
G --> H[火を止めてルーを入れる]
H --> I[ルーを溶かす]
I --> J[再び火をつけて煮込む]
J --> K[完成！盛り付ける]
Mermaid記法で記述されたテキストからダイアグラム画像を出力するコマンドラインツールのmermaid-cliを使えばお手軽に画像化できて便利。上記のテキストは以下のように画像化できる。
PNGだけでなくベクター画像のSVGやPDFの出力もできる。
しかしながら、mermaid-cliで出力されるSVGをWebブラウザ以外で読もうとしても正常に読み込まない。例えば、Inkscapeで読み込むと、
PDFで出力して、pdf2svgでSVGを生成すれば正常に読めるが、これだとテキストがパスデータになっていたりして不便。何とか直接生成されるSVGを読めるようにしたい。
原因
mermaid-cliで出力されるSVGには一部の環境でサポートされないCSSが含まれるかららしい。
参考
Mermaid Live Editorでも同じ症状なので、おそらく公式の実装の仕様。
対処方法
mermaid-js公式のissueで紹介されている方法を参考に以下の手順で修正。
- 設定ファイルを書く。
config.json
{ "flowchart": { "htmlLabels": "false" } }
- mmdcを実行する時に↑の設定ファイルを適用する。
$ mmdc -c config.json -i [Mermaidテキストファイル名] -o [SVGファイル名]
- 出来上がったSVGに対し、以下のように書き換え。
$ cat [元のSVGファイル名] | sed 's/root{--mermaid-font-family/root{mermaid-font-family/' > [変更後のSVGファイル名]
Inkscapeで読み込んでみる。
👍