Mermaid や PlantUML をブログに埋め込める Kroki がめちゃ便利 ✏️📒
📒 Kroki … Diagram-as-Code の描画 API
Kroki は Diagram-as-Code (DaC) を描画する API サービス。フローチャートを描く Mermaid や、ユースケース図を描く PlantUML などのコードを渡すと、図を描画して画像で返してくれる。下のフローチャートは Kroki の出力の例で、Mermaid のコードを描画してもらったもの。
使い方は、とってもカンタン！まず DaC で図を描く。Kroki は 28 種類の DaC をサポートしている (2025-09-12 現在)。描いた DaC のコードを kroki.io の入力欄に貼り付けると、生成された画像の URL が表示される。これを好きなところに貼って使う。カンタンだ✌️
♻️ DaC の再利用性を保つ URL
実は上の手順で Kroki が生成する画像の URL は、DaC のコードを圧縮/変換したもの。URL 自体に図のソースコードが埋め込まれてるようなものなので、適切に変換してやれば URL から図のソースコードを復元できちゃう。これはスゴイ！
例えば上に載せたフローチャートのソースコードも、画像の URL を処理すれば取り出せる。URL の kroki.io/mermaid/svg/ 以下の文字列は一見めちゃくちゃなんだけど、これを Base64 復号して inflate すると元のソースコードを確認できるよ。記事の末尾に、その様子を載せよう。
これはつまり、Kroki で生成した画像をブログ等に貼るだけで、同時に DaC のコードも保存できるということ。せっかく DaC で図を描いたのに、図だけ保存してコードを紛失しちゃうことってあるよね？Kroki なら、その悲劇は決して起こらない。後から図を編集したくなったら、いつでも URL からコードを復元して編集できるのだ✌️
🔍️ SVG だから、拡大に強くて美しい
Kroki の出力は PNG、SVG、JPEG などから選べる (※ DaC により対応する形式は異なる)。SVG で出力すれば拡大してもガビガビにならないから、記事のクオリティにも貢献してくれそう。
早速、以前書いた Python FUSE でクラウドストレージを RPi にマウントしてみたの記事に貼っていた構成図を Kroki に置き換えてみた。元は Notion で書いてプレビューをスクショした PNG を貼ってたんだけど、やっぱり SVG のほうが仕上がりが美しいね。
🎈 [オマケ] URL から DaC コードを復元してみよう！
復元には、zlib-flate コマンドを使う。これは qpdf コマンド/ライブラリに収録された、生の zlib-flate プログラムだそうだ。Base64 の符号化が URL-safe であることに注意して、下のように処理すると DaC コードを復元できる。
$ DAC="eNpLL0osyFDwCeJSOLQAhBwNox0fNTXGKujq2gE5BTmlxdFKIJFHjbuUYuGqjECqmiCqnBB6QcpRxA4tgEk6gcWdUblOEPOdUAx3gpvizIVhjDNYwsUw2gXkSjRRI5BoUyyGJhdDsLwrnG-EwkcodAWLuxlFuyGZAxM1BIkC7cTiXTdDTMe7GQIAnoB7Tg==" $ echo $DAC | tr _- /+ | base64 -d | zlib-flate -uncompress graph LR A1[A₁] --> A1plus["A₁⁺"] A2[A₂] --> B A1plus --> B B --> C B --> Bplus["B⁺"] Bplus --> C C --> D1[D₁] C --> D2[D₂] D1 --> E D2 --> E E --> F2[F₂] E --> F1[F₁] A1plus --> F1 Bplus --> F1
これが、記事冒頭に載せた画像のソースコードだったのでした。画像の URL は https://kroki.io/mermaid/svg/eNpLL0osyFDwCeJSOLQAhBwNox0fNTXGKujq2gE5BTmlxdFKIJFHjbuUYuGqjECqmiCqnBB6QcpRxA4tgEk6gcWdUblOEPOdUAx3gpvizIVhjDNYwsUw2gXkSjRRI5BoUyyGJhdDsLwrnG-EwkcodAWLuxlFuyGZAxM1BIkC7cTiXTdDTMe7GQIAnoB7Tg== なのでね。
