はじめに

hkob の雑記録の第329回目は、Mermaid の Flowchat に関する Tips をまとめてみようと思います。前回、Mermaid の全体的な Tips を紹介しましたが、ここの Diagram についてもかなりアップデートがあったので、気になったものを紹介してみたいと思います。詳しくはこちらのマニュアルを参照してください。

mermaid.js.org

レイアウトについて

flowchart は順番に意味がある場合が多いので、最近デフォルトになった ELK ではなく、dagre レイアウトを使うようにした方がいいです。

テキストの記載

日本語を含む Unicode のテキストは、ラベルの後ろに "" で括って記載します。この時、改行を含めることができます。

---
config:
  layout: dagre
---
graph TD
  a["日本語のテキスト
  改行ができます"]

また、さらに中で ```` で括ると、markdown フォーマットを記載できます。

---
config:
  layout: dagre
---
graph TD
  a["`ノーマル
  **太字**
  _イタリック_`"]

Expanded Node Shapes

これまでは、[], () など記号で基本的なノードの形を設定することが可能でした。v11.3.0 からは、以下のようにして、名前を指定して形を指定することが可能になっています。

---
config:
  layout: dagre
---
graph TD
  A@{ shape: rect }

例えば、以下のようにすると multiple documents を指定できます。ノード名については、マニュアルを参照してください。

---
config:
  layout: dagre
---
graph TD
  A@{ shape: docs, label: "Multiple documents" }

また一昨日も紹介しましたが、image を指定することもできます。

---
config:
  layout: dagre
---
graph TD
  Notion@{ img: "https://www.notion.so/icons/notion_gray.svg" }

並列分岐

これは以前のバージョンからできていましたが、& を使うと並列分岐を簡単に記載できます。

---
config:
  layout: dagre
---
graph LR
  A --> B & C --> D

面白いのは並列同士を矢印で繋ぐと、全部の組み合わせに線をつなげてくれることです。

---
config:
  layout: dagre
---
graph TD
  A & B --> C & D

Edge へのラベル付け

Edge にもラベルをつけることができます。ラベルに animate オプションをつけることで、線にアニメーションをつけることができます。fast と slow であまり差がわからなかったので、classDef で遅いアニメーションを作成し、それを並列の方に設定してみました。

graph LR
  ss["serial send"] s1@--> sr["serial receive"]
  s1@{ animate: fast }
  classDef sa stroke-dasharray: 9,5,stroke-dashoffset: 900,animation: dash 50s linear infinite;

  ps["parallel send"] p1@--> pr["parallel receive"]
  ps p2@--> pr
  ps p3@--> pr
  ps p4@--> pr
  class p1 sa
  class p2 sa
  class p3 sa
  class p4 sa

Edge のカーブスタイル

また、11.10 からは edge のカーブスタイルも設定できるようになったようです。dagre だと linear で直線になりますが、デフォルトの ELK だとちょっと丸みを帯びてしまうようです。natural もちょっと変な形になってしまうようです。

---
config:
  layout: dagre
---
graph LR
    A e1@==> B
    A e2@--> C
    e1@{ curve: linear }
    e2@{ curve: natural }

おわりに

flowchart も使っているつもりでしたが、意外と知らない設定が増えていました。

hkob.notion.site

hkob’s blog

Mermaid の Flowchat の Tips : hkob の雑記録 (329)