Zenn
🎨

ChatGPTとMermaidでらくらくお絵かき

2023/03/25に公開
Mermaid
ChatGPT
tech

はじめに

何かの絵を描くのって結構めんどくさいですよね。現段階では、ChatGPTにSVGなどの図を描かせることは精度的に困難です。しかし、Mermaid記法で表現可能な図であればかなりいい感じの図が描けたのでご紹介します。

フローチャート

ここではFizz Buzzのフローチャートを作ってもらいます。

Prompt

Fizz BuzzのフローチャートをMermaid記法で出力してください。

Completion

Mermaidでは、FizzBuzzのフローチャートを次のように表現できます。このコードをMermaidでレンダリングすると、フローチャートが表示されます。

\`\`\`mermaid
graph TD
    A[Start] --> B{Count n}
    B --> |"n % 3 == 0"| C[Fizz]
    B --> |"n % 5 == 0"| D[Buzz]
    B --> |"n % 15 == 0"| E[FizzBuzz]
    B --> |"Else"| F[Output n]
    C --> G[Output "Fizz"]
    D --> H[Output "Buzz"]
    E --> I[Output "FizzBuzz"]
    G --> J{Next n}
    H --> J
    I --> J
    F --> J
    J --> B
このフローチャートは、次のようなFizzBuzzのロジックを表しています。
\`\`\`

開始
数値nをカウント
nが3で割り切れる場合、"Fizz"を出力
nが5で割り切れる場合、"Buzz"を出力
nが15で割り切れる場合、"FizzBuzz"を出力
それ以外の場合、nをそのまま出力
nを次の数に進める
ステップ2に戻る

"のせいでコンパイルエラーになったので除外する必要はありましたが、内容は問題ありませんね。

シーケンス図

レビュープロセスのシーケンス図を作ってもらいます。

Prompt

以下のフローをMermaid記法のシーケンス図で出力してください。
1. プログラマはGithubでpull-requestを作成する
2. レビューアはpull-requestをレビューしてコメントをする
3. プログラマはレビューコメントの指摘を修正したコードをpushする
4. レビューアは修正内容を確認してpull-requestをマージする
5. GithubはGithub Actionを実行してプログラムのビルド・テスト・デプロイをする。

Completion

以下が、Mermaid記法で書かれたシーケンス図です。

\`\`\`mermaid
sequenceDiagram
    participant プログラマ
    participant Github
    participant レビューア
    participant GithubAction

    プログラマ->>Github: pull-requestを作成
    Github->>レビューア: pull-requestを通知
    レビューア->>Github: コメントを投稿
    Github->>プログラマ: コメントを通知
    プログラマ->>Github: 修正コードをpush
    Github->>レビューア: 修正内容を通知
    レビューア->>Github: pull-requestをマージ
    Github->>GithubAction: ビルド・テスト・デプロイを実行
\`\`\`
このコードをMermaidを使ってレンダリングすると、指定されたフローに従ったシーケンス図が生成されます。

これもいい感じです！面倒くさくて省略したGithubからの通知なども空気を読んでちゃんと表現してくれました。

ER図

あらかじめChatGPTに生成してもらった以下のモデルでERDを作ってもらいます。

  1. 商品 (Product)
    • 商品ID (ProductID) - 主キー
    • 商品名 (ProductName)
    • 商品説明 (ProductDescription)
    • 単価 (UnitPrice)
    • 在庫数 (StockQuantity)
  2. 顧客 (Customer)
    • 顧客ID (CustomerID) - 主キー
    • 氏名 (FullName)
    • 電話番号 (PhoneNumber)
    • メールアドレス (EmailAddress)
    • 住所 (Address)
  3. 注文 (Order)
    • 注文ID (OrderID) - 主キー
    • 顧客ID (CustomerID) - 外部キー
    • 注文日 (OrderDate)
    • 配送日 (DeliveryDate)
    • 配送先住所 (ShippingAddress)
    • 合計金額 (TotalAmount)
    • ステータス (Status)
  4. 注文明細 (OrderDetail)
    • 注文明細ID (OrderDetailID) - 主キー
    • 注文ID (OrderID) - 外部キー
    • 商品ID (ProductID) - 外部キー
    • 数量 (Quantity)
    • 単価 (UnitPrice)
    • 小計 (Subtotal)
  5. 仕入先 (Supplier)
    • 仕入先ID (SupplierID) - 主キー
    • 仕入先名 (SupplierName)
    • 連絡先 (Contact)
    • 電話番号 (PhoneNumber)
    • メールアドレス (EmailAddress)
    • 住所 (Address)
  6. 入庫 (InventoryReceipt)
    • 入庫ID (InventoryReceiptID) - 主キー
    • 仕入先ID (SupplierID) - 外部キー
    • 商品ID (ProductID) - 外部キー
    • 入庫日 (ReceiptDate)
    • 数量 (Quantity)
    • 単価 (UnitCost)

Prompt

上記のエンティティモデルのERDをmermaid形式で出力してください。

Completion

以下に、上記エンティティモデルのERDをmermaid形式で出力します。

\`\`\`mermaid
erDiagram
    Product ||--o{ OrderDetail : "1対多"
    Customer ||--o{ Order : "1対多"
    Order ||--o{ OrderDetail : "1対多"
    Supplier ||--o{ InventoryReceipt : "1対多"
    Product ||--o{ InventoryReceipt : "1対多"

    Product {
        int ProductID
        string ProductName
        string ProductDescription
        float UnitPrice
        int StockQuantity
    }

    Customer {
        int CustomerID
        string FullName
        string PhoneNumber
        string EmailAddress
        string Address
    }

    Order {
        int OrderID
        int CustomerID
        date OrderDate
        date DeliveryDate
        string ShippingAddress
        float TotalAmount
        string Status
    }

    OrderDetail {
        int OrderDetailID
        int OrderID
        int ProductID
        int Quantity
        float UnitPrice
        float Subtotal
    }

    Supplier {
        int SupplierID
        string SupplierName
        string Contact
        string PhoneNumber
        string EmailAddress
        string Address
    }

    InventoryReceipt {
        int InventoryReceiptID
        int SupplierID
        int ProductID
        date ReceiptDate
        int Quantity
        float UnitCost
    }
\`\`\`

このコードをmermaidでサポートされているツールやオンラインエディタに貼り付けることで、ERDを視覚化できます。オンラインエディタの例として、Mermaid Live Editorが利用できます。

これも完璧ですね！

Mermaidで描けない絵

現時点でSVGを使ってどの程度の絵が描けるのか試してみます。今回はスタックとキューの違いについて説明する図を作ってもらいます。図のクオリティを上げるために、あらかじめChatGPTに図のイメージを考えてもらいました。

  • スタックの図:
    縦長の箱を描き、その中に横長の長方形を複数重ねる形でデータ要素を表現します。
    スタックの上部に「Push」と書かれた矢印を描き、新しいデータが上から追加されることを示します。
    同じく上部に「Pop」と書かれた矢印を描き、データが上から削除されることを示します。
    上に重なったデータ要素が最初に取り出される「LIFO (Last In, First Out)」という概念を強調するため、データ要素の横に「最初に入ったデータ」「最後に入ったデータ」などのラベルを付けるとわかりやすくなります。

  • キューの図:
    横長の箱を描き、その中に縦長の長方形を複数並べる形でデータ要素を表現します。
    キューの左側に「Enqueue」と書かれた矢印を描き、新しいデータが左から追加されることを示します。
    同じく右側に「Dequeue」と書かれた矢印を描き、データが右から削除されることを示します。
    最初に入れられたデータ要素が最初に取り出される「FIFO (First In, First Out)」という概念を強調するため、データ要素の横に「最初に入ったデータ」「最後に入ったデータ」などのラベルを付けるとわかりやすくなります。

Prompt

上記の図をsvgコードで作成してください。

Completion

以下は、上記の説明に基づくスタックとキューの図をSVGコードで作成したものです。

\`\`\`html
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <!-- Stack -->
  <rect x="30" y="50" width="100" height="200" stroke="black" fill="none" stroke-width="2"/>
  <text x="65" y="40" font-size="14" font-weight="bold">Stack</text>
  <rect x="40" y="190" width="80" height="20" fill="lightblue"/>
  <text x="45" y="205" font-size="12">最初に入ったデータ</text>
  <rect x="40" y="160" width="80" height="20" fill="lightblue"/>
  <rect x="40" y="130" width="80" height="20" fill="lightblue"/>
  <rect x="40" y="100" width="80" height="20" fill="lightblue"/>
  <text x="45" y="115" font-size="12">最後に入ったデータ</text>
  <text x="25" y="80" font-size="12">Pop</text>
  <text x="125" y="80" font-size="12">Push</text>
  <polyline points="45,65 40,80 55,80" stroke="black" fill="none" stroke-width="1.5" />
  <polyline points="125,65 120,80 135,80" stroke="black" fill="none" stroke-width="1.5" />

  <!-- Queue -->
  <rect x="270" y="50" width="200" height="100" stroke="black" fill="none" stroke-width="2"/>
  <text x="355" y="40" font-size="14" font-weight="bold">Queue</text>
  <rect x="280" y="60" width="20" height="80" fill="lightblue"/>
  <text x="260" y="100" font-size="12">最初に入ったデータ</text>
  <rect x="310" y="60" width="20" height="80" fill="lightblue"/>
  <rect x="340" y="60" width="20" height="80" fill="lightblue"/>
  <rect x="370" y="60" width="20" height="80" fill="lightblue"/>
  <text x="390" y="100" font-size="12">最後に入ったデータ</text>
  <text x="310" y="175" font-size="12">Enqueue</text>
  <text x="370" y="175" font-size="12">Dequeue</text>
  <polyline points="295,155 310,170 310,140" stroke="black" fill="none" stroke-width="1.5" />
  <polyline points="370,140 385,155 370,170" stroke="black" fill="none" stroke-width="1.5" />
</svg>
\`\`\`

このSVGコードをHTMLファイルに貼り付けることで、スタックとキューの違いを示す図が表示されます。図のデザインやサイズを変

うーん、結構ぐちゃぐちゃですね。このレベルの単純な図でも現時点では厳しいようです。しかし、なんとかがんばろうとしている姿勢と、これから期待の意味を込めて★4つです！

まとめ

ChatGPT X Mermaidを使えば本当に簡単に図を描けました。今回試したのは3種類ですが、他の図のこの方法で描けるはずです。また、SVGの出力についても精度に課題はるものの可能性の片鱗は見えました。皆さんもぜひ試してみてください！

Discussion