ChatGPTにMermaidを描かせてみた

はじめに

私は株式会社qnoteにて、勉強会の幹事を務めております。
2023年度勉強会の珠玉のネタを2023Qiitaアドベントカレンダーに投稿していこうと思います。

対象者

この記事は下記のような人を対象にしています。

• 駆け出しエンジニア
• プログラミング初学者

結論

mermaidをchatGPTに書かせると楽ちん！

1. カルボナーラの作り方🇮🇹

1-1.指示文章を書く

次の処理を図解するシーケンス図をMermaid構文で書いて下さい。
1.鍋にお湯を沸騰させる
2.鍋に塩を入れる
3.鍋にパスタを入れて茹でる(6分)
3.フライパンでベーコンを炒める
4.ボウルに卵黄とパルメジャーノを入れて混ぜる
5.フライパンに鍋の茹で汁を入れる
6.鍋からパスタを取り出し、フライパンに入れて混ぜる
7.フライパンからパスタを取り出し、ボウルに入れて混ぜる
8.パスタをボウルから皿に盛り付ける
9.パスタに黒胡椒をかける
10.Buon appettito🇮🇹

1-2.ChatGPTでMermaid構文を書いてもらう

1-3.Mermaidはこちら

sequenceDiagram
    participant 鍋
    participant フライパン
    participant ボウル
    participant 皿

    鍋->>+鍋: お湯を沸騰させる
    鍋->>+鍋: 塩を入れる
    鍋->>+鍋: パスタを入れて茹でる
    フライパン->>+フライパン: ベーコンを炒める
    ボウル->>+ボウル: 卵黄とパルメジャーノを混ぜる
    フライパン->>+フライパン: 鍋の茹で汁を入れる
    鍋->>+フライパン: パスタを取り出し、フライパンに入れて混ぜる
    フライパン->>+ボウル: パスタを取り出し、ボウルに入れて混ぜる
    ボウル->>+皿: パスタを盛り付ける
    皿->>+皿: 黒胡椒をかける
    皿->>+皿: Buon appettito🇮🇹

2. 機能実装の進め方💻

2-1.指示文章を書く

次の処理を図解するシーケンス図をMermaid構文で書いて下さい。
1. リーダーがnotionにタスクを作成
2. 開発者がmaster(リモート)からmaster(ローカル)へpullする
3. 開発者がmaster(ローカル)から新ブランチ(ローカル)を作成する
4. 開発者がGitLabにマージリクエストを作成する
5. 開発者が新ブランチ(ローカル)で実装する
6. 開発者が新ブランチ(ローカル)でlintを実行
7. 開発者が新ブランチ(ローカル)でtestを実行
8. 開発者が新ブランチ(ローカル)をmaster(ローカル)にリベースする
9. 開発者が新ブランチ(ローカル)で動作確認する
10. 開発者が新ブランチ(ローカル)から新ブランチ(リモート)へpushする
11. リーダーがGitLabでコードレビューをする
12. 開発者が新ブランチ(ローカル)で修正する
13. 開発者が新ブランチ(ローカル)から新ブランチ(リモート)へpushする
14. 開発者が変更点をnotionに記載する
15. 開発者がmaster(ローカル)からstagingブランチ(ローカル)を作成
16. 開発者が新ブランチ(ローカル)をstagingブランチ(ローカル)にチェリーピック
17. 開発者がstagingブランチ(ローカル)からstagingブランチ(リモート)にpush
18. 開発者がstaging(リモート)にデプロイ
19. リーダーと開発者がstaging(リモート)で動作確認
20. 開発者がGitLabのマージリクエストのタグを変更
21. 開発者がnotionのタスクのステータスを変更
22. リーダーがmaster(リモート)にマージ
23. リーダーがmaster(リモート)にデプロイ
24. リーダーと開発者がmaster(リモート)で動作確認
25. リーダーがクライアントに報告
26. 開発者がGitLabのマージリクエストのタグを変更
27. 開発者がnotionのタスクのステータスを変更

2-2.ChatGPTでMermaid構文を書いてもらう

2-3.Mermaidはこちら

sequenceDiagram
    participant Leader as リーダー
    participant Dev as 開発者
    participant GitLab as GitLab
    participant Notion as Notion
    
    activate Leader
    Leader->>+Notion: タスク作成
    deactivate Leader
    
    activate Dev
    Dev->>+GitLab: master(リモート)からpull
    Dev->>+Dev: master(ローカル)から新ブランチ(ローカル)作成
    Dev->>+GitLab: マージリクエスト作成
    Dev->>+Dev: 新ブランチ(ローカル)で実装
    Dev->>+Dev: 新ブランチ(ローカル)でlint実行
    Dev->>+Dev: 新ブランチ(ローカル)でtest実行
    Dev->>+Dev: 新ブランチ(ローカル)をmaster(ローカル)にリベース
    Dev->>+Dev: 新ブランチ(ローカル)で動作確認
    Dev->>+GitLab: 新ブランチ(ローカル)から新ブランチ(リモート)にpush
    activate Leader
    GitLab->>+Leader: コードレビュー
    deactivate Leader
    Dev->>+Dev: 新ブランチ(ローカル)で修正
    Dev->>+GitLab: 新ブランチ(ローカル)から新ブランチ(リモート)にpush
    Dev->>+Notion: 変更点記載
    Dev->>+Dev: master(ローカル)からstagingブランチ(ローカル)を作成
    Dev->>+Dev: 新ブランチ(ローカル)をstagingブランチ(ローカル)にチェリーピック
    Dev->>+GitLab: stagingブランチ(ローカル)からstagingブランチ(リモート)にpush
    Dev->>+GitLab: staging(リモート)にデプロイ
    activate Leader
    Leader->>+Dev: staging(リモート)で動作確認
    deactivate Leader
    Dev->>+GitLab: マージリクエストのタグ変更
    Dev->>+Notion: タスクのステータス変更
    activate Leader
    Leader->>+GitLab: master(リモート)にマージ
    GitLab->>+Leader: マージ完了
    Leader->>+GitLab: master(リモート)にデプロイ
    deactivate Leader
    activate Dev
    Dev->>+GitLab: マージリクエストのタグ変更
    Dev->>+Notion: タスクのステータス変更
    deactivate Dev

おわりに

ChatGPTにMermaidを描かせる手法についてまとめました。

参考記事