ChatGPTでMermaid構文を出力してみた（シーケンス図、ガントチャート、フローチャート作成の実践例）

こんにちは、CX事業本部 Delivery部の若槻です。

Mermaidを利用すると、様々なタイプの図（Diagram）を簡単に作成でき、またコードやテキストで管理することができます。

このMermaid構文の作成をChatGPTでさらに簡単に行えないか？と考え、ChatGPT（GPT-4）に作成したい図の要件を伝えることでMermaid構文を出力してもらい、各種図（シーケンス、ガントチャート、フローチャート）の作成を試してみました。

試してみた

シーケンス図

AWSサーバーレス構成で実装したREST APIのシーケンス図の作成を依頼してみます。

入力

次の処理を図解するシーケンス図をMermaid構文で書いて下さい。

1. クライアントはAPI Gateway REST APIにGETリクエストを送信する。
2. API Gateway REST APIはリクエストに含まれるAuthorization TokenをCognito Authorizerで検証する。
  1. 認証がNGの場合、API Gateway REST APIはクライアントに401レスポンスを返す。
  2. 認可がNGの場合、API Gateway REST APIはクライアントに403レスポンスを返す。
3. 認証/認可がOKの場合、Lambda Functionにリクエストを送信する。
4. Lambda Functionはデータベースに対してデータ取得を行う。
  1. データが見つからなかった場合、Lambda FunctionsはAPI Gateway REST APIに取得NGを返す。
  2 API Gateway REST APIはクライアントに404レスポンスを返す。
5. データが見つかった場合、Lambda FunctionsはAPI Gateway REST APIに取得OKを返す。
6. API Gateway REST APIはクライアントに200レスポンスを返す。

ChatGPTから出力されたMermaid構文がこちら。

sequenceDiagram
    participant C as Client
    participant API as API Gateway REST API
    participant CA as Cognito Authorizer
    participant L as Lambda Function
    participant DB as Database

    C->>API: 1. GETリクエスト
    API->>CA: 2. Authorization Token検証
    alt 認証NG
        CA->>API: 2.1 認証NG
        API->>C: 401 Unauthorized
    else 認可NG
        CA->>API: 2.2 認可NG
        API->>C: 403 Forbidden
    else 認証/認可OK
        CA->>API: 2.3 認証/認可OK
        API->>L: 3. Lambda Functionにリクエスト
        L->>DB: 4. データ取得
        alt データが見つからない
            DB->>L: 4.1 データが見つからない
            L->>API: 4.2 取得NG
            API->>C: 404 Not Found
        else データが見つかる
            DB->>L: 4.3 データが見つかる
            L->>API: 5. 取得OK
            API->>C: 6. 200 OK
        end
    end

GitHubで上記構文を記述すると、シーケンス図を表示できました。

Databaseに対してデータ取得を行う箇所の処理が少し怪しいですが（これは十中八九私の入力が悪いです）、ParticipantのAliasを設定したり、altやelseで分岐を表現できているのはすごいですね。

ガントチャート

システム開発プロジェクトのガントチャートの作成を依頼してみます。

入力

次のシステム開発プロジェクトのガントチャートをMermaid構文で書いて下さい。

- 要件定義 2023/01/15 ~ 2023/01/31
- 設計 
  - 概要設計 2023/02/01 ~ 2023/02/14
  - 詳細設計 2023/02/15 ~ 2023/02/28
- 実装
  - バックエンド 2023/03/01 ~ 2023/03/15
  - フロントエンド 2023/03/07 ~ 2023/03/21
  - 単体テスト 2023/03/22 ~ 2023/03/28
- テスト
  - 結合テスト 2023/03/29 ~ 2023/04/04
  - 総合テスト 2023/04/05 ~ 2023/04/11
- リリース 2023/04/12

ChatGPTから出力されたMermaid構文がこちら。

gantt
    title システム開発プロジェクト
    dateFormat  YYYY-MM-DD

    section 要件定義
    要件定義: 2023-01-01, 2023-01-31

    section 設計
    概要設計: 2023-02-01, 2023-02-14
    詳細設計: 2023-02-15, 2023-02-28

    section 実装
    バックエンド: 2023-03-01, 2023-03-15
    フロントエンド: 2023-03-07, 2023-03-21

    section テスト
    結合テスト: 2023-03-29, 2023-04-04
    総合テスト: 2023-04-05, 2023-04-11

    section リリース
    リリース: 2023-04-12, 1d

GitHubで上記構文を記述すると、ガントチャートを表示できました。

Mermaidでガントチャートを書く機会は実際にあまり無いかも知れませんが、Notionでガントチャートを表示したい場合などに活用できます。

• Notion + Mermaid.js でガントチャートを活用する | DevelopersIO

フローチャート

FizzBuzzのフローチャートの作成を依頼してみます。

入力

次の処理を表すフローチャートをMermaid構文で書いて下さい。

1. 変数iを0で初期化する
2. iに1を足す
3.1. iが3の倍数のときは数字の代わりにFizzと表示する
3.2. iが5の倍数のときは数字の代わりにBuzzと表示する
3.3. iが15の倍数のときは数字の代わりにFizzBuzzと表示する
3.4. それ以外のときは数字をそのまま表示する
4. iが30より小さい場合は2.に戻る

ChatGPTから出力されたMermaid構文がこちら。

graph TD
  A[変数iを0で初期化する]
  B[iに1を足す]
  C{3の倍数か?}
  D{5の倍数か?}
  E{15の倍数か?}
  F[Fizzを表示する]
  G[Buzzを表示する]
  H[FizzBuzzを表示する]
  I[数字をそのまま表示する]
  J[iが30より小さい場合]

  A --> B
  B --> E
  E -->|Yes| H
  E -->|No| C
  C -->|Yes| F
  C -->|No| D
  D -->|Yes| G
  D -->|No| I
  F --> J
  G --> J
  H --> J
  I --> J
  J -->|Yes| B
  J -->|No| Z[終了]

GitHubで上記構文を記述すると、フローチャートを表示できました。

注意点：ChatGPTの負荷が高い時は出力が途切れる場合がある

昨夜に前述のMermaid構文の出力をChatGPTで試していたところ、そのタイミングでChatGPTの負荷が高くなっていたのか、出力がmermaid構文の途中で必ず途切れてしまう事象が発生していました。

通常のテキスト出力を期待する質問入力の場合はそのようなことはありませんでした。Mermaid構文の出力など一定の条件の場合に途切れる事象が発生するようです。

おわりに

Mermaid構文を使うと、シーケンス図やガントチャート、フローチャートなどを簡単に作成できますが、ChatGPTを使うことによりさらに簡単に作成できました。

現状ではChatGPTはテキストしか出力することができないため、何かしらの図を出力したい場合にはMermaidなどの構文で出力してもらう必要がありますが、ChatGPTの出力をほぼそのまま使うことができ、これで図を作成する手間をさらに減らすことができそうです。

以上