音声入力＋AIで楽して「編集可能な図」を作成する

はじめに

プログデンスの圓佛です。私は職業柄、Microsoft Officeスイートを使って設計書や手順書を作成する機会が多くあります。ですが、いきなり「デジタルで資料作成する」だと要件変更などで「全部作り直し」になると手戻りによるダメージが大きいです… そういった場合は「アナログに紙＋手書きで概要だけ落書き」してから、要件が定まってからデジタル化する、という進め方をします。

特にフロー図やシーケンス図などは「何度も変更が発生し、都度、書き直すことになる」場合もあり、修正が大変です。ですが、近年は高機能なAIが普及しているおかげで、こういった作業もずいぶん楽になりました。例えば以下のようなシーケンス図を作成することもできますし、他形式の図を作成することもできます。

今回は「音声入力を使って要件を書き起こし、GenUを使ってAIに作図させる」手順例を記載します。

同様の目的はこの記事の方法に限らず、他のAI/方法でも実現可能だと思います。実際にはその時々で「最適と思える選択肢を採用する」のが良いと思います。

この記事のゴール

この記事は以下のシナリオを実現することをゴールにします。

• 要件が決まっている
• その要件を図にしたい
• 作成した図は微修正できるよう、編集可能な形式にしたい

作業の流れ

作業の流れは以下の通りです。

1. 概要を音声入力する
2. GenUでダイアグラム図を作成する
3. 生成したダイアグラム図をGenUでdraw.io形式に変換する
4. Visual Studio Codeで図を微修正する

1.概要を音声入力する

私は普段、macOSを利用しているのですが、音声入力はOS標準の機能を利用しています。今のところOS標準の音声入力で満足していますが、Aqua Voiceやsuperwhisperも評判が良いとされています。それぞれに無料プランもあるようですので別の機会に試してみようと思います。

• Aqua Voice (Windows/macOS対応)
• superwhisper (macOSのみ対応)

下記は「GenUに用意されている、デフォルトのサンプル文面」です。本来は「設計書の内容」や「自分で考えたフロー・シーケンス」などを音声入力して文字起こししますが、今回は下記のサンプル文面を流用することにします。

Webアプリケーションで、ユーザーがログインボタンを押してから認証が完了するまでの流れを示してください。
フロントエンド、認証サーバー、データベースの3つのコンポーネントが関係します。

2.GenUでダイアグラム図を作成する

以前にGenU の「ダイアグラム生成」を試すという記事を書きましたが、GenUには「入力した文章をもとに、自動的に作図する」という機能があります。現時点では以下の図を作成することができます。「どの図で表現するのが最適か？」が不明な場合、図の選択自体をAIに任せることもできます。

1. フローチャート図
2. 円グラフ
3. マインドマップ
4. 象限チャート
5. シーケンス図
6. タイムライン
7. Gitグラフ
8. ER図
9. クラス図
10. 状態遷移図
11. XYチャート
12. ブロック図
13. アーキテクチャ図
14. ガントチャート
15. ユーザージャーニー
16. サンキーチャート
17. 要求図
18. ネットワークパケット図

自動作成された図はPNG形式やSVG形式でダウンロードできますが、Mermaid記法やUML Sequence Diagram記法などのコードでダウンロードすることもできます。

GenUを起動したら「ダイアグラム生成」を選択します。

音声入力した文章を貼り付け、「図の種類を選択」から「シーケンス図」を選択したら「生成」をクリックします。

AIが回答を用意し、更に作図してくれます。この段階でPNG形式やSVG形式での画像ダウンロードはできますが、画像では編集ができないため、draw.io形式へ変換します。「コードを表示」をクリックします。

コードが表示されました。右上にあるコピーボタンをクリックし、コードをクリップボードへコピーします。次の手順で利用するため、コピーした内容はテキストファイルに保存しておきます。

3.生成したダイアグラム図をGenUでdraw.io形式に変換する

GenUのチャットへアクセスします。先程、生成したダイアグラムのコードを保存したテキストファイルを貼り付け、「添付ファイルをdraw.io形式へ変換してください。」というプロンプトを送信します。

するとdraw.io形式のXMLが表示されました。右上のコピーボタンをクリックし、コードをクリップボードへコピーします。次の手順で利用するため、コピーした内容は拡張子「.drawio」というファイルに保存しておきます。

4.Visual Studio Codeで図を微修正する

Visual Studio Codeでdraw.io形式のファイルが開けるようにするため、Visual Studio CodeへDraw.io Integrationプラグインをインストールします。

プラグインのインストールが完了したら、ひとつ前の手順で保存した拡張子「.drawio」ファイルをVisual Studio Codeで開きます。するとVisual Studio Code上で作成した図を編集できるようになります。

修正が完了したら「File→Export」メニューからPNGやSVGなど、任意の形式で画像ファイルをダウンロードし、手順書や設計書などに貼り付けて利用します。