使って便利なmermaid記法(flowchart編）

この記事はand factory.inc Advent Calendar 2023　5日目の記事です。
昨日は @yasukotelin さんの「[Jetpack Compose] scrollStateに連動したScrollBarの実装」でした。

はじめに

最近notionなどでmermaid記法のflowchartを書くことが増えてきたので、抑えておくと便利な記法をいくつか紹介します

sample

code

flowchart TD    
    subgraph group2
    corner_round(corner_round)
    rect[rect]
    round([round])
    database[(Database)]
    circle((circle))
    hexagon{{hexagon}}
    asymmetric>asymmetric]
    parallelogram[/parallelogram/]
    rapezoid[/trapezoid\]
    corner_round --> rect --- round
    database ==> circle -.- hexagon
    asymmetric ~~~ parallelogram  -- hogehoge --> rapezoid
    end

    subgraph group1
    normal(normal) --> styled(styled) --> classed(classed):::classed --> linked
    end

    normal --> corner_round

	style styled color:#0000ff,stroke:#FF0000,stroke-width:2px,fill:#ffc0cb,stroke-dasharray: 5 5
    classDef classed stroke:#ffff00, fill:000000, color:ffffff

    click linked href "https://qiita.com/advent-calendar/2023/andfactory"

style

• ノードのスタイルを指定できます
  - color:テキストカラー
  - fill:塗りつぶし色
  - stroke:枠線の色
  - stroke-width:枠線の太さ
  - dasharray:破線

click

• ノードのクリック時イベント
• hrefを使えばリンクになるので便利

classDef

• styleまとめて指定

subgraph

• graphのグループを指定
• 後に書いたものが先にくる
• 線で他のグループのgraphに接続可能

まとめ

紹介と言いつつ、調べてみると知らない記法がありました。
うまく使って見やすいドキュメント作成を心がけたいですね。

参考
Mermaid公式：https://mermaid.js.org/