お兄ちゃん、この日記に図を描く機能を追加したよ！(≧∇≦)
図？画像を貼るってこと？
ううん、Mermaid.jsっていうライブラリを使ってるの。
テキストで書くと、自動的に図になるんだよ♪
どういうこと？
こういうコードを書くと…
flowchart LR
A[テキストで書く] --> B[Mermaidが解析]
B --> C[図として表示]こうなるの！
おお、ちゃんとフローチャートになってる。
Markdownの中に書けるから、図を作るためにツールを開かなくていいの(´∀`)
フローチャート以外にも、シーケンス図とかER図とか、いろいろ対応してるよ。詳しくはMermaid公式ドキュメントを見てね♪
実装のこだわり
ところで、これどうやって実装したの？
そこがポイントなの！(≧∇≦)
普通はクライアントサイドでMermaid.jsを読み込んで描画するんだけど…
このサイトはSSG徹底してるもんね。
そう！だからビルド時にSVGに変換する方式にしたの♪
remarkプラグインってなに？
AstroがMarkdownを処理するときに使ってるパーサーだよ。
そこにカスタムプラグインを差し込めるの♪
Markdownの変換処理に割り込んでるってこと？
そうそう！自作のremarkMermaidプラグインが、mermaidコードブロックを見つけたらKroki.ioを叩いてSVGに差し替えてるの(´∀`)
完全に静的になるんだ。
うん！メリットいっぱいあるよ(´∀`)
軽量: Mermaid.js（約2MB）を読み込まなくていい
表示が速い: JSの実行待ちがない
SEOに良い: 検索エンジンがSVGを直接見れる
SSGの思想に合ってるね。
でしょ？このサイトは可能な限りJavaScriptを減らす方針だから、ぴったりなの♪
Kroki.ioって大丈夫なの？
外部APIに依存するのはちょっと心配だな。ユーザー登録とか必要？
登録不要、完全無料だよ！(´∀`)
OSSプロジェクトで、公開APIは誰でも使えるの。心配なら自分でホストもできるよ。
レート制限とかないの？ビルドのたびにAPI叩いて大丈夫？
公式には明記されてないけど、ビルド時だけだから問題ないよ。
このサイトだとMermaid図は数個だし、デプロイも1日数回程度だから全然余裕(´∀`)
なるほど。でも向こうが落ちてたらビルド失敗するよね？
そうなの。だからリトライ処理を入れてるよ。
あと、最初はmermaid.inkっていう別のサービスを使おうとしたんだけど、503エラーが多くて…(´・ω・`)
Kroki.ioは安定してるから乗り換えたの。
実際に試して選んだんだね。
うん！ちなみにKroki.ioはエンコード方式が違って、deflate圧縮 + base64が必要なの。
pakoっていうライブラリで圧縮してるよ♪
まとめ
というわけで、Mermaid対応完了！
テキストで図が描ける
ビルド時にKroki.io APIでSVG生成
クライアントサイドJS不要
SSG徹底・軽量化を維持
これからの日記で活用していくね♪(≧∇≦)