🐠

ChatGPTにいい感じにmermaidで図を書いてもらう

に公開
Mermaid
ChatGPT
tech

mermaidで図を書く度に、記法を調べながら書くのが、結構めんどくさいなと思ったので、
箇条書きの情報を渡して、図にしてくれないかなと思い、調べながらやってみました。

前提

  • Value Stream Mappingを作る
  • 工程の流れ、詳細はmarkdown形式で作成済み
  • ChatGPT-4.5（o4）

プロンプト

あなたはMermaid記載のエキスパートです。
入力された情報をもとに、flowchart TDを作成します。
Mermaid 記法に完全準拠してください。エラーを起こさないでください。
なお、作成する内容はValue Stream Mappingです。
以下の情報をもとに、Mermaid flowchart TDを作成してください。回答はMermaid flowchart TDのみでお願いします。

**説明や補足は不要です**

# ノードの記載方法(タスクの記載)
(ノードID)["
**作業名**<br>
作業時間<br>
作業場所<br>
補足
"]

# タスク記載の補足情報
ノード内は、""で囲ってください。
なお、作業時間/作業場所が不明な場合は 記載しないでください。
場合分けがある場合、場合分けしてください。

# フェーズや工程の区切り
subgraph (フェーズ名)
    A-->B
    B-->C
end
C-->D
のように、行程やフェーズが明示されていればサブグラフを記載してください。

渡す情報

  • マークダウン
  • 順序、階層がわかりやすいように番号を振りました
- 1. 字幕作成
  - 外注
  - 1-1 発注
    - 発注書を手動で作っている
    - 発注書: zzzzzzzzzzz.xlsx
- 2. あらすじ等翻訳
  - 外注
  - 2-1 発注
  - 2-2 受取
    翻訳結果をスプシから xxxxxx に手動でコピー
3. 配信設定
  - 3-1. 動画準備

  ...以下略....

結果

  • できたはできた
  • mermaidで扱えない文字が入っていたりと、何個かエラーが出たので調整はした

まとめ

  • 少し楽だったような気もする
  • 結局調整が必要で、一発ではできなかった
  • 次回からは一部自分で作成して、例を示してからChatGPTに渡すとかが早そう
  • 理想は、マークダウン渡したらいい感じに図にしてほしい

Discussion