AIが描いたMermaidダイアグラム、製品レベルでレンダリングする：Peleが埋めた文書自動化の最後のピース

AIコーディングエージェントが成果物に含めるMermaidダイアグラムが急速に増えています。ですが、デフォルトのレンダラーはテーマやスタイルを細かく扱いにくく、文書や製品UIにそのまま使うには限界があります。最近公開されたPeleは、Mermaid構文をCSS変数でテーマを適用できるSVGに変換することでこの問題を解決します。おかげで、バイブコーディングのワークフローで生成されたダイアグラムを、一貫したブランディングの再利用可能なアセットにできます。

AIコーディングツールがMermaidを基本言語として選んだ理由

AIベースのダイアグラム生成ツールが、テキスト説明をMermaidコードに変換する機能を競って提供しています。シーケンス図、フローチャート、ERD、C4アーキテクチャダイアグラムまで、平文の一行で生成してくれる流れはすでに馴染み深いものになりました。Mermaidはマークダウンのコードブロック内に記述するテキストベースの構文なので、AIエージェントが自然に生成でき、開発者もdiffで変更を追跡しバージョン管理しやすいです。

実際にバイブコーディングをしていると、エージェントがPRの説明やチームウィキにアーキテクチャダイアグラムをMermaidコードブロックとして添付するケースがよくあります。問題は、このコードブロックのレンダリング方法がバラバラだという点です。デフォルトのmermaid.jsレンダラーはSVGを生成しますが、スタイルがインラインで埋め込まれているため、文書や製品に埋め込むとブランドカラーとずれることがよくあります。表現層を分離しなければ、AIがどれほど優れたダイアグラムを作っても実際のアセットとして使いにくいです。

mermaid.jsデフォルトレンダリングが残す表現層の空白

mermaid.jsはブラウザでMermaidコードをSVGとして描画する事実上の標準ツールですが、テーマのカスタマイズが煩雑です。ダークモード、企業ブランドカラー、特定のフォントファミリーを適用するには、JavaScript設定オブジェクトを扱うか、生成されたSVG内部のクラスを直接上書きしなければならない場合が多いです。こうするとチームごとに異なるスタイルが現れ、AIエージェントが作ったダイアグラムが文書ごとにバラバラな姿で散らばります。

ここで必要な視点は、「Mermaidコードはコンテンツとして維持し、表現は別レイヤーに分離すること」です。コードはそのままにして、レンダリング結果だけをCSS変数で制御できれば、同じダイアグラムをダークモードとライトモードでそれぞれブランドに合わせて表現できます。この要求を正確に狙ったツールこそがPeleです。

Pele: テーマ適用可能なSVGに変換する軽量レンダラー

PeleはMermaid構文をテーマ適用可能なSVGにレンダリングする軽量ライブラリです。公開情報によると、mermaid.jsよりもバンドルサイズが約6倍小さく、レンダリング速度は100倍から500倍まで速く、外部依存がありません。最新のMermaid構文と互換性があるため、AIが生成したダイアグラムをそのまま入力できます。

最も重要な特徴は、CSS変数でテーマを適用する点です。開発者は自分のデザインシステムに定義された色、線の太さ、フォント変数をPeleが出力するSVGにそのまま継承させることができます。別途JavaScript設定なしでCSSだけでダークモード切り替えとブランド適用が可能なため、製品UIやチーム文書にすぐ統合しやすいです。Mermaidコードは維持したまま表現層だけを分離できるということです。

バイブコーディングのパイプラインに統合する実践シナリオ

例えば、AIコーディングエージェントがPRの説明にシステムアーキテクチャダイアグラムをMermaidコードブロックとして生成したと仮定してみましょう。CI段階でこのコードブロックを抽出してPeleでSVGをレンダリングし、チームウィキやPR本文に一貫したスタイルで挿入するスクリプトを構成できます。こうすることでPRごとに異なるスタイルが混ざる問題がなくなり、ダイアグラムをファイルとして保存して再利用することもできます。

また、「コードより先に積み上がる文書」が一般的になりつつあるバイブコーディング環境では、Peleは単なるレンダラー以上の役割を果たします。AIエージェントが生成したダイアグラムを、表現層が整ったSVGアセットに変換してくれるため、チームは文書を描き直したりスタイルを修正したりする手間なく、成果物をそのままウィキや製品に溶け込ませることができます。これはエージェントの成果物を一回限りのテキストではなく、継続的に管理できるアセットへ転換する重要なステップです。

まとめ: エージェント成果物をアセットへ転換する最後のピース

AIが描いたMermaidダイアグラムは、今や量的には十分に増えましたが、表現と管理の面では依然としてギャップがありました。Peleはテーマ適用可能なSVGレンダリングでこのギャップを埋め、開発者がMermaidコードを維持したまま再利用性とブランディングを同時に確保できるようにしてくれます。バイブコーディングのワークフローにおいて、ダイアグラム生成から文書統合までのパイプラインが一段と滑らかになるというわけです。

ただし、レンダリングされたSVGも結局は人がレビューし、バージョン管理してこそ本当のアセットになります。AIが生成したダイアグラムや分析をチームが気軽に確認し、保存するたびに不変バージョンとして積み上げるには、md-logのようなヒューマン・イン・ザ・ループのレビューレイヤーが役立ちます。Peleが表現層を、md-logがレビューとアーカイブを担当すれば、文書自動化の最後のピースが完成します。

参考資料

• Mermaid diagrams: an AI skill for project management
• AI Diagram Generator | MermaidViewer
• AI Flowchart Generator — Text to Mermaid Diagrams
• Pele · Mermaid diagrams as themeable SVG
• kepano on X: "This is Pele, my new rendering library for diagrams and charts, compatible with the latest Mermaid syntax. - 100-500× faster than mermaid.js - 6× smaller bundle - No dependencies - Easy to theme - Responsive to device width In pursuit of making Obsidian insanely fast and cohesively… / X
• Pele – Mermaid diagrams as themeable SVG | Hacker News
• kepano on X: "Pele renders Mermaid diagrams faster than you'd run from a volcano! Read the docs and try the playground: https://t.co/z0sKkAAlXL" / X
• Obsidian on X: "Pele is a fast, beautiful, open source renderer for Mermaid diagrams we created for the next version of Obsidian. You can already try it in the Pele playground and integrate it into your own apps." / X
• Octagonal typefaces