![見出し画像](https://assets.st-note.com/production/uploads/images/103488349/rectangle_large_type_2_3fc3a2011001606a5d71b2e8d8b43760.png?width=1200)
3分でインフォグラフィック - ChatGPT + Mermaid で生産性を向上させよう
今日は、私が実際に使用している図解ツールとそれらの組み合わせ方を紹介し、視覚化でロジックを説明するのが好きな方々にお役に立てることを願っています。
実は、diagram-as-code ツールは以前から存在していましたが、ChatGPT がこのタスクをさらに簡単にしてくれます。
今日紹介するツールの特徴:
🌐 ウェブページで無料で利用可能。
🚀 フローチャート、マインドマッ。
📝 Markdown (マークダウン記法) を使用し、エンジニアリングのバックグラウンドがなくても簡単に学べ、バージョン管理に便利。
🤔 Q(質問): 通常の仕事で、どのようなチャートをChatGPT + Mermaidで製作するのに役立てますか?
💪 A(アクション): 例を1つ選び、実際にオンラインエディタでチャートを描画してみてください。
(2023/04/20) 台湾出身のITエンジニアです 🇹🇼 ChatGPTなどのソフトウェアを使って、オリジナルや今後読む価値のある記事の翻訳を手伝っています。もし分かりにくい表現があれば、遠慮なく教えてください。私も英語と日本語の学習に努力しています!
Mermaid とは
JavaScriptベースの図解およびチャート作成ツールで、Markdown にインスパイアされたテキスト定義を動的に作成および変更できる図をレンダリングします。
公式ウェブサイトで、Mermaid Live Editorというオンラインエディタを提供しています。
Mermaid公式チュートリアルドキュメントには、参考にできるさまざまな構文の例があります。おおよそ15種類のチャートを描くことができ、以下のように2つのカテゴリに分けられています:
1. フローチャート Flowchart
flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
![](https://assets.st-note.com/img/1681962287776-zBkJ3X5vbY.png?width=1200)
2. タイムライン Timeline
timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter
![](https://assets.st-note.com/img/1681962329485-fL8Yj4Uyzw.png?width=1200)
3. ガントチャート Gantt
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
![](https://assets.st-note.com/img/1681962338979-RO5WiWGLma.png?width=1200)
4. 円グラフ Pie chart
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 15
![](https://assets.st-note.com/img/1681962351720-4LsEUIe4LN.png?width=1200)
5. ユーザージャーニー User Journey
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
![](https://assets.st-note.com/img/1681962370161-Ahhgi4Gamx.png?width=1200)
6. マインドマップ Mindmaps
私は放射状のマインドマップに慣れていないので、 Markmap を使用してマインドマップを作成しています。
その他 Others
以下については、公式ドキュメントを参照してください:
シーケンス図 Sequence Diagram
クラス図 Class Diagram
状態図 State Diagram
実体関連(ER)図 Entity-Relationship (ER) Diagram
🔥 Gitgraph
C4C図
ChatGPT + Mermaid の実際の応用
あなたは、Mermaidのマークダウン構文がまだ少し複雑に見えるかもしれないと思うかもしれません。その通りです!だからこそ、ChatGPTに構文テンプレートを生成させることができます。ChatGPTが得意なタスク、例えば生成、要約、翻訳などを選択することをお勧めします。
私の例では、Markmapのマインドマップを使用する方が便利で、Mermaidも同じ原則に従います。だから、わずか3分で以下のことを達成することができます:
🤖 ChatGPT: ChatGPT: Prompt (プロンプト) を使用して必要なコンテンツを生成。
📝 Mermaid Live Editor: Mermaidに直接コンテンツを入力して図を生成。
🎉 完了!
たとえば、この記事をまとめたい場合は、次のようなプロンプトを使用できます:
# ChatGPT prompt for markdown
provide summary in bullet point and in markdown codeblock:
# ChatGPT prompt for Mermaid
provide summary mermaid diagram in markdown codeblock:
以下のマークダウンを入手して:
- 概要
- Mermaid とは
1. フローチャート Flowchart
2. タイムライン Timeline
3. ガントチャート Gantt
4. 円グラフ Pie chart
5. ユーザージャーニー User Journey
6. マインドマップ Mindmaps
7. その他 Others
- ChatGPT + Mermaid の実際の応用
- 他のツール
- どう思いますか?
それを Markmap に貼り付けてマインドマップを生成し、この記事のカバー画像になります。
Mermaidバージョンは、フローチャートを使用して、私のスタイルにより適合しています:
graph LR
A[概要] --> B[Mermaid とは];
B --> C[フローチャート Flowchart];
B --> D[タイムライン Timeline];
B --> E[ガントチャート Gantt];
B --> F[円グラフ Pie chart];
B --> G[ユーザージャーニー User Journey];
B --> H[マインドマップ Mindmaps];
B --> I[その他 Others];
A --> J[ChatGPT + Mermaid の実際の応用];
A --> K[他のツール];
A --> L[どう思いますか?];
![](https://assets.st-note.com/img/1681962435618-nYbC1nt88v.png?width=1200)
ちなみに、GPT-3.5で生成されたMermaidの結果は、GPT-4で生成されたものよりも優れている理由がわかりません。経験がある方は、ぜひコメントで共有してください〜
他のツール
Miro: より高度にカスタマイズされたブロック図や他のチャートを描画したい場合は、Miroを優先的に使用します。大きなホワイトボードが大好きで、多くのドラフトアイデアを最終版と一緒に置くことができます。
diagrams.net (旧称 draw.io): 実際にはdiagrams.netに名前が変更されましたが、みんながまだDraw.ioと呼んでいます。完成したアーキテクチャ図を描く際に、多くの組み込みコンポーネントが利用できることが利点です。しかし、コンポーネントをドラッグして整列させるのはかなり痛いものがあります…。
Excalidraw: 手書き風の図解ツール。しばらく使用してから Miro に切り替えました。
PlantUML: Mermaid と比較されることが多いツール。よりクラシックなインターフェースが特徴です。以前は使用していましたが、今はあまり使っていません。
VS Code Extension
どう思いますか?
みんなで考えを議論しましょう!🥳
Murmur
2023-04-20: Everything as Code 信じています 🤣
ブログ: https://blog.androchen.tw/ja/
毎週 1 ~ 2本の3000文字、6分間の記事を読んで、一緒にテクノロジーの旅を探検しましょう!
この記事が気に入ったらサポートをしてみませんか?