文章生成AIのおかげで、テキストで図を編集できるmermaidの使い勝手がかなり良くなっています。
Kindleの本を執筆する際にmermaidの図を入れようとしたのですが、
図がうまく表示されないと言う問題が起こったので、
その解決策を残しておきます。
確認
mermaidとは
下のような図をテキストデータから生成・編集できるのがmermaidです。
%%{init:{'themeVariables':{'lineColor':'white'}}}%% graph LR markdown --> cli(mermaid-cli) cli --> svg cli --> md_svg[svgにリンクしたmarkdown] svg --> png md_svg --> md_png[pngにリンクしたmarkdown] png --> epub md_png --> epub
上の図を生成するには、下のようなテキストで関係を記述しています。
graph LR markdown --> cli(mermaid-cli) cli --> svg cli --> md_svg[svgにリンクしたmarkdown] svg --> png md_svg --> md_png[pngにリンクしたmarkdown] png --> epub md_png --> epub
mermaid-cliとは
mermaid記法の図を含んだmarkdownを書籍に変換する際、
mermaid記法のテキストがそのまま出力されてしまうと言う問題があります。
mermaid-cliでは、mermaid記法を入力すると画像として出力できます。
特に、markdownファイルを入力すると、
そこに含まれたmermaid記法をまとめて画像に変換し、
それぞれの画像へのリンクが埋め込まれた新しいmarkdownが生成されます。
症状
mermaid-cliでmarkdown中のmermaidを、
svgとsvgへのリンクに変換し、
pandocでepubに変換した。
epubをKindle Previewerで開くとsvg画像が正しく表示されない。 (矢印が消えたり、文字が消えたりする)
解決策
svgをpngに変換し、
mermaidのsvgへのリンクもpngへのリンクに変換しました。
手順
※Macの場合の手順です。