【要約】【draw.io】エンジニアの「雑なMermaid」を、綺麗な図解に変換する【アップデート版】 [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
エンジニアが構成図をAIで清書しようとする際、出力形式が「画像」であるために運用上の大きな障壁に直面する。従来の画像生成AIを用いた手法では、一度生成した図に対して部分的な修正を行うことが困難であった。具体的には以下の問題が発生する。
- ・図の微修正が不可能。矢印一本の変更でも、プロンプトを再投入して全体を生成し直す必要がある。
- ・公式アイコンの欠如。AWS等の公式アイコンが正確に再現されず、見た目の信頼性が損なわれる。
- ・テキストの崩れ。画像生成の特性上、日本語の文字化けやレイアウトの崩れが頻発する。
- ・ガチャ要素の介入。修正を試みると、意図しない箇所のレイアウトまで変わってしまう。
// Approach
筆者は、清書担当を画像生成AIからLLM（Claude）へ、出力形式を画像から「.drawioのXML」へと変更するアプローチを採用した。draw.ioのファイルがテキストベースのXML形式であることを利用し、LLMに図のソースコードを直接書かせる手法である。
- ・中間言語としてのMermaid活用。構造定義はMermaidで行い、LLMにその構造を解釈させる。
- ・XMLによる直接生成。Claudeに対し、draw.ioで読み込み可能なXML形式での出力を指示する。
- ・公式スタイル文字列の利用。
mxgraph.aws4等のスタイルを指定し、正確なAWSアイコンを呼び出す。 - ・Claude Codeスキルの活用。公式の
/drawioコマンドを用い、生成から書き出しまでを自動化する。
// Result
この手法の導入により、図解プロセスが「設計（Mermaid）」と「製図（Claude + draw.io）」に明確に分離された。これにより、レビューに基づいた図の継続的な改善が可能となった。
- ・差分編集の実現。会話を通じて「WAFを追加して」といった指示だけで、最小限の変更で図を更新できる。
- ・編集可能な素材の確保。生成された図はdraw.io上で各要素を自由にドラッグ＆ドロップできる。
- ・高い視覚的品質。公式アイコンやベクター形式のラベルにより、そのまま資料として利用可能な品質が得られる。
- ・開発体験の向上。Claude Codeの活用により、コマンド一発で編集可能な画像ファイルまで生成できる。
Senior Engineer Insight
> 図解を「画像」ではなく「コード（XML）」として扱う思想は、IaC（Infrastructure as Code）の概念をドキュメンテーションに拡張したものであり、非常に合理的だ。LLMの弱点である「空間把握（座標計算）」を、draw.ioの自動レイアウト機能で補完する運用は、実戦における現実的な解である。ただし、大規模な図面ではLLMが座標を誤認し、要素が重なるリスクがある。プロフェッショナルな現場では、構造生成をAIに任せ、最終的な整列と微調整を人間が行う「8:2の分業」が、最もコストパフォーマンスの高い運用となるだろう。