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

【Mermaid 図式表現 フローチャート応用編・まとめ】

Mermaid v11.3.0 以降で追加された新しい図形（Shape）を使いながら、
「伝わるフローチャート」を作るための考え方をまとめました。

単なる図形紹介ではなく、

✅ 意味で図を描く
✅ 読みやすく整理する
✅ 実務フローへ応用する

ところまで学べるシリーズです。

📌 本シリーズについて

🗓️ 毎週月曜日、続々お届け 🚀

VSCode 1.121（2026-05-20 リリース更新版）より、
「Markdown Preview Mermaid Support」拡張機能の機能が、
VSCode 本体へ統合されました。

公式ドキュメントとの差異がある場合は、実際の VSCode での表示を優先します。

📚 Shape編 #11～#20 総まとめ

Mermaid v11.3.0 以降で追加された新しい Shape 機能をテーマに、
図形の意味付けから実務的なフローチャート設計までを紹介してきました。

ここで各回を振り返ってみましょう。

🟢 #11：新しい形状の書き方で、意味がわかりやすくなる

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

Mermaid v11.3.0 以降で導入された

@{ shape: xxx }

構文を紹介。

「図形が増えた」のではなく、
👉 図形に意味を持たせられるようになった
という考え方を解説しました。

🟠 #12：基本構造を作る形を使ってみよう！

～開始・終了・処理・判断を表すノードたち～

フローチャートの基本となる

• stadium

• rect

• diam

• fr-rect

• dbl-circ

を紹介。

開始・処理・判断・終了を描き分ける方法を学びました。

🔵 #13：入出力・保存・文書を表す形を使ってみよう！

～データの出入りや保管先を示すノードたち～

• lean-r

• lean-l

• cyl

• h-cyl

• doc

• docs

などを使い、
入力・出力・DB・文書を表現する方法を紹介しました。

🟣 #14：補助・意味づけに使える形を使ってみよう！

～コメント・接続・強調・外部を表すノードたち～

• brace

• braces

• cloud

• bolt

• bang

• fork

• f-circ

など、
フローそのものではなく、
「図を読みやすくするための形」を紹介しました。

🔴 #15：正しいのに伝わらない？フローチャート改善の第一歩

～NG例から学ぶ「伝わる図」の作り方～

同じ内容でも、

• 形を使い分ける

• ノードを短くする

• 外部要素を区別する

だけで理解しやすくなることを紹介しました。

🟢 #16：流れが読めない？フローチャートの構造を整えよう

～矢印・分岐・合流のNG例と改善～

矢印の交差や分岐の終端など、
構造面の改善ポイントを解説。

fork や f-circ を使った整理方法を学びました。

🟠 #17：意味が伝わらない？フローチャートの役割を整理しよう

～入力・保存・外部システムのNG例と改善～

入力・保存・文書・外部サービスなどを
見た目で区別する考え方を紹介しました。

🔵 #18：読みにくい？フローチャートの情報整理をしてみよう

～詰め込みすぎ・説明不足・視線迷子の改善～

情報量の整理方法を解説。

「図に何を書くか」
だけでなく、
「図に何を書かないか」
も重要であることを学びました。

🟣 #19：実務っぽいフローチャートを作ってみよう！

～入力チェック・修正・エラー終了を表現する～

実際の業務でよくある、

• 入力

• チェック

• 修正

• エラー終了

といった流れを例に、
実務設計に近いフローチャートを作成しました。

🔴 #20：フローチャートを分割して整理してみよう！

～大きな図を読みやすく保つコツ～

フローチャートが巨大化した時の対策として、

• 全体図

• 詳細図

へ分割する考え方を紹介。

「1図1テーマ」の重要性を解説しました。

💡 このシリーズの特徴

• Mermaid v11.3.0以降の新Shapeに対応

• 図形の意味による使い分けが学べる

• 読みやすい図の設計方法がわかる

• 実務フローへの応用例を紹介

• 大規模図の整理方法まで学べる

🎯 このシリーズで身につくこと

このシリーズを通して学べるのは、
単なる Mermaid の記法ではありません。

👉 図を「描く力」

だけではなく、

👉 図で「伝える力」

です。

新しい Shape は、
見た目を派手にするための機能ではなく、
情報を整理し、
読む人の理解を助けるための道具です。

✍️ 関連投稿

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

markdownで使える mermaid 図式表現｜シリーズ紹介と振り返り

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

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

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

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

• 状態図編｜note マガジン

ぜひ合わせてご覧ください。

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

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

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

#VScode #拡張機能 #フローチャート #Mermaid入門 #Markdownで図解 #構造化記法 #英語ドキュメントを分解解説 #連載まとめ