図解が必要だけど面倒…を解決する「Mermaid記法」
「業務フローや設計図をわかりやすく図で共有したいけど、PowerPointやExcelで毎回作るのが面倒…」
そんな悩みを一発で解決してくれるのが、Markdownで図表を作れるMermaid記法です。
個人ビジネスの上流工程で使えるツールを調べていたところ、この記法に行き着いたのですが衝撃を受けたためシェアさせていただきます。
- コードで図を描ける
- Notion、Qiita、GitHubなどでも使える
- 無料＆ブラウザだけで完結
この記事では、非エンジニアでも使えるビジネス活用向けのMermaid記法を紹介します。
Mermaid記法とは？
Mermaidは、Markdownベースで図表を記述できる軽量な可視化DSL（ドメイン特化言語） です。
主な特徴：
- Markdownにそのまま埋め込める
- フローチャートやガントチャートなど様々な図に対応
- GitHub、Notion、Qiitaなど多くのツールで利用可能
対応している図表（一部）：
- フローチャート
- ガントチャート
- シーケンス図
- クラス図
- マインドマップ（β）
- ER図（データベース設計）
- 状態遷移図（ステートマシン）
表現できる図表はMermaid公式サイトを参照ください。
ビジネスでの活用例10選
Mermaidはエンジニアだけでなく、ビジネスサイドにもおすすめです。
以下のような活用が可能です：
| 用途 | 図表名 | 活用シーンの例 |
|---|---|---|
| 業務整理 | フローチャート | 顧客対応プロセスの見える化 |
| 研修資料 | マインドマップ | ロジックの可視化 |
| プロジェクト管理 | ガントチャート | 開発スケジュールの共有 |
| 要件定義 | ER図 | DB設計の共有 |
| UI設計 | シーケンス図 | ユーザーとシステムのやり取り設計 |
| マーケ戦略 | ファネル図（擬似） | 顧客獲得のステップ可視化 |
| KPI管理 | KPIツリー | 指標の構造化 |
| チーム管理 | RACIチャート | 役割と責任の整理 |
Mermaid記法の基本：書き方と実例
以下に、主な図表のMermaid記法で書いた簡単なコードとプレビューを紹介します。
ちなみに、このQiita上でもMarkdownで mermaid と付与することで実際に後述のような図表でのプレビューができるようになります。
例1：フローチャート
graph TD
A[開始] --> B{条件分岐}
B -- Yes --> C[処理1]
B -- No --> D[処理2]
C --> E[終了]
D --> E
例2：ガントチャート
gantt
title プロジェクト進行
dateFormat YYYY-MM-DD
section 計画
要件定義 :done, 2024-04-01, 5d
設計 :active, 2024-04-06, 5d
section 実装
フロント開発 : 2024-04-11, 7d
バックエンド開発 : 2024-04-11, 10d
例3：マインドマップ
mindmap
Root
業務効率化
図解化
フローチャート
マインドマップ
ドキュメント整備
Mermaidを使えるおすすめツール3選
主に使える用途としては以下のようなものがあります。
Mermaid Live Editor（ブラウザだけで利用可能）
- 公式サイト：https://mermaid.live
- コード記述 → 即時プレビュー → SVG/PNGでエクスポート可能
- テンプレも豊富で直感的に使えます
Notionで使う
- /codeブロックにmermaidと記述
- 社内ドキュメントや業務フロー共有に最適
Qiita / GitHub / Obsidianなど
- 技術記事に図を埋め込める
- Markdownだけで完結するので管理が楽
⸻
補足：Mermaidの注意点
- 複雑な図はレンダリング負荷が高くなるため分割推奨
- 一部環境（Qiitaなど）では機能制限あり
- QiitaはMermaidの公式対応が進んでいるが、表示非対応な場合もある
- シンタックスエラー時は図が表示されない → 少しずつ検証するのがコツ
個人的にやった作業としてはこんな感じですが、効率化という面でもお勧めです。
- ChatGPTで要件定義などの情報を整理
- リストアップしたものをNotion AIで図表化（ここでmermaid自動生成される）
- シンプルなものならここまででOKですが、色味など反映されない時もある
- その場合は「Mermaid Live Editor」にコード移行して調整
Notionのプレビューをコード化する場合は、「Show in block」から「Code」を選んでください。
おわりに：図解の民主化をMermaidで
Mermaidを使えば、誰でも簡単に、綺麗で読みやすい図を作れるようになります。
- ドキュメントが可視化され、共有・レビューがしやすくなる
- テキストベースなので、バージョン管理や修正が容易
- エンジニアもビジネスパーソンも一緒に使える共通言語に
ぜひ、業務効率化やナレッジ共有に活用してみてください！