3分でインフォグラフィック - ChatGPT + Mermaid で生産性を向上させよう

今日は、私が実際に使用している図解ツールとそれらの組み合わせ方を紹介し、視覚化でロジックを説明するのが好きな方々にお役に立てることを願っています。

実は、diagram-as-code ツールは以前から存在していましたが、ChatGPT がこのタスクをさらに簡単にしてくれます。

今日紹介するツールの特徴：

1. 🌐 ウェブページで無料で利用可能。

2. 🚀 フローチャート、マインドマッ。

3. 📝 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]

2. タイムライン Timeline

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter

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

4. 円グラフ Pie chart

pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15

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

6. マインドマップ Mindmaps

私は放射状のマインドマップに慣れていないので、 Markmap を使用してマインドマップを作成しています。

その他 Others

以下については、公式ドキュメントを参照してください：

1. シーケンス図 Sequence Diagram

2. クラス図 Class Diagram

3. 状態図 State Diagram

4. 実体関連(ER)図 Entity-Relationship (ER) Diagram

5. 🔥 Gitgraph

6. C4C図

ChatGPT + Mermaid の実際の応用

あなたは、Mermaidのマークダウン構文がまだ少し複雑に見えるかもしれないと思うかもしれません。その通りです！だからこそ、ChatGPTに構文テンプレートを生成させることができます。ChatGPTが得意なタスク、例えば生成、要約、翻訳などを選択することをお勧めします。

私の例では、Markmapのマインドマップを使用する方が便利で、Mermaidも同じ原則に従います。だから、わずか3分で以下のことを達成することができます:

1. 🤖 ChatGPT: ChatGPT: Prompt (プロンプト) を使用して必要なコンテンツを生成。

2. 📝 Mermaid Live Editor: Mermaidに直接コンテンツを入力して図を生成。

3. 🎉 完了！

たとえば、この記事をまとめたい場合は、次のようなプロンプトを使用できます：

# 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[どう思いますか?];

ちなみに、GPT-3.5で生成されたMermaidの結果は、GPT-4で生成されたものよりも優れている理由がわかりません。経験がある方は、ぜひコメントで共有してください〜

他のツール

1. Miro: より高度にカスタマイズされたブロック図や他のチャートを描画したい場合は、Miroを優先的に使用します。大きなホワイトボードが大好きで、多くのドラフトアイデアを最終版と一緒に置くことができます。

2. diagrams.net (旧称 draw.io): 実際にはdiagrams.netに名前が変更されましたが、みんながまだDraw.ioと呼んでいます。完成したアーキテクチャ図を描く際に、多くの組み込みコンポーネントが利用できることが利点です。しかし、コンポーネントをドラッグして整列させるのはかなり痛いものがあります…。

3. Excalidraw: 手書き風の図解ツール。しばらく使用してから Miro に切り替えました。

4. PlantUML: Mermaid と比較されることが多いツール。よりクラシックなインターフェースが特徴です。以前は使用していましたが、今はあまり使っていません。

5. VS Code Extension

   1. Markdown Preview Mermaid Support

   2. Markmap

どう思いますか？

みんなで考えを議論しましょう！🥳

Murmur

• 2023-04-20: Everything as Code 信じています 🤣

ブログ: https://blog.androchen.tw/ja/

• 毎週 1 ~ 2本の3000文字、6分間の記事を読んで、一緒にテクノロジーの旅を探検しましょう！