はじめに
こんにちは！GMOソリューションパートナーのT・Hです。
システム開発の要件定義やその他のプロセスにおいて、サービスの業務や運用フローを把握するためにヒアリングを行い、その結果を基に業務フロー図を作成する事があるかと思います。
今回はそんな時に少しでも効率よくこなせるよう、テキスト形式で記載されたフローをChatGPTを利用して簡単にスイムレーン図に変換する方法を模索していきたいと思います。
この記事の目的
- 専門知識不要！コードを書かなくてもアクティビティ図を作成する方法を提供
- オンラインにアップロードしないプライベートな手法を模索
- 簡潔な手順で！コピペだけで完結する手法を紹介
サンプルケース
今回は以下の運用フローを例にスイムレーン図を作成したいと思います。
かなり雑なフローですが、図を作るのが目的なのでご容赦下さい。。。
- 司書が本を選定
- 本を問屋から購入
- システムへ在庫登録し、本を書庫へ置く
- ユーザーが本をレンタル
- 司書がシステムへ貸出登録
- 返済期限をシステムがチェックし、返済期日2日前にメールで通知
- ユーザーが本を返却
- 司書がシステムへ返却処理を実施
では、早速検証していきましょう。
1. ChatGPTのプラグインを使う
1-1. Show Me DiagramとDiagramsを試す
良い点: 簡単に綺麗なアクティビティ図が描ける
悪い点: オンラインにアップされるため、業務上使用できない可能性がある
上記2つのプラグイン、かなり優秀で基本的にはこちらで解決します。
使い方は主旨から外れるため割愛させていただきますが、アウトプットはこんな感じです。
Diagramsは日本語指定し忘れました。。。
3列とは？ですが、問屋と言う新たなアクターを自発的にピックアップした手腕は評価に値するかもしれません。
今回はかなり雑なフローな上に雑な文章で依頼している事を加味すると、プロンプトさえしっかりするか適宜指摘・修正を繰り返せば使えるものができるかと思います。
1-2. 粗を探して別の方法を模索
Show Me DiagramやDiagramsは非常に便利ですが、オンラインにアップされる点が問題です。セキュリティ上の理由（建前）から、このオプションは却下し別の方法を検討していきましょう。
またShow Me DiagramについてはPlantUMLで出力される事で編集時はPlantUMLを修正する必要があり、「コードを書かず簡潔に」という主旨から微妙に外れてしまいます。
と、御託を並べましたが、ここで解決してしまっては記事にならず困るのです（本音）
2. ChatGPTにdiagrams.netのXMLを書いてもらう
という事でみんな大好きdiagrams.netのxml形式で出力していただきましょう。
diagrams.netであればオフラインで編集できますしプラグインに劣らず綺麗に描けるはずです。
頼み込んでみたのですが、にべもなく断られてしまいました。。。
2-1. サンプルのXMLを使ってみる
良い点: 簡単な図の描画は可能
悪い点: 複雑な図は描けない
まぁ0から書くのは難しいですよね、それはそうです。
ですが、、、見本があればどーだろう？？
そこで次はサンプルのXMLを渡してそれを参考に描画してもらう事は可能か検証してみます。
以下の様なサンプルを渡します。
見本が複雑すぎなのもあり、出力する事はできませんでした。。。
（大失敗だったため、結果は割愛させていただきます。）
各ノードの記述方法を都度説明するとある程度は描画してくれるようになりますが、ある程度複雑化した所で座標を適切に設定できなくなる傾向がありました。
そこも頑張れば解決できる術があるかもしれないですが、それをする手間が掛けられるならdiagrams.netで直接記載した方が早いです。
2-2. Mermaid、PlantUMLで書いてもらい、draw.ioで取り込む
良い点: MermaidやPlantUMLはテキストベースで図を描ける
悪い点: PlantUMLは画像形式でしか取り込めず、Mermaidはアクティビティ図に直接対応していない
さて、ここら辺からいよいよ本記事の本題に入りたいと思います。
xmlがだめでもdiagrams.netはMermaidやPlantXMLからのインポートが可能です。
PlantUMLについてはテキストベースでしか編集ができないため、今回はMermaidで頑張っていこうと思います！！
まずは軽くお伺いを立ててみましょう。
出力するとこんな感じです。
diagrams.net上で各ノードを編集できるのはいいですね！
ようやく一歩前進した気がします。
ですが、私が今回出したいスイムレーン図にはこれでは届かない。。。
2-3. Mermaidのシーケンス図を用いる
良い点: 工夫次第でスイムレーン図に似た表現が可能
悪い点: 完全なスイムレーン図にはならない
という事でようやく今回の結末に辿り着きます。
ここまで辛抱強く読んでいただいた方、本当にありがとうございます。
シーケンス図で出す事で各アクターのレーンを表現できるのではないか？という事でやってみました。
出力するとこんな感じです。
雑な依頼に対して真摯に対応する姿勢、尊敬に値します。
このままでは普通のシーケンス図な上に編集でかなりの手を加える必要が出てきてしまうため、以下の条件を追加してみます。
-
単一アクターで完結するアクションはnote overで表現
-
全てのアクションをnoteにしてnote間に空のnoteを挟む
-
ループや条件分岐を考慮する
結果はこちら・・・
絶妙に微妙ですが、、及第点ではないでしょうか。
空白のnodeを消して矢印を追加すれば、それっぽくなりそうな気がしませんか？？
背景色くらいは何とかしようとrect rgbを使って色を付けてみようとしたのですが、diagrams.netで読み込んだ時に反映されませんでした、、、
結論
業務フローをテキストで箇条書きではなく図に起こす事はサービスに関わる全ての方にとって非常に有用です。
今回紹介した方法は完璧とは言い難い結果ではありますが、0からスイムレーン図を作るよりは楽に作成できる可能性が見えたと感じております。
ざっくりとした検証ではありますが、少しでも業務効率化へのご参考となりましたなら幸いです。
