mermaid flowchartの便利なnode

バージョン

この記事を書いている時のバージョンは画像の通りです。

まだ表示できない見えないnodeのも多いので、これが上がるのを祈りましょう。

subrgaphの説明文に使えるノード

枠も背景もないnode

graph
    subgraph sub
        A@{ shape: text, label: "This is a text block" }
    end

subgraphの説明文で使える。subgraphのタイトルで書くには長すぎるし、長いタイトルを書いた場合はsubgraph内のノードと被ることがある。
nodeとしての説明文であれば他のnodeと被ることなくかける。

graph
  subgraph in[取込]
    note@{ shape: text, label: "外部データを受け取る" }
    Source --> Loader
  end
  subgraph pp[前処理]
    info@{ shape: text, label: "クリーニング<br>正規化" }
    Cleaner --> Normalizer
  end
  in-->pp

複数ファイル

複数ファイルを表す

graph
    A@{ shape: procs, label: "Files"}

こんな感じで使える

graph
  subgraph in[取込]
    note@{ shape: text, label: "外部データを受け取る" }
    Source@{ shape: procs, label: "Files"}
    Source --> Loader
  end
  subgraph pp[前処理]
    info@{ shape: text, label: "クリーニング<br>正規化" }
    Cleaner --> Normalizer
  end
  in-->pp

余談

DBならこっちの方がよさげ
あくまでファイルだね。

graph
    db[(database)]

線の集約

nodeから直接線が伸びていると見えずらいことがあった。

graph LR
    X & Y-->Z
    A-->B & C

    %% 位置調整
    Z~~~A

graph LR
    X & Y--- D[ ]:::empty
    D --> Z
    A-->E[ ]:::empty-->B & C

    %% 位置調整
    Z~~~A
   classDef empty width:0px,height:0px

どっちが見やすいかは人それぞれ。
後は細かいが、f-circ に伸びる線に矢印は付けていないつもりなんだけど、このバージョンだと付いてしまっている。
やりたいことはこう

余談1

f-circを使えばちょっとスマートに書ける。

graph
    A---E@{ shape: f-circ }-->B & C

余談2

ただこれは elkやmergeEdgesの設定が使えるようになってから使わなくなった。

---
config:
    layout: elk
    elk:
        mergeEdges: true
---
graph
    A--->B & C & D

ウェブ上の画像を持ってくる

graph
    aurora@{ img: "https://api.iconify.design/logos/aws-aurora.svg", label: "aurora", pos: "t", w: 60, h: 60, constraint: "on" }
    lambda@{ img: "https://api.iconify.design/logos/aws-lambda.svg", label: "Lambda", pos: "t", w: 60, h: 60, constraint: "on" }
    eventbridge@{ img: "https://api.iconify.design/logos/aws-eventbridge.svg", label: "EventBridge", pos: "t", w: 60, h: 60, constraint: "on" }

最後に

私の方で動かしているプレビューツールが一貫していないので画像が変わってますが、言いたいことは変わらないのでセーフ。