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

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

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

🧭 この記事のゴール

• 実務でよくある入力チェックフローを図にできるようになる

• 「修正可能」と「続行不能」の違いを表現できるようになる

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

• 実務っぽいフローチャートを作れる

• エラー処理を図で整理できる

• 正常終了と異常終了を描き分けられる

• Mermaid の shape を業務設計に活かせる

📌 本シリーズについて

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

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

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

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

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

はじめに

これまでの回では、

• 図を読みやすくする

• 意味を分ける

• 情報を整理する

といった改善を行ってきました。

今回はそこから一歩進めて、

👉 「実務でありそうな流れ」

を描いてみます。

特に今回は、

• 入力ミス

• 修正可能なエラー

• 修正できないエラー

• 正常終了／異常終了

といった、「業務フローっぽさ」が出やすいポイントを整理していきます。

最初によくあるシンプル版

まずは、よくある基本形です。

````markdown
```mermaid
flowchart TD
    A@{ shape: stadium, label: "開始" }
    B@{ shape: lean-r, label: "入力" }
    C@{ shape: diam, label: "確認OK？" }
    D@{ shape: rect, label: "修正" }
    E@{ shape: cyl, label: "保存" }
    F@{ shape: dbl-circ, label: "終了" }

    A --> B --> C
    C -->|OK| E --> F
    C -->|NG| D --> B
```
````

✅ 表示例

この図の良いところ

• NG時の流れが見える

• 修正 → 再確認 の循環が自然

• 小規模フローとして読みやすい

でも、実務では少し足りない

実際の業務では、

👉 「修正できない」

ケースがあります。

例えば：

• 権限不足

• ファイル破損

• 必須情報が存在しない

• 外部サービス障害

などです。

つまり、

👉 NG = 必ず修正可能

とは限りません。

実務寄りに改善してみる

そこで、

👉 「修正可能か？」

を一段追加してみます。

✅ 改善例：修正可能かを判定する

````markdown
```mermaid
flowchart TD
    A@{ shape: stadium, label: "開始" }
    B@{ shape: lean-r, label: "入力" }

    C@{ shape: diam, label: "確認OK？" }
    D@{ shape: diam, label: "修正可能？" }

    E@{ shape: rect, label: "修正" }

    F@{ shape: cyl, label: "保存" }

    G@{ shape: dbl-circ, label: "正常終了" }
    H@{ shape: bang, label: "エラー終了" }

    A --> B --> C

    C -->|OK| F --> G

    C -->|NG| D

     D -->|NO| H

    D -->|YES| E --> B
```
````

✅ 表示例

修正ポイント

「NG」を分解した

以前は：

NG → 修正

だけでした。

ですが今回は：

NG
 ↓
修正可能？
 ├ YES → 修正
 └ NO → エラー終了

へ変化しています。

これで何が良くなった？

① 業務判断が見える

「入力ミス」なのか、

「続行不能」なのか、

を分離できるようになります。

② 正常終了と異常終了を分けられる

• 正常終了

• エラー終了

を分けることで、図の意味がはっきりします。

③ 実務っぽさが出る

実際のシステムでは、

👉 「戻せるエラー」
👉 「止めるしかないエラー」

の両方があります。

その違いを図で表現できるようになります。

💡 ワンポイント

「戻れるエラー」と「止まるエラー」を分ける

すべてを「修正へ戻す」にすると、

👉 現実感が薄くなる

ことがあります。

• 修正できる → 戻す

• 修正できない → 終了

という考え方を入れると、かなり実務的になります。

さらに実務っぽくするなら？

例えば：

• リトライ回数制限

• 管理者確認

• 一時保存

• タイムアウト

• 外部API障害

なども加えられます。

ただし、情報を増やしすぎると読みにくくなるため、

👉 「どこまで描くか」

のバランスも大切です。

まとめ

今回のポイントは、

👉 「エラーにも種類がある」

ということです。

• 修正できるエラー

• 修正できないエラー

を分けることで、フローチャートは一気に実務寄りになります。

Mermaid の shape は、単なる見た目ではなく、

👉 「業務の意味」を整理する道具

として使うと、とても強力です。

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

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

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

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

• 状態図編｜note マガジン

🚀 次回はこちら！

👉 #1-20 フローチャートを分割して整理してみよう！

連載まとめはこちら

👉 🧭 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 #拡張機能 #フローチャート #設計 #業務設計