Claude Code に draw.io の図を描かせるコツ

[2025-12-16 追記] 手っ取り早く手元で使いたい方は「6.1. drawio のインストール」を済ませてこちらの記事をチェック！ 1. はじめに 株式会社GENDA データエンジニア / MLOps エンジニアの uma-chan です。 この記事は GENDA Advent Calendar 2025 シリーズ4 Day 12 の記事です。 1.1. この記事について Claude Code に draw.io 形式の図を描かせようとすると、意外とハマりポイントが多いです。 フォントが反映されない 矢印がラベルと被る テキストが意図しない改行をする 本記事では、私が実際にプレゼン資料の図を Claude Code に描かせる中で学んだコツをまとめます。 1.2. なぜ Claude Code に draw.io を描かせるのか draw.io の GUI で図を作成するのは時間

[tmatsuu]

「7. ベストプラクティスまとめ」だけでもチェックだ。わいわい

[hirorinya]

やってみよ

[sonots]

お、システム構成図を書かせられる？

[misshiki]

“私が実際にプレゼン資料の図を Claude Code に描かせる中で学んだコツをまとめます。”

[kiririmode]

draw.ioにcliあったのか

[ryudenx]

良い

[airj12]

mermaid向きでない絵はパワポで描いてもらうよりdraw.ioの方が効率良さげ、tipsありがたや

[mkusaka]

Claude Codeでdraw.io図を生成する実践TIPS集。fontFamily明示、矢印は先に記述、ラベル20px以上離す等を解説。

[hiroomi]

"ルールや学びをカスタムスラッシュコマンド・メモリ・Skill・Rules等に記載して「図の描き方」を育てていける"ファンデーション的に段取りは必要っと。