【要約】AIに「図にして」と頼むと必ずmermaidが返ってくる——配置を自分で決められる図の道具を作った [Zenn_Python] | Summary by TechDistill
> Source: Zenn_Python
Execute Primary Source
// Problem
開発者がAIに図解を依頼する際、構造は正しいが資料として使いにくい図が生成される問題に直面している。既存のMermaidやGraphvizはレイアウトエンジンに配置を依存しており、意図的な強調や配置の制御ができない。
- ・Mermaid等は関係性のみを定義でき、ノードの具体的な位置を指定できない。
- ・画像生成モデルは日本語の文字が崩れるため、説明図として機能しない。
- ・既存のYAMLベースのOSSは、結局Graphvizに配置を任せており、人間が決めたい配置を制御できない。
// Approach
レイアウトエンジンに依存せず、HTML/CSSの力を借りて配置を明示的に制御する手法を採用した。具体的には、CSS Gridを用いて配置を記述し、Headless Chromeで画像化するプロセスを構築している。
- ・図の仕様をYAMLで記述し、CSS Gridでノードの配置を明示的に指定する。
- ・MCPサーバーを実装し、AIが独自のYAML方言を扱えるようにする。
- ・仕様（BLOCKS.md）を単一の正本とし、エージェントが幻覚を起こさないよう設計する。
- ・figgen_renderは、修正を容易にするため生成時にYAMLファイルを併せて出力する。
// Result
AIエージェントが「配置」まで含めた図解を生成可能になり、人間がYAMLを書く手間を排除した。これにより、構造確認用のMermaidと、プレゼン用のfiggenという使い分けが実現する。
- ・AIが独自のYAML仕様を理解し、意図した配置の図をPNG出力できる。
- ・「強調」や「迂回ルート」といった、従来のテキストベース図解では困難だった表現が可能になった。
- ・YAMLを正本として残すことで、1行の修正から再生成できる高速なワークフローを確立した。
Senior Engineer Insight
> 「AIに書かせる」ことを前提に、独自のYAML方言という弱点をMCPで補完する設計思想が極めて実践的だ。従来のツールは「人間が書く」ことを前提に学習コストを下げてきたが、本件は「エージェントが仕様を読み解く」ことで、人間には難しい複雑な制御を自動化している。ただし、レイアウトの自動検知（溢れ）が不完全な点は、大規模な図解を扱う現場では運用上のリスクとなる。CSSによる配置制御とAIの推論能力を組み合わせた、次世代のドキュメンテーション手法として高く評価できる。