MarkdownでMermaidを用いてフローチャートやその他の図を作成します。
環境はVSCodeで、アドオンとしてMarkdown Preview Mermaid Supportを使用しています。
Mermaid
Mermaidは、テキストベースで簡単にフローチャートを図を作成できるオープンソース(MIT ライセンス)のツールです。Markdownライクな構文を使用してフローチャートやシーケンス図、ガントチャート、クラス図などを簡単に作成できるため、特にドキュメント作成や開発者向けのツールとして人気があります。
MermaidはJavaScriptベースで、ウェブページやMarkdownエディタ(例:Visual Studio CodeやObsidian)などに統合されて利用されます。
Markdown Preview Mermaid Support
VSCode上でMermaidを用いたMarkdownをプレビューするアドオンです(MIT ライセンス)。
使い方
フローチャート
graph TD
A[開始] --> B[処理1]
B[処理1] --> C[処理2]
C --> D{条件1?}
D -->|False| B[処理2]
D -->|True| E[終了]
サンプルコード
```mermaid
graph TD
A[開始] --> B[処理1]
B[処理1] --> C[処理2]
C --> D{条件1?}
D -->|False| B[処理2]
D -->|True| E[終了]
```
シーケンス図
sequenceDiagram
participant A as ユーザー
participant B as サーバー
A->>B: リクエスト送信
B-->>A: レスポンス返却
サンプルコード
```mermaid
sequenceDiagram
participant A as ユーザー
participant B as サーバー
A->>B: リクエスト送信
B-->>A: レスポンス返却
```
ガントチャート
gantt
title プロジェクト計画
dateFormat YYYY-MM-DD
section 開発
excludes weekends
axisFormat %b %d
設計1: a1, 2025-01-01, 10d
設計2: a2, 2025-01-08, 10d
設計3: after a2, 10d
サンプルコード
```mermaid
gantt
title プロジェクト計画
dateFormat YYYY-MM-DD
section 開発
excludes weekends
axisFormat %b %d
設計1: a1, 2025-01-01, 10d
設計2: a2, 2025-01-08, 10d
設計3: after a2, 10d
```
クラス図
classDiagram
class uvm_void {
+get_conifg()
}
class uvm_transaction {
+events : const uvm_event_pool
+new() : void
}
class uvm_object {
create()
}
uvm_void <|-- uvm_object
uvm_object <|-- uvm_report_object
uvm_object <|-- uvm_transaction
uvm_report_object <|-- uvm_component
サンプルコード
```mermaid
classDiagram
class uvm_void {
+get_conifg()
}
class uvm_transaction {
+events : const uvm_event_pool
+new() : void
}
class uvm_object{
create()
}
uvm_void <|-- uvm_object
uvm_object <|-- uvm_report_object
uvm_object <|-- uvm_transaction
uvm_report_object <|-- uvm_component
```
Gitのコミット履歴
gitGraph
commit id: "initial"
commit
branch develop
commit
commit
checkout main
merge develop
サンプルコード
```mermaid
gitGraph
commit id: "initial"
commit
branch develop
commit
commit
checkout main
merge develop
```
ER図
erDiagram
User {
id int
name string
email string
}
Post {
id int
title string
content text
userId int
}
User ||--o{ Post : "writes"
サンプルコード
```mermaid
erDiagram
User {
id int
name string
email string
}
Post {
id int
title string
content text
userId int
}
User ||--o{ Post : "writes"
```
ジャーニーマップ
journey
title プロジェクト進捗
section 企画フェーズ
要件定義: 5: 完了
プロジェクト計画: 5: 完了
section 開発フェーズ
デザイン: 4: デザイン作業中
コーディング: 1: 未着手
テスト: 1: 未着手
section リリース
ドキュメント作成: 1: 未着手
リリース準備: 1: 未着手
サンプルコード
```mermaid
journey
title プロジェクト進捗
section 企画フェーズ
要件定義: 5: 完了
プロジェクト計画: 5: 完了
section 開発フェーズ
デザイン: 4: デザイン作業中
コーディング: 1: 未着手
テスト: 1: 未着手
section リリース
ドキュメント作成: 1: 未着手
リリース準備: 1: 未着手
```
4象限図
quadrantChart
title 4象限図の例
x-axis Low --> High
y-axis False --> True
"商品A" : [0.1, 0.2]
"商品B" : [0.3, 0.8]
"商品C" : [0.9, 0.4]
"商品D" : [0.5, 0.5]
サンプルコード
```mermaid
quadrantChart
title 4象限図の例
x-axis Low --> High
y-axis False --> True
"商品A" : [0.1, 0.2]
"商品B" : [0.3, 0.8]
"商品C" : [0.9, 0.4]
"商品D" : [0.5, 0.5]
```
散布図
xychart-beta
title "週の売り上げ"
x-axis "曜日" [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]
y-axis "売り上げ 円" 4000 --> 12000
bar [5000, 7500, 8200, 9500, 11000, 7000, 5000]
line [5000, 7500, 8200, 9500, 11000, 7000, 5000]
サンプルコード
```mermaid
xychart-beta
title "週の売り上げ"
x-axis "曜日" [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]
y-axis "売り上げ 円" 4000 --> 12000
bar [5000, 7500, 8200, 9500, 11000, 7000, 5000]
line [5000, 7500, 8200, 9500, 11000, 7000, 5000]
```
リンク
mermaid-js
mermaid-js has 13 repositories available. Follow their code on GitHub.
Markdown Preview Mermaid Support - Visual Studio Marketplace
Extension for Visual Studio Code - Adds Mermaid diagram and flowchart support to VS Code's builtin markdown preview
コメント