ちょっとフローチャート欲しい時にChatGPTとMermaid記法の合わせ技で描いてもらう方法 #ChatGPT

この記事を読むべき人

ちょっとココにフローチャート入れたいなと思った人
でもエクセルやdraw.ioでフローチャートを描くのをめんどくさいなと思った人

こんなフローチャートをChatGPTとMermaidマークダウンで描きます

古きよきニコニコでロマサガ3RTAを見る際ありがちだった光景。
※〇〇〇〇は自主規制

Mermaid記法とは

今回の記事で伝えたい部分のみをNotion様からピックアップして引用します。

Mermaid記法は、図やグラフをシンプルなテキスト記述から生成するためのマークダウン風のスクリプト言語です。開発者やドキュメンテーション作成者といったユーザーが、コードブロックの中でシーケンス図、フローチャート、ガントチャート、クラス図などを作成できるようにします。

Mermaid記法は以下のようなユーザーに特におすすめです。該当していて、まだMermaid記法を活用していない方はぜひこれを機会に活用してみてください。
開発者: コードの文脈で図を作成したい、またはソースコードのコメントに図を描きたい開発者にとってMermaid記法は非常に役立ちます。また、ソースコードの挙動を視覚的に説明することで、他の開発者がコードを理解するのを助けることができます。
ドキュメンテーション作成者: テキストベースのドキュメンテーションに直接図を描きたい場合、Mermaid記法は大変有用です。これにより、読者が理解を深めるのを助けることができます。
プロジェクトマネージャー: プロジェクトのフローやタスクの流れを視覚化したい場合、Mermaid記法を用いると効率的にこれを行うことができます。また、図を更新する際もテキストの編集だけで済むため、手間が省けます。
ビジュアル思考者: アイデアを素早くビジュアル化したいと考えている人にとって、Mermaid記法は学習曲線が低く、シンプルな図ならすぐに作成できるため、非常に便利です。

詳細についてはNotion様の説明が非常にわかりやすいため、こちらを確認してください。
https://biz-notion.northsand.co.jp/partners-notion-blog/pnb0025

ここで伝えたいのはシンプルなテキスト記述で、フローチャートなどを作図し視覚化するのにMermaid記法はすぐれているという点です。

ChatGPTにMermaid記法でフローチャートを描いてもらう方法

以下のようにChatGPTに命令するだけです。

あなた

主人公カタリナでシナリオスタート
↓
ロアーヌ城で「悪鬼」を倒す
↓
自動進行でカタリナと偽ミカエルが画面下に掃ける
↓
や・・・や・・・
↓
〇〇〇〇ダイナミック！！

これをMermaidマークダウンでフローチャート化してください。
回答は日本語で行ってください。

ChatGPT
以下は、指定されたシナリオに基づくMermaidマークダウンを使用したフローチャートです：

graph TD
    A[主人公カタリナでシナリオスタート] -->|進行| B[ロアーヌ城で「悪鬼」を倒す]
    B --> |自動進行| C[カタリナと偽ミカエルが画面下に掃ける]
    C --> D[や・・・や・・・]
    D --> E[〇〇〇〇ダイナミック！！]

このフローチャートは、主人公カタリナがシナリオをスタートし、「悪鬼」を倒して、最終的に「〇〇〇〇ダイナミック！！」までの流れを示しています。

このままだとQiitaにコンパイルエラーを吐かれてしまうので、10.2.4の記法に合わせたいと思います。

（そういった変換や学習がめんどくさい方は、公式のLiveEditorに張り付けることで、先ほどChatGPTが書いたコードを使うことができます。作成したフローチャートはActionsタブのCOPYMARKDOWNを押せばそのままQiitaに張り付けることができます。）

こんな感じです。

ただどうせならQiitaの機能を正しく使いたいので、ChatGPTくんに直してもらいましょう。

あなた

(["・・・"])の形式になるよう修正してください。

ChatGPT

以下は、指定されたMermaidマークダウンを修正したもので、ノードが(["・・・"])の形式で表されています。

graph TD
    A(["主人公カタリナでシナリオスタート"]) -->|進行| B(["ロアーヌ城で「悪鬼」を倒す"])
    B -->|自動進行| C(["カタリナと偽ミカエルが画面下に掃ける"])
    C --> D(["や・・・や・・・"])
    D --> E(["〇〇〇〇ダイナミック！！"])

コードブロックを用いて描画した結果がこちら

これでQiitaが対応しているMermaid 10.2.4の形式になりました。

使用方法はコードブロックを「```mermaid」のようにmermaidで動くように作成して

graph TD
A(["主人公カタリナでシナリオスタート"]) -->|進行| B(["ロアーヌ城で「悪鬼」を倒す"])
B -->|自動進行| C(["カタリナと偽ミカエルが画面下に掃ける"])
C --> D(["や・・・や・・・"])
D --> E(["〇〇〇〇ダイナミック！！"])

のようにMermaid記法のマークダウンを貼り付けます。

最後に「```」でコードブロックを閉じます。

以上です。

簡単に概要を示すフローチャートが作成できますので、ChatGPTにどんどんMermaid記法で描かせてみてください！