Mermaid 新規図テンプレート

はじめに

遅ればせながらMermaidを使った図作成がとっても便利なことに気づきまして、特にシーケンス図、フローチャート、クラス継承図ではMermaid一択となりました。

本投稿は自分用に作りました（随時更新予定）
まだ慣れていないので、新規で図を作成するのにいちいちドキュメンテーションやチュートリアル等を参照してきましたが、作成する図のパターンが定まってきたのでここにまとめていきます。

使い方

目的の図になるべく近い状態のものを選んでコピペして、要素名を検索・置き換えて、さらに不要部分を削除します。図は凝りすぎたものにすると更新で苦労するのでなるべくシンプルにしています。

リファレンス

スタイリングの際の色指定用の色コード。
https://www.colorhexa.com/color-names

シーケンス図

sequenceDiagram autonumber
    %% participants
    participant partA
    participant partB
    participant partC
    participant partD

    links partA: {"doc": "https://doc.contoso.com/partA", "wiki": "https://wiki.contoso.com/partA"}

    %% messages
    note right of partA: note right of partA
    note over partA: note over partA
    partA ->> partB: message test
    alt is online
        partB ->> partC: message b
        rect rgb(191, 223, 255)
            note over partC,partD: note over partC,partD<br>external service X 
            partC ->> partD: messge c<br>with line break
            partD -->> partC: return x
        end
        partC -->> partB: return y
    else
        partB ->> partB: message b2
    end
    partB -->> partA: return z

フローチャート

flowchart TD
    %% nodes
    nodeA[Node A]
    nodeB[Node B]
    subgraph sub graph<br>with line break
        nodeC[Node C]
        nodeD[Node D]
    end
    nodeE["Node E (End)"]

    %% edges
    nodeA --> nodeB
    nodeB --> nodeE
    nodeA -- edge text --> nodeC
    nodeC -. dotted line .-> nodeD
    nodeD == thick line ==> nodeE

    %% class definitions
    classDef className1 fill:#f0f8ff,stroke:#333,stroke-width:2px;
    classDef className2 fill:#66ff00,stroke:#333,stroke-width:2px;

    %% styling
    class nodeA,nodeB className1
    class nodeC className2

flowchart LR
    %% nodes
    nodeA[Node A]
    nodeB[Node B]
    subgraph sub graph<br>with line break
        nodeC[Node C]
        nodeD[Node D]
    end
    nodeE["Node E (End)"]

    %% edges
    nodeA --> nodeB
    nodeB --> nodeE
    nodeA -- edge text --> nodeC
    nodeC -. dotted line .-> nodeD
    nodeD == thick line ==> nodeE

    %% class definitions
    classDef className1 fill:#f0f8ff,stroke:#333,stroke-width:2px;
    classDef className2 fill:#66ff00,stroke:#333,stroke-width:2px;

    %% styling
    class nodeA,nodeB className1
    class nodeC className2

クラスダイアグラム

classDiagram
    %% classes
    class IMyService {
        <<Interface>>
        ProvisionState State
        string Name
        method1()
        method2()
    }

    class IClient {
        +run()
    }

    class MyAbstractClass{
        <<abstract>>
        +method1()
        +method2()
        #protectedMethod1()
    }

    class MyImplementationClass{
        ProvisionState State
        +method1()
        +method2()
    }

    class HelperClass{
        +bool isCacheEnabled
        +execute()
    }

    class ProvisionState{
        <<enum>>
        Started
        InProgress
        Failed
        Completed
    }
    
    %% relationships
    IMyService <| -- MyAbstractClass 
    MyAbstractClass <|-- MyImplementationClass
    HelperClass --o MyImplementationClass 
    IClient ..> IMyService

状態遷移図

stateDiagram-v2
    direction LR
    %% states
    InProgress: In progress
    Paused: Paused

    %% transitiions
    [*] --> InProgress
    InProgress --> [*]
    InProgress --> Paused
    Paused --> InProgress
    Paused --> [*]

    note left of InProgress: Processing is underway

stateDiagram-v2
    direction LR

    %% states
    state1: state 1
    subprocess1: sub process 1
    state2: state 2
    state3: state 3

    %% transitions
    [*] --> state1
    state1 --> subprocess1
    state subprocess1 {
        direction LR
        [*] --> state2
        state2 --> [*]
    }
    subprocess1 --> state3
    state3 --> [*]

    %% notes
    note left of subprocess1: sub process can take days to complete