なぜ私たちは、視覚的な情報に強く引きつけられるのでしょうか？
我々は日々、大量の情報に囲まれていますが、その中でも視覚的な情報は一際目を引きます。
それは人間が、視覚情報を最も効率的に処理するからです。
しかし一方で、必要な情報を視覚的に整理するのは一筋縄ではいきませんよね。
そんなとき、この記事で紹介するツール「Show Me（Diagram it）」プラグインがおすすめです。（「Show Me」プラグインは、「Diagram it」プラグインから改名されました。なお、現在は「Show Me Diagrams」から「Diagrams: Show Me」へとプラグイン名が変更されています。）
「Show Me（Diagrams: Show Me）」プラグインとは、一言でいうとChatGPTがグラフや図を簡単に描画できる機能を追加するツールです。
具体的には、フローチャート、マインドマップ、シーケンス図、クラス図、ガントチャート、円グラフなどの視覚的な情報を作ることが可能です。
図は情報を理解しやすくするだけでなく、情報を効果的に伝えるための素晴らしい方法です。
そのため、「Show Me」プラグインは、特にプログラマーや学生、教師など、多くの人々にとって有用なツールだと言えるでしょう。
この記事では、「Show Me（Diagrams: Show Me）」プラグインの使い方を具体的に解説します。何が可能になるのか、実際の使用例まで詳しくお伝えし、さらに15歳でも簡単に使える方法も紹介します。
この記事を読むことで、以下のメリットがあります。
- 「Show Me」プラグインの説明と、それが何を可能にするかを理解できる
- 「Show Me」プラグインを実際に使ってみた具体的な例と使い方を知ることができる
- 自分自身の作業効率を高めるための方法を学ぶことができる
情報を整理し、視覚的に理解するための「Show Me」プラグインの世界へ、さあ一緒に飛び込みましょう！
ChatGPTのプラグインとは？
OpenAIが、ChatGPTの新機能として「プラグイン（Plugins）」のβ版を2023年5月12日から提供を開始しました。
「プラグイン（Plugins）」とは、あなたのChatGPTをより強力で多機能にカスタマイズするための追加ツールのことです。ChatGPT Plusユーザーであれば誰でも使用可能です。
なお、「プラグインってなに？」や「ChatGPTのプラグインとは？」など疑問に思っている方のために、「プラグインの基本」や「プラグインの一覧」についてはこちらの記事に詳しく解説しています。
プラグインを初歩から知りたいという方の参考になれば嬉しいです。
「Show Me」とは？開発元、開発目的は？
「Show Me」の開発元について調べましたが、現在のところ明確な情報を見つけることができていません。
そのため、「Show Me」開発の目的については明確な情報はありませんでした。
ただ、「Show Me」プラグインが提供する機能から、情報の視覚化による理解の深化、ユーザー体験の強化、プログラミングと設計の支援、そしてAIの能力とアクセシビリティの向上を目指して開発されたものと思われます。
なお、OpenAIは、自社のAIツールの安全な開発と使用を保証するための製品安全基準を掲げています（参照：Safety standards OpenAI公式サイト）。これは、OpenAIがPlugin storeで提供している全てのプラグインにも適用されると考えられますので、その点は信頼しても大丈夫だと思います。
「Show Me」プラグインで何ができる？
ChatGPTの「Show Me」プラグインは、ChatGPTにグラフや図を簡単に描画する機能を与えるツールです。
具体的には、フローチャート、マインドマップ、シーケンス図、クラス図、ガントチャート、円グラフなどの視覚的な情報を簡単に作ることが可能です。
例えば、コンピューターシステムの図を作りたいときには、それをテキストでお願いするだけで「Show Me」プラグインがその図を自動的に作ってくれます。
ちなみに、テキストでグラフやチャートを描く記法は、専門用語でマーメイド（Mermaid記法）と呼ばれています。
「Show Me」プラグインは、主に以下のような図を生成することができます
- フローチャート（Flowchart）: プロセスや手順を視覚的に表現するための図です。ボックスと矢印を使って、ステップや意思決定の流れを示します。
- マインドマップ（Mind Map）: アイデアや情報の階層的な関係を示す図です。中心のテーマから放射状に分岐し、サブトピックや詳細な情報を示します。
- シーケンス図（Sequence Diagram）: オブジェクト間の相互作用を時間の経過に沿って示す図です。オブジェクトやメッセージのやり取りを表現し、システムの動作を理解するのに役立ちます。
- クラス図（Class Diagram）: オブジェクト指向プログラミングにおけるクラスとその関係を示す図です。クラスの属性やメソッド、クラス間の関連性などを示します。
- ガントチャート（Gantt Chart）: プロジェクトのスケジュールを表現するための図です。各タスクの期間や依存関係を示し、プロジェクトの進捗状況を追跡するのに使用されます。
- 円グラフ（Pie Chart）:全体を円で表し、その中を各部分が占める割合に応じてセクションに分けます。各部分が全体の何パーセントを占めているかを一目で理解できます。
また、図を少し変えたいときも、どう変えたいかを教えるだけで、プラグインがその通りに図を更新してくれます。
次のような人たちが、次のような場面で役立つプラグインです。
- 学生：数学の問題を解く時に、グラフを描いたり、円グラフにしたりするのに使うことができます。これにより、問題をよりよく理解したり、解答を見つけるのに役立てることができます。
- ビジネスマンやビジネスウーマン：ビジネスプロセスやワークフローを視覚的に表現し、プロセス理解や問題特定、新メンバートレーニング、プロセス改善に役立ちます。新しいプロジェクトを計画する時にも役立ちます。
- コンピューターを学んでいる人：特定の種類の図（例えば、クラス図やシーケンス図）はソフトウェア開発の文脈で特に有用です。システムの構造を図示したい時に、どの部分がどの部分とつながっているのか、どの部分が何をするのかを示す図を作ることができます。
これらの例からわかるように、「Show Me」プラグインは、情報を視覚化し、理解を深めるための強力なツールです。
それぞれのニーズに合わせて、これを活用することができます！
ChatGPTのプラグイン「Show Me（Diagrams: Show Me）」の使い方
それでは、ChatGPT（GPT-4）で「Show Me」プラグインを使ってみます。
まずは、「Show Me」プラグインをインストールします。
「Show Me」プラグインをインストール
Plugin storeから「Show Me」を探します。
［Popular］で見つかったので、かなり人気のプラグインのようですね。
（9/8追記）現在は、下の画面のロゴに変更されています。
［install］ボタンをクリックしてインストールします。
「Show Me」が選択されていることを確認します。
「Show Me」プラグインの使い方を聞いてみる
初めてプラグイン「Show Me」を使うので、まずはChatGPTにプラグイン「Show Me」の使い方を下記のように聞いてみました。
プロンプト：
プラグイン「Show Me」の使い方をステップ形式で、初心者にわかりやすく教えてください。
するとChatGPTから、下記の回答が返ってきました。
基本的な使い方として、次のステップが回答されました。ChatGPTの回答をそのまま紹介します。
ステップ1: ユーザーの要求を理解する
まず、ユーザーが何を求めているのかを理解する必要があります。ユーザーは、特定のプロセス、概念、システムなどについての視覚的な説明を求めるかもしれません。この要求は、「〜の仕組みを図で説明してください」や「〜のプロセスを描いてください」などの形で表現されます。
ステップ2: マーメイド図の作成
次に、ユーザーの要求に基づいてマーメイド図を作成します。マーメイド図は、テキストベースのマークダウン記法を使用して図を作成するためのツールです。マーメイド図の作成には、特定のルールと構文が必要です。例えば、ノード、エッジ、サブグラフなどの要素をどのように表現するか、どのようにインデントを行うかなどがあります。
ステップ3: プラグインAPIへのリクエスト
マーメイド図が作成できたら、それを「Show Me」プラグインのAPIにリクエストとして送信します。リクエストは以下のような形式で行います。
{
"mermaid": "ここにマーメイド図のテキストを入力"
}ステップ4: APIレスポンスの解釈と表示
APIからのレスポンスには、レンダリングされた図の画像URLが含まれています。このURLを使用して、図をユーザーに表示します。また、ユーザーが図をオンラインで編集するためのリンクも提供されます。
以上が「Show Me」プラグインの基本的な使用方法です。このプラグインを使用することで、複雑な概念やプロセスを視覚的に表現し、ユーザーの理解を深めることができます。
↑ChatGPTの回答はここまで↑
15歳でも出来る「Show Me」の簡単な使い方（実例あり）
上記のChatGPTから教えてもらったステップは、コマンド（コード）を書いて利用する方法でした。また、マーメイド図やマークダウン記法に馴染みのない人には少し難解なステップです。
僕を含め普段コマンドやマーメイドを使用しない人のために、簡単な使い方を知りたいと感じました。
そこで、下記のプロンプトを送信。
プロンプト：
コマンドを使わない簡単な一般的な使い方を、15歳でも理解できるように実際の例文と合わせて教えてください
ChatGPTから下記の回答が返ってきました。
分かりやすく教えてくれました。
15歳でもできる「Show Me」プラグインの簡単な使い方は以下のとおりです。ChatGPTの回答にある「Show Me」使い方のステップをそのまま紹介します。
15歳でもできる「Show Me」プラグインの簡単な使い方
- ユーザーの要求を理解する
まず、あなたが何を知りたいのかを理解する必要があります。例えば、「太陽系の構造を図で教えて」と聞くかもしれません。 - 図を作成する
次に、あなたの質問に基づいて図を作成します。この図は、太陽系の各惑星とその配置を示すものです。 - 図を送信する
図が完成したら、それを「Show Me」プラグインに送信します。このプラグインは、図を美しく表示するためのツールです。 - 図を表示する
「Show Me」プラグインからの返答が来ると、それをあなたに見せます。これは、太陽系の図となります。
例えば、あなたが「太陽系の構造を図で教えて」と聞いたとします。その場合、私は以下のように答えることができます。
「もちろんです。太陽系は、太陽を中心に、さまざまな惑星が回っている構造をしています。最も内側から順に、水星、金星、地球、火星、木星、土星、天王星、海王星となります。これらの惑星は、太陽の周りを様々な速度と距離で回っています。」
そして、「Show Me」プラグインを使って、この太陽系の構造を図で表示します。この図は、太陽を中心に、各惑星がどのように配置されているかを視覚的に示しています。
以上が「Show Me」プラグインの一般的な使い方です。このプラグインを使うと、複雑な概念や情報を視覚的に理解することができます。
つまり、「Show Me」プラグインには次のようにプロンプトを出せば良いということになります。
例：太陽系の構造を図で作ってほしい
- 「Show Me」プラグインを選択
- 「太陽系の構造を図で教えて」
- 2のプロンプトをチャットに入力して送信
なんと、「プロンプト（命令文）」を書いて送信するだけ！簡単ですね！
「Show Me」プラグインを使ってみた！
それでは実際にChatGPTの「Show Me」プラグインを使ってみます。
ChatGPTが例に挙げた「太陽系の構造の図」をお願いした結果は？
先ほど、ChatGPTが「Show Me」プラグインの使い方の例に挙げた「太陽系の構造の図」が気になったので、お願いしてみました。
以下のプロンプト（命令文）を出してみました。
ChatGPTの回答は以下のとおり。
プロンプトどおり、太陽系の構造を示す図を表示してくれました。
生成された図はオンラインで編集可能！
また、「このダイアグラムをオンラインで編集したい場合はこちらをクリックしてください。」と、図をオンラインで編集できるリンクも紹介してくれました。
早速リンクをクリックしてみました。
すると、下図のようにオンラインでマーメイド図を編集可能なツール「マーメイド ライブエディター（Mermaid開発）」に、今回作成した太陽系の構造が表示されてました。
もし、生成した図を編集したい場合は、再度ChatGPTにプロンプトを入力するか、または「マーメイド ライブエディター」で編集するかの二択があるということになりますね。
このように図の編集までも簡単にできてしまうとは驚きです！
なお、「マーメイド ライブエディター」の開発元の「Mermaid」についてはここで説明しています。
回答の下部に表示されているボタンについて
また、回答の下部に表示されている下図のボタンをクリックしてみたところ、
左のボタンは「生成した図」にリンクされてました。ちなみに今回の図だとこちら↓。
そして右のボタンは、上記で紹介したMermaidの「マーメイド ライブエディター」にリンクされていました。
フローチャート、マインドマップ、シーケンス図、ガントチャート、円グラフの生成を「Show Me」プラグインにお願いしてみた結果は？
次に、ChatGPTの「Show Me」プラグインに「フローチャート、マインドマップ、シーケンス図、ガントチャート、円グラフ」をそれぞれお願いしてみました。
「フローチャート、マインドマップ、シーケンス図、ガントチャート、円グラフ」を「Show Me」プラグインで生成した様子を順番に紹介します。
フローチャートの結果は？「天候によって服装を決める流れをフローチャートで教えて」
まずは、フローチャートを描いてもらうために、以下のプロンプト（命令文）を入力してみました。
ChatGPTの回答は以下のとおり。
以下のフローチャートが生成されました。
下記のプロセスの説明があるところが助かります。
フローチャートは簡単に見えても、実際にプロセスを考えて図にするには時間がかかりますよね。
それを一瞬でフローチャート生成からプロセスの説明もつけてくれるとは、とんでもない機能だと感じました！
マインドマップの結果は？「心理学の分野をマインドマップで教えて」
次は、マインドマップを描いてもらうために、以下のプロンプト（命令文）を入力してみました。
ChatGPTの回答は以下のとおり。
以下のマインドマップが生成されました。
しかし、フローチャートのようにも見えるので、もう少しマインドマップっぽくなるように、今度は以下のプロンプト（命令文）を入力してみました。
ChatGPTの回答は以下のとおり。
よりマインドマップっぽく生成されました。
下記のように、心理学の分野も説明してくれているので驚きです。
このマインドマップでは、心理学の各分野がさらに細分化されています：
- 認知心理学：知覚、記憶、思考、言語などのサブフィールドを含みます。
- 発達心理学：乳幼児期、児童期、青年期、成人期、老年期などの人間の生涯にわたる成長と発達の段階を研究します。
- 社会心理学：態度、社会的知覚、グループダイナミクスなど、個人の思考、感情、行動が社会的な状況や他の人々にどのように影響を受けるかを研究します。
- 臨床心理学：診断、治療、予防など、精神的な問題や障害を診断、治療、予防するための心理学の応用分野です。
- 生物心理学：脳、遺伝、神経など、行動や心の働きが脳や他の生物学的プロセスにどのように影響を受けるかを研究します。
- 性格心理学：性格特性、性格理論など、個々の性格の違いとその原因を研究します。
- 産業・組織心理学：職場での行動、組織構造、仕事の満足度など、職場での人間の行動を理解し、改善するための心理学の応用分野です。
マインドマップの生成もバッチリですね！
シーケンス図の結果は？「オンラインショッピングのプロセスをシーケンス図で教えて」
次は、シーケンス図を描いてもらうために、以下のプロンプト（命令文）を入力してみました。
ChatGPTの回答は以下のとおり。
以下のシーケンス図が生成されました。
下記のように、プロセスをステップで説明してくれました。
シーケンス図の生成もバッチリです！
ガントチャートの結果は？「新築工事の工程表をガントチャートで教えて」
次は、ガントチャートを描いてもらうために、以下のプロンプト（命令文）を入力してみました。
ChatGPTの回答は以下のとおり。
以下のガントチャートが生成されました。
時間軸の日付が重なってますが、Mermaidの「マーメイド ライブエディター」で確認したところ下記のように問題なく表示されてました。
下記のように、各工程の説明もしてくれました。
ガントチャートの生成もバッチリですね！
円グラフの結果は？「1日の時間をどのように使っているかを円グラフで教えて」
円グラフを描いてもらうために、以下のプロンプト（命令文）を入力してみました。
ChatGPTの回答は以下のとおり。
以下の円グラフが生成されました。
円グラフの説明の文字の右端が切れてますが、Mermaidの「マーメイド ライブエディター」では問題なく表示されていることを確認しました。
以下のように、円グラフの詳細の記載もありました。
この円グラフでは、1日の時間が以下のように分割されています：
- 睡眠：8時間（全体の33%）
- 仕事/学校：8時間（全体の33%）
- 食事：2時間（全体の8%）
- 運動：1時間（全体の4%）
- 趣味/娯楽：3時間（全体の13%）
- その他：2時間（全体の8%）
これは一般的な1日の時間の使い方を示していますが、個々の人や日によって異なる場合があります。
Mermaidとは？
今回作成した「太陽系の構造」の編集できるようにChatGPTから紹介された「マーメイド ライブエディター」を調べてみたところ、Mermaid（ https://mermaid.js.org/ ）が公開しているツールでした。
「Show Me」プラグインにとってMermaidは重要な位置づけなので、Mermaidについて以下に紹介します。
Mermaidとは？
Mermaidは、Markdown記法を用いて図やグラフを生成するためのJavaScriptライブラリです。このライブラリは、フローチャート、シーケンス図、ガントチャート、クラス図など、さまざまな種類の図を生成することができます。
Mermaidはオープンソースプロジェクトであり、その開発と維持はコミュニティのメンバーによって行われています。
このプロジェクトは、複雑な図を手書きする代わりに、簡単なテキストベースの記法を使用して視覚的に魅力的な図を生成することを目指しています。
Mermaidの公式ウェブサイトでは、ライブラリの使用方法、図の作成方法、さまざまな設定オプションなどについて詳しく説明しています。また、オンラインエディタも提供しており、ユーザーはブラウザ上で直接図を作成し、その結果をプレビューすることができます。
なお、MermaidはKnut Sveidqvistによって開始されたプロジェクトであり、現在も彼を中心に開発が進められています。
【2024/5/21追記】同様の機能を持つ「Diagrams: Show Me」GPTを紹介！
新たに「Diagrams: Show Me」GPTを当ブログで紹介しました。
この「Diagrams: Show Me」GPTはChatGPTのGPTsの一つで、OpenAIが開発したGPT（Generative Pre-trained Transformer）テクノロジーをベースに、起業家（Kirill Dubovitskiy）と友人たちによる小さなチームが開発したツールです。
「Diagrams: Show Me」GPTも「Show Me」プラグインと同様の機能を持ち、グラフや図を簡単に作成するツールです。
残念ながら、ChatGPTのプラグイン機能は2024年4月9日に終了しましたが、「Diagrams: Show Me」GPTを代替ツールとしてご活用ください。
「Diagrams: Show Me」GPTについてはこちらの記事に詳しく解説しています。
まとめ
「Show Me」プラグインは、いかがでしたでしょうか？
ChatGPTの「Show Me」プラグインは、視覚的な情報を簡単に作成するためのツールです。
テキストベースで、フローチャート、マインドマップ、シーケンス図、クラス図、ガントチャート、円グラフなどの図を生成することができましたね。
「Show Me」プラグインは、主に以下のような図を生成することができます
- フローチャート（Flowchart）: プロセスや手順を視覚的に表現するための図です。ボックスと矢印を使って、ステップや意思決定の流れを示します。
- マインドマップ（Mind Map）: アイデアや情報の階層的な関係を示す図です。中心のテーマから放射状に分岐し、サブトピックや詳細な情報を示します。
- シーケンス図（Sequence Diagram）: オブジェクト間の相互作用を時間の経過に沿って示す図です。オブジェクトやメッセージのやり取りを表現し、システムの動作を理解するのに役立ちます。
- クラス図（Class Diagram）: オブジェクト指向プログラミングにおけるクラスとその関係を示す図です。クラスの属性やメソッド、クラス間の関連性などを示します。
- ガントチャート（Gantt Chart）: プロジェクトのスケジュールを表現するための図です。各タスクの期間や依存関係を示し、プロジェクトの進捗状況を追跡するのに使用されます。
- 円グラフ（Pie Chart）:全体を円で表し、その中を各部分が占める割合に応じてセクションに分けます。各部分が全体の何パーセントを占めているかを一目で理解できます。
また、生成された図はオンラインで編集可能で、さらに具体的な状況や情報に合わせて修正することができることも驚きでした。
これらの図は、日常生活の決定から学習、研究、ビジネスなどまで、さまざまな場面で活用できます。
「Show Me」プラグインによって、あなたのChatGPTがさらにパワーアップすることでしょう！
これまでに紹介したChatGPT プラグインの一覧
ChatGPTのプラグインの数は、すでに1074種類（2023年12月12日時点）。
海外のサービスが多く、日本人に馴染みのあるサービスはかなり少ないという印象です。
しかし、僕はただ知らないというだけで使わないのはもったいと思っています。
そこで、ChatGPTのプラグインの使い方の紹介をシリーズ化しています。今後も楽しみにして頂けると嬉しいです。
これまでに紹介したプラグインは、定期的に更新される「ChatGPT プラグインの一覧（カテゴリページ）」にて詳しく解説しています。
なお、ChatGPTのプラグインは、最大3つまで同時に活用することが可能です。つまり、異なるプラグインの力を組み合わせることにより、超パワフルなChatGPTを生み出すことができます。
ぜひ、他のプラグインもチャレンジされてみてくださいね！
最後までお読みいただきありがとうございました！
コメント