Mermaid ブロック図のチートシート

ブロックの壁を、左から右へ読む。

このページのすべての図は

Mernyx（macOS 向けネイティブ Mermaid エディタ）が描いたものです。ブラウザで動く Mermaid.js ではなく、App のキャンバスで使うのと同じレンダラーです。

ブロックと矢印

ブロックは引用符つきのラベルです。2 つのブロックの間においた語は、その 2 つを結ぶ矢印のラベルになります。

block-beta
  a["A"] space:2 b["B"]
  a -- "checks" --> b

ブロック A と B が checks というラベルの矢印で結ばれていて、その間に 2 スペース分のすき間があります。

列

columns キーワードが 1 行に何個のブロックが入るかを決めます。

block-beta
  columns 3
  a["A"]
  b["B"]
  c["C"]

矢印ブロック

矢印もブロックです。名前に方向が含まれ、山形括弧の中にラベルが入ります。

block-beta
  Frontend blockArrowId6<[" "]>(right) Backend
  space:2 down<[" "]>(down)
  Disk left<[" "]>(left) Database[("Database")]

Frontend から Backend への幅のある矢印、その下に下向きの矢印、そして左向きの矢印が Disk をデータベースの形状につないでいます。

スタイルのブロック

classDef がスタイルに名前をつけ、class がそのスタイルを指定したブロックに適用します。

block-beta
  columns 2
  Frontend["Frontend"] Backend["Backend"]
  classDef front fill:#696,stroke:#333;
  classDef back fill:#969,stroke:#333;
  class Frontend front
  class Backend back

ブロック 2 つ。Frontend は緑、Backend は灰色で、両者のスタイル定義が上に置かれています。

Mermaid ブロック図のチートシート

ブロックと矢印

列

矢印ブロック

スタイルのブロック

Mernyx で描いてみる