Jekyllでmermaid記法の使い方と各種サンプル(フローチャート中心)

mermaidを使うと、かなり短いコードでいい感じのダイアグラムを作成することができる。各種ダイアグラムの書式を自分用にまとめておく。

ちなみに、このサイトを作るのには Jekyll という静的サイトジェネレーターのjekyll-theme-chirpy っていうテーマを使っています。デフォルトで mermaid が使えるよう施されており、活用しなきゃということで勉強することにしました。

Jekyll で mermaid を使うには

これを参考にすると良いかもしれない。

Flowchart(フローチャート)

詳細

基本

フローチャートはこんな感じで作れる。

flowchart LR
まち --> カド
カド --> まぞく

  
flowchart LR
  まち --> カド
  カド --> まぞく

flowchart LR（Left to Right）ではなくflowchart TD（Top to Down）とすると、上から下へ流れるフローになる。

flowchart TD
清子 --> 優子
清子 --> 良子

  
flowchart TD
清子 --> 優子
清子 --> 良子

ノードに表示する文字列が長くなる場合は、ID を使うようにすると良いかもしれない。

flowchart TD
A[桜さんを探すために]
B[町のまぞくを探したくて]
C[あと強くなって家の封印を解きたいんですけど]
D[お父さんが箱になっていて謎が謎を呼んだんです]
E[そして桃を闇の眷属にしたい]
A --> B
C --> D

  
flowchart TD
A[桜さんを探すために]
B[町のまぞくを探したくて]
C[あと強くなって家の封印を解きたいんですけど]
D[お父さんが箱になっていて謎が謎を呼んだんです]
E[そして桃を闇の眷属にしたい]
A --> B
C --> D

細かな書式

ノード（箱）の形はラベルをどう囲うかでかなり細かく指定できる。

エッジの形も色々指定できる。

flowchart TD
A(カド丸め)
B([左右丸め])
C[[サブルーチン]]
D[(円筒)]
E((真円))
F>旗に逆はない]
G{ひし型}
I[/右向き平行四辺形/]
J[\左向き平行四辺形\]
K[/台形\]
L[\逆台形/]
M[四角]
A --> B --- C
D ---|テキスト|E -->|テキスト|F
G -.-> H -.->|テキスト|I
J ==> K ==>|太線|L
M --> デフォルト

  
flowchart TD
A(カド丸め)
B([左右丸め])
C[[サブルーチン]]
D[(円筒)]
E((真円))
F>旗に逆はない]
G{ひし型}
I[/右向き平行四辺形/]
J[\左向き平行四辺形\]
K[/台形\]
L[\逆台形/]
M[四角]
A --> B --- C
D ---|テキスト|E -->|テキスト|F
G -.-> H -.->|テキスト|I
J ==> K ==>|太線|L
M --> デフォルト

H{ {六角形} }とM(((真円)))は使えなかった。Jekyll を使っているからか、バージョンが違うからかは謎。

リンクチェイン

上の例で使っているように、複数の要素を直列/並列に表記することができる（引き続き矢じりの形を紹介しつつ）。

flowchart TD
リリス --o 清子 --x 優子 & 良子

flowchart TD
リリス --o 清子 --x 優子 & 良子

多対多のリンクも可能。

flowchart TD
シャミ子 & 桃 & ミカン <---> おっち & みなみ & つるちゃん & にゃが

  
flowchart TD
シャミ子 & 桃 & ミカン <---> おっち & みなみ & つるちゃん & にゃが

リンクの最小長さ指定

ダッシュの数を増やすと、それだけエッジを長くできる。一個増やすごとに 1 ランク伸びる。

flowchart TD
シャミ子 ----> 危機管理
ごせんぞ --> よりしろ ---> セミ姉貴
桃 --> フレッシュピーチ --> ダークネスピーチ --> クソダサマウンテン

  
flowchart TD
シャミ子 ----> 危機管理
ごせんぞ --> よりしろ ---> セミ姉貴
桃 --> フレッシュピーチ --> ダークネスピーチ --> クソダサマウンテン

サブグラフ

要素を囲んでサブグラフを作ることができる。

サブグラフにラベルと異なる ID を割り当てたり、サブグラフ自体をノードとして繋ぐこともできる。

サブグラフを入れ子にすることもできる。

flowchart TB
  subgraph HighSchool [桜ヶ丘高校]
    杏里---シャミ子 & 桃
    subgraph D [闇の一族]
        シャミ子---リリス
    end
    subgraph L [光の一族]
        桃---ミカン
    end
    subgraph 一般人?
        杏里---しおん
    end
    しおん ---->|研究|D
    D -----|敵対|L
  end
  subgraph Asura [喫茶あすら]
    リコ --- 白澤
  end
  HighSchool---Asura

  
flowchart TB
  subgraph HighSchool [桜ヶ丘高校]
    杏里---シャミ子 & 桃
    subgraph D [闇の一族]
        シャミ子---リリス
    end
    subgraph L [光の一族]
        桃---ミカン
    end
    subgraph 一般人?
        杏里---しおん
    end
    しおん ---->|研究|D
    D -----|敵対|L
  end
  subgraph Asura [喫茶あすら]
    リコ --- 白澤
  end
  HighSchool---Asura

シーケンスダイアグラム

詳細

サーバーとクライアントの応答みたいなものが作れる。

sequenceDiagram
  actor シャミ子
  actor 桃
  actor ミカン
  autonumber
  loop いつも
    シャミ子->>桃: これで勝ったと思うなよ！
  end
  シャミ子->>桃: 夢侵入
  activate 桃
  桃->>シャミ子: 生き血
  deactivate 桃
  シャミ子->>桃: 夢侵入
  activate 桃
  桃->>桃: 明晰夢
  桃->>シャミ子: 説教
  deactivate 桃
  シャミ子->>シャミ子: 夢侵入
  activate シャミ子
  桃->>シャミ子: 救出
  deactivate シャミ子
  シャミ子->>ミカン: 夢侵入
  activate ミカン
  桃->>ミカン: 夢侵入
  ミカン->>桃: 帰還
  ミカン->>シャミ子: 帰還
  deactivate ミカン

  
sequenceDiagram
  actor シャミ子
  actor 桃
  actor ミカン
  autonumber
  loop いつも
    シャミ子->>桃: これで勝ったと思うなよ！
  end
  シャミ子->>桃: 夢侵入
  activate 桃
  桃->>シャミ子: 生き血
  deactivate 桃
  シャミ子->>桃: 夢侵入
  activate 桃
  桃->>桃: 明晰夢
  桃->>シャミ子: 説教
  deactivate 桃
  シャミ子->>シャミ子: 夢侵入
  activate シャミ子
  桃->>シャミ子: 救出
  deactivate シャミ子
  シャミ子->>ミカン: 夢侵入
  activate ミカン
  桃->>ミカン: 夢侵入
  ミカン->>桃: 帰還
  ミカン->>シャミ子: 帰還
  deactivate ミカン

クラス図

詳細

クラス間の関係を表すのに使う図。自分はあまり使わなさそう。

classDiagram
    ダークネスピーチ <|-- Lightness
    ダークネスピーチ <|-- Darkness
    Darkness <|-- Magical
    Lightness <|-- Magical
    ダークネスピーチ : かっこいい
    class Lightness{
        ナビゲーター

    }
    class Darkness{
        血縁関係
    }
    class Magical{
        魔力
        .変身バンク(int version)
    }

classDiagram
    ダークネスピーチ <|-- Lightness
    ダークネスピーチ <|-- Darkness
    Darkness <|-- Magical
    Lightness <|-- Magical
    ダークネスピーチ : かっこいい
    class Lightness{
        ナビゲーター

    }
    class Darkness{
        血縁関係
    }
    class Magical{
        魔力
        .変身バンク(int version)
    }

状態遷移図

詳細

状態遷移を表せる。フローチャートで良くない？と思うのだけど何が違うのだろうか。

stateDiagram
  [*] --> 同じ
  同じ --> 空
  同じ --> 未来
  同じ --> 道
  空 --> 二人で
  未来 --> 二人で
  道 --> 二人で
  二人で --> 見上げて
  二人で --> 見つめて
  二人で --> 歩いて
  見上げて --> [*]
  見つめて --> [*]
  歩いて --> [*]

  
stateDiagram
  [*] --> 同じ
  同じ --> 空
  同じ --> 未来
  同じ --> 道
  空 --> 二人で
  未来 --> 二人で
  道 --> 二人で
  二人で --> 見上げて
  二人で --> 見つめて
  二人で --> 歩いて
  見上げて --> [*]
  見つめて --> [*]
  歩いて --> [*]

実体関連図（ER 図）

詳細

人、オブジェクト、コンセプトといった「実体」のシステム内での関連を示す設計図。やはり自分はあまり使わないかも。

なぜかこのタイプの図だけは日本語が使えないらしい。

erDiagram
  SHADOW ||--o{ ORDER : places
  ORDER ||--|{ YAKINIKU : contains
  SHADOW }|..|{ COUPON : uses

erDiagram
  SHADOW ||--o{ ORDER : places
  ORDER ||--|{ YAKINIKU : contains
  SHADOW }|..|{ COUPON : uses

ユーザージャーニーマップ

詳細

初めて存在を知った。

あるユーザーがゴール（例えば商品の購入とか）に向けてたどるであろうシナリオを表したものらしい。時系列に沿った気分の上げ下げみたいなものを示すことができるが、やはり自分はあまり使わなそう。

journey
  title よいまちカンターレ
  section first
    さっそうと勝負して: 5: リリス
    やっちゃうけど負けちゃって: 1: ミカン
    ふがいないね: 1: シャミ子
    傷心転進: 1: 桃
  section second
    気分はすんすんでも: 2: ミカン
    しっぽで返事しよう: 5: リリス

journey
  title よいまちカンターレ
  section first
    さっそうと勝負して: 5: リリス
    やっちゃうけど負けちゃって: 1: ミカン
    ふがいないね: 1: シャミ子
    傷心転進: 1: 桃
  section second
    気分はすんすんでも: 2: ミカン
    しっぽで返事しよう: 5: リリス

ガントチャート

詳細

プロジェクトの締め切りとかを管理できる例の図。

デフォルトで今日の日付が赤線で示されるのが地味に便利かもしれない。（todayMarker offで消せる。）

以下の例では、実際のまちカドまぞく展の開催予定を表している。

gantt
dateFormat  YYYY-MM-DD
axisFormat %m-%d
title まちカドまぞく展 開催予定

渋谷マルイ            :2022-06-04, 2022-06-26
なんばマルイ           :2022-07-08, 2022-07-24
博多マルイ            :2022-08-11, 2022-08-21

gantt
dateFormat  YYYY-MM-DD
axisFormat %m-%d
title まちカドまぞく展 開催予定

渋谷マルイ            :2022-06-04, 2022-06-26
なんばマルイ           :2022-07-08, 2022-07-24
博多マルイ            :2022-08-11, 2022-08-21

円グラフ

そのまま円グラフ。生の値を与えても、グラフ表示上はしっかり割合で表示してくれる。

確かに便利だけどそもそも円グラフってあまり使わないような気がする。

詳細

pie showData
  title せいいき桜ヶ丘人口比率
  "まぞく" : 2.5
  "魔法少女" : 4.5
  "一般人" : 10

pie showData
  title せいいき桜ヶ丘人口比率
  "まぞく" : 2.5
  "魔法少女" : 4.5
  "一般人" : 10

飽きたので一旦ここまで。

他にも Gitgraph を作ったり、C4D(Cloud for customer?)図を作ったりできる。

とても便利なので活用していきたい。