フローチャートを描くには、作図ツールを使います。しかし、1からフローチャートを手作業で作るのは手間がかかります。そこで利用したいのが、GoogleのAI「Gemini」です。
1.Geminiでフローチャートを描く方法
Geminiを使えば、フローチャート用のコードを自動作成することが可能です。
フローチャートを描くには、Geminiで「Mermaid記法」か「PlantUML記法」のコードを出力し、作図ツールのエディタにコードを貼り付けます。
GeminiとMermaid liveを活用して描くフローチャート
その際に、以下のものを用意します。
- Geminiを使用するためのパソコン機器(最新のGoogleを利用できるOS)
- Gemini(AI)のWEBツールを起動するGoogleブラウザ
- Geminiを使うためのGoogleアカウントのログイン情報
- コードを保存するテキストエディタ
- フローチャートをプレビューできる作図ツール
コードの出力はGeminiを使えばすぐにできます。作図ツールは、フローチャートを描くときのメインツールです。フローチャートを実際に作って、指定の形式でファイル保存や共有するのに必要です。
ちなみに、Geminiの出力は自動ですが、構文エラーや見た目の調整は必要です。リアルタイム編集できるエディタがあれば修正も早いため、効率的に作成できます。
2.Geminiでフローチャートを描く手順
Geminiでフローチャートを描く手順は以下の3ステップです。
Step1. Geminiに指示文を入力する
事前に、ブラウザからログインしてGeminiアプリを起動します。Geminiが立ち上がると、画面下にメッセージの入力欄が表示されるため、そこに、描きたいフローチャートの内容を入れます。
今回は、例として「クレーム対応の流れ」というテーマでフローチャートを作成することにします。
まずは、「クレーム対応の流れを箇条書きにして?」と指示します。AIが以下の項目とその説明を出力します。
- クレーム発生・受付
- 状況確認・情報収集
- 顧客への初期対応・傾聴
- 原因究明
- 解決策の検討・策定
- 顧客への説明・提案
- 解決策の実施
- 経過報告・進捗確認(必要に応じて)
- 解決・完了
- 再発防止策の検討・実施
以上が出力されました。しかし、企業によって自社が対応するクレーム対応の細かい部分には違いがあります。また、AIの出した項目名は、一読した際にわかりにくい場合もあるため、テキストエディタにコピペして、手動で修正します。
- クレームの発生
- 初期対応を行う
- 状況を把握して対応を検討(謝罪などを含む)
- 解決策を実行する
- 結果を確認(顧客の反応)
- 対応を記録・社内で共有
- 再発防止を進める(フィードバック)
簡単な手直しの後、Geminiにコードの作成を指示します。
graph TD
A[クレームの発生] --> B[初期対応を行う]
B --> C[状況を把握して対応を検討(謝罪などを含む)]
C --> D[解決策を実行する]
D --> E[結果を確認(顧客の反応)]
E --> F[対応を記録・社内で共有]
F --> G[再発防止を進める(フィードバック)]
G --> A
以上の基本コード(Mermaid記法)が出力されます。
複雑なコードにも対応する「PlantUML記法」で作成したい場合は、「PlantUMLの記法で作成する」と入れて指示を出し、コードを生成しましょう。
Step2.コードを作図ツールに導入する
次に、コードを入れて作図ツールで表示します。生成したコードは、コード編集のある作図ツールを開いて、そのエディタ画面に貼り付けます。するとコードを反映したフローチャートが作成されます。
作図ツールによっては、プレビュー画面にこれが自動的に表示されます。例えば、「Mermaid Live Editor」では、コードを貼り付けるだけで自動的にフローチャートを視覚化します。
Step3.フローチャートを修正する
フローチャートをコードで作成した後、コードやプレビューを確認して、修正することができます。
よくあるのは、フローチャートの種類や方向、枠線や矢印などの細かいパーツの修正です。
まずMermaid記法では、「graph TD」が「フローチャート(縦方向)」の種類を指定しています。方向を修正する場合は、「TD」の部分を次の記号に修正することです。
- 横(左→右)「LR」
- 逆横(右→左)「RL」
- 逆縦(下→上)「BT」
例えば、横向きに修正する場合は、「TD」を「LR」に修正するだけでOKです。
また、枠線や矢印などの細かいパーツを修正する場合もコードを変えるだけで対応可能です。これを「ノード」と呼びます。
現在のコードは、順方向の矢印「-->」のみを使用しています。しかし、実際には、他の矢印や線を使用することも珍しくありません。
- 直線のみ「---」
- 点線「-.->」
- ラベル付き「-- テキスト -->」
また、枠線の変更は、テキストを囲う記号を変えることで、丸や菱形などの形状に変更できます。
- 四角「[]」
- 丸「()」
- 菱形「{}」、
- テーブル風「> ]」
また、分岐を作る場合は、同じところから複数に矢印を渡すように追加して、「|テキスト|」の記号で分岐のテキストを入れます。今回はクレーム対応への成功と失敗を分岐します。
graph TD
A[クレームの発生] --> B[初期対応を行う]
B --> C[状況を把握して対応を検討(謝罪などを含む)]
C --> D[解決策を実行する]
D --> E[結果を確認(顧客の反応)]
E -->|成功| F[対応を記録・社内で共有]
E -->|失敗| C
F --> G[再発防止を進める(フィードバック)]
G --> A
以上のように書き換えると、1直線だったフローチャートが、分岐するチャートに変わります。
3.コードに対応する作図ツール
作図ツールには、コード編集に対応するものとそうでないものがあります。そのため、Geminiでコードを用意する場合は、コードに対応する作図ツールを採用することです。
ただし、「MerMaid記法」と「PlantUML記法」のどちらに対応できる作図ツールか確認が必要です。
まずは、「MerMaid記法」を採用している作図ツールを3つ紹介します。
【MerMaid記法に対応する作図ツール】
①EdrawMax
EdrawMaxは、さまざまな種類の作図ができるソフトです。インストール版とWEB版が両方あり、どちらでもフローチャートを作成することができます。
また、EdrawMaxの機能に「Edraw AI」と呼ばれるテキストAIがあります。プロンプトにGeminiで作ったMerMaid記法のコードを入れて生成するだけで、1から作らずとも、完成したフローチャートが作成できます。
手順は、「新規作成」のボタンから画面を開き、上部メニューの「AI」、2段目のフローチャートを選択し、サイドバーのAIにテキストを入力し、そこで「コードからフローチャート生成」を指示します。
後は、Geminiの自動生成コードを貼り付けて実行すれば完了です。
リアルタイムなコード編集ではありませんが、直感的な操作と合わせて作業できます。テンプレートも豊富で、デザイン性に優れたフローチャートを手動で作成できるツールです。
②draw.io
draw.ioは、オンライン上でログインせずに無料で利用できる作図ツールです。サイドバーから選べるさまざまな図形や矢印、テキストを加えて、フローチャートを作図できます。
また、最初に文章で大まかなテーマや詳細をテキストで伝えることで、作図したものを表示することもできます。
コード対応を利用する場合は、上のサイドバーから「配置」→「挿入」→「Mermaid」の順で選択し、コード編集画面が出たら、そこに貼り付けて「挿入」を押して完了するだけです。これだけで、コードからフローチャートを作ることができます。
ただし、コードを直すリアルタイム編集の機能はついていないため、エディタで一度保存して、それを編集しながら挿入するやり方が基本です。
③Mermaid Live Editor
Mermaid Live Editorは、Web上で簡単にフローチャートが作成できるサービスです。特にテンプレートの基本デザインが用意されており、そこからテキストを変更するだけで、簡易なフローチャートを誰でも作ることができます。
また、Mermaid記法のコードを使用してリアルタイムに反映することが可能です。コードと作図の対応をチェックしながら同時に作成を進めることができます。その上で、作図の編集中は、コードに間違いがあった場合に、赤い波線で知らせるなどコード作成の補助機能も搭載されています。
例えば、リアルタイムでコード編集のできる作図ツール「Mermaid Live Editor」と、デザイン性が豊富な作図ツール「EdrawMax」を組み合わせることです。基本の作図をしてからデザインできるというそれぞれの強みを両取りできます。
次に、PlantUML記法を採用している作図ツール2つの特徴です。
【PlantUML記法に対応する作図ツール】
①PlantUML
PlantUMLは、エディタを始めとしたツールを提供しているフリーオープンソースのソフトです。その中の「PlantUML Web Editor」を活用してWEB上でコードによる作図が可能です。
Geminiで生成したPlantUML記法のコードもそれを貼り付けるだけで、視覚的にフローチャートを確認できます。また、MerMaid記法では難しい条件文の細かな設定も可能です。
②planttext
planttextは、WEB上で動作する作図ソフトです。操作方法は、「PlantText UML Editor」を開いて、PlantUML記法でGeminiから出力したコードを貼り付けます。この方法で、コードからフローチャートを作成することができます。
作図への反映はコード修正後ではなく、「Refresh」のボタンを押して反映する仕組みです。修正前後の変化を自分のタイミングで目で見て確認できます。
また、そこで作成したフローチャートはさまざまな形式の種類でダウンロードできます。無料で使える分、機能は少ないですが、シンプルなコードの作図が可能です。
4.よくある質問
ここでは、Geminiでフローチャートを描く方法についてよくある質問に答えます。
①Geminiでフローチャートを直接作成できますか?
いいえ、Geminiにはフローチャートを直接作成して編集する機能はありません。ただし、フローチャート用のコードを生成することは可能です。
②Geminiと他のAIツール(ChatGPT、Notion AIなど)のフローチャート作成機能の違いは?
コードを用意するためのフローチャート作成機能に絞れば大きな違いはありません。コード作成はChatGPTやNotion AIでも問題なくできるため、普段使っているAIで作業するのが効率的です。
③フローチャートを直接作成できるツールはありますか?
フローチャートを直接作成できるツールは、AIに作図ソフトを組み合わせたツール、描画ツールの2種類で可能です。
LLMの場合は、EdrawMaxのように作図ソフトにAIが搭載されており、そこにテキストで指示を出すだけで画面上にフローチャートを作成できます。チャットGTP単独で画像・図面作成をプロンプト入力することでも可能です。
ただし、通常のプロンプトではコードが出力されるため、直接作成を促す工夫が必要となります。
描画ツールの場合は、「Adobe Illustrator」や「Photoshop」、「CLIP STUDIO PAINT」などがあります。コードによる作成はできませんが、手動で図形や矢印、テキストを挿入することで、画面上にフローチャートを作り出すことが可能です。