¶ Mermaind Sample
Mermaid（マーメイド）は、テキストベースの記法で様々な図表（フローチャート、シーケンス図、ER図など）を生成できるJavaScriptライブラリです。Markdown風に記述でき、ソースコードのようにバージョン管理できるため、開発ドキュメントのメンテナンス性が向上します。
まだ歴史も新しいこともあって、実装のバージョンにより使えないタグが多い。現行Wikiのバンドル Mermaild Ver は 8.8.2 最新は Ver11.15
- 公式：
https://mermaid.js.org/ - Live Editor：
https://mermaid.live/ - Getting Started：
https://mermaid.js.org/intro/getting-started.html
https://zenn.dev/aun_phonogram/articles/aba7a591fa10de
https://help.docbase.io/posts/3719897
¶ 単純な遷移
graph TD
A --> B
‘‘‘mermaid
graph TD
A --> B
‘‘‘
¶ 1. フローチャート
flowchart TD 上から下
https://mermaid.js.org/syntax/flowchart.html
flowchart TD
A[問題発生] --> B{原因分析}
B -->|コード| C[デバッグ実行]
B -->|環境| D[設定確認]
B -->|データ| E[ログ確認]
C --> F[修正実装]
D --> F
E --> F
F --> G[テスト実行]
G --> H{結果OK?}
H -->|Yes| I[完了]
H -->|No| A
flowchart TD
A[問題発生] --> B{原因分析}
B -->|コード| C[デバッグ実行]
B -->|環境| D[設定確認]
B -->|データ| E[ログ確認]
C --> F[修正実装]
D --> F
E --> F
F --> G[テスト実行]
G --> H{結果OK?}
H -->|Yes| I[完了]
H -->|No| A
¶ フローチャート 左から右
flowchart LR 左から右
入るように縮小される
graph LR
A[依頼受付] --> B{緊急対応?}
B -- Yes --> C[即時対応]
B -- No --> D[スケジュール調整]
C --> E[対応実施]
D --> E
E --> F[報告書作成]
F --> G[顧客確認]
G --> H{修正必要?}
H -- Yes --> E
H -- No --> I[案件クローズ]
graph LR
A[依頼受付] --> B{緊急対応?}
B -- Yes --> C[即時対応]
B -- No --> D[スケジュール調整]
C --> E[対応実施]
D --> E
E --> F[報告書作成]
F --> G[顧客確認]
G --> H{修正必要?}
H -- Yes --> E
H -- No --> I[案件クローズ]
¶ 2. シーケンス図
sequenceDiagram
https://mermaid.js.org/syntax/sequenceDiagram.html
sequenceDiagram
participant U as User
participant F as Frontend
participant A as API
participant D as Database
U->>F: ログイン要求
F->>A: 認証リクエスト
A->>D: ユーザー情報取得
D-->>A: ユーザーデータ
A-->>F: JWTトークン
F-->>U: ログイン成功
sequenceDiagram
participant U as User
participant F as Frontend
participant A as API
participant D as Database
U->>F: ログイン要求
F->>A: 認証リクエスト
A->>D: ユーザー情報取得
D-->>A: ユーザーデータ
A-->>F: JWTトークン
F-->>U: ログイン成功
¶ 3. ガントチャート
gantt
title Webアプリ開発スケジュール
dateFormat YYYY-MM-DD
section 設計
要件定義 :done, req, 2025-07-01, 2025-07-15
UI/UX設計 :done, design, after req, 10d
section 開発
フロントエンド開発 :active, frontend, 2025-07-25, 25d
バックエンド開発 :backend, 2025-07-30, 20d
section テスト
単体テスト :testing, after frontend, 5d
結合テスト :integration, after backend, 5d
gantt
title Webアプリ開発スケジュール
dateFormat YYYY-MM-DD
section 設計
要件定義 :done, req, 2025-07-01, 2025-07-15
UI/UX設計 :done, design, after req, 10d
section 開発
フロントエンド開発 :active, frontend, 2025-07-25, 25d
バックエンド開発 :backend, 2025-07-30, 20d
section テスト
単体テスト :testing, after frontend, 5d
結合テスト :integration, after backend, 5d
¶ 4. クラス図
classDiagram
Product <|-- Book
Product <|-- Electronics
class Product {
+int id
+string name
+float price
+getDetails()
}
class Book {
+string author
+string ISBN
+getSummary()
}
class Electronics {
+string brand
+int warrantyMonths
+getWarrantyInfo()
}
classDiagram
Product <|-- Book
Product <|-- Electronics
class Product {
+int id
+string name
+float price
+getDetails()
}
class Book {
+string author
+string ISBN
+getSummary()
}
class Electronics {
+string brand
+int warrantyMonths
+getWarrantyInfo()
}
¶ 状態図
stateDiagram-v2
[*] --> 未ログイン
未ログイン --> ログイン中 : ログイン試行
ログイン中 --> ログイン済み : 認証成功
ログイン中 --> 未ログイン : 認証失敗
ログイン済み --> 未ログイン : ログアウト
ログイン済み --> セッション期限切れ : タイムアウト
セッション期限切れ --> 未ログイン : 自動ログアウト
stateDiagram-v2
[*] --> 未ログイン
未ログイン --> ログイン中 : ログイン試行
ログイン中 --> ログイン済み : 認証成功
ログイン中 --> 未ログイン : 認証失敗
ログイン済み --> 未ログイン : ログアウト
ログイン済み --> セッション期限切れ : タイムアウト
セッション期限切れ --> 未ログイン : 自動ログアウト
¶ 6. ER図
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ ORDER-ITEM : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
CUSTOMER {
string customer_id
string name
string email
}
ORDER {
string order_id
string customer_id
date order_date
}
PRODUCT {
string product_id
string name
float price
}
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ ORDER-ITEM : contains
PRODUCT ||--o{ ORDER-ITEM : "ordered in"
CUSTOMER {
string customer_id
string name
string email
}
ORDER {
string order_id
string customer_id
date order_date
}
PRODUCT {
string product_id
string name
float price
}
¶ 8. 円グラフ
pie title 開発時間の割合
"コーディング" : 40
"デバッグ" : 25
"設計" : 20
"テスト" : 10
"ドキュメント" : 5
pie title 開発時間の割合
"コーディング" : 40
"デバッグ" : 25
"設計" : 20
"テスト" : 10
"ドキュメント" : 5
¶ ジャーニーチャートの要素
journey
title ユーザー旅行記
section ログイン
アカウント作成: 5: ユーザー
メール確認: 4: ユーザー
初回ログイン: 5: ユーザー
section 製品利用
製品検索: 3: ユーザー
製品詳細閲覧: 4: ユーザー
カートに追加: 5: ユーザー
購入手続き: 3: ユーザー
¶ ❌マインドマップ
以下は Syntacsエラー になるみたい
mindmap
root((Web開発))
Frontend
React
コンポーネント
フック
Vue.js
Composition API
Vuex
Backend
Node.js
Express
NestJS
PHP
Laravel
Symfony
Database
MySQL
PostgreSQL
MongoDB
¶ ❌Gitグラフ
gitGraph
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
branch feature
checkout feature
commit
commit
checkout develop
merge feature
checkout main
merge develop
¶ ❌要求図
requirementDiagram
requirement auth_req {
id: 1
text: "認証機能を備える"
risk: high
verifymethod: test
}
element auth_system {
type: system
}
auth_system - satisfies -> auth_req
¶ ❌C4図
C4Context
title システムコンテキスト図
Person(customer, "顧客", "システムを利用するエンドユーザー")
System(system, "予約システム", "顧客が予約を管理できるシステム")
System_Ext(payment, "決済システム", "支払い処理を行う外部システム")
Rel(customer, system, "予約の作成と管理")
Rel(system, payment, "支払い処理の依頼")
Rel(payment, system, "支払い結果の通知")
¶ ❌アーキテクチャダイアグラム
architecture-beta
group api(cloud)[API Layer]
group app(server)[Application Layer]
group data(database)[Data Layer]
service web(internet)[Web Client]
service gateway(cloud)[API Gateway] in api
service auth(server)[Auth Service] in app
service order(server)[Order Service] in app
service db(database)[Database] in data
service cache(disk)[Cache] in data
web:R --> L:gateway
gateway:B --> T:auth
gateway:B --> T:order
auth:B --> T:db
order:B --> T:db
order:R --> L:cache
¶ 利用可能タグ調査（8.8.2)
| Type | 用途 |
|---|---|
✅graph |
フローチャート |
✅graph LR |
業務フロー |
✅flowchart |
graph の新形式 |
✅sequenceDiagram |
シーケンス図 |
✅classDiagram |
クラス図 |
✅stateDiagram-v2 |
状態遷移 |
✅erDiagram |
ER図 |
✅journey |
ユーザージャーニー |
✅gantt |
ガントチャート |
✅pie |
円グラフ |
❌mindmap |
マインドマップ |
timeline |
タイムライン |
❌gitGraph |
Git履歴 |
❌requirementDiagram |
要求図 |
❌c4Context |
C4モデル |
quadrantChart |
四象限 |
xychart-beta |
グラフ |
sankey-beta |
サンキー図 |