ChatGPTでマーメイド記法を行うには？具体的な手順と注意点を徹底解説

ChatGPT（ユーザー向け）

2024-03-262024-07-16

WEELメディア事業部AIライターの2scです。

みなさん、シンプルな記述でチャートやグラフが作れる「マーメイド記法」はご存知ですか？

こちらは2019年の『JavaScript OS Awards』にノミネートされた、クールなプログラミング言語。なんと無料版を含むChatGPTからの生成が可能で、慣れれば一瞬でテキストが図式化できちゃうんです！

ということで当記事では、ChatGPT×マーメイド記法で作れる図式の種類やその作り方・裏ワザを紹介していきます。

完読いただくとしばらくの間、なんでも図式化しちゃいたくなるかも……

ぜひ、最後までお読みくださいね。

マーメイド記法とは？

「PowerPointでのプレゼン資料作りが面倒くさい！」「企画書に図式を入れると時間がかかる……」

などなど資料作りでお悩みのあなたに、おすすめのツールがあります！

それが……図やグラフを生成できるスクリプト言語、マーメイド（Mermaid）記法です。このマーメイド記法はいわゆる「プログミング言語」ですが、その使い方は簡単！まずコード自体が、以下のとおりシンプルな記述で済みます。

flowchart TD
    A[クリスマス] -->|お小遣いもらう| B(買い物に行く)
    B --> C{何を買うか考える}
    C -->|One| D[ノートPC]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car 自動車]

そしてこちらのコードを、

Mermaid Live Editor
VScode
Notion
GitHub

などなど、エディタに入力すると……

このように、複雑なフローチャートが表現できちゃうんです！そんなマーメイド記法で表現できるのは、

シーケンス図
フローチャート
ガントチャート
クラス図
円グラフ
棒グラフ
…etc.

です。IT系の開発 / プレゼン資料作成 / プロジェクト管理 / Web記事執筆などなど、幅広い業務で役立ってくれますよ！

公式サイト：Mermaid
公式エディタ：Mermaid Live Editor

ChatGPT×マーメイド記法という選択肢

もう一つ、みなさんに朗報があります！それは……

ChatGPT（無料版含む）なら、マーメイド記法が出力できる

ということです。

いくらマーメイド記法がシンプルであるとはいえ、それをイチから習得するのは手間ですよね。

ですが、テキスト&ソースコードに対応したChatGPTなら、手順を説明するだけでマーメイド記法に変換してくれちゃうんです。そのほか……

手順の漏れを補完しながらマーメイド記法を生成
URLから記事の内容をマーメイド記法に変換（有料版限定）
画像をマーメイド記法に変換（有料版限定）

といった芸当もこなしてみせます。

なお、生成AIを使ったノーコード開発について詳しく知りたい方は、下記の記事を合わせてご確認ください。
→【生成AI×ノーコード】AI時代のノーコード開発をAIエンジニアが解説

ChatGPT×マーメイド記法で作れる図式8選！

ChatGPTとマーメイド記法の組み合わせなら、下記の図式8種が一瞬で用意できちゃいます。もちろん、特別な知識は不要です。

シーケンス図
ユーザージャーニー図
ガントチャート
フローチャート
ステータス図
クラス図
ER図
Gitグラフ

ということでここからは、各図式についてその使い所とプロンプト例を紹介。まずは一番使い勝手の良い「シーケンス図」から、詳しくみていきましょう！

シーケンス図

ChatGPT×マーメイド記法で作れる図式で、一番使い所が多いのは「シーケンス図」でしょう。

まず、シーケンス図がどのようなものなのかといいますと……

システム / 人 / 物…etc.同士の相互作用を時系列順で表した図式となります。このシーケンス図はもともと、ソフトウェア設計用の図式。ですが、そのほかの業務フローにも応用できちゃうんです！

ChatGPTなら、そんなシーケンス図を簡単に作れます。例えば、ECサイトにおける商品の流れを表す下記をChatGPTに入力し、出力をエディタにコピー&ペーストすると……

#命令
次の入力をMermaid記法のシーケンス図で出力してください

#入力
実店舗（participant）
ECサイト（participant）
ユーザー（actor）

1.ユーザーがECサイトに商品を注文する
2.ECサイトが実店舗に商品を発注する
3.実店舗がユーザーまで商品を配送
4.ユーザーはECサイトに料金を払う
5.ECサイトは実店舗に料金の一部を渡す

#出力

このように一瞬で、商品の流れが可視化できちゃいます。

ユーザージャーニー図

ユーザー目線で課題を考えるときに便利な「ユーザージャーニー図」も、ChatGPTとマーメイド記法で作れます。例えば下記、ベタな少女漫画の冒頭をChatGPTでマーメイド記法に変換してみると……

#命令
次の入力をMermaid記法のUser Journeyで出力してください

#入力
私はWEEL花子、どこにでもいるふつうの女子高生！今日は大事な入学式なのに、寝坊しちゃった！急いでパンを咥えて家を出たわ。走って登校していると、あら大変！曲がり角で男の人にぶつかっちゃった！よくみたらその人はイケメンで、一目惚れしちゃったわ！

#出力

このようにChatGPTがユーザーの気持ちを補完したうえで、ユーザージャーニー図のマーメイド記法を生成してくれちゃうんです！マーケターやWebライターのみなさん、ぜひともお試しください。

ガントチャート

マネージャー・中間管理職のみなさんも、ChatGPT×マーメイド記法のテクニックは必修です！

チームでプロジェクトを遂行する際、誰が・どのタスクを・いつやるかを共有しておきたいところ。そこで役立つ「ガントチャート」も、ChatGPTとマーメイド記法の組み合わせならラクラク作れちゃうんです！

たとえば下記、テスト期間中の勉強計画をChatGPTに投げてみると……

#命令
次の入力をMermaid記法のガントチャートで出力してください

#入力
以下、勉強する教科と日数を、実施する順番に示す

数学：3日
英語：2日
理科：2日
国語：2日
社会：2日
副教科：1日
全科目おさらい：2日

#出力

学習塾さながらの、ガントチャートが完成します。これなら、

プロジェクト全体の計画表
個人のスケジュール表
開発の工程表
…etc.

が一瞬で用意できますね。

フローチャート

「フローチャート」はIT系や製造業のみならず、ビジネス全般で使える図式です。そんなフローチャートも、ChatGPTの手にかかれば一瞬で生成できてしまいます。

試しに、桃太郎とかぐや姫の条件分岐をChatGPTとマーメイド記法で図式化してみると……

#命令
次の入力をMermaid記法のフローチャートで出力してください

#入力
1.おじいさんとおばあさんがいる
2.おじいさんとおばあさんが仕事に行く

分岐a
3.おばあさんが川で桃を見つける
4.桃の中から赤ちゃんを取得
5.赤ちゃんが成長して鬼退治に行く

分岐b
3.おじいさんが光る竹をみつける
4.竹の中から赤ちゃんを取得
5.赤ちゃんが成長して月に帰る

#出力

このようにフローチャートが完成します。しかも、ChatGPTが分岐条件を補完してくれていますね。

ステータス図

ChatGPTなら、マーメイド記法で「ステータス図」が生成可能。学会発表等で、物事の移り変わりを表現したい場合に重宝します。

今回は試しに、昆虫の一生をChatGPT×マーメイド記法でステータス図に起こしてみます。下記プロンプトを入力、出力をエディタに貼り付けると……

#命令
次の入力をMermaid記法のステータス図で出力してください

#入力
卵から幼虫の変化「孵化」
幼虫間の変化は「脱皮」
幼虫から蛹の変化は「蛹化」
蛹から成虫の変化は「変態」

卵
1齢幼虫
2齢幼虫
3齢幼虫
4齢幼虫
5齢幼虫
蛹
成虫

#出力

アカデミックな雰囲気の図式が完成しました！

クラス図

システム同士の関係性を表すUMLの代表格「クラス図」も、ChatGPTとマーメイド記法なら一瞬で生成可能！システムエンジニア（SE）の方におすすめです。

今回は家族の構成員をシステムになぞらえて、その関係性をクラス図に起こしてみます。下記のプロンプトをChatGPTに入力し、出力をエディタにコピペすると……

#命令
次の入力をMermaid記法のクラス図で出力してください

#入力

父・母・兄・私・犬からなる家族
家族全員分＝自分以外の全員に線を伸ばす
犬の＝犬に線を伸ばす

父：家族全員分のお金を稼ぐ / 家族全員分の食事を作る / 家族全員をドライブにつれていく
母：家族全員分のお金を稼ぐ / 家族全員分の部屋を掃除する / 犬のお世話をする
兄：家族全員分のおつかいにいく
私：家族全員分のおつかいに行く / 犬のお世話をする
犬：家族全員に可愛がられる

#出力

こんな感じで、不完全ながらもクラス図が作れます。

ER図

データベースの構造を表す「ER図 / Entity Relationship Diagram」も、ChatGPT×マーメイド記法なら一瞬で用意できます。例えば、ファッション系ECサイトにおけるレコメンドの仕組みを表したい場合は……

#命令
次の入力をMermaid記法のER図で出力してください。出力は全て英語で行うこと。

#入力
人物名のデータを参照して、最適な衣服名1を検索。
衣服名1と共通する衣服名をおすすめアイテムとして表示。

【人物名】
身長
体重
胸囲
腹囲
腰囲

【衣服名1】
ブランド
色
ジャンル
フォーマル度

【おすすめアイテム】
衣服名2
衣服名3
衣服名4
衣服名5
衣服名6

#出力

というプロンプトを入力し、出力をエディタにコピー&ペーストするだけ。するとエディタ上で……

このようにER図が完成します！これなら、データベースの開発・保守・運用が捗るかも……

Gitグラフ

ソフトウェアやファイルのバージョンを可視化してくれる「Gitグラフ」も一応、ChatGPT×マーメイド記法で表現できます。使い所は限定されますが、下記のようにOSのバージョンを図式化させたい場合に便利です。

MacOSのバージョンをMermaid記法のGitグラフで出力してください。あなたが知る限りの情報でOKです。

次項からは実際に、ChatGPT×マーメイド記法で図式を作っていきます！

なお、図式をコードに変換してくれるAIツールについて詳しく知りたい方は、下記の記事を合わせてご確認ください。
→【tldraw makereal】手書きの図から5秒で本格サイトを自動作成してくれるAIを使ってみた

ChatGPT×マーメイド記法で図を書く方法

ここからは実際に、ChatGPTとマーメイド記法の組み合わせで図式を作る方法をお伝えしていきます。なんとなんと、今回お教えするテクニックに最低限必要なのは……

ChatGPTの無料版アカウント

だけなんです！まずはプロンプトの書き方から、画像付きで詳しくみていきましょう。

手順1.ChatGPTにプロンプトを入力

まずは、ChatGPTにマーメイド記法を出力させるためのプロンプトを作成します。といっても作り方は簡単で、下記のテンプレートを埋めていくだけです。

#命令
内容をMermaid記法の所定の図式で出力してください。

#内容

#図式

#出力

今回は以下のとおり、桃太郎の鬼退治をシーケンス図で表現させてみました。

#命令
内容をMermaid記法の所定の図式で出力してください。

#内容
登場人物は桃太郎・犬・猿・雉・鬼

桃太郎が犬にきび団子を贈与
犬が桃太郎の配下になる
桃太郎が猿にきび団子を贈与
猿が桃太郎の配下になる
桃太郎が雉にきび団子を贈与
雉が桃太郎の配下になる
桃太郎が鬼に攻撃
鬼が桃太郎に反撃
桃太郎が犬・猿・雉に攻撃指令を出す（犬・猿・雉が起動）
犬が鬼に噛み付く
猿が鬼を引っ掻く
雉が鬼を突く
鬼が倒れる（鬼のライフラインを破棄）
桃太郎が犬・猿・雉に解散命令を出す（犬・猿・雉が終了）

#図式
シーケンス図

#出力

続いてChatGPT（無料版も可）にログインし、上記プロンプトを入力してみると……
→ChatGPTトップページ

このように、マーメイド記法のコードが返ってきます。あとは右上「Copy code」をクリック、コードをコピーしちゃいましょう！

手順2.出力をエディタから保存

続いては、コピーしたコードをマーメイド記法対応のエディタで編集していきます。マーメイド記法が扱えるエディタとしては……

Mermaid Live Editor
VScode
Notion
GitHub

などが挙げられますが、今回は「Mermaid Live Editor」での手順をみていきましょう！
→Mermaid Live Editorのトップページ

Mermaid Live Editorのトップページに移ると、以下のような画面が表示されるはずです。

ここで上図・オレンジ色の枠の部分に、先ほどコピーしたコードを貼り付けてみましょう！すると……

このように、マーメイド記法のコードから図式（シーケンス図）が起こされました！

あとは下図・オレンジ枠の部分に従って……

①「Actions」をクリックして②PNG形式でダウンロードすれば、図式が保存できます。

さて、気になるシーケンス図の仕上がりは……

お見事！時系列を保った状態で図式化できていますね。

番外編1.ファイル・URLからの生成

有料版ChatGPT（Plus / Team / Enterprise）限定ですが、以下のデータを元にマーメイド記法のコードが生成できます。

PDF
パワーポイント
ドキュメント
スプレッドシート（csv / xlsx）
画像
URL
…etc.

当記事ではPDF・画像・URLからの生成についてのみ、それぞれ方法を紹介します。

PDFからマーメイド記法を生成

PDFをChatGPTに読み込ませたい場合は、チャットルームに直接ファイルをドラッグ&ドロップします。ファイルをつかんだカーソルをチャットルーム上に合わせると……

このように「Add anything」と表示されますので、そのままドロップしてOKです。ちなみに今回は、弊社・株式会社WEELの会社紹介資料を読み込ませてみました！

続いて、ファイル内の任意の情報だけを図式化していきます。下記プロンプトを入力してみると……

PDFファイル中の活用フェーズとそれに合ったサービスについて、Mermaid記法のフローチャートで記述してください。

以上のとおり、PDFとプロンプトが同梱された状態になりますね。このままChatGPTに送信してみましょう。

するとお見事！お客様のニーズと対応するサービスのみを、マーメイド記法に盛り込んでくれています。これをエディタに入力すると……

お目当てのフローチャートが完成します。

これなら、長い資料もラクラク読めちゃうかも。ぜひ、お試しください！

画像からマーメイド記法を生成

画像についても、PDFと同じ手順でマーメイド記法に変換できます。今回は以下のガントチャートをChatGPTに入力し、Mermaid記法に変換してもらいましょう！

ちなみにプロンプトのほうは……

画像をMermaid記法のガントチャートで記述してください。

このようにシンプルです。以上の画像とプロンプトをセットで入力し、出力をエディタに貼り付けてみると……

一応ガントチャートにはなっていますが、微修正が必要そうですね……

URLからマーメイド記法を生成

有料版ChatGPTのブラウジング機能を使えば、Web上のコンテンツもマーメイド記法で図式化できます。例えば以下のように、参照させたい記事のURLをプロンプトで示すと……

URLを参考に、豊臣秀吉の名前の変遷をMermaid記法のステータス図で記述してください。
https://kids.gakken.co.jp/box/syakai/06/pdf/B026109090.pdf

このように必要な情報だけを抽出し、マーメイド記法のコードとして出力してくれるんです！

番外編2.グラフの生成

実は今回紹介したもの以外にも、マーメイド記法で表現できる図式がまだまだあります。例えば、

XYChart / 折れ線&棒グラフ
Pie Chart / 円グラフ
Mindmap / マインドマップ
…etc.

といった、よく使う図式もマーメイド記法で表せちゃうんです。

ただChatGPTは、今あげた図式の書き方を学習していません。試しに下記のプロンプトを使って、ChatGPTにXYChartを作らせてみると……

下記URL中の栄養素をX軸・値（gとmgだけ）をY軸にとって、Mermaid記法のXYChartで記述して。
https://fooddb.mext.go.jp/details/details.pl?ITEM_NO=4_04023_7

ChatGPTはあたかもXYChartを作ったかのような口ぶりで、フローチャートを返してきます。いわゆるハルシネーションです。

これを解決する方法は、ただ一つ。マーメイド記法の公式サイトにある正しい記述例を、Few-shotで示せばいいんです！
→マーメイド記法のルール一覧

ということで以下のとおり、プロンプトにXYChartの記述例を追加してみました。

下記URL中の栄養素をX軸・値（gとmgだけ）をY軸にとって、Mermaid記法のXYChartで記述して。記述方法は参考を使うこと。
https://fooddb.mext.go.jp/details/details.pl?ITEM_NO=4_04023_7

#参考
xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

このプロンプトに対して、ChatGPTが返した出力は……

xychart-beta
    title "Nutritional Values of Soybeans"
    x-axis [Water, Protein, Fat, Carbohydrates, Fiber, Sodium, Potassium, Calcium, Magnesium, Phosphorus, Iron, Zinc, Copper, Manganese, Vitamin E, Vitamin B1, Vitamin B2, Niacin, Vitamin B6, Folate, Pantothenic Acid, Biotin, Vitamin C]
    y-axis "Value (g or mg)" 0 --> 2000
    bar [12.4, 33.8, 19.7, 29.5, 21.5, 1, 1900, 180, 220, 490, 6.8, 3.1, 1.07, 2.27, 24.8, 0.71, 0.26, 2.0, 0.51, 260, 1.36, 28.0, 3]

お見事！ちゃんと棒グラフになっています。あとはX軸の間隔とY軸の単位を整えてあげるだけですね。

参考記事：XY Chart | Mermaid

ChatGPT×マーメイド記法の注意点2つ

最後に、ChatGPTとマーメイド記法で図式を作るにあたっての注意点を2つ紹介します。まずは大量のデータを図式化する際の注意点から、みていきましょう！

注意点1.入力量の限界

ChatGPTが一度に処理できる情報量には限界があります。ですので、大量のデータを図式化しようとすると……

生成が中断されてしまう
途中までしか生成されない

などなど、うまくマーメイド記法のコードが生成されません。そういった場合は図式を小分けで作って、最後に繋ぎ合わせる方がよいでしょう。

例えば0歳から100歳、そして100歳以上の各年齢における人口をXYChartに変換させようとすると……

このように、ChatGPTは生成を諦めてしまうんです。

注意点2.ハルシネーション

ChatGPTの弱点・ハルシネーションは、マーメイド記法においても生じます。特に多いのが以下の2点です。

マーメイド記法のルールを逸脱する
学習範囲外の場合、嘘のマーメイド記法を返す

例えば日本語のプロンプトをマーメイド記法に変換、ER図を作ってみると……

以上のとおりER図は日本語非対応であるため、エラーが生じます。

また学習範囲外のXYChartについて、ChatGPTにマーメイド記法で記述させてみると……

このように、フローチャート（graph TD）のコードが返ってくるんです。以上の記述ミスは、Few-shotで正解例を示すといくらか改善します。

なお、Few-shot等のプロンプトテクニックについて詳しく知りたい方は、下記の記事を合わせてご確認ください。
→プロンプトエンジニアリングマスターWiki！ChatGPTの必須テクニック16選

ChatGPT×マーメイド記法なら資料作りも楽チン

当記事では、ChatGPTとマーメイド記法の組み合わせで図式を作る方法について、解説していきました。ChatGPT×マーメイド記法で作れる図式は……

シーケンス図
ユーザージャーニー図
ガントチャート
フローチャート
ステータス図
クラス図
ER図
Gitグラフ

以上8点です！有料版・無料版問わず、ChatGPTユーザーなら誰でも簡単に図式が作れますよ。

そのほか有料版ChatGPTなら、ファイルやURLからの図式化も可能。ソフトウェアの開発からプレゼン資料作りまで、ChatGPTとマーメイド記法のコンビネーションをお役立てください！

生成系AIの業務活用なら！

・生成系AIを活用したPoC開発

・生成系AIのコンサルティング

・システム間API連携

無料ダウンロード

最後に

いかがだったでしょうか？

弊社では

・マーケティングやエンジニアリングなどの専門知識を学習させたAI社員の開発
・要件定義・業務フロー作成を80%自動化できる自律型AIエージェントの開発
・生成AIとRPAを組み合わせた業務自動化ツールの開発
・社内人事業務を99%自動化できるAIツールの開発
・ハルシネーション対策AIツールの開発
・自社専用のAIチャットボットの開発

などの開発実績がございます。

まずは、「無料相談」にてご相談を承っておりますので、ご興味がある方はぜひご連絡ください。

➡︎生成AIを使った業務効率化、生成AIツールの開発について相談をしてみる。

生成AIを社内で活用していきたい方へ