ChatGPTでdraw.ioの図を自動作成！AIで作ったフロー図は後から編集できる？

はじめに｜AIで作ったフロー図は編集できる？

「ChatGPTでフロー図を作れるのは便利だけど、後から修正できるの？」

そんな疑問を持ったことはありませんか？

実務で使う業務フロー図は、一度作って終わりではありません。担当者の変更や手順の見直しによって、何度も修正することがあります。

今回は、ChatGPTで作成したMermaidコードをdraw.ioに取り込み、実際に編集できるか検証しました。

結論からいうと、今回試した方法では、文字の変更も図形の移動もできました。図形を動かしたとき、接続線が追従することも確認できました。

1. ChatGPTでフロー図を作る

今回の題材は、架空の「備品購入申請フロー」です。

流れは次のとおりです。

1. 備品購入を申請する
2. 上長が内容を確認する
3. 承認するか判断する
4. 承認なら備品を発注する
5. 否認なら申請者へ差し戻す

ChatGPTにこの流れを伝え、Mermaid形式のフローチャートコードを作成してもらいました。

2. draw.ioにMermaidコードを取り込む

今回使用したのは、Confluence上で動作するdraw.ioです。

編集画面のメニューから、次の順番で操作しました。

「配置」→「挿入」→「Mermaid…」

表示された入力画面にMermaidコードを貼り付けると、フロー図を生成できます。

図1：draw.ioのMermaid挿入画面。メニューからMermaidコードを取り込む操作を紹介します。

生成された図には、開始・申請・確認・承認判断・発注・差し戻し・終了の図形が配置されました。

図2：Mermaidコードから生成した、架空の備品購入申請フロー図。

3. 図形の文字を変更してみた

次に、作成したフロー図の文字を変更してみます。

変更前：

上長が内容を確認

変更後：

管理者が内容を確認

図形内の文字を編集すると、フロー図の構成を維持したまま変更できました。

図3：確認担当者の表記を「上長」から「管理者」に変更したフロー図。

4. 図形を移動すると矢印はどうなる？

さらに、「管理者が内容を確認」の図形を右側へ移動してみました。

ここで確認したかったのは、図形と図形を結ぶ矢印の動きです。

検証した結果、図形を移動しても、前後の接続線が折れ曲がりながら追従しました。

つまり、今回の方法では、図形を単なる画像として扱うのではなく、個別の要素として編集できたわけです。

図4：図形を右へ移動しても、前後の接続線がつながった状態を維持した様子。

5. 今回の検証結果

確認した項目	結果
Mermaidコードから図を生成	成功
図形内の文字を変更	成功
図形を個別に移動	成功
接続線の追従	成功
図形の追加・削除	未検証
別の取り込み方式での編集	未検証

注意したいのは、Mermaidの取り込み方法やdraw.ioの利用環境によって、編集できる範囲が異なる可能性があることです。

今回確認したのは、ChatGPTで作成したMermaidコードを、人がdraw.ioに貼り付ける方法です。ChatGPTがConfluence上のdraw.ioを直接操作したわけではありません。

6. AIで作った図を実務で使う際の注意点

AIが生成した図が、必ずしも正しいとは限りません。

承認条件や担当者、処理の順序などは、人が確認する必要があります。

また、実際の業務情報をAIに入力する際は、会社や取引先の情報、機密データをそのまま入力しないよう注意しましょう。

まずは架空の業務フローで試し、操作方法を理解してから活用するのがおすすめです。

まとめ｜AIで下書き、人が仕上げる

今回の検証では、ChatGPTで作成したMermaidコードをdraw.ioに取り込み、図形の文字変更と移動ができることを確認しました。

さらに、図形の移動に合わせて接続線が追従することも確認できました。

フロー図を毎回ゼロから作成している方は、ぜひChatGPTとdraw.ioの組み合わせを試してみてください。