ソフトウェア
中級
フローチャート（フローチャート）
処理の流れを図形と矢印で表現した図。プログラムロジック / 業務プロセス / システムアーキテクチャの可視化に使われる。Mermaid / PlantUML / Excalidraw / D2 が 2026 年の OSS 主流。
0 回閲覧
0 いいね
2026/5/2 更新
関連タグ
可視化
Mermaid
PlantUML
Excalidraw
D2
概要
フローチャート（Flowchart / Flow Diagram）は、処理の流れを図形と矢印で表現した図を指す。1921 年に Frank Gilbreth が発明、IBM が 1947 年に標準化した古い概念だが、2020 年代の Mermaid / PlantUML 等の テキスト駆動図表ツール普及で再びエンジニア領域で必須スキルとなった。プログラムロジック・業務プロセス・システムアーキテクチャ・データフロー・状態遷移等の可視化に使われ、コード化することで Git バージョン管理可能 + コードレビューでの差分確認が可能となる。
主要ツール（2026 年）
テキスト駆動図表
| ツール | 形態 | 特徴 |
|---|---|---|
| Mermaid | OSS | GitHub Markdown ネイティブ対応、業界標準 |
| PlantUML | OSS | UML 全種類、Java ベース |
| D2 | OSS | Terrastruct、新興、自動レイアウト優秀 |
| Graphviz / dot | OSS | 老舗、低レベル制御 |
| Mermaid Live Editor | Web | OSS、ブラウザでリアルタイム編集 |
GUI 図表ツール
| ツール | 価格 | 特徴 |
|---|---|---|
| Drawio（diagrams.net） | OSS / 無償 | 機能網羅、業界標準 |
| Excalidraw | OSS | 手書き風、UI 美麗 |
| Miro | $8/月- | コラボレーション特化 |
| Lucidchart | $7.95/月- | エンタープライズ |
| Figma + FigJam | $3/月- | デザイナー寄り |
| Whimsical | $10/月- | UI 直感的 |
Mermaid 主要記法（2026 年）
フローチャート
flowchart TD
Start([開始]) --> Input[/入力受付/]
Input --> Validate{バリデーション}
Validate -->|OK| Save[(DB保存)]
Validate -->|NG| Error[エラー表示]
Save --> End([終了])
Error --> End
シーケンス図
sequenceDiagram
participant User
participant API
participant DB
User->>API: POST /users
API->>DB: INSERT
DB-->>API: id
API-->>User: 201 Created
ガントチャート
gantt
title プロジェクト計画
dateFormat YYYY-MM-DD
section 設計
要件定義 :2026-05-01, 7d
基本設計 :2026-05-08, 14d
section 実装
コーディング :2026-05-22, 30d
主要な図種別と用途
| 図種別 | Mermaid 構文 | 用途 |
|---|---|---|
| フローチャート | flowchart TD | プログラムロジック |
| シーケンス図 | sequenceDiagram | API 呼出順序 |
| クラス図 | classDiagram | OOP 設計 |
| 状態遷移図 | stateDiagram-v2 | UI / ワークフロー状態 |
| ER 図 | erDiagram | DB 設計 |
| ガントチャート | gantt | プロジェクト計画 |
| パイチャート | pie | データ可視化 |
| Git ブランチ図 | gitGraph | リポジトリ運用 |
| C4 モデル | C4Context | アーキテクチャ |
| マインドマップ | mindmap | アイデア整理 |
| タイムライン | timeline | 歴史 / 変遷 |
| Sankey 図 | sankey-beta | フロー可視化 |
主な図形の意味（標準フローチャート）
| 図形 | 意味 |
|---|---|
| 角丸長方形 | 開始 / 終了 |
| 長方形 | 処理 |
| 平行四辺形 | 入出力 |
| ひし形 | 判断分岐 |
| 円柱 | データベース |
| 円 | 接続子 |
| 矢印 | 処理の流れ |
| 二重長方形 | サブルーチン |
用途別の選び方（2026 年）
| 用途 | 推奨ツール |
|---|---|
| GitHub README / Wiki | Mermaid（ネイティブ対応） |
| ドキュメント自動生成 | PlantUML（CI/CD 統合） |
| アーキテクチャ図（複雑） | D2（自動レイアウト優秀） |
| 手書き感のある UML | Excalidraw |
| エンタープライズ図表 | Drawio / Lucidchart |
| デザインモック + 図表 | Figma + FigJam |
| 黒板代わり | Miro / Excalidraw |
PC 開発環境での運用
- VSCode 拡張: Mermaid Preview、PlantUML、Draw.io Integration
- CI/CD: PlantUML / Mermaid CLI で PNG/SVG 自動生成
- ドキュメント統合: Docusaurus / VitePress / Mintlify が Mermaid ネイティブ対応
- AI 生成: GitHub Copilot / Claude が自然言語からフローチャート生成
関連用語との違い
| 用語 | 違い |
|---|---|
| シーケンス図 | 時系列、フローチャートは制御フロー |
| クラス図 | 構造、フローチャートは動作 |
| アクティビティ図 | UML、フローチャートと近い |
| ER 図 | DB スキーマ、フローチャートは処理 |
よくある質問
Q1: Mermaid と PlantUML、どちらを選ぶ？ A: GitHub / Web ベースなら Mermaid（ネイティブ対応で簡単）。UML 厳密性 + 詳細制御が必要なら PlantUML。両者を併用する開発者も多い。
Q2: D2 が新興注目される理由は？ A: 自動レイアウト品質が業界トップ、Mermaid / PlantUML より美麗な図が出力される。Terrastruct（D2 開発元）の SaaS と統合で大規模図表に強い。
Q3: AI が自動でフローチャート生成できる？ A: 可能。Claude / GPT-4 が自然言語からの Mermaid 生成は実用域。「ECサイトの注文フローをフローチャートで」と指示するだけで Mermaid コードが生成される。
まとめ
- 処理の流れを 図形 + 矢印で可視化 する古典的手法
- 2026 年は Mermaid（GitHub 統合）+ D2 + Excalidraw が三大トレンド
- テキスト駆動図表 で Git バージョン管理 + AI 生成が標準化