Mermaid記法入門：ビジネス資料や設計図をコードで簡単に可視化する方法

# 図解が必要だけど面倒…を解決する「Mermaid記法」

「業務フローや設計図をわかりやすく図で共有したいけど、PowerPointやExcelで毎回作るのが面倒…」  
そんな悩みを一発で解決してくれるのが、**Markdownで図表を作れるMermaid記法**です。
個人ビジネスの上流工程で使えるツールを調べていたところ、この記法に行き着いたのですが衝撃を受けたためシェアさせていただきます。

- コードで図を描ける
- Notion、Qiita、GitHubなどでも使える
- 無料＆ブラウザだけで完結

この記事では、**非エンジニアでも使えるビジネス活用向けのMermaid記法**を紹介します。

---

# Mermaid記法とは？

Mermaidは、**Markdownベースで図表を記述できる軽量な可視化DSL（ドメイン特化言語）** です。

主な特徴：
- Markdownにそのまま埋め込める
- フローチャートやガントチャートなど様々な図に対応
- GitHub、Notion、Qiitaなど多くのツールで利用可能

対応している図表（一部）：
- フローチャート
- ガントチャート
- シーケンス図
- クラス図
- マインドマップ（β）
- ER図（データベース設計）
- 状態遷移図（ステートマシン）

表現できる図表は[Mermaid公式サイト](https://mermaid.js.org/intro/)を参照ください。

---

# ビジネスでの活用例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
```

```mermaid
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
```

```mermaid
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
mindmap
Root
  業務効率化
    図解化
      フローチャート
      マインドマップ
    ドキュメント整備
```

# Mermaidを使えるおすすめツール3選

主に使える用途としては以下のようなものがあります。

## Mermaid Live Editor（ブラウザだけで利用可能）
- 公式サイト：[https://mermaid.live](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を使えば、誰でも簡単に、綺麗で読みやすい図を作れるようになります。
- ドキュメントが可視化され、共有・レビューがしやすくなる
- テキストベースなので、バージョン管理や修正が容易
- エンジニアもビジネスパーソンも一緒に使える共通言語に

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