【AI活用】ビジネス資料・図解作成が劇的に簡単に！テキスト入力だけで美しい図表を作る方法

# AIで図解資料作成を時短＆簡単に！ テキスト指示で図表を作るワークフロー

```mermaid
flowchart TD
    A[AIにテキスト指示] -->|図解生成| B[図の確認・AIで修正]
    B -->|XMLに変換| C[Draw.io形式に変換]
    C -->|ファイル保存| D[図表を自由に編集]
    
    style A fill:#e1d5e7,stroke:#9673a6,stroke-width:2px
    style B fill:#dae8fc,stroke:#6c8ebf,stroke-width:2px
    style C fill:#d5e8d4,stroke:#82b366,stroke-width:2px
    style D fill:#ffe6cc,stroke:#d79b00,stroke-width:2px
```

## この記事について

### :book: 想定読者
- **AIを活用して業務効率化を図りたい方**
- 会議資料や企画書に図解を入れたいビジネスパーソン
- 図表作成ツールを使いこなせずに苦労している方
- 専門的な図解ツールの使い方を覚える時間がない方

---

### :bulb: この記事でわかること
- AIに指示を出すだけで図表を作る方法
- 作成した図表を自由に編集・カスタマイズする方法
- 営業資料、プロジェクト管理、業務フローなど実務での活用例

---

### ▼ 記事の目的
**複雑な図表作成の手間を省き、AIの力でドキュメント作成を時短化する方法**をご紹介。
テキストで指示を出すだけで図表の下書きを作り、
それを直感的に編集できるようにするワークフローを解説します。

- **「フローチャートを作りたいけど、PowerPointやIllustratorの使い方がよくわからない...」**
- **「急な会議で図解が必要になったけど、時間がない...」**

そんな悩みを解決する、AIを活用した図表作成の方法を紹介します。

## 図表作成の新しいアプローチ

従来の図表作成には大きく2つの方法がありました：

```mermaid
graph TD
    %% 従来の方法
    A1["デザインツール<br>PowerPoint/Illustrator"] --> A2[マウス操作で作図]
    A2 --> A3[手作業での調整]
    A3 --> A4[完成]
    
    %% 技術者の方法
    B1[テキストエディタ] --> B2[コードを手書き]
    B2 --> B3[コンパイル/変換]
    B3 --> B4[完成]
    
    %% 新しいアプローチ
    C1[AIチャット] --> C2[日本語で指示]
    C2 --> C3[AIが自動生成]
    C3 --> C4[Draw.ioで編集]
    C4 --> C5[完成]
    
    %% グループラベル
    L1[従来の方法] --- A1
    L2[技術者の方法] --- B1
    L3[新しいアプローチ] --- C1
    
    %% メリット表示
    M1["所要時間：長い<br>難易度：中"] --- A4
    M2["所要時間：中<br>難易度：高"] --- B4
    M3["所要時間：短い<br>難易度：低"] --- C5
    
    %% スタイリング
    style A1 fill:#f8cecc,stroke:#b85450,stroke-width:1px
    style A2 fill:#f8cecc,stroke:#b85450,stroke-width:1px
    style A3 fill:#f8cecc,stroke:#b85450,stroke-width:1px
    style A4 fill:#f8cecc,stroke:#b85450,stroke-width:1px
    
    style B1 fill:#fff2cc,stroke:#d6b656,stroke-width:1px
    style B2 fill:#fff2cc,stroke:#d6b656,stroke-width:1px
    style B3 fill:#fff2cc,stroke:#d6b656,stroke-width:1px
    style B4 fill:#fff2cc,stroke:#d6b656,stroke-width:1px
    
    style C1 fill:#d5e8d4,stroke:#82b366,stroke-width:2px
    style C2 fill:#d5e8d4,stroke:#82b366,stroke-width:2px
    style C3 fill:#d5e8d4,stroke:#82b366,stroke-width:2px
    style C4 fill:#d5e8d4,stroke:#82b366,stroke-width:2px
    style C5 fill:#d5e8d4,stroke:#82b366,stroke-width:2px
    
    style L1 fill:white,stroke:none
    style L2 fill:white,stroke:none
    style L3 fill:white,stroke:none
    
    style M1 fill:white,stroke:#b85450,stroke-width:1px,stroke-dasharray:3
    style M2 fill:white,stroke:#d6b656,stroke-width:1px,stroke-dasharray:3
    style M3 fill:white,stroke:#82b366,stroke-width:1px,stroke-dasharray:3
```

1. **PowerPointやIllustratorなどのデザインツール**：直感的に操作できますが、細かい調整に時間がかかり、複雑な図を作るのは大変です
2. **プログラミング的な方法（コードで図を描く）**：エンジニアが使う方法で、テキストコードで図を描きます。修正も簡単ですがプログラミングの知識が必要です

この記事では、**AIにテキストで指示を出して図を自動生成→その後見た目を自由に調整**という、
両方のいいとこ取りをする方法を紹介します。

### :bulb: この方法のメリット

- **AIがコード（図の設計図）を自動生成するので、プログラミング知識は不要**
- **生成された図を直感的に編集できるツールに変換できる**
- 複雑な図表も短時間で作成可能
- 修正や更新が容易

## :tools: 必要なものと全体の流れ

**準備するもの：**
- AIチャットサービス（Claude、ChatGPTなど。無料版でもOK）
    - ※本記事の例ではClaude 3.7 Sonnetモデルを選択しています
- Draw.io（無料の図表作成ツール、ブラウザ版かデスクトップアプリ）
- Mac（Windows版の手順も基本的に同じです）

※drawioのインストールはこちら。またはググってください！
https://www.drawio.com/

**基本的な流れは次の`3ステップ`です：**

1. AIに日本語で図の内容を伝えて、「設計図」を自動生成してもらう
2. その「設計図」をDraw.ioというツールで使える形式に変換してもらう
3. 変換された図をDraw.ioで開いて、色や形を自由に編集する

それぞれのステップを詳しく見ていきましょう！

## ※ 仕組みの解説： AIとMermaidの連携

<details><summary>実は、この方法の裏では「Mermaid記法」という技術が使われています。</summary>

:::note info
# Mermaidとは？

Mermaidとは、テキストで書いた命令を図表に変換してくれるシステムです。
例えば、「AからBへ矢印を引く」というテキスト命令を書くと、実際に矢印付きの図が生成されます。
エンジニアがよく使うツールですが、AIを使えば誰でも簡単に活用できます！
:::

大切なのは、**あなたはMermaidについて詳しく知る必要はない**ということです。
AIが適切なMermaidコードを作成してくれるので、あなたは「こんな図が欲しい」と伝えるだけでOKです。
</details>

## ※ なぜMermaidからDraw.ioへの変換が必要か

<details><summary>なぜMermaidからDraw.ioへの変換が必要か</summary>

- **Mermaidの長所**: コードベースでの図表表現、バージョン管理のしやすさ、LLMとの相性の良さ
- **Mermaidの短所**: 細かい調整が難しい、複雑なレイアウトの実現に時間がかかる
- **Draw.ioの長所**: 直感的なGUIによる編集、細かいデザイン調整が容易
- **Draw.ioの短所**: バージョン管理がやや複雑、テキストからの生成は難しい

この両方のツールの良いところを組み合わせることで、
**「Mermaidで素早く作成 → Draw.ioで細かく調整」** という効率的なワークフローが実現できます。
</details>

## :cyclone: 実践！ 基本的なワークフローのご紹介
では、具体的な手順を見ていきましょう。

### :one: STEP 1: AIで図解を生成する

たとえば、**営業プロセスフロー**の図解がすぐにほしいとなったとき、
以下のようなテキストでつくれます。

```
以下の概要に基づいて、mermaid記法の図を作成してください：
[ここに図の概要や要件を記述]
例：

当社の新規顧客獲得の営業プロセスをフローチャートで表現してください。
- 見込み客発掘（リード獲得）
- 初回コンタクト・ニーズヒアリング
- 提案書作成・提出
- プレゼンテーション実施
- 見積もり提出
- 契約締結
- 各段階での判断分岐も含める
```
↓

<details><summary>AIからの出力例：</summary>

```
flowchart TD
    A[見込み客発掘] --> B[初回コンタクト・ニーズヒアリング]
    B --> C{興味あり?}
    C -->|Yes| D[提案書作成・提出]
    C -->|No| E[フォローアップ予定登録]
    E --> F{再コンタクト時期}
    F -->|3ヶ月後| A
    F -->|リード終了| Z[終了]
    
    D --> G[プレゼンテーション実施]
    G --> H{提案内容は適切?}
    H -->|Yes| I[見積もり提出]
    H -->|No| J[提案内容再検討]
    J --> D
    
    I --> K{見積り承認?}
    K -->|Yes| L[契約書作成]
    K -->|条件交渉| M[見積り再提出]
    M --> I
    K -->|No| N[敗因分析]
    N --> Z
    
    L --> O[契約締結]
    O --> P[案件獲得]
    P --> Q[アカウント管理へ移行]
```
</details>

```mermaid
flowchart TD
    A[見込み客発掘] --> B[初回コンタクト・ニーズヒアリング]
    B --> C{興味あり?}
    C -->|Yes| D[提案書作成・提出]
    C -->|No| E[フォローアップ予定登録]
    E --> F{再コンタクト時期}
    F -->|3ヶ月後| A
    F -->|リード終了| Z[終了]
    
    D --> G[プレゼンテーション実施]
    G --> H{提案内容は適切?}
    H -->|Yes| I[見積もり提出]
    H -->|No| J[提案内容再検討]
    J --> D
    
    I --> K{見積り承認?}
    K -->|Yes| L[契約書作成]
    K -->|条件交渉| M[見積り再提出]
    M --> I
    K -->|No| N[敗因分析]
    N --> Z
    
    L --> O[契約締結]
    O --> P[案件獲得]
    P --> Q[アカウント管理へ移行]
```
---

### :two: STEP 2: 生成された図のテキストをDraw.io XML形式のファイルに変換

以下のテキストを使ってAIにDraw.io形式のXMLをつくってもらいます：

<details><summary>:point_up: POINT</summary>

- `Duplicate IDというエラーが出ないように注意してください。`
- `下記は適切なxmlファイル例です。参考にしてください。 `
といった表現は、私が使う中で必要になった補足です。
AIによる、より確度の高いxmlの生成を期待できるようになります。
**画像が添付できるAIであれば、画像も渡すとよりイメージに近い仕上がりになります。**
みなさんも実際に使う中で必要になる補足をしていってみてください！
</details>


```
画像は以下のmermaid記法で作成された図です。この図をdrawioで出力するためのxmlを作成してください。
コードはコピペできるように全て出力してください。
Duplicate IDというエラーが出ないように注意してください。

[ここにSTEP 1で生成したMermaid記法をペースト]

また、下記は適切なxmlファイル例です。参考にしてください。
[適切なxmlファイル例をペースト]
```

<details><summary>適切なxmlファイル例</summary>

```
<mxfile host="Electron" modified="2025-03-01T12:00:00.000Z" agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/26.0.9 Chrome/128.0.6613.186 Electron/32.2.5 Safari/537.36" version="26.0.9">
  <diagram name="Page-1" id="mermaid-sequence">
    <mxGraphModel dx="1306" dy="836" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        
        <!-- 参加者定義 -->
        <mxCell id="user" value="ユーザー" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="40" width="120" height="40" as="geometry" />
        </mxCell>
        
        <mxCell id="system" value="システム" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="240" y="40" width="120" height="40" as="geometry" />
        </mxCell>
        
        <mxCell id="database" value="データベース" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="440" y="40" width="120" height="40" as="geometry" />
        </mxCell>
        
        <!-- 垂直ライン -->
        <mxCell id="user_line" value="" style="endArrow=none;dashed=1;html=1;strokeWidth=1;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="100" y="80" as="sourcePoint" />
            <mxPoint x="100" y="320" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        
        <mxCell id="system_line" value="" style="endArrow=none;dashed=1;html=1;strokeWidth=1;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="300" y="80" as="sourcePoint" />
            <mxPoint x="300" y="320" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        
        <mxCell id="database_line" value="" style="endArrow=none;dashed=1;html=1;strokeWidth=1;" edge="1" parent="1">
          <mxGeometry width="50" height="50" relative="1" as="geometry">
            <mxPoint x="500" y="80" as="sourcePoint" />
            <mxPoint x="500" y="320" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        
        <!-- メッセージフロー -->
        <mxCell id="msg1" value="リクエスト送信" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="100" y="120" as="sourcePoint" />
            <mxPoint x="300" y="120" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        
        <mxCell id="msg2" value="データ検索" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="300" y="160" as="sourcePoint" />
            <mxPoint x="500" y="160" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        
        <mxCell id="msg3" value="結果返却" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;" edge="1" parent="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="500" y="200" as="sourcePoint" />
            <mxPoint x="300" y="200" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        
        <mxCell id="msg4" value="応答表示" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;" edge="1" parent="1">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="300" y="240" as="sourcePoint" />
            <mxPoint x="100" y="240" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        
        <!-- フッター -->
        <mxCell id="user_footer" value="ユーザー" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="40" y="320" width="120" height="40" as="geometry" />
        </mxCell>
        
        <mxCell id="system_footer" value="システム" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="240" y="320" width="120" height="40" as="geometry" />
        </mxCell>
        
        <mxCell id="database_footer" value="データベース" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
          <mxGeometry x="440" y="320" width="120" height="40" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
```
</details>

↓
AIは以下のようなDraw.io形式のXMLを出力します：

```
<mxfile host="app.diagrams.net" modified="2023-08-28T12:00:00.000Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36" etag="123456789" version="14.9.8" type="device">
  <diagram id="prtHgNgQTEPvFCAcTncT" name="Page-1">
    <!-- XMLの内容がここに続きます -->
  </diagram>
</mxfile>
```

---

### :three: STEP 3: XMLをDraw.ioファイルとして保存

:::note info
2つの方法があります
:::

#### 方法1: テキストエディタを使う（基本的な方法）

1. AIの出力をコピーします
1. macの場合テキストエディタで「新規作成」

<details><summary> :camera: キャプチャ</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591019/2ef9c528-db74-4caa-bde7-04b2af0b1739.png)
</details>

3\. フォーマット→「標準テキストにする」を選択

<details><summary> :camera: キャプチャ</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591019/ae67068d-268b-4c1f-8ebb-5a11c4ded233.png)
</details>

4\. ファイル名.drawio として保存
※「拡張子が未指定の場合は、".txt"を使用」のチェックボックスはオフにしておいてください。

<details><summary> :camera: キャプチャ</summary>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591019/248a46cc-ea02-4006-af69-a2ead79ef223.png)
</details>

5\. Draw.ioのブラウザ版かアプリ版でファイルを開くと編集できる状態に！

<details><summary> :camera: キャプチャ</summary>

※一部罫線が消えていたりしますが、そこはAIで再度調整したり、ご自分で調整してみてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591019/1e0a105c-d2eb-46fe-b23f-d6256ad082f5.png)

</details>

---
#### 方法2: ClipboardToDrawIO.appを使う（最も簡単）
:arrow_down: **アプリのダウンロード**
AIから生成されたDraw.io XMLの保存をさらに簡単にするため、
専用のアプリケーション「**ClipboardToDrawIO.app**」を用意しました。

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591019/233b0e2e-41f2-477b-a4a6-6a86d60af59e.png">

:bulb: **アプリのメリット**

- 操作の簡素化: テキストエディタやファイル保存の手動操作が不要
- XMLの自動処理: XMLヘッダーを自動的に追加
- バリデーション機能: 不適切なファイル名や既存ファイルの上書き確認
- カスタム保存場所: デスクトップ以外のフォルダにも保存可能

**このアプリを使えば、AIから生成したXMLをDraw.ioファイルとして保存する作業を、**
**わずか数クリックで完了できます。**

**▼ 準備方法**

1. [リリースページ](https://github.com/Slevin06/ClipboardToDrawIO/releases)から最新版の `ClipboardToDrawIO.zip` をダウンロード

<details><summary> :camera: キャプチャ</summary>

![スクリーンショット 2025-03-01 21.53.06.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591019/1f97401b-0112-4d68-b8ac-402b5fec2b66.jpeg)
</details>


2\. ダウンロードしたZIPファイルをダブルクリックして解凍
3\. 任意の場所（ApplicationsフォルダやDesktopなど）に配置

---

:computer: **初回起動時の設定**
macOSのセキュリティ機能により、
初回起動時に「開発元を検証できません」という警告が表示される場合があります。
その場合は下記対応をしていただければ問題ありません。

1. Finderでアプリアイコンを右クリック→「開く」を選択
1. 警告ダイアログが表示されたら「開く」をクリック

<details><summary> :camera: キャプチャ</summary>

<img width="300" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591019/4cc1b1ec-19b3-4019-bd18-aab69b828279.png">
</details>


3\. この操作は初回のみ必要で、以降は通常通り起動できます

:::note warn
macOSのセキュリティ機能により、
初回起動時に「開発元を確認できません」という警告が表示されます。
これはApple Developer Programに登録していないアプリでは一般的な現象です。
:::

---

:sparkles: **アプリの使い方**

1. **AIでDraw.io XMLを生成**
- STEP 2で説明した方法にてAIにDraw.io XMLを生成してもらいます
- 生成されたXMLをコピー（Cmd+C）


2\. **ClipboardToDrawIOアプリを起動**

- アプリをダブルクリック
- クリップボードの内容が表示される確認ダイアログが表示されます
- 内容を確認して「続行」をクリック

<details><summary> :camera: キャプチャ</summary>

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591019/21ec6d55-468b-4486-988b-6d6150c63105.png">
</details>


3\. **保存先を選択**

- 「デスクトップ」または「カスタム」（任意のフォルダ）を選択
- 「カスタム」を選んだ場合は、フォルダ選択ダイアログが表示されます

<details><summary> :camera: キャプチャ</summary>

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591019/d185e2b0-33d9-453f-8867-30031cb69afd.png">
</details>

4\. **ファイル名を入力**

- 保存するファイル名を入力
- 拡張子「.drawio」は自動的に追加されるので入力不要

<details><summary> :camera: キャプチャ</summary>

<img width="500" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591019/5ef138de-2220-4363-b73c-371efd4b45bd.png">
</details>

5\. **完了！**

- ファイルが保存されます
- 保存したファイルはDraw.ioデスクトップアプリやブラウザ版で開けます

---

:warning: **注意点**

- macOS専用アプリです
- macOS Catalina (10.15) 以降での使用を推奨
- XMLが大きすぎる場合は処理に時間がかかることがあります

---

:mag: **ソースコード**
- アプリのソースコードやバグ報告は、公開している[GitHub](https://github.com/Slevin06/ClipboardToDrawIO)から
ご確認・ご報告いただけると幸いです！

---

# :writing_hand:実践例
記事の最終章として、
特に非エンジニアの方々にも使いやすい実践例をいくつか紹介します。
ここでは営業部門やディレクション部門など、
様々な職種の方が実際の業務で活用できる図解例を示します。

:::note info
いずれもSTEP1のプロンプトをベースにしつつ、
STEP2, 3の方法で文字や図形、罫線、色などをお好きにカスタマイズできます
:::


## 1. プロジェクト体制図
営業活動やプロジェクト開始時に必要となるプロジェクト体制図を簡単に作成できます。

<details><summary>テキスト指示例：</summary>

```
以下のプロジェクト体制を図解化してください。mermaid記法で作成してください：
- クライアント企業と自社の関係を表現
- プロジェクトオーナー（クライアント側）の下に、PMがいる
- PM配下に、デザインチーム、開発チーム、マーケティングチームがある
- 各チームにはリーダーと複数のメンバーがいる
- 社内の承認フローも表現したい
```

</details>

<details><summary>生成される図：</summary>

``` mermaid
graph TD
    Client[クライアント企業] --- PO[プロジェクトオーナー]
    PO --- PM[プロジェクトマネージャー]
    PM --- DT[デザインチーム]
    PM --- DevT[開発チーム]
    PM --- MT[マーケティングチーム]
    
    DT --- DL[デザインリーダー]
    DL --- DM1[デザイナー1]
    DL --- DM2[デザイナー2]
    
    DevT --- DevL[開発リーダー]
    DevL --- DevM1[開発者1]
    DevL --- DevM2[開発者2]
    DevL --- DevM3[開発者3]
    
    MT --- ML[マーケティングリーダー]
    ML --- MM1[マーケター1]
    ML --- MM2[マーケター2]
    
    %% 承認フロー
    subgraph 承認フロー
    Task[成果物] --> DL
    Task --> DevL
    Task --> ML
    DL & DevL & ML --> PM
    PM --> PO
    end
```

</details>

## 2. カスタマージャーニーマップ
顧客体験を時系列で可視化することで、マーケティング戦略の立案や顧客満足度向上に役立ちます。

<details><summary>テキスト指示例：</summary>

```
当社のサービス利用における顧客体験を時系列でマッピングしてください。mermaid記法で作成してください：
- 認知：SNSや広告で知る
- 興味：Webサイトで情報収集
- 検討：無料トライアルを使用
- 購入決定：プランを選択
- 利用：サービスの活用
- 定着：継続利用
- 推薦：他者への紹介
- 各段階での顧客の感情や接点も表現
```

</details>

<details><summary>生成される図：</summary>

``` mermaid
journey
    title カスタマージャーニーマップ
    section 認知段階
      SNS広告を見る: 3: ユーザー
      友人からの紹介を受ける: 4: ユーザー
    section 興味段階
      Webサイトを訪問: 3: ユーザー
      料金プランを確認: 3: ユーザー
      ブログ記事を読む: 4: ユーザー
    section 検討段階
      資料ダウンロード: 4: ユーザー
      無料トライアル申込: 5: ユーザー
      カスタマーサポートに質問: 4: ユーザー
    section 購入段階
      プラン比較: 3: ユーザー
      購入手続き: 2: ユーザー
      初期設定サポート: 5: ユーザー
    section 利用段階
      機能の活用: 4: ユーザー
      ヘルプセンター参照: 3: ユーザー
      定期的な利用: 4: ユーザー
    section 定着段階
      アップセル提案を受ける: 3: ユーザー
      継続利用の決定: 5: ユーザー
    section 推薦段階
      SNSでの共有: 4: ユーザー
      同僚への推薦: 5: ユーザー
```

</details>

## 3. プロジェクトロードマップ
プロジェクトの全体像を時系列で把握し、関係者間での認識合わせに役立ちます。

<details><summary>テキスト指示例：</summary>

```
今年度の主要プロジェクトのロードマップを作成してください。mermaid記法のガントチャートで表現してください：
- 第1四半期：要件定義、基本設計
- 第2四半期：詳細設計、開発フェーズ1
- 第3四半期：開発フェーズ2、内部テスト
- 第4四半期：ユーザーテスト、リリース
- マイルストーンとして「要件承認」「α版完成」「β版リリース」「正式版リリース」を表示
```

</details>

<details><summary>生成される図：</summary>

``` mermaid
gantt
    title プロジェクトロードマップ
    dateFormat  YYYY-MM-DD
    section 第1四半期
    要件定義           :a1, 2025-04-01, 30d
    基本設計           :a2, after a1, 45d
    要件承認           :milestone, 2025-05-15, 0d
    section 第2四半期
    詳細設計           :b1, after a2, 30d
    開発フェーズ1      :b2, after b1, 45d
    α版完成           :milestone, 2025-08-15, 0d
    section 第3四半期
    開発フェーズ2      :c1, after b2, 40d
    内部テスト         :c2, after c1, 35d
    β版リリース       :milestone, 2025-11-01, 0d
    section 第4四半期
    ユーザーテスト     :d1, after c2, 30d
    修正対応           :d2, after d1, 20d
    最終確認           :d3, after d2, 15d
    正式版リリース     :milestone, 2025-12-15, 0d
```

</details>

# まとめ
このワークフローを活用することで、非エンジニアの方々でも簡単に専門的な図解を作成・編集できるようになります。ぜひ、日々の業務の中で活用してみてください。