ポンチ絵——つまり概念図やアーキテクチャ図のことだが、これを描くのはずっと面倒な作業だった。PowerPointやKeynoteで四角や矢印を並べ、位置を微調整し、画像として書き出す。たったひとつの図に30分、1時間とかかることもざらである。
最近はGeminiのような画像生成AIも日本語サポートが充実してきて、概念図のようなものも出力してくれるようになった。しかし、どうしても意図しない装飾が乗ったり、余計なビジュアル要素が混入したりする。あくまで「それっぽい雰囲気の絵」であって、ドキュメントに貼って概念をきっちり伝えたい場面では使いにくいのが正直なところだった。
そこで、以前から気になっていたD2（図版記述言語）と、長年利用してきたFreepik（ストック素材サービス）を組み合わせ、AIエージェントにポンチ絵を自動生成させるコンセプトを試作してみた。結果は想像以上で、正直シビれた。
D2とFreepik——2つの武器
D2: Mermaidの強化版
D2はMermaidの強化版とも言える図版記述言語である。テキストベースで図を記述でき、以下のような特徴を持つ。
- コンテナのネスト: グループやサブシステムを入れ子構造で表現できる
- SVGアイコンの埋め込み: 外部のSVGアイコンをノードに組み込める
- スケッチモード: 手描き風のカジュアルなスタイルにも対応
- 豊富なカラーテーマ: 複数のプリセットテーマを選べる
テキストベースであることが決定的に重要だ。テキストならAIエージェントが生成・編集できる。GUIツールでマウスをドラッグする必要はない。
Freepik: アイコン検索の精度が高い
Freepikは写真・イラスト・アイコンなどあらゆるビジュアル素材を提供するストックサービスである。私はこれまでにも様々なプロダクトでFreepik APIを利用してきたが、特にアイコン検索の精度と網羅性には信頼を置いている。
APIを叩けばキーワードからアイコンをSVGで取得でき、そのままD2に埋め込める。しかもアイコンファミリー（統一されたデザインテイストのセット）を指定できるため、図全体のトーンを揃えることが容易である。
エージェントの仕組み
このプロジェクトでは、Claude Codeのエージェントスキルとしてポンチ絵生成機能を組み込んでいる。ワークフローは以下の通りである。
- ユーザーが自然言語で「こういう図を描いて」とリクエスト
- エージェントが図の構成要素を分析し、必要なアイコンのキーワードをリストアップ
- Freepik APIで各キーワードに最適なアイコンを検索・ダウンロード
- アイコンを埋め込んだD2ファイルを生成
- D2エンジンでSVG / PNGにレンダリング
ポイントは、アイコン選定からD2コード生成、レンダリングまでをすべてエージェントが一気通貫で行うことである。人間は「AWSのWebサービスのアーキテクチャ図を描いて」と言うだけでよい。
出力例
「AWSの少し複雑な構成のWebサービスのアーキテクチャ図を描いて」とお願いした結果を、4つのテーマで出力した。
outline（Neutral Grey）
線画のアイコンセットとグレー系のカラーテーマ。最もフォーマルな印象で、技術ドキュメントとの相性がよい。
outlineテーマ — Basic Rounded Lineal + Neutral Grey
flat（Buttered Toast）
塗りのアイコンセットと暖色系テーマ。カジュアルなプレゼン資料に向いている。
flatテーマ — Special Flat + Buttered Toast
color-outline（Mixed Berry Blue）
カラー線画のアイコンセットとブルー系テーマ。情報量と視認性のバランスがよい。
color-outlineテーマ — Special Lineal Color + Mixed Berry Blue
freehand（Vanilla Nitro Cola + sketch）
手描き風アイコンとスケッチモード。ホワイトボードに描いたような親しみやすさがある。
freehandテーマ — Juicy Fish Sketchy + Vanilla Nitro Cola（スケッチモード）
何がシビれたのか
率直に言って、出力のクオリティに驚いた。「シビれた」としか言いようがない。
まず、アイコンの選定が的確である。「AWS」「CloudFront」「RDS」といったキーワードから、文脈に合ったアイコンをFreepik APIから引き当ててくる。しかも同じファミリーのアイコンで統一されているため、図全体のトーンが崩れない。
次に、D2による構造表現が明快である。コンテナのネストでVPCやサブネットの階層構造を自然に表現し、矢印でデータフローを示す。余計な装飾がなく、概念がストレートに伝わる。これはAI画像生成では難しいポイントだ。
そして何より、自然言語で頼むだけという手軽さ。PowerPointを開く必要もなければ、四角の位置を揃える必要もない。「こういう図を描いて」——それだけで、プロフェッショナルな品質のポンチ絵が手に入る。
エージェント時代の図版表現
このコンセプトの先には、もっと大きな可能性が見える。
今後、AIエージェントがレポートを作成し、それをメールやSlackなどの既存メディアに載せて配信するという場面はますます増えていくだろう。その際、テキストだけでなく図版も含めた出力ができれば、情報伝達の質は格段に上がる。D2のようなテキストベースの図版言語は、まさにエージェントシステムに載せやすいモジュールとして適している。
また、ソースコードの解析や理解にもAIエージェントはこれから一層活躍するはずだ。コードを読み解き、その構造を解釈し、概念として可視化する——そうした場面で、ポンチ絵エージェントは一役買うだろう。アーキテクチャの全体像を図にしてもらえば、コードリーディングの効率は劇的に上がる。
ポンチ絵を描くのは面倒な作業だった。しかし、もうその時代は終わりつつある。
リポジトリ
プロジェクトの全コードはGitHubで公開している。
miyanaga/d2-end-freepik-agent-concept
あくまでコンセプトの紹介と成果物の共有を目的とした実験的プロジェクトである。興味のある方はぜひ触ってみてほしい。
この記事は notes.ideamans.com からの転載です。