Mermaid ガイド
Mermaid 図の構文の総合ガイド。高度なテクニックを学び、利用できるすべての図の種類を確認できます。
高度なフローチャート
フローチャートは、さまざまな向き（LR は左から右、TD は上から下など）にでき、長方形、判断を表すひし形、角丸の長方形など、さまざまなノードの形に対応しています。矢印にラベルを付けたり、複雑な分岐構造を作成したりすることもできます。
プレビュー
レンダリング中...
コード
```mermaid
graph LR
A[Start] --> B{Check Condition}
B -->|True| C[Process A]
B -->|False| D[Process B]
C --> E[Sub-process 1]
C --> F[Sub-process 2]
D --> G[Alternative Process]
E --> H[End]
F --> H
G --> H
```クラス図
クラス図は、オブジェクト指向システムの構造を表します。クラスの属性とメソッド、継承関係（<|-- を使用）、関連を示します。+ は public、- は private、# は protected のメンバーを表します。
プレビュー
レンダリング中...
コード
```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal: +int age
Animal: +String gender
Animal: +isMammal() bool
Animal: +mate()
Duck: +String beakColor
Duck: +swim()
Duck: +quack()
Fish: -int sizeInFeet
Fish: +canEat()
Fish: +swim()
```ER 図（エンティティ関連図）
ER 図は、エンティティ（テーブル）、その属性（列）、それらの間の関係を示して、データベースの構造をモデル化します。1 対多には ||--o{、1 対 1 には ||--||、多対多には }o--o{ を使います。
プレビュー
レンダリング中...
コード
```mermaid
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : "is in"
CUSTOMER {
string name
string email
int phone
}
ORDER {
int orderNumber
date orderDate
}
PRODUCT {
string productCode
string description
float price
}
```ガントチャート
ガントチャートは、プロジェクトのスケジュールやタイムラインを可視化します。フェーズごとにセクションを定義し、タスク名、ID、開始日、期間を指定します。タスクは 'after' キーワードで前のタスクに依存させることができます。
プレビュー
レンダリング中...
コード
```mermaid
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Design :a1, 2024-01-01, 30d
section Phase 2
Development :a2, after a1, 45d
Testing :a3, after a2, 15d
section Phase 3
Deployment :a4, after a3, 10d
```円グラフ
円グラフは、割合のデータを円形で表示します。各スライスは、そのパーセンテージや値を持つカテゴリを表します。グラフは割合を自動的に計算し、視覚的に表示します。
プレビュー
レンダリング中...
コード
```mermaid
pie title Distribution of Sales
"Product A" : 42.7
"Product B" : 28.3
"Product C" : 15.2
"Product D" : 8.5
"Others" : 5.3
```Git グラフ
Git グラフは、Git のブランチ作成とマージのワークフローを可視化します。コミット、ブランチ、チェックアウト、マージを表示します。Git のワークフローを文書化したり、リポジトリの履歴を理解したりするのに最適です。
プレビュー
レンダリング中...
コード
```mermaid
gitGraph
commit id: "Initial"
branch develop
checkout develop
commit id: "Feature A"
commit id: "Feature B"
checkout main
merge develop
commit id: "Release"
```