「業務フロー図を更新しといて」と部長から振られたあの瞬間、げんなりするやつ、私です。
draw.ioで四角と矢印を1本ずつ引いて、整列して、色を変えて、線種を点線にして — 1時間コースの作業が頻繁にある。
これがClaude Codeで 2分 で「たたき台」まで出るようになりました。完成形ではなく 「あとは細部を整える状態」 までが2分。
今日はこのClaude Code × draw.ioのワークフローを、非エンジニア視点で整理します。
なぜこの組み合わせが効くのか
draw.ioは無料のオンライン作図ツール。フローチャート・組織図・システム構成図・ネットワーク図が描けます。エンジニアだけでなく、 企画職・PM・総務・コンサル が日常的に使っている地味な定番ツール。
ポイントは、draw.ioの内部データが テキストファイル形式(.drawio というXML) で扱えること。
つまり、 Claude Codeにテキストで仕様を伝えれば、.drawio ファイルとしてそのまま出力できる。出力されたファイルをdraw.io(ブラウザ版でもデスクトップ版でもOK)で開くと、図として表示される、という流れです。
ゼロから手で描くのと、Claudeに作らせて修正するのと、 後者のほうが10倍以上速い のが体感。
公式Skillを入れるのが2026年の正解
少し前までは自前でプロンプトを工夫する必要がありましたが、現在はdraw.io公式が Claude Code用の専用Skill をリリースしています。
公式Skillを入れるメリット。
- draw.ioのXMLフォーマットが組み込みで分かっている
- スタイル(色・線・フォント)の知識をClaude Codeが持つ
- スイムレーン(担当者別の縦割り表現)など複雑な構造もきれいに出力
- 自前プロンプト工夫が要らない
導入はコマンド1本でできます。
claude plugin install drawio
(2026年5月時点での導入コマンド。最新の入れ方は公式Skillsドキュメントで確認してください)
これを入れた状態でClaude Codeに「業務フロー図を作って」と頼むと、 クオリティの高い .drawio ファイル が返ってきます。
実例 — スイムレーンの業務フロー図を2分で
私が先週やった具体例を共有します。
「商品受注から発送までの業務フロー図を、3つの担当(営業・倉庫・経理)のスイムレーンで作りたい」というオーダー。
Claude Codeにこう投げました。
商品受注から発送までの業務フローを、draw.ioのスイムレーン形式で作って。
- 縦軸の担当：営業 / 倉庫 / 経理
- フロー：注文受付 → 在庫確認 → 引当 → 出荷準備 → 出荷 → 請求書送付
- 在庫がない場合は「お客様にメールで連絡」の点線分岐
- 請求書送付は経理レーン
- 担当ごとに薄い色分け
- 出力は drawio.xml として保存
70秒くらいで .drawio ファイルが出力された。draw.ioのデスクトップアプリで開くと、 3レーン構成・色分け済み・点線分岐入りの業務フロー図 が表示される。
そこから手で修正したのは、
- 「請求書送付」を「請求書発行」に文言修正
- 倉庫レーンの色を社内ブランドカラーに変更
の2点だけ。トータル2分で配布できる状態に到達しました。
手で描くと30分〜1時間コースの作業です。 時間効率が15〜30倍 になっている。
プロンプトのコツ — 「誰が」「何を」を箇条書きで
良い図を出してもらうためのプロンプトの書き方。3つだけ覚えれば大丈夫。
1つ目 — 業務の流れを箇条書きで伝える
文章で長く書くより、 A → B → C の形で書くほうが、Claude Codeの解釈がブレません。
2つ目 — 「誰がやるか」を明確にする
スイムレーンを使う場合は特に、 登場人物(担当・部署・システム) を最初にリストアップ。
3つ目 — 分岐や例外パターンを明記する
「在庫がない場合」「キャンセルの場合」など、 分岐条件と分岐先 をプロンプトに入れる。これがないと、Claudeは直線フローしか出してくれない。
レイアウトや矢印の引き方は、Claude Codeが勝手に整えてくれます。「左から右に」「上から下に」のような方向だけ指示すれば十分。
出力トークンの壁にぶつかったら
長くなる業務フロー(50ステップ超など)を一気に作らせると、 Claude Codeの出力トークン上限 に当たって途中で切れることがあります。
対処は3つ。
A. フローを分割して頼む
工程を3〜4ブロックに分けて、 ブロック単位で別ファイル として作らせる。あとで手動で1つにまとめる、または Claude にマージさせる。
B. 簡易版から段階的に詳細化
最初は概要だけのフロー(10ステップ)を作って、その後 「このフローの各ステップを2〜3個のサブステップに分解して」 と続けて頼む。
C. プランモードで全体設計してから出力
Shift+Tabを2回押して プランモード に入り、全体構造を確定してから生成。出力時に無駄な探索が減ります。
私は B のやり方が好きです。最初に粗い全体感を見て、それから細かくする方が 段階で確認できて手戻りが少ない。
業務シーン別 — 何に使えるか
draw.io × Claude Codeで作れて使い道のあるもの。
- 業務フロー図(受注、出荷、経費精算、稟議など)
- 組織図(部署・チーム構成、変更履歴)
- システム構成図(社内システム間の連携、データ流れ)
- ネットワーク図(オフィスのWi-Fi構成、VPN接続)
- 意思決定フロー(申請承認の階層、エスカレーション)
- AWS / GCPなどクラウド構成図(エンジニア向けだが、概要把握には非エンジニアにも有用)
- DFD(データフロー図)(個人情報の流れを可視化、コンプライアンス用途)
公認会計士の知人は 内部統制3点セットの業務記述書/フローチャート を作る用途で重宝しているそうです。監査対応の業務でも刺さる。
修正の流れ — 出力後はGUIで仕上げる
Claudeが出した図は 完璧ではない。むしろ「たたき台が出た」と思って、その後draw.ioのGUIで仕上げる前提で運用するのが正解です。
私の修正パターン。
- 文言の修正(言い回しや専門用語の調整)
- 色合いの微調整(社内ブランドカラーに合わせる)
- 重要な分岐の強調(線を太くする、色を濃くする)
- 配置の整列(自動配置だと若干ズレることがある)
ここまでで トータル5〜10分。完成形が手で描いたものと同等以上の品質になります。
まとめ
- Claude Codeとdraw.ioの組み合わせで、業務フロー図作成が 30分→2分 に
- 公式Skill(
claude plugin install drawio)を入れるのが2026年の正解 - プロンプトのコツは 「箇条書き」「誰が」「分岐明記」 の3つ
- 大規模フローは 段階的詳細化 か プランモード で出力トークンの壁を回避
- 業務フロー図・組織図・システム構成図・内部統制資料など、用途は広い
- 出力後は draw.io の GUI で5〜10分の仕上げが標準
「業務フロー図を手で描いている」方は、今週中にこの組み合わせを試してみてください。来週から、 「フロー図を更新して」と振られた時の表情 が変わるはずです。
