📝

Typstでmermaidのsvgを文字を欠落させずに挿入する

2024/06/13に公開

概要

mermaidをsvgで出力させたものをtypstでそのまま表示してもテキストだけ(ローマ字, 日本語両方)欠落して表示されます.
厄介なことにvscodeのtypst-previewではうまく表示されますが, pdfに変換すると欠落しているのです.

環境

  • typst v0.11.1

どのような現象なのか

はじめにmermaidでflowchartを書きます

flowchart LR
    A-->B-->あ

本来はZennのPreviewのように"A", "B", "あ"が正しく表示されるはずです.
しかし, これをtest.mmdとして保存し, mmdcでsvgに変換します

$ mmdc -i test.mmd -o test.svg

このsvgをtypstでpdfに埋め込んでみると次のようになるのです.

対処方法

mmdcを一度pdfに出力してからpdftocarioでsvgに戻すことで文字が正しく表示されるsvgを生成することができます.

$ mmdc -i test.mmd -o test.pdf -f
$ pdftocario test.pdf -svg test.svg

ここでmmdcの-fオプションは必ずつけてください.
-fはpdfをmermaidの図に合わせてサイズを合わせる(Scaleさせる)もので, オプションがなければページごとに図が別れてしまい, pdftocarioでうまく結合することができません.

Discussion