Mermaid v11.3のshape記法一覧｜30種類以上を用途別に解説

Mermaid v11.3.0以降では、A@{ shape: rect } のように、フローチャートのノード形状を名前で指定できる共通記法が使えます。

この記事では、shape 記法の基本、よく使う形、公式一覧に掲載されている30種類以上の拡張形状をコピペできる形で整理します。

先に結論：形の意味をコード上でも明確にしたい場合は shape 記法が便利です。ただし、埋め込み先のMermaidがv11.3.0未満の場合は表示できないため、利用環境のバージョンを確認してください。

最初に試す最小コード
shape 記法の基本
最初に覚えたい15種類
公式一覧に掲載されている48種類
1. 特殊形状：アイコンと画像
従来記法との対応表
実用例：受付から保存までを形で読み分ける
新記法が表示されないときの確認項目
まとめ
関連記事
参考資料

最初に試す最小コード

flowchart LR
    A@{ shape: rect, label: "処理" }
    B@{ shape: diam, label: "成功した？" }
    C@{ shape: stadium, label: "完了" }
    D@{ shape: cyl, label: "ログ保存" }
    A --> B
    B -->|はい| C
    B -->|いいえ| D

Mermaid対応エディタへ貼り付けると、処理・判断・完了・保存先を、それぞれ意味の異なる形で表示できます。

従来の括弧記法を使いたい場合は、既存記事のMermaidフローチャートでノードの形を変える方法を参照してください。

shape 記法の基本

Mermaid v11.3.0以降では、括弧の組み合わせだけでなく、shape の短い名前で形を指定できます。

flowchart LR
    A@{ shape: rect, label: "処理" }
    B@{ shape: diam, label: "判断" }
    C@{ shape: cyl, label: "DB" }
    A --> B --> C

基本形は次のとおりです。

ノードID@{ shape: 形の短縮名, label: "表示する文字" }

v11.3.0で30種類の形状が追加され、その後も公式の一覧は拡張されています。2026年8月確認時点の公式一覧には48種類が掲載され、さらにアイコンと画像の特殊形状も用意されています。

最初に覚えたい15種類

用途	`shape`	記述例
標準処理	`rect`	`A@{ shape: rect, label: "処理" }`
イベント	`rounded`	`A@{ shape: rounded, label: "イベント" }`
開始・終了	`stadium`	`A@{ shape: stadium, label: "開始" }`
サブプロセス	`fr-rect`	`A@{ shape: fr-rect, label: "子処理" }`
判断	`diam`	`A@{ shape: diam, label: "条件" }`
データベース	`cyl`	`A@{ shape: cyl, label: "DB" }`
データストア	`datastore`	`A@{ shape: datastore, label: "保存先" }`
文書	`doc`	`A@{ shape: doc, label: "文書" }`
複数文書	`docs`	`A@{ shape: docs, label: "複数文書" }`
データ入出力	`lean-r`	`A@{ shape: lean-r, label: "入力" }`
手入力	`sl-rect`	`A@{ shape: sl-rect, label: "手入力" }`
手作業	`trap-t`	`A@{ shape: trap-t, label: "手作業" }`
待機・遅延	`delay`	`A@{ shape: delay, label: "待機" }`
分岐・結合	`fork`	`A@{ shape: fork, label: "分岐" }`
コメント	`brace`	`A@{ shape: brace, label: "補足" }`

公式一覧に掲載されている48種類

短縮名を shape: の後ろへ指定します。別名も利用できますが、コードを揃えやすい短縮名を掲載します。

短縮名	形状・用途
`bang`	強調・Bang
`notch-rect`	カード・切り欠き長方形
`cloud`	クラウド
`hourglass`	照合・砂時計
`bolt`	通信リンク・稲妻
`brace`	左側の波括弧コメント
`brace-r`	右側の波括弧コメント
`braces`	両側の波括弧コメント
`lean-r`	入力・出力
`lean-l`	逆向きの入力・出力
`datastore`	データストア
`cyl`	データベース・円筒
`diam`	判断・ひし形
`delay`	待機・遅延
`h-cyl`	直接アクセスストレージ
`lin-cyl`	ディスクストレージ
`curv-trap`	ディスプレイ
`div-rect`	分割された処理
`doc`	文書
`rounded`	イベント・角丸長方形
`tri`	抽出・三角形
`fork`	分岐・結合
`win-pane`	内部ストレージ
`f-circ`	接合点・塗りつぶし円
`lin-doc`	線付き文書
`lin-rect`	線付き・網掛け処理
`notch-pent`	ループ上限
`flip-tri`	手動ファイル
`sl-rect`	手入力
`trap-t`	手作業
`docs`	複数文書
`st-rect`	複数プロセス
`odd`	Odd形状
`flag`	紙テープ・旗
`hex`	準備・条件
`trap-b`	優先処理
`rect`	標準処理・長方形
`circle`	開始・円
`sm-circ`	開始・小さい円
`dbl-circ`	停止・二重円
`fr-circ`	停止・枠付き円
`bow-rect`	保存済みデータ
`fr-rect`	サブプロセス
`cross-circ`	集約・交差円
`tag-doc`	タグ付き文書
`tag-rect`	タグ付き処理
`stadium`	開始・終了
`text`	文字ブロック

特殊形状：アイコンと画像

公式ドキュメントには、48種類の一覧とは別に icon と image も掲載されています。icon は事前にアイコンパックの登録が必要です。image は画像URL、幅、高さ、ラベル位置などを指定して、画像をノードとして配置できます。

従来記法との対応表

既存コードを書き換える必要はありません。読みやすさや必要な形に応じて、新旧どちらかを選べます。

用途	従来記法	`shape` 記法
処理	`A["処理"]`	`A@{ shape: rect, label: "処理" }`
イベント	`A("イベント")`	`A@{ shape: rounded, label: "イベント" }`
開始・終了	`A(["開始"])`	`A@{ shape: stadium, label: "開始" }`
サブルーチン	`A[["子処理"]]`	`A@{ shape: fr-rect, label: "子処理" }`
データベース	`A[("DB")]`	`A@{ shape: cyl, label: "DB" }`
接続点	`A(("接続"))`	`A@{ shape: circle, label: "接続" }`
判断	`A{"条件"}`	`A@{ shape: diam, label: "条件" }`
準備	`A{{"準備"}}`	`A@{ shape: hex, label: "準備" }`
停止	`A((("停止")))`	`A@{ shape: dbl-circ, label: "停止" }`

実用例：受付から保存までを形で読み分ける

flowchart LR
    Start@{ shape: stadium, label: "受付開始" }
    Input@{ shape: sl-rect, label: "フォーム入力" }
    Check@{ shape: diam, label: "入力は正しい？" }
    Save@{ shape: cyl, label: "DBへ保存" }
    Error@{ shape: doc, label: "エラー内容" }
    End@{ shape: dbl-circ, label: "終了" }

    Start --> Input --> Check
    Check -->|はい| Save --> End
    Check -->|いいえ| Error --> Input

形を使い分けると、文章を細かく読まなくても「入力」「判断」「保存」「終了」の役割が見分けられます。ただし、形を増やしすぎると逆に読みづらくなるため、1つの図では4〜6種類程度に絞るのがおすすめです。

新記法が表示されないときの確認項目

1. Mermaidのバージョンを確認する

A@{ shape: rect } の共通記法はMermaid v11.3.0以降が対象です。古いプラグインやテーマ内蔵のMermaidでは、コードがそのまま表示されたり、構文エラーになったりします。

対策は次のいずれかです。

Mermaid本体または利用中のプラグインを更新する
従来記法へ戻す
Mermaid Live Editorなど、対応バージョンの環境で画像化して貼り付ける

2. 日本語ラベルを引用符で囲む

A@{ shape: rect, label: "日本語の処理名" }

日本語、空白、記号を含むラベルはダブルクォートで囲むと安全です。

3. end を小文字だけで使わない

公式ドキュメントでは、フローチャートのノードに小文字だけの end を使うと壊れる場合があると注意されています。End または END にします。

4. WordPressでコードだけ表示される場合

WordPress側にMermaidを描画する機能がなければ、コードブロックはコードのまま表示されます。記事の読みやすさと環境差を考えると、本文にはPNG画像を置き、その直後にコピペ用コードを載せる構成が安定します。

まとめ

長方形は A["処理"]、ひし形は A{"判断"}、円筒は A[("DB")] で作れる
Mermaid v11.3.0以降は A@{ shape: rect } の共通記法に対応
v11.3.0で30種類が追加され、現行の公式一覧はさらに拡張されている
互換性を優先する場合は従来記法、意味の明確さを優先する場合は shape 記法が便利
WordPressでMermaidが動かない場合は、図をPNG画像にしてコードを併記すると安定する

参考資料

Mermaid公式：Flowcharts Syntax