クイックノート

ちょっとした発見・アイデアから知識の発掘を

mermaid-cliで出力したsvgがkindleで表示されない問題

文章生成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-climarkdown中のmermaidを、
svgsvgへのリンクに変換し、
pandocでepubに変換した。

epubKindle Previewerで開くとsvg画像が正しく表示されない。 (矢印が消えたり、文字が消えたりする)

解決策

svgpngに変換し、
mermaidのsvgへのリンクもpngへのリンクに変換しました。

手順

Macの場合の手順です。

  1. mermaid記法を含んだmarkdownファイルbook.mdを準備する
  2. mmdc -i book.md -o book_svg.md でmermaidを画像化する
  3. ls -1 *.svg | xargs -n 1 qlmanage -t -s 1000 -o ./svg画像をpng画像に変更する
  4. sed -e 's/\.svg)/\.svg\.png)/g' book_svg.md > book_png.mdmarkdownの画像リンクをsvgからpngに変更する
  5. pandoc book_png.md -o book.epubepub形式の電子書籍を出力する
プライバシーポリシー