【完全版】図の作成はChatGPTで完結！業務で使えるプロンプト集

「コードもデザインもできない自分に、図なんて作れない」「簡単に仕事で使う図を作れないかな」と思っていませんか？

実は、プロンプトを入れるだけでフローチャートやガントチャートがサクッと完成します。

そのプロンプトも、やりたいことを伝えればChatGPTが作ってくれるので、図の作成時間が短縮できますよ。

この記事では、ChatGPTで図を作るプロセスを紹介していきます。プロンプトも公開しているので、効率的な図の作成に役立ててください。

ChatGPTで図を作る仕組みを理解しよう

ChatGPTでは、さまざまな図を使って情報を可視化できます。図を作る主な方法は以下の3つです。

実際の仕上がりや特徴を見ていきましょう。

①画像として作る

社内マニュアル用に「コールセンターにおける業務フロー」を作成すると仮定して、まず画像バージョンを作っていきます。

プロンプトはできるだけシンプルにしてみました。

コールセンターにおける、カスタマーサポートの詳しいフローを画像にしてください。
電話でのサポートシーンを想定します。

イラスト調やグラフィック感のある表現も可能で、資料の雰囲気に合わせた表現ができます。

文字化けが生じるケースが多いのがネックですが、簡単なプロンプトでもイラスト入りの見やすい図ができます。だいたいのイメージをつかんでおきたいときに便利です。

②Mermaid記法を使って作る

Mermaidは、テキストベースで図を描画できるマークダウン形式の記述言語です。

ChatGPTからMermaid記法のコードを生成し、Live Editorなどの外部ツールで可視化できます。

コードを生成するために、プロンプトは以下のようにアレンジしました。

コールセンターにおける、カスタマーサポートの詳しいフローチャートを作ります。
電話でのサポートシーンを想定します。
Mermaid記法を使ってコードを生成してください。

上記のプロンプトから、このようなコードが生成されました。

graph TD
    A[お客様からの電話] --> B[オペレーターが応答]
    B --> C[内容をヒアリング]
    C --> D{その場で解決可能？}
    D -- はい --> E[FAQやマニュアルをもとに回答]
    E --> F[対応完了／通話終了]

    D -- いいえ --> G[担当部署にエスカレーション]
    G --> H[対応内容を検討]
    H --> I[オペレーターに回答を伝達]
    I --> J[お客様に折り返し案内]
    J --> F

このコードを、Mermaid Live Editor上でプレビューしてみましょう。

ChatGPT内ではMermaidのプレビュー表示ができないため、外部エディターやGPTsを使う必要があります。

こちらは文字化けや表示の崩れもなく、シンプルながらきれいなフローチャートになりました。

③HTMLやCSSを使って作る

最後に、HTML＋CSSを使ってcanvas上で作る方法も見てみましょう。

レイアウトの乱れを防ぐため、細かくプロンプトを作成してみます。

あなたはプロのフロントエンドエンジニアです。以下の条件に沿って、HTMLとCSSのみを使用した「コールセンターにおける電話対応業務フローチャート」のコードを生成してください。

【目的】
電話サポートの業務フローを、社内マニュアルや研修資料として視覚的に共有するためのフローチャートを作成します。

【登場人物】
・顧客
・オペレーター
・担当部署

【業務フローのステップ（例）】

・顧客が電話をかける
・オペレーターが受電・ヒアリング
・一次対応を試みる

「解決できたか？」で分岐
　 ├ はい → 他に不明点がないか確認する → 通話終了
　 └ いいえ → 担当部署へエスカレーション → 回答を得て折り返し

顧客に連絡 → 完了

【デザイン条件】
・使用言語はHTMLとCSSのみ（JavaScriptや外部ライブラリは不可）
・レイアウトは縦型（上から下への流れ）
・各ステップは図形（長方形、菱形など）で明確に表現
・「その場で解決できるか？」は菱形（決定ノード）で表示
・分岐の「はい」「いいえ」にはそれぞれ矢印を明示的に表示し、次の処理に正確につなげてください
・ブルー系の配色で、全体をシンプルかつ視認性の高いデザインにしてください
・要素のズレやレイアウト崩れがないように厳密に配置してください
・スマートな余白・フォント調整も行い、見た目の完成度を高めてください

生成されたコードをcanvasでプレビューすると、きれいなフローチャートができました！

ちょっとシンプルですが、ここから編集を加えるとよりデザイン性の高いチャートが出来上がります。

自分でコードを書き換えるのはハードルが高いかもしれませんが、ChatGPT上で修正も可能です。

ChatGPTでは、さまざまな手法で図を作ることができます。

イメージ図でよければ画像生成、シンプルな図ならMermaid記法、手を加えて好みのデザインにしたいならHTML＆CSSがおすすめです。

ChatGPTのcanvas機能を使えば、HTMLとCSSのコードから図を直接プレビュー表示できます。無料ユーザーでも使えるので、試してみてください。

ChatGPTで図を作成する方法

ChatGPTを使ってきれいな図を作るには、事前の準備が必要です。ここでは、図作成の3ステップと、よくあるエラーへの対処法を紹介します。

ステップ1｜目的に合った図の種類を選ぶ

まずは、「何を伝えたいのか」「どんな場面で使うのか」を考えながら、図の種類を選びましょう。

最初は「こんな図を作りたい！」とカジュアルな声かけでもOKです。ChatGPTがあなたの希望を聞き取り、ぴったりの図を提案してくれます。

ステップ2｜わかりやすいプロンプトを作る

図の種類が決まったら、次はプロンプト（指示文）の作成です。

ChatGPTは言葉の指示をもとに図を作ります。図の内容を具体的に伝えてあげましょう。

もしイメージが固まっていなくとも問題ありません。

「プロンプト作りを手伝って！」だけでも、ChatGPTが図に必要な事柄を質問してくれるので、答えていきましょう。

ChatGPTの質問にすべて答えると、以下のようなプロンプトが生成されました。

ステップ3｜ChatGPTでコードを生成する

準備が整ったら、いよいよプロンプトを入力します。

作ったプロンプトをそのままChatGPTに渡すと、一気にコードが生成されました。

作成した図が文字化けしたときの対処法

ChatGPTで図を作成すると、以下のような文字化けが見られる場合があります。

主な原因としては、日本語フォントの未対応が挙げられます。

 ChatGPTはデフォルトで日本語フォントを保持していないため、日本語テキストが□表示や文字化けを起こすのです。

解消するには、まずGoogle Fontsにアクセスします。

一番上の「Noto Sans Japanese」を選択します。

右上の「Get font」をクリックします。

「Download all」をクリックします。

ダウンロードした「Noto_Sans_JP」のzipファイルを解凍すると[static」というフォルダがあります。開くとフォントのファイルが複数入っています。

どれでも良いので、ChatGPT上にアップロードすると文字化けを回避できます。

プロンプトで「アップロードしたフォントを使用して日本語を表示してください」と指示するとさらに効果的です。

フォントが適用されると、このように文字化けが解消されます！

図の作成に使えるGPTs

ここでは、図の作成ができるGPTsを3つ紹介します。

それぞれ特徴がありますが、基本的に「◯◯の図を作って」といった声かけでスタートしてOKです。

1.GPT Plugins

GPT Pluginsは、DALL-EやWeb検索など、ChatGPTの使い方をサポートしたり活用例を教えてくれたりするGPTsです。図に特化しているわけはありませんが、画像生成で簡単な図を描画してくれます。

2.Mermaid Chart

Mermaid Chartは、Mermaid記法を用いてChatGPT上でコードを生成できます。使用時は外部ツールのMermaid Live Editorと接続し、デザインの変更が可能です。

3.Diagrams: Show Me 

.Diagrams: Show MeはChatGPTでさまざまな図を描画できます。
画像も可能ですし、MermaidやPython、csv形式にも対応しています。

ChatGPTで図が作れる8つのプロンプト集

ここからは、実際に使えるプロンプトをご紹介します。

プロンプトも実際にChatGPTで作ってもらいました。HTMLとCSSでコードを書き、canvas上でプレビューできるようにしています。

それぞれの図に用いたプロンプトを公開しているので、アレンジして使ってみてください。

ER図｜システム設計やデータ管理の整理に

ER図（Entity-Relationship図）は、データベース設計の際に「どんな情報を、どのような関係で管理するか」を表す図です。システム開発や情報整理に使われます。

あなたはプロのフロントエンドエンジニアです。以下の要件に従い、HTML と CSS だけで「社内備品貸出管理システム ER 図」を生成してください。

【目的】
- 社員が総務部に備品を借りる一連の流れを、3 つのエンティティと動詞句で
  わかりやすく可視化し、社内マニュアルや研修スライドに即掲載できるコードを作成する。

【エンティティと属性】  
1. **社員**  
　・社員ID  
　・氏名  
　・部署名  

2. **総務部**  
　・貸出番号  
　・社員ID  
　・備品ID  
　・貸出日  
　・返却日  

3. **備品**  
　・備品ID  
　・備品名  
　・管理番号  

【リレーションと動詞句】  
- **社員 → 総務部** ：矢印ラベル「貸出申請」  
- **総務部 → 備品** ：矢印ラベル「貸与」

【デザイン条件】  
- ボックスをパステルカラーで色分け  
　　社員＝水色（#cceaff）／総務部＝ラベンダー（#e6d9ff）／備品＝ミント（#d5f7e6）  
- 矢印とテキストはアクセント色 #4a75bc  
- レイアウトは 1 行 3 列（横並び）。幅が狭い環境では自動で折り返して OK  
- 動詞句はボールド＋アクセント色。両側に “→” を付ける  
- フォントは Meiryo または游ゴシック  
- **JavaScript / SVG / Canvas は使わず**、HTML＋CSS のみ  
- 完成コードは **1 つのコピー可能なコードブロック** で出力

【出力形式】  
- <!DOCTYPE html> から </html> まで一貫した完全な HTML 文書  
- CSS は <style> タグ内に記述し、カラー変数やレイアウト変数を使って読みやすくする

組織図｜チーム体制や部門構成の共有に

組織図は、企業やプロジェクトにおける部門構成や人員配置の関係性を示す図です。役職や階層のつながりを一目で把握できるため、社内共有資料やマニュアルなどでよく使われます。

あなたはプロのフロントエンドエンジニアです。以下の条件に従い、HTMLとCSSのみを使って、レイアウトが一切崩れない美しい組織図を作成してください。

【目的】
社内マニュアルや資料に掲載できる、整然とした組織図を作成すること。HTMLとCSSのみで構成し、JavaScriptや外部ライブラリは使用しません。

【テーマ】
中規模企業における基本的な組織図

【構成】

* 一番上に「代表取締役」
* その下に3つの部署が横並び（企画部、営業部、開発部）
* 各部署の下に担当者（2名〜3名ずつ）を縦に並べる
* 線や矢印の代わりにシンプルな境界線や枠で上下関係を明示
* 各要素の幅や高さ、余白は明確に指定し、レスポンシブ対応でなくても良い

【デザイン指定】

* ベースカラー：淡いブルー系
* フォント：メイリオ
* 図形：角丸の四角を使用し、影やボーダーで見やすくする
* 要素はすべて中央揃え、整列ずれなし
* 横幅が広くなりすぎないよう、適切にマージンを調整する

【追加条件】

* 表示確認のため、`<div class="org-chart">` を最上位にしてください
* CSSは埋め込みスタイルまたは`<style>`タグ内で完結させてください

相関図｜関係者把握、利用者の人間関係に

相関図は、登場人物や関係者同士のつながりや関係性を矢印や線で示す図です。複数人の立場や感情、影響関係を整理したいときに役立ちます。

あなたはプロのフロントエンドエンジニアです。以下の要件に基づき、HTMLとCSSのみを使用して、レイアウト崩れが一切ない美しい相関図（関係図）を作成してください。

【目的】  
プロジェクトチームにおける各メンバーの役割関係を視覚的に表現し、業務マニュアルや社内資料としてすぐに使える相関図を作成する。

【登場人物（ノード）】  
- プロジェクトマネージャー（中央に配置）  
- フロントエンドエンジニア  
- バックエンドエンジニア  
- デザイナー  
- QA（品質保証・テスト担当）  
- クライアント窓口（外部）

【関係性（線で結ぶ）】  
- プロジェクトマネージャーはすべての役割と関係があるため、中心に配置  
- フロントエンドエンジニアとデザイナーは連携関係  
- フロントエンドエンジニアとバックエンドエンジニアも連携  
- QAはフロント・バック両方と連携  
- クライアント窓口とはプロジェクトマネージャーが直接やりとり

【デザイン要件】  
- レイアウト崩れが一切ないこと  
- ノード（役割）を円形にし、日本語の役職名を表示  
- 線はCSSで描画し、図形の上にかぶらないよう適切に配置  
- 色はブルー・グレー系で統一し、視認性を重視  
- 日本語フォント（Meiryo、Yu Gothicなど）を使用  
- レスポンシブ対応で、PC・タブレット・スマホでも表示崩れしないこと

【使用制限】  
- 使用できるのはHTMLとCSSのみ（JavaScript・SVG・外部ライブラリは禁止）  
- ノードや線などの図形・レイアウトはすべてCSSで実装すること  
- 実務資料として使えるよう、完成度・バランス・読みやすさを重視すること

【ゴール】  
プロジェクトチームの関係性を一目で理解できる、実用的かつ整った相関図を完成させてください。

シーケンス図｜サービスやシステム処理の流れに

シーケンス図は、複数の登場人物や部署のやりとりを時系列に沿って視覚化します。

どのタイミングで誰が何をするかが一目でわかり、サービスや業務フローの把握に便利です。

あなたはプロのフロントエンドエンジニアです。以下の要件に従い、HTMLとCSSのみを用いて、社内稟議書のやり取りに関する完璧なシーケンス図を作成するコードを生成してください。

【目的】  
- 稟議書の申請から最終承認、経理処理までの流れを視覚的に共有し、社内マニュアルや研修資料にそのまま貼り付けられるクオリティを目指す📑

【登場者（左から横並び）】  
- 申請者 📝  
- 上司 👔  
- 総務部 🏢  
- 経理部 💰  

【メッセージの流れ】  
1. 申請者 → 上司：「稟議書を提出」  
2. 上司 → 上司：「内容確認」  
3. 上司  
   - 承認 → 総務部：「承認済みを通知」  
   - 差戻し → 申請者：「修正依頼」  
4. 総務部 → 経理部：「承認通知」  
5. 経理部 → 経理部：「処理完了通知」  

（承認／差戻しの分岐を明確に矢印で表現してください✅／❌）

【デザイン要件】  
- 使用言語：HTML と CSS のみ（JavaScript 不可）  
- フォント：Meiryo（日本語フォント）  
- 配色：ブルー系を基調に、各担当者のライフラインを色分け  
- レイアウト：一切崩れないレスポンシブ対応  
- 図形：ライフラインは細線、メッセージ矢印は太線で可視性を高める  
- マージン・パディングを適切に設定し、要素同士が重ならないように  

上記要件を満たすHTMLとCSSのコードを、コピペでそのまま使える形で出力してください

フローチャート｜業務フローやマニュアルに

フローチャートは、業務や処理の流れを図式化した図です。工程ごとの判断・分岐・実行内容を視覚的に整理できます。マニュアルや業務改善、IT処理フローの設計にも使われています。

あなたはプロのフロントエンドエンジニアです。以下の要件に従い、HTMLとCSSのみを用いて、レイアウト崩れが一切ない完璧なフローチャートのコードを生成してください。

【シチュエーション】  
社内ヘルプデスクへの問い合わせ対応フロー

【目的】  
新入社員や他部署のメンバーが迷わず手順を理解できる、社内マニュアル・研修資料用のフローチャート

【登場者】  
- ユーザー（問い合わせ者）  
- ヘルプデスク担当者  
- システム管理者

【業務フロー】  
1. ユーザーがヘルプデスクに問い合わせを送信  
2. 担当者が受信・内容をヒアリング  
3. 問題をその場で解決できるか？（分岐）  
   - はい → FAQやマニュアルを参照して回答 → フロー終了  
   - いいえ → システム管理者へエスカレーション  
4. システム管理者が調査・対応  
5. 担当者へ回答を共有  
6. ユーザーへ最終回答・完了報告

【デザイン要件】  
- HTMLとCSSのみ（JavaScript禁止）  
- 日本語フォント（メイリオ等）で文字は枠内に収まる  
- 色調：ブルー系を基調としたシンプルデザイン  
- レイアウト崩れゼロ（PC画面固定幅）  
- 各図形（楕円・菱形・長方形）は適切に角丸・枠線を設定  
- 矢印は各要素を正確に結び、重なりやズレがない  
- モバイル対応は不要（PCマニュアル想定）

以上の条件を踏まえ、すぐに社内マニュアルに貼り付けられる、見た目も美しいフローチャートのHTML/CSSコードを出力してください。

マインドマップ｜企画会議やアイデア整理に

マインドマップは、1つのテーマを中心に置き、アイデアや関連項目を広げて整理する図です。発想を広げたり、頭の中を視覚的にまとめたりするのに使われます。

あなたはプロのフロントエンドエンジニアです。以下の条件に沿って、社内マニュアルや資料にそのまま貼り付けて使える、完璧にレイアウトが崩れないマインドマップをHTMLとCSSのみで実装してください。

【シチュエーション】  
新製品開発プロジェクトのアイデア出し会議用

【要件】  
1. 中心ノード：「新製品開発」  
2. 第1階層（4～5本程度）：  
   - 市場調査  
   - コンセプト設計  
   - デザイン案  
   - 試作・検証  
   - コスト管理  
3. 第2階層（各ブランチに2～3個ずつ具体要素）  
   - 例）市場調査 → ターゲット分析、競合分析、トレンド把握  
4. 線は直線で、ノード同士は重ならずバランス良く配置  
5. ノードは丸みを帯びた長方形（border-radius: 8px）  
6. カラーはブルー系のグラデーションで統一 
7. フォントは日本語表示に対応したメイリオ系  
8. コードはHTMLとCSSのみで、外部ライブラリ・JavaScript不要  
9. コピペでそのまま資料に貼れるよう、インラインCSSも可  

上記を満たし、完璧にレイアウトが崩れないコードを提供してください。 

ガントチャート｜進捗管理やプロジェクト設計に

ガントチャートは、タスクごとの進行状況やスケジュールを横棒で視覚化する図です。プロジェクトの進捗管理、チームの作業分担、納期の確認などに広く活用されています。

あなたは社内マニュアル作成に精通したプロのフロントエンドエンジニアです。以下の要件に沿って、レイアウトが一切崩れない完璧なガントチャートをHTMLとCSSのみで実装してください。シチュエーションは「新製品開発プロジェクトのスケジュール管理」とします📊

【要件】
1. 全体幅は800px以内に収める  
2. 縦軸：タスク名（企画、設計、試作、テスト、リリースなど計5〜6項目）  
3. 横軸：週単位（week1〜week8）  
4. 各タスクの期間を棒グラフで表示し、開始週と終了週を正確に反映  
5. 棒はそれぞれ異なるパステルカラーで色分け  
6. 棒の上にタスク名を表示し、バーと文字が重ならないように調整  
7. フォントはMeiryo、文字サイズ14px、余白や行間を整えて読みやすく  
8. デスクトップ・スマホ両対応で崩れないレスポンシブ設計  
9. CSS GridまたはFlexboxを適切に活用  

これらを満たすHTMLとCSSのコードを、社内マニュアルにもそのまま貼り付けられるレベルでご提示ください。

グラフも作成可能｜ベースとなる表をアップロードする

ChatGPTではグラフも作成可能です。

ただし、グラフのベースとなる表をChatGPTにアップロードしなければなりません。

ここでは、総務省による人口推計データを使い、日本の人口推移についての表（Excel）からグラフを作ります。

文字化けを防ぐために、あらかじめ日本語フォントをChatGPTにアップロードしておきましょう。

左下の＋マークをクリックして、グラフにしたいファイルをアップロードします。

折れ線グラフができました！文字化けも起こっていません。

棒グラフも作ってくれました。

一発で思った通りのグラフが出ない場合もありますが、会話しながら微調整できます。

図を読み込ませることも可能

ChatGPTに既存の図を読み込ませて、解析もできます。また、図をベースに画像生成も可能です。

こちらの写真を使って試してみましょう。

正確に読み取れています。

では、この写真をもとに画像を作ってもらいましょう。

「写真をもとにポスター風のイラストを描いてください」と指示してみます。

写真に写っている物がきちんと描かれています。

今回はポスター風と指示しましたが、画風を「リアルなスケッチ画」に変えて指示すると違った画像が生成されます。

まとめ

いかがでしたでしょうか？

この記事では、ChatGPTを活用して簡単に図を作成する方法を紹介しました。

この記事で紹介したポイントは以下のとおりです。

「図なんて無理…」と思っていた方も、今日から実践できる内容ばかりです。ぜひChatGPTを活用して、わかりやすく魅力的な資料づくりに挑戦してみてください！