Zenn
🧜🏻‍♀️

図をmermaid記法で書く

2024/06/11に公開
Markdown
Mermaid
tech

はじめに

Markdownで使える便利なmermaid記法は、文字で記載し図形を描画できます。

種類

種類は公式サイトに記載されている下記の通りです。

# Diagram Syntax
1 Basic flowchart
2 Sequence diagrams
3 Class diagrams
4 State Diagram
5 Entity Relationship Diagram
6 User Journey
7 Gantt
8 Pie Chart
9 Quadrant Chart
10 Requirement Diagram
11 Gitgraph (Git) Diagram
12 C4 Diagram
13 Mindmaps
14 Timeline
15 Sankey
16 XYChart
17 Block Diagram

以下、mermaidで記述した図/併せてmermaidのcodeを記載します。

Basic flowchart - 基本フローチャート

  • 基本

    code
    ```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

DBサーバ Primary/Secondary構成切り替わり

  • 通常時

    code
    ```mermaid
flowchart LR
    LB[LoadBalancer]
    LB --> A[Web1]
    LB --> B[Web2]
    LB --> C[Web3]
    LB --> D[Web4]
    A --> VIP
    B --> VIP
    C --> VIP
    D --> VIP
    subgraph "DB Cluster"
        VIP == P ==> DB1[(DB1)]
        VIP -- S --x DB2[(DB2)]
        Annotation[P:Primary<br>S:secondary]
    end
```

  • 障害時

    code
    ```mermaid
flowchart LR
    LB[LoadBalancer]
    LB --> A[Web1]
    LB --> B[Web2]
    LB --> C[Web3]
    LB --> D[Web4]
    A --> VIP
    B --> VIP
    C --> VIP
    D --> VIP
    subgraph "DB Cluster"
        VIP -- S --x DB1[(DB1)]
        VIP -- P --> DB2[(DB2)]
        Annotation[P:Primary<br>S:secondary]
    end

    classDef classA fill:#f00,stroke:#fff,stroke-width:5px;
    class DB1 classA;
```

Azure - ApplicationGateway構成

code
```mermaid
flowchart LR
    subgraph "Internet"
        UserA
    end
    Internet -- example.com --> FrontIP

subgraph "ApplicationGateway"

    FrontIP --> Rule1
    FrontIP --> Rule2

    subgraph "Rule1"
        Lister1[Lister]
        Backendport1["Backendport<br/>tcp/80"]
    end
    subgraph "BackEndPool1"
        az-wb-p01
        az-wb-p02
    end
    Rule1 --> az-wb-p01
    Rule1 --> az-wb-p02
end
```

家系図

家系図をmermaidで書いてみたサイトがありました。なかなかおもしろい。
参考にしたサイト フクロモモンガ家系図.md

一世代のみの簡易な家系図

  • 例）サザエさん家系図
    二世代の例として、サザエさん一家をmermaid形式で記述

Sequence diagrams - シーケンス図

よくある清算フロー

code
```mermaid
sequenceDiagram
    autonumber

    actor user as 社員
    participant check1 as チェック1<br/>リーダー/マネージャー
    participant check2 as チェック2<br/>部門長
    participant soumu as 総務

    user ->>+ check1: 事前申請
    check1 ->>+ check2: 承認
    check2 ->>- user: 承認済み
    user ->>+ check1: 支払い申請
    Note right of user: 領収書添付
    check1 ->>+ check2: 承認
    check2 ->>+ soumu: 承認
    soumu ->>+ user: 支払い
```

参考サイト

GitHubで編集を提案

Discussion