サイトのデザインが新しくなりました。

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

ChatGPT マーメイド記法 手順 注意点 徹底解説

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を社内で活用していきたい方へ

「生成AIを社内で活用したい」「生成AIの事業をやっていきたい」という方に向けて、生成AI社内セミナー・勉強会をさせていただいております。

セミナー内容や料金については、ご相談ください。

また、弊社紹介資料もご用意しておりますので、併せてご確認ください。

投稿者

  • 2sc

    テクニカルライター 大学時代はアリの生態を研究。 ラボで唯一、Pythonを使ってデータ分析を効率化していた。 現在はライターとして、オウンドメディアや学術記事の執筆に当たっている。

  • URLをコピーしました!
  • URLをコピーしました!
目次