ChatGPTに図を書いてもらうときにはMermaid記法が便利かなと思ったんだけど…

こんにちは。
気づけばもう12月、恐ろしい話です。

さて、今回は生成AIとの付き合い方のお話。
時代はもうマルチモーダルになってきているので、直接画像出力してもらえばいいじゃないという説もなくはないと思いますが、図を書くときにMermaid記法を使ったら便利なんじゃないかな思ったので。

Mermaid記法ってなんだ

mermaid.js.org

MermaidはJavaScriptベースの図、グラフの作成ツールです。
簡単に試して見るにはVS Codeのプラグインを入れるのがおすすめです。

Markdown Preview Mermaid Support - Visual Studio Marketplace

例えばこんな感じに書くと、

```mermaid
gantt
    title 開発スケジュール
    dateFormat YYYY-MM-DD

    section 機能A
    設計: a, 2023-12-10, 5d
    デザイン: b, after a, 5d
    実装: c, after b, 15d
    テスト: d, after c, 10d
    レビュー: e, after d, 5d
    リリース: milestone, m1, 2024-1-25, 1d
```

こんな感じにしてくれるわけです。

ガントチャートを例にしましたが、他にも色々な種類の図が作れます。便利。

ChatGPTに作ってもらおう

グラフ以外の回答は省略しています。

フローチャート

You
カレーの作り方をmermaid記法のフローチャートで教えてください。

ChatGPT
graph TD;
  A[材料の準備] -->|野菜を切る| B[野菜の下ごしらえ]
  B -->|油で炒める| C[野菜を炒める]
  C -->|スパイスを加える| D[スパイスの追加]
  D -->|水を加える| E[水を注ぐ]
  E -->|煮る| F[カレーを煮る]
  F -->|調味料を加える| G[調味料の追加]
  G -->|完成| H[カレーの完成]

フロー感がない…。

ガントチャート

You
カレーの作り方をmermaid記法のガントチャートで教えてください。

ChatGPT
gantt
    title カレーの作り方

    section 材料の準備
    材料の買い出し           :a1, 2023-12-10, 1d
    野菜の切り分け           :after a1  , 2h
    肉の下ごしらえ           :after a1  , 1h

    section 調理
    鍋に油を熱する           :after a1  , 30m
    玉ねぎを炒める           :after a1  , 15m
    にんにくを加える         :after a1  , 10m
    肉を炒める               :after a1  , 20m
    野菜を加えて炒める       :after a1  , 15m
    スパイスを加える         :after a1  , 10m
    トマトを加える           :after a1  , 10m
    シミマーホし、煮込む      :after a1  , 30m

    section 盛り付け
    ご飯を用意する           :after a1  , 15m
    カレーを盛り付ける       :after a1  , 10m
    ナンやパンを添える       :after a1  , 10m

    section 完成
    カレーの完成             :after a1  , 0m

マルチタスクすぎる。っていうかシミマーホって何…。

シーケンス図

You
カレーの作り方をmermaid記法のシーケンス図で教えてください。

ChatGPT
sequenceDiagram
  participant A as 料理人
  participant B as 材料

  A->>B: 野菜を切る
  A->>B: 豚肉を炒める
  A->>B: スパイスを加える
  A->>B: 水を加えて煮る
  A->>B: カレールーを溶かす
  A->>B: 調味料を加える
  A->>B: さらに煮込む
  A->>B: カレーの完成

  Note over A, B: 美味しいカレーができました！

登場人物の選択が良くない気がする。

まだ早かったか

ちょっとGPT-3.5だと無理そうでした。GPT-4だったらいい感じになるのか？

おまけ

BardにGeminiが搭載されたらしいので、Bardでも試してみました。
現段階だとGoogleアカウントの言語設定を英語にしないとGeminiにならないみたい。

日本語のとき

英語のとき

You
カレーの作り方をmermaid記法のシーケンス図で教えてください。

Bard
sequenceDiagram
  participant ユーザー
  participant カレー

  ユーザー ->> カレー: カレーを作ろう
  カレー ->> ユーザー: 材料を準備してください
  ユーザー ->> カレー: 材料を切ってください
  カレー ->> ユーザー: 鍋に油を熱してください
  ユーザー ->> カレー: 肉を炒めてください
  カレー ->> ユーザー: 玉ねぎを炒めてください
  カレー ->> ユーザー: 人参を炒めてください
  カレー ->> ユーザー: じゃがいもを炒めてください
  カレー ->> ユーザー: にんじん、じゃがいも、玉ねぎを炒めてください
  カレー ->> ユーザー: カレールーを入れてください
  ユーザー ->> カレー: 水を入れてください
  カレー ->> ユーザー: 煮込んでください
  カレー ->> ユーザー: 完成です

こいつ…カレーと対話してる！！

追記

GPT-4にガントチャート書いてもらったら結構それっぽいかもしれない。

You
カレーの作り方をmermaid記法のガントチャートで教えてください。

ChatGPT
gantt
    title カレーの作り方
    dateFormat  YYYY-MM-DD
    section 材料準備
    野菜を切る           :    des1, 2023-01-01,1d
    肉を切る             :active,  des2, 2023-01-02,1d
    section 調理
    玉ねぎを炒める       :         des3, after des1, 2d
    肉を加えて炒める     :         des4, after des2, 2d
    水を加える           :         des5, after des3, 1d
    カレールーを加える   :         des6, after des5, 1d
    section 完成
    盛り付け            :         des7, after des6, 1d