本稿は描画のプレビュー・書き方を一覧化する事を目的にAIを活用しているため、内容に誤りがある。（そして、それを認識している）
Qiitaでも問題なく表示がされる事だけ確認しており、内容の精査・レビューは実施していない
✅ フローチャート（graph TD）
【クリック・タップで開閉】
プレビュー
コード
¥```mermaid
graph TD
A[開始] --> B{条件}
B -->|はい| C[処理1]
B -->|いいえ| D[処理2]
C --> E[終了]
D --> E
¥```
✅ シーケンス図（sequenceDiagram）
【クリック・タップで開閉】
プレビュー
コード
¥```mermaid
sequenceDiagram
participant A as Alice
participant B as Bob
A->>B: こんにちは
B-->>A: やあ
A->>B: 元気?
B-->>A: 元気だよ!
¥```
✅ クラス図（classDiagram）
【クリック・タップで開閉】
プレビュー
コード
¥```mermaid
classDiagram
class Animal {
+name: string
+age: int
+makeSound(): void
}
class Dog {
+breed: string
+bark(): void
}
Animal <|-- Dog
¥```
✅ ガントチャート（gantt）
【クリック・タップで開閉】
プレビュー
コード
¥```mermaid
gantt
title プロジェクトスケジュール
dateFormat YYYY-MM-DD
section 計画
タスク1 :a1, 2023-01-01, 30d
タスク2 :after a1 , 20d
section 実行
タスク3 :2023-02-01 , 35d
タスク4 :2023-03-01 , 20d
¥```
✅ 状態図（stateDiagram-v2）
【クリック・タップで開閉】
プレビュー
コード
¥```mermaid
stateDiagram-v2
[*] --> 待機中
待機中 --> 処理中: 開始
処理中 --> 完了: 終了
処理中 --> エラー: 問題発生
エラー --> 待機中: リセット
完了 --> [*]
¥```
✅ ER図（erDiagram）
【クリック・タップで開閉】
プレビュー
コード
¥```mermaid
erDiagram
"Customer(顧客)" ||--o{ "Order(注文)" : places
"Order(注文)" ||--|{ "Product(商品)" : contains
"Customer(顧客)" {
int id "ID/顧客番号"
string name "名前/氏名"
string email "Email/メールアドレス"
}
"Order(注文)" {
int id "ID/注文番号"
date order_date "注文日/購入日"
}
"Product(商品)" {
int id "ID/商品番号"
string name "名前/商品名"
float price "価格/販売価格"
}
¥```
✅ パイチャート（pie）
【クリック・タップで開閉】
プレビュー
コード
¥```mermaid
pie title 売上比率
"製品A" : 30
"製品B" : 50
"製品C" : 20
¥```
✅ ジャーニー図（journey）
【クリック・タップで開閉】
プレビュー
コード
¥```mermaid
journey
title ユーザーの購買体験
section 商品探索
ウェブサイト訪問: 5: ユーザー
商品検索: 3: ユーザー
商品詳細確認: 4: ユーザー
section 購入
カートに追加: 5: ユーザー
チェックアウト: 3: ユーザー, システム
支払い: 4: ユーザー, システム
section フォローアップ
注文確認メール: 5: システム
商品配送: 4: システム
¥```
✅ Gitグラフ（gitGraph）
【クリック・タップで開閉】
プレビュー
コード
¥```mermaid
gitGraph
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
branch feature
checkout feature
commit
commit
checkout main
merge feature
¥```
❌ 要件図（requirementDiagram）
【クリック・タップで開閉】
プレビュー
コード
¥```mermaid
requirementDiagram
requirement 高性能 {
id: 1
text: システムは高性能である必要がある
risk: high
verifymethod: test
}
functionalRequirement 高速処理 {
id: 1.1
text: システムは1秒以内に応答する必要がある
}
performanceRequirement 大容量処理 {
id: 1.2
text: システムは1時間に100万件のトランザクションを処理できる必要がある
}
高速処理 - 高性能
大容量処理 - 高性能
¥```
テンプレート
## ✅❌ 図（接頭語）
<details open>
<summary>【クリック・タップで開閉】</summary>
プレビュー
¥```mermaid
¥```
コード
¥```
¥¥```mermaid
¥¥```
¥```
</details>
余談
発端とか書く時の心構え的な話
発端
せっかくなのでアドベントカレンダー向けにやってみよう！という計画でしたので、タグも残しました。
実際に書いてみた記事が以下（諸事情のため検索避け目的で限定公開にしていますが、SNSなどでの共有はOKです。）
https://qiita.com/nomurasan/private/4a40feb042bbb71cb650
https://qiita.com/nomurasan/private/871f4be9410451dd9143
mermaidの図は見やすさの点で疑問だったので、plantUMLを書いてみる
https://qiita.com/nomurasan/private/ec01ba58ba295a4fa80f
肝心のアドベントカレンダーはこちら
https://qiita.com/advent-calendar/2024/nomuraya_oreno
書き方（心構え）
いつものコードブロックにmermaidとかplantumlを入れて、それぞれの記法に対応する形で書くだけです。
¥```mermaid or plantuml
（ここにそれぞれの書き方に対応するもの）
¥```
よく考えたらどちらにしても、AIに描かせられる事に気づいたので、私がやることはどんなイメージ図を描きたいのか、ペイントツールか何かで叩き台を用意してあげるだけです
あるいは、賢いAIを使っているならプロンプトをうまくいじって期待通りの絵（markdownテキスト）を書かせる事ができますし、ちょっとcssが必要な場面があれば、それも丸投げできます。
ただし、後から仕様変更が入ってくると大変なので、カスタマイズのしすぎも良い案とは言いにくいところはあります。
所感
Qiitaの仕様の話ですが、plantumlの方が見やすい印象はありつつ、書くならmermaidの方が分かりやすい（人もいるだろうな）ので、mermaidで書いてplantumlにしてもらうという翻訳的な使い方がいいのかもしれない。これは検証してみて報告したいですね。
とはいえ、mermaidでできることとplantumlでできる事は違うよ！というのは認識しておくべきですね。
このチートシートが未来の自分の役に立つことを願って。