フローチャート、スイムレーン図、BPMN のプロセス、シーケンス図は、どれも普通の draw.io の図として出力されるので、そのまま手で編集を続けられます。このページでは、わかりやすい初稿を得るためにリクエストに何を書けばよいかを説明します。
フローチャート
手順を順番に書き、分岐ごとにその結果を書きます。
返金申請のフローチャートを描いて。顧客がフォームを送信し、サポートが注文を確認する。注文から 30 日を過ぎていれば申請は却下、そうでなければ経理が返金し、顧客にメールが届く。コツは次のとおりです。
- 始まりと終わりを書く:「フォームの送信からメールまで」。
- すべての分岐とその結果を書く:「注文から 30 日を過ぎていれば却下、そうでなければ返金」。
- 誰が何をするかを書く:スイムレーンになります。「顧客、サポート、経理のレーンを 1 つずつ」。
- 向きを選ぶ:上から下、または左から右。
AI は draw.io のフローチャートと BPMN の図形ライブラリを使います。分岐はひし形になり、BPMN を頼むと、イベント、ゲートウェイ、タスクに BPMN の図形が使われます。
ダイアグラムを説明するか、ファイルをアップロード...
シーケンス図
参加者を挙げ、そのあいだのメッセージを順番に書きます。うまくいかない場合の流れも含めます。
SMS 認証を使ったログインのシーケンス図を描いて。参加者はアプリ、認証 API、SMS プロバイダー、ユーザー。コードを 3 回間違えたときにどうなるかも示して。リトライ、タイムアウト、非同期の応答も書いてください。書かないと、すべてがうまくいく場合の流れだけの図になることがあります。
手元のフローチャートを描き直す
ホワイトボードの写真、スクリーンショット、PDF を添付して、AI に描き直しを頼みます。結果は、画像に描かれていた内容を本物の図形とコネクタで描いた、編集できる図になります。そのあとは、いつもどおり変更を頼めます。たとえば「2 つの承認ステップをまとめて」「支払いのあとにエラーの流れを追加して」です。
MCP サーバーを使うと、エージェントはコードからも図を描けます。たとえば「チェックアウト API のリクエストの流れをシーケンス図にして」と頼みます。Claude Code から使うを参照してください。
読みやすくする
- 図のスタイル(設定):「ミニマル」は素朴な図形だけにし、「スタイル付き」は色やアイコンを加えます。設定を参照してください。
- アニメーションするコネクタ:流れの向きがわかります。リクエストで頼んでください。
- 図の一部を選ぶ:その部分だけの変更を頼めます。たとえば「これらのステップを等間隔に並べて」。
例
プロンプト:「Generate agile scrum workflow diagram for software development team.」