Markdownでフローチャートを作成する Mermaid

Markdown

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

コメント

タイトルとURLをコピーしました