Mermaidで図を書こうとしたら拡大が辛かったのでPlantUMLを使った

Posted at 2025-07-26

まとめ

タイトルのまんま。

記述については生成AIが雛形を作ってくれるので、シンプルな図ならどちらも大して手間に違いはなかった。

VSCodeの以下の拡張を入れるだけでプレビューできるようになるので、あとは書くだけ。

ブラウザにいちいち表示するのも面倒だし、表示したところで拡大サイズに限度があって結局図が大きくなると文字が見えなかった。

Javaインストールが必要と出てきたのでやや面倒か...と思い後回しにしていたが、DockerイメージがあったのでこちらもDocker環境があれば環境構築はほぼ無しで簡単に動く

公式のDockerイメージをビルドしてrun
これでPlantUMLサーバーがローカルで動く
```
docker run -d -p 8080:8080 plantuml/plantuml-server:tomcat
```
VSCodeのPlantUML拡張機能をインストール
PlantUML拡張機能でPlantUMLサーバーとしてhttp://localhost:8080を使用するように設定する

1.2.も全部書いてあるが、設定する項目は以下を参照した。
https://dev.classmethod.jp/articles/plantuml-server-on-docker/

いくらでも拡大できるので、図が大きくても問題ない。

日本語をPDFエクスポートすると文字化けする
VSCodeでのプレビューでは日本語も読めるのだが、人に共有するときは日本語使えないので結構辛い...
今回はメモ程度の図を整理するものと割り切ってASCIIのみにしたが、日本語を使いたい場合はDockerfileを作って日本語フォントをインストールしないとダメかもしれない。
参考: plantuml server で日本語が豆腐になってしまったら
マークダウンとの併用ができない
以下のようにmarkdownの中にPlantUMLの図を埋め込むことは今の設定ではできない。PlantUML拡張機能のプレビューではこのような場合でもPlantUMLの図だけが表示される。
```
# 普通のマークダウン的なタイトル
図の説明とか文章
```plantuml
@startuml
図
@enduml
```
# 次のマークダウン的なタイトル
マークダウン的な文章
```
markdownの中に図を埋め込んだ形で表示するには、JavaとかPlantUMLをインストールしてMarkdown Preview Enhanced拡張機能でPlantUMLも使うような設定を行ったり？する必要がありそうで、ちょっと大掛かりそうだった。