ChatGPTを使って、Mermaidで図表を作成する
皆さんはMermaidのことをご存知でしょうか。
一言で言うと、コードのようなものを入力することで様々な図表を作成することができるツール（JavaScriptライブラリ）になります。
例えば、
flowchart TD A[処方箋受付] --> B[患者情報確認] B --> C[処方内容監査] C --> D[疑義照会の要否確認] D -->|必要| E[医師へ疑義照会] D -->|不要| F[調剤] E --> F F --> G[最終監査] G --> H[服薬指導] H --> I[会計・薬剤交付]というコードを入力することにより、
こんな感じの整ったフローチャートを生成してくれます。
矢印の位置などもきれいに揃った状態で出力されるので、CanvaやPowerPointを普段使わない私でも、ストレスフリーです。
さっそく使ってみましょう
まずは、こちらからMermaidにアクセスします。
このような画面になっていると思いますが、試すだけなら「Try Editor」を選択すればOKです。
試すだけなら、Open Sourceの「Start free」を選択すればOKです。
あとは、コードを入力すればリアルタイムで変更が反映されます。
良い図が出来上がったら、左下のActionsを選択すれば画像（PNG, SVG）やMarkdownファイルで出力することができるので、PCやスマホに保存することも可能です。
フローチャート以外にも様々な図が作れます
今回はフローチャートを紹介しましたが、左側の「Sample Diagrams」の項目を選択すれば、様々な図表のサンプルを閲覧することができます。これは実際に見ていただいたほうがわかりやすいですが、思っている以上に様々な図表を作ることができます。
例えば、
このようなサンキーダイアグラムも作れます。
便利ですが、ひとつ問題点があって…
コードを書くのが大変です。
普段Markdownで何かを書いている人やコーディングが得意な方ならともかく、そうでない人にとっては鬼門になります。
なので、この部分は生成AIの力を借りましょう。
今回は試しに、ChatGPT（Thinking）にお願いしてみることにします。
グラフを作成する場合なら、データを提示して「Mermaidでグラフを作成したいです」と言えば、適した形式のコードを出力してもらえると考えられますが、フローチャートやマインドマップのような図を作成する場合は、テキストで指示をするのが少々難しいです。
なので、ここはあえて手書きの図を撮影して、きれいに整えてもらう方向で調整します。
実際に試してみた結果…
試しに、以下の手書きフローチャートをMermaidで作成してみましょう。
…色々汚くてすみません。
このどうしようもないクオリティの手書きの画像をChatGPT（Thinking）に添付し、「このフローチャートをMermaidで作成したいです」と伝えると、ChatGPTが一瞬でコードを出力してくれます。
…というわけで、コードをすっ飛ばしてMermaidのフローチャートが出力されました。ChatGPTのチャット画面だけで完結するんですね。恥ずかしながら知りませんでした。
ちなみに、図表の右上のトグルボタンを選択すると、コードとプレビュー（図表）の表示を切り替えることができます。
そして、先程出力されたフローチャートを着色したものがこちらです。
だいぶそれっぽくなりましたね。
注意事項もありまして
一部のWebサイトではMermaidコードが公開されていることもありますが、そのコードの中身を確認せずにそのまま実行するのは、実はハイリスクです。
Mermaidは図を描くだけのツールに見えますが、その内部ではJavaScriptが動いています。ゆえに、もし悪意のあるコードがMermaidの中に埋め込まれた場合、それが実行されてしまう可能性があります。
（これをクロスサイトスクリプティング攻撃といいます）
なので、安全性を自身の責任のもと検証できない場合は、コード自体を外部に公開することは避け、出力された図表をPNG形式（SVGは避ける）で保存するのみにとどめるのが望ましいでしょう。
また、今回生成AIにコードを生成してもらう方法を提案しましたが、生成AIが出力したコードも厳密には安全性が保証されているわけではありません。
正直に言うと、生成AIがMermaidコードを出力するときに、わざわざセキュリティリスクになり得る余計な要素を加えるとは考えにくいのですが、余計な要素を加えないようにする追加の指示として、以下の文言を加えておくと良いかもしれません。
- HTMLタグは使用しないでください
- クリックイベントを使用しないでください
- 外部リンクを含めないでください
- Mermaid標準ノードのみ使用してください
いずれにせよ、ChatGPTのチャット上で直接出力されたMermaidの図表をPNGで保存する分には、基本的に安全と考えてよいでしょう。
「CanvaやPowerPointなどは使い慣れていないけど、整った図表を作りたい」という方は、Mermaidを活用して図表を作成してみてはいかがでしょうか。
