図解が必要だけど面倒…を解決する「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を使えば、誰でも簡単に、綺麗で読みやすい図を作れるようになります。

ドキュメントが可視化され、共有・レビューがしやすくなる
テキストベースなので、バージョン管理や修正が容易
エンジニアもビジネスパーソンも一緒に使える共通言語に

ぜひ、業務効率化やナレッジ共有に活用してみてください！