ChatGPT($20課金なし）でフローチャートを描けると知ったので試しました

「ChatGPTを使って簡単にフローチャートができる」というtweetを見ました。@HeyAbhishekkさんの tweetです。
便利そうなので、やってみました。（2024年3月25日）
使ったのは、$20課金していないChatGPT3.5です。

ChatGPT can now create Flowcharts and Diagrams.

No more wasting hundreds of hours creating visuals for presentations or research papers.

Here’s how to do it for free in a few minutes: pic.twitter.com/nSVHBJ804M

— Abhishek (@HeyAbhishekk) March 22, 2024

1) ChatGPTに、ロードマップを作ってもらう

「Pythonをマスターするための、段階的なステップ・バイ・ステップのロードマップを作成してください。」

ベースを作る

2) ChatGPTに、簡単なフローチャートにしてもらう。

「その手順を簡単なフローチャートに再作成し、サブポイントを並べて配置してください。」

フローチャートを作る

3) ChatGPTに、mermaidの記法でコードを作ってもらう

「このフローチャートを、mermaidの記法を使って、マーメイドコードで作成してください。」

mermaid code にする

mermaidの記法については、https://qiita.com/t_o_d/items/ac5b04419252f768a535 を参考にしました

【目的無しの泥臭調査⑤】mermaid.jsの記法を覚えて、楽しく図を描く。 - Qiita

4) mermaidに対応しているアプリを使って作図・編集する

使ったのは、オープンソースのアプリ draw.ioです。（@HeyAbhishekkさんがtweetの中で使っているアプリと同じ）
下記、draw.ioでの手順

チャート図形を描くアプリdraw.io のこと

オンラインで使えます。デスクトップ版もあります。
オンラインはここ→https://app.diagrams.net/
ダウンロードはここ→ Release 24.1.0 · jgraph/drawio-desktop · GitHub

デスクトップ版の最初の画面

ダイアグラム作成画面になったら、
［＋］ー［Advanced］ー［Mermaid］をクリック

［＋］ー［Advanced］ー［Mermaid］

Mermaidコード入力画面になったら、コードを貼り付けて ［Insert］

draw.ioにMermaid codeを貼り付ける

draw.ioで作った図

おまけ。Excalidrawのmermaidで作った図

Excalidrawのmermaidで作った図

レイアウトやテキストボックスの位置・色などは、アプリで編集します。

あっという間に描けました。
ChatGPT3.5（$20課金していない）で、こんなことができるなんて😆。

追記）描画するとき、mermaidのコードの中に日本語の「、」が入っているとエラーになりました。上の図は「, 」に変更して作図した結果です。