概要
https://zenn.dev/genda_jp/articles/2025-12-12-drawio-tips-claude-code
詳細内容
## Claude Code に draw.io の図を描かせるコツ
https://zenn.dev/genda_jp/articles/2025-12-12-drawio-tips-claude-code
Claude Code を活用して draw.io の図を効率的に生成する際の具体的な落とし穴と、フォント、矢印、テキストサイズなどの調整に焦点を当てた実践的な対処法を解説する。
**Content Type**: Tutorial & Guide
**Language**: ja
**Scores**: Signal:4/5 | Depth:4/5 | Unique:4/5 | Practical:5/5 | Anti-Hype:4/5
**Main Journal**: 88/100 | **Annex Potential**: 85/100 | **Overall**: 84/100
**Topics**: [[Claude Code, draw.io, AI図形生成, 開発ワークフロー改善, pre-commit hook]]
この記事では、Claude Code を利用して draw.io 形式の図を効率的に生成する際の具体的な「罠」と、それらを回避するための実践的なコツがまとめられています。著者は、draw.io の GUI で図を作成する手間に対し、Claude Code が XML を直接編集できることで、自然言語による指示、複数要素の一括変更、Gitでのバージョン管理、そして「図の描き方」を継続的に改善・育成できるといった大きなメリットがあると強調しています。しかし、Claude Code は draw.io 特有の描画ルールを知らないため、いくつかの共通の課題に直面しやすいと指摘しています。
主な課題と対策は以下の通りです。
1. **フォント設定の罠**: `mxGraphModel` に `defaultFontFamily` を設定するだけでは PNG 出力時にフォントが反映されないことがあります。このため、すべてのテキスト要素 (`mxCell`) の `style` 属性に `fontFamily=フォント名;` を明示的に追加するよう指示することが重要です。
2. **矢印の配置テクニック**: draw.io では XML の記述順が描画順に影響するため、矢印は他の要素よりも先に記述し、図の最背面に配置します。また、矢印とラベルが重なるのを避けるため、ラベルは矢印から最低20px以上離して配置すべきです。テキスト要素への矢印接続では、`exitY` や `entryY` が期待通りに動作しない場合があるため、明示的に座標 (`mxPoint`) を指定することが推奨されます。
3. **テキスト要素のサイズ設定**: PDFやスライドでの視認性を高めるため、フォントサイズは標準の1.5倍（18px程度）を推奨。特に日本語テキストは英語よりも幅を取るため、意図しない改行を防ぐために、1文字あたり30-40pxを目安に十分な `width` を確保することが肝要です。
ワークフローの効率化のため、著者は `draw.io CLI` をインストールし、`pre-commit hook` を設定して `.drawio` ファイルのコミット時に高解像度で透明背景のPNGを自動生成することを提案しています。最も重要な点は、draw.io アプリ上での表示とPNG出力が異なる場合があるため、**必ずPNGファイルで最終的な視覚確認を行うこと**です。問題が発見された場合、そのPNGをClaude Codeに読み込ませてレビューと修正を依頼するサイクルを回すことで、図の品質を向上させることができます。
記事では、Claude Code への指示テンプレートと、生成後の図の確認項目をまとめたチェックリストも提供されており、これらの具体的なコツとチェックリストを活用することで、AIを活用した図形作成をよりスムーズかつ高品質に行えると結論付けています。