GitHub Copilot CLIを使って画面遷移図・シーケンス図を作成してみた
GitHub Copilotは、OpenAIの技術を活用したAIコード補完・支援ツールで、コマンドラインベース(CLI、Command Line Interface)も利用できる。
今回は、GitHub Copilot CLIを使って、設計書（画面遷移図・シーケンス図）を作成してみたので、その手順を共有する。
前提条件
下記記事の「GitHub Copilot CLIによる画面モック修正」が完了していること。
やってみたこと
GitHub Copilot CLIによる画面遷移図・シーケンス図作成
GitHub Copilot CLIで、対話形式で指示を出していくことによって、画面モックをベースとした設計書（画面遷移図・シーケンス図）を作成できる。その作成例は、以下の通り。
1) 以下のように、モック修正後のHTMLファイルを配置する。
2) 1)のフォルダ上でGitHub Copilot CLIを起動する。
3) HTMLファイルを読み込んで、画面遷移図を作成するよう指示を出し、「Enter」キーを押下する。
4) GitHub Copilot CLIで画面遷移を作成し、完了すると、以下のようなメッセージが表示される。
5) 作成された画面遷移図を開いた結果は、以下の通り。
6) ユーザー削除を行うシーケンス図を作成するよう指示を出し、「Enter」キーを押下する。
7) GitHub Copilot CLIでシーケンス図を作成し、完了すると、以下のようなメッセージが表示される。
8) 作成されたシーケンス図を開いた結果は、以下の通り。
9) ユーザー追加を行うシーケンス図を作成するよう指示を出し、「Enter」キーを押下する。
10) そのまま「2. Yes, and add these directories to the allowed list」を選択した状態で、Enterキーを押下する。
11) GitHub Copilot CLIでシーケンス図を作成し、完了すると、以下のようなメッセージが表示される。
12) 作成されたシーケンス図を開いた結果は、以下の通り。
13) 作成が終わり、お礼の言葉を伝えれば、 Copilot側から応答を返してくれる。
14) データ追加用シーケンスのHTMLは、以下のようになっていて、赤枠部分がMermaid（マーメイド）記法になっている。
15) 14)の赤枠部分を「sequence_add.mmd」として抜き出すと、GitHub上でそのまま参照できる形式になっている。
https://github.com/purin-it/copilot/blob/master/design-specs-github-copilot-cli/mermaid/sequence_add.mmd
16) GitHubに配置しなくても、Mermaid CLI を利用すれば、Mermaid(マーメイド)記法のファイルを視覚的な図表(SVG)に変換して確認できる。
Mermaid CLI をインストールするには、node.jsインストール済端末で、以下を実行する。
npm install -g @mermaid-js/mermaid-cli
17) 14)の赤枠部分を「sequence_add.mmd」として抜き出した後で、以下を実行する。
mmdc -i sequence_add.mmd -o sequence_add.svg
18)「sequence_add.svg」を開いた結果は以下の通りで、Mermaid記法のファイルが視覚的な図表(SVG)に変換されたのが確認できる。
19) その他のMermaid記法のファイル・視覚的な図表(SVG)については、以下を参照のこと。
https://github.com/purin-it/copilot/tree/master/design-specs-github-copilot-cli/mermaid
draw.io形式での画面遷移図作成
draw.io形式（拡張子: .drawio または .xml）は、無料の作図ツールで作成した図面データを保存するXMLベースのファイル形式で、draw.ioの公式サイトにアクセスするだけで、フローチャートやネットワーク図、ER図といった豊富なテンプレートを使用して簡単に絵を描くことができる。その作成例は、以下の通り。
1) GitHub Copilot CLIを起動し、画面遷移図をdrawioで書くよう指示を出し、「Enter」キーを押下する。
2) GitHub Copilot CLIで画面遷移図をdrawioで作成し、完了すると、以下のようなメッセージが表示される。
3) draw.ioの公式サイトにアクセスし、2)で作成されたdrawioファイルを開くため、「ファイル－次から開く－デバイス」を選択する。
https://draw.io/
4) 2)で作成されたdrawioファイルを選択し、「開く」ボタンを押下する。
5) 以下のように、作成されたdrawioファイルが、視覚的な図表で確認できる。
6) 表示された図の各部品を個別に選択することで、以下のように、表示された図表を更新することもできる。
7) 作成されたdrawioファイルを視覚的な図表(SVG)で出力するには、「ファイル－形式を指定してエクスポート－SVG…」を選択する。
8) 下記画面が表示されるため、「エクスポート」ボタンを押下する。
9) 保存するファイル名を確認後、「保存」ボタンを押下する。
10) 以下のように、ファイルが保存されたのが確認できる。
11) 保存されたファイルを開いた結果は以下の通りで、draw.ioの公式サイトで表示していたときと同じ図表が表示されることが確認できる。
12) draw.ioの公式サイトで開いたファイルを閉じるには、「ファイル－閉じる」を選択する。
13) drawioファイル、作成されたdrawioファイルを視覚的な図表(SVG)した結果は、以下を参照のこと。
https://github.com/purin-it/copilot/tree/master/design-specs-github-copilot-cli/drawio
要点まとめ
- GitHub Copilot CLIは、OpenAIの技術を活用したAIコード補完・支援ツールで、コマンドラインベース(CLI、Command Line Interface)も利用できる。
- GitHub Copilot CLIを使うと、設計書（画面遷移図・シーケンス図など）を作成できる。
