志望動機.comは、大学広報・入試広報に特化したWebマーケティングメディアだ。現役大学生ライターや入試広報コンサルタントなど、延べ100大学以上の支援実績を持つ編集部が、受験生・学生・社会人の「困った」に応える記事を届けている。
はじめに:ChatGPTで図解を作る方法は「目的によって4種類」ある
「ChatGPTで図解が作れる」と聞いて試したものの「どうやればいいかわからなかった」「イメージと全然違うものが返ってきた」という経験はないだろうか。
ChatGPTで図解を作るアプローチは、目的に応じて以下の4種類に分けられる。それぞれ活用できる場面・ツール・プロンプトの書き方が異なるため、まずこの分類を理解することが重要だ。
| 方法 | 出力される形式 | 使える場面 | 必要なツール |
|---|---|---|---|
| ① Mermaid記法 | テキストコード | フローチャート・ガントチャート・ER図など | GitHub・Notion・VSCode等 |
| ② SVGコード生成 | SVGコード | ベクター図・シンプルな図解 | ブラウザ・Adobe等 |
| ③ 図解の構成設計 | テキスト(構成案) | スライド・資料の図解アイデア出し | PowerPoint・Figma等で自作 |
| ④ ASCII図解 | テキスト | 簡単なフロー・構造の可視化 | テキストエディタ |
本記事では、実務で最も活用頻度が高い①〜③を中心に、すぐ使えるプロンプトを体系的に紹介する。
方法①:Mermaid記法で図解を生成する
対象読者: GitHubのREADME・Notionドキュメントに図解を埋め込みたい人 / 難易度:★★☆
Mermaidは、テキストコードから図解を自動描画するオープンソースツールだ。GitHub・Notion・GitLab・VSCode等でそのままレンダリングされるため、コードを書き慣れていないビジネスパーソンでもChatGPTを経由することで実用的な図解を作成できる。
フローチャート生成プロンプト
以下の業務フローをMermaid記法のフローチャートとして出力してください。
【フローの内容】
[フローの内容を箇条書きや文章で説明する]
例:
- 顧客からの問い合わせを受信する
- 内容を確認し、担当部署に振り分ける
- 担当者が対応内容を検討する
- 回答可能な場合:48時間以内に返信する
- 回答不可の場合:上長にエスカレーション
- 対応完了後、対応履歴をシステムに記録する
【指定事項】
- 分岐(Yes/No)がある場合はひし形ノードを使う
- 開始・終了はスタジアム形ノードを使う
- 日本語ラベルを使用する
- コードブロック(```mermaid〜```)の形式で出力する
シーケンス図(処理の順序・システム間のやりとり)生成プロンプト
以下のシステム間の処理フローをMermaid記法のシーケンス図として出力してください。
【登場する要素(アクター)】
- ユーザー
- フロントエンド(Webアプリ)
- APIサーバー
- データベース
【処理の流れ】
1. ユーザーがログインボタンをクリック
2. フロントエンドがAPIサーバーに認証リクエストを送信
3. APIサーバーがデータベースでユーザー情報を照合
4. データベースが照合結果をAPIサーバーに返す
5. 認証成功の場合:トークンを発行してフロントエンドに返す
6. 認証失敗の場合:エラーメッセージを返す
7. フロントエンドがユーザーに結果を表示する
Mermaid記法のシーケンス図として、コードブロック形式で出力してください。
ガントチャート(プロジェクトスケジュール)生成プロンプト
以下のプロジェクトスケジュールをMermaid記法のガントチャートとして出力してください。
【プロジェクト名】新サービスローンチ準備
【期間】2024年11月1日〜2025年1月31日
【タスク一覧】
- 要件定義:11月1日〜11月15日(担当:企画チーム)
- デザイン制作:11月10日〜11月30日(担当:デザインチーム)
- フロントエンド開発:12月1日〜12月20日(担当:エンジニア)
- バックエンド開発:12月1日〜12月25日(担当:エンジニア)
- テスト・QA:12月26日〜1月10日(担当:QAチーム)
- リリース準備:1月11日〜1月20日(担当:全体)
- ローンチ:1月31日
セクションをチームごとに分類し、
Mermaidコードブロック形式で出力してください。
クラス図・ER図(データ構造・関係性)生成プロンプト
以下のデータ構造をMermaid記法のER図(エンティティ関係図)として出力してください。
【エンティティと属性】
- ユーザー(user_id, name, email, created_at)
- 注文(order_id, user_id, total_price, ordered_at)
- 商品(product_id, name, price, stock)
- 注文明細(detail_id, order_id, product_id, quantity)
【関係性】
- ユーザーは複数の注文を持つ(1対多)
- 注文は複数の注文明細を持つ(1対多)
- 注文明細は1つの商品と紐づく(多対1)
Mermaidのerdiagramとして出力してください。
けんさん(副編集長)のコメント 「NotionにMermaid記法が対応してからは、会議前にChatGPTでフローチャートを生成してNotionに貼るだけで図解入りの資料が数分で完成するようになり、資料作成の時間が体感で半分以下になりました!」
方法②:SVGコードで図解を生成する
対象読者: ブラウザやドキュメントにそのまま埋め込める図解を作りたい人 / 難易度:★★☆
SVG(Scalable Vector Graphics)はブラウザで直接表示できるベクター形式の画像コードだ。ChatGPTにSVGコードを生成させることで、拡大してもぼやけない高品質な図解を作成できる。
【基本型】シンプルな構造図のSVG生成
以下の内容をSVGコードで図解してください。
【図解する内容】
[図解したい構造・概念・フローを説明する]
例:「クラウドサービスの3層構造(インフラ層・プラットフォーム層・アプリケーション層)」
【デザイン指定】
- サイズ:width="800" height="400"
- 色:背景は白(#FFFFFF)、各要素は青系(#3B82F6)・グレー(#6B7280)を使用
- フォント:日本語テキストを含む場合はfont-family="sans-serif"
- スタイル:角丸の矩形(rx="8")でモダンな見た目に
- テキスト:各要素にラベルを中央揃えで配置
完全なSVGコードを```svg〜```のコードブロックで出力してください。
【ピラミッド図】階層構造の可視化
以下の階層構造をSVGのピラミッド図として出力してください。
【階層(上から)】
1. ビジョン(最上位:最も重要)
2. 戦略
3. 戦術
4. 施策・アクション(最下位:最も詳細)
【デザイン指定】
- 上に行くほど小さく、下に行くほど大きい台形の積み重ね
- 各層に異なる青のグラデーション色を使用
- 各層の中央にテキストラベルを白文字で配置
- サイズ:600×400
SVGコードをコードブロックで出力してください。
みおさん(編集部)のコメント 「卒論の発表スライドにSVGの図解を使いたくて試したら、ChatGPTが生成したSVGをHTMLファイルに貼り付けるだけでブラウザで見られる図ができあがり、PowerPointに貼り付けても綺麗なまま使えました!」
方法③:図解の「構成設計」をChatGPTに考えてもらう
対象読者: PowerPoint・Keynote・Figmaなどで自分で図解を作りたいが、どんな図にすればいいか迷っている人 / 難易度:★☆☆
「図解を作る」作業の中で最も時間がかかるのは「どんな図解にするか」を考える部分だとされている。ChatGPTに図解の構成・設計を提案させることで、この思考部分を効率化できる。
【図解タイプ選定プロンプト】どの図解が最適かを提案させる
以下の内容を説明する図解を作りたいと思っています。
最適な図解のタイプとその構成を提案してください。
【説明したい内容】
[説明したい概念・プロセス・データ・関係性などを記述]
例:「AIの活用が企業の生産性に影響するメカニズム」
【提案してほしいこと】
1. この内容に最適な図解タイプ(フローチャート・マトリクス・ベン図・ピラミッド等)を3種類提案する
2. 各タイプの「構成要素」と「配置の方向性」を説明する
3. それぞれのメリット・デメリットを比較する
4. 最も推奨するタイプとその理由を述べる
【図解の構成案生成プロンプト】パワポ・スライド用の設計図
以下の内容をスライド1枚の図解で表現したいと思っています。
PowerPointやKeynoteで作成するための「構成設計書」を作成してください。
【図解にする内容】
[内容を記述]
【出力してほしい情報】
1. 図解のタイプ(例:左から右へのフロー図)
2. 登場する要素の一覧と各要素の説明(1〜2行)
3. 要素間の関係・矢印の方向と意味
4. 推奨カラーパレット(役割ごとに色を指定)
5. テキストラベルの推奨文字数(各要素の最大文字数)
6. 作成手順のステップ(PowerPointで再現する場合の手順)
【比較表・マトリクス設計プロンプト】
以下の内容を比較するマトリクス図・比較表の設計をしてください。
【比較したい対象】
[比較する要素を列挙]
例:「クラウドサービス3社(AWS・Azure・GCP)の特徴比較」
【出力形式】
1. 比較軸(行)の推奨リスト(5〜8項目)と各軸の説明
2. 各対象(列)の簡単な特徴まとめ(2〜3行)
3. 表の全体構成(Markdown形式で下書きを作成)
4. この比較表で「特に目立たせるべき差異」の指摘
はるかさん(編集長)のコメント 「大学広報の資料でよく使う『他大学との比較表』の設計をChatGPTに任せるようにしてから、比較軸の抜け漏れが減り、資料のクオリティが客観的に上がったと感じています!」
方法④:ASCII図解で手軽に構造を可視化する
対象読者: コードやメールに手軽に図解を埋め込みたい人 / 難易度:★☆☆
ASCII(テキスト文字)だけで構成される図解は、メール・Slack・コードのコメントなど、どんな環境でも表示できるシンプルな図解方法だ。
【ASCII図解プロンプト】
以下の構造をASCIIアートで図解してください。
【内容】
[図解したい構造を説明]
例:「3層のWebアプリケーションアーキテクチャ(プレゼンテーション層・ロジック層・データ層)」
【条件】
- 等幅フォントで表示したときに整列するよう設計する
- 矢印には「→」「←」「↑」「↓」「↔」を使用する
- ボックスは「+-----+」形式で作成する
- 幅は最大70文字以内に収める
- 日本語テキストを含める
コードブロック(```〜```)で出力してください。
図解プロンプト共通の「精度を上げる4つのコツ」
本記事のプロンプトに共通する、図解生成の精度を上げるための書き方の原則を整理する。
コツ① 「何を伝えたいか」を先に書く 図解の種類より先に「この図で読者に何を理解させたいか」を1文で書くことで、ChatGPTが目的に沿った設計を選べるようになる。
コツ② 要素の数を指定する 「5つの要素」「3ステップ」など要素数を明示することで、ChatGPTが情報を適切に分解・整理してくれる。指定がないと情報が多すぎる・少なすぎる図になりやすい。
コツ③ 対象ツールを指定する 「Notionに貼る用」「PowerPointで再現する用」「SVGでブラウザ表示する用」などの使用ツールを書くことで、出力形式が最適化される。
コツ④ 「修正指示」でブラッシュアップする 最初の出力が完璧でない場合は以下のような追加指示で精度を上げられる。
生成した図解に以下の修正を加えてください:
- [要素A]と[要素B]の間に双方向の矢印を追加する
- [ラベルX]のテキストを「〇〇」に変更する
- 全体を横並びから縦並びのレイアウトに変更する
けんさん(副編集長)のコメント 「図解生成で最もよくある失敗は要素数の指定をしないことで、指定がないとChatGPTが10以上の要素を詰め込んだ複雑すぎる図を生成しがちなので、最初から要素数の上限を伝えることが精度向上の最短経路です!」
まとめ:ChatGPTで図解を作る4方法の使い分け
本記事で解説した4つの図解作成方法を、目的別に整理する。
| 方法 | 向いている用途 | すぐ使える環境 |
|---|---|---|
| ① Mermaid記法 | フローチャート・ER図・ガントチャート | GitHub・Notion・GitLab |
| ② SVGコード | ベクター図・スライド埋め込み | ブラウザ・PowerPoint・Adobe |
| ③ 構成設計 | PowerPoint・Keynoteで自作する前の設計 | 自分で作成するすべてのツール |
| ④ ASCII図解 | メール・Slack・コードコメント | テキストが使えるあらゆる場所 |
ChatGPTは「図解を作ってくれる」というより「図解のコードや設計を生成してくれる」ツールだという認識を持つことが、期待とのギャップをなくす最も重要な前提だ。本記事のプロンプトを起点に、自分の業務・用途に合った図解生成の型を見つけてほしい。
本記事は志望動機.com編集部が作成したものだ。ChatGPTの仕様・機能はOpenAIによってアップデートされる場合があるため、最新情報はOpenAIの公式サイトで確認することをすすめる。