新しい形状の書き方で、意味がわかりやすくなる｜Mermaid図形表現 #1-11

～フローチャート表現が一段深くなるアップデート～

Markdownで使えるMermaid図式表現・フローチャート編 #1-11

🧭 この記事のゴール

• Mermaidの新形状アップデート（v11.3.0+）の全体像を理解する

• 新しい形状の「意味」と「使い分け」の考え方を知る

✅ この記事を読むとできること

• 新形状が「何のために増えたのか」がわかる

• 新しい shape 指定構文を理解できる

• フローチャートを「意味で設計する」視点が身につく

• 次回以降の記事の読み方がわかる

📌 本シリーズについて

🗓️ 毎週月曜日、続々お届け 🚀
VSCode 1.121（2026-05-20 リリース更新版）より、
「Markdown Preview Mermaid Support」拡張機能の機能が、
VSCode 本体へ統合されました。

今後は、VSCode 標準機能として、
Markdown 内で Mermaid をよりシームレスに利用できる環境へ移行していくと考えられます。

本シリーズでは、実際の動作確認を行いながら、順次内容を更新していきます。

💡この記事のコードを使うときは、外側の「````markdown ～ ```` 」は削除してください。
中の ```mermaid ブロックだけでOK です。

はじめに

Mermaidのフローチャートに、新しい形状が追加されました（v11.3.0+）。

追加された形状は、なんと 30種類以上。

……と聞くと、「覚えるの大変そう」と感じるかもしれません。

でも今回のアップデートの本質は、そこではありません。

図形が増えた、ではない

今回の変化は、こう捉えると分かりやすいです。

👉 図形が増えたのではなく、「意味」が増えた

これまでのフローチャートでは、

• とりあえず四角（処理）

• とりあえず菱形（分岐）

という使い方になりがちでした。

しかし今回のアップデートでは、

• 「手作業の処理」

• 「遅延」

• 「優先処理」

• 「データ保存」

• 「文書」

といったように、役割ごとに形が分かれています。

つまり、

👉 図形＝見た目 から
👉 図形＝意味（セマンティクス） へ

一段階進化した、ということです。

新しい形状指定の書き方

今回のアップデートでは、形状を柔軟に指定できる構文も追加されました。

````markdown
```mermaid
flowchart TD
    A@{ shape: rect }
```
````

✅ 表示例

このように、

👉 `@{ shape: 〇〇 }`

で、ノードの形を指定できます。

従来との違い

````markdown
```mermaid
flowchart TD
    A[処理]
```
````

✅ 表示例

```mermaid
flowchart TD
    A[処理]
```

括弧を用いた従来記法と同じ見た目ですが、

👉 後から形を変更できる
👉 統一的な書き方ができる

というメリットがあります。

どう使い分けるの？

追加された形状はたくさんありますが、全部覚える必要はありません。

重要なのは、分類で考えること です。

大きく分けるとこうなる

• 開始・終了

• 処理（基本・応用）

• 判断・分岐

• 入出力

• 保存（データ）

• 文書

• 補助（コメント・接続など）

このように整理すると、

👉 「どの形を使うか」ではなく
👉 「何を表したいか」 で選べるようになります。

ちょっとだけ例を見てみる

従来の書き方

````markdown
```mermaid
flowchart TD
    A[処理] --> B[処理] --> C[処理]
```
````

✅ 表示例

```mermaid
flowchart TD
    A[処理] --> B[処理] --> C[処理]
```

新しい書き方

````markdown
```mermaid
flowchart TD
    A@{ shape: diam } -->|Yes| B@{ shape: rect }
    A -->|No| C@{ shape: rect }
```
````

✅ 表示例

👉 分岐は分岐として表現する
👉 処理は処理として表現する

これだけで、読みやすさが一段上がります。

💡 ワンポイント

新形状を使うときに大事なのは、

👉 全部使おうとしないこと

まずは、

• 分岐 → 菱形

• 処理 → 四角

• 開始 → スタジアム

このあたりからで十分です。

そこに少しずつ意味を足していくと、図が自然に進化します。

まとめ

今回のアップデートは、

👉 図形が増えたアップデートではありません

👉 「意味で図を描けるようになったアップデート」です

このシリーズでは、次回から

• 基本構造

• データ・入出力

• 補助・応用

と分けて、新しい形状を整理していきます。

📚 このシリーズの一覧はこちら

• フローチャート編｜note マガジン

• シーケンス図編｜note マガジン

• クラス図編｜note マガジン

• 状態図編｜note マガジン

🚀 次回はこちら！

👉 #1-12 基本構造を作る形（開始・処理・分岐）

連載まとめはこちら

👉 🧭 Mermaid図式表現：フローチャート記法のすべて

👉 🧭 Mermaid図式表現：新しい図形（Shape）編のすべて

📖 参照：
mermaid 公式サイト（flowchart）英語

✍️ この記事を書いている人が気になったら──

筆者ふじけんのことが、少しずつわかる自己紹介noteも置いておきます。
投稿を続けてきた節目ごとの記録です。

→ So作家宣言｜連続投稿444日目(2026-06-10)
→ 🎰 777の日に、自己紹介してみた（100日投稿を超えて）(2025-07-07)
→ 気づけば続いてた。40,000views、ChatGPT1周年、そして256日連続。(2025-12-04)

#Mermaid入門 #Markdownで図解 #VSCode #拡張機能 #フローチャート #構造化記法