> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ahaslides.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Diagram スライドでフローチャートを作成

> フローチャート、組織図、タイムライン、データチャートをプレゼンテーション内に直接作成。画像のアップロード不要で、ライブに更新されるデータ駆動のビジュアルです。

Diagram スライドでは、フローチャート、階層構造、チャート、タイムライン、比較などの構造化されたビジュアル図を、AhaSlides 内で直接作成して表示できます。静的なスクリーンショットを貼り付ける代わりに、右側のパネルで内容を構造化された形式で入力すると、外部ツールなしで図が自動的に描画されます。

## Diagram の概要

| | |
| - | - |
| タイプ | 表示のみ（参加者の回答なし） |
| 場所 | **新しいスライド** (New slide) を選び、スライドタイプピッカーの **コンテンツ** (Content) タブにある **Diagram** を選びます |
| Diagram のタイプ | 7 種類：Relation、Hierarchy、Items、Chart、Word Cloud、Compare、Advanced |
| Streaming animation | Off（デフォルト）、Slow、Medium、Fast |

単語のリストや Poll の結果ではなく、関係、プロセス、データ、構造を示したいときはいつでも Diagram スライドを使えます。このスライドは 7 種類の Diagram に対応しています。

* **プロセスフローとネットワーク図** — 手順やシステムのつながりを示します。
* **組織図とデシジョンツリー** — 入れ子のレベルで階層を作成します。
* **棒グラフ、縦棒グラフ、折れ線グラフ、円グラフ、ドーナツグラフ** — ラベル付きの数値データを表示します。
* **タイムライン、ロードマップ、ピラミッド** — 順序のある項目や階層的な項目を配置します。
* **比較** — SWOT 分析、四象限、二項比較。
* **ワードクラウド** — 重みに応じた大きさで用語を可視化します。
* **カスタムインフォグラフィック** — AntV の記法を直接記述して、細部まで制御できます。

静的な画像を使う Content スライドとは異なり、Diagram スライドはデータ駆動です。パネルにラベルと値を入力すると、ビジュアルがリアルタイムに更新されます。

## Diagram スライドを作成する

<Frame>
  <img src="https://mintcdn.com/ahaslides/wJ1GvGkoLZ_3Etc-/images/diagram-add-slide.png?fit=max&auto=format&n=wJ1GvGkoLZ_3Etc-&q=85&s=094076075f4a480ae2c91dfc6ce33f53" alt="スライドタイプピッカーを検索して見つけた AhaSlides の Diagram スライドタイプ" width="1920" height="1080" data-path="images/diagram-add-slide.png" />
</Frame>

<Steps>
  <Step title="スライドを追加する">
    エディターで **新しいスライド** (New slide) をクリックし、スライドタイプピッカーの **コンテンツ** (Content) タブから **Diagram** を選択します。
  </Step>

  <Step title="Diagram のタイプを選ぶ">
    右側のパネルで **Diagram type** のドロップダウンを開き、内容に合ったタイプを選びます。タイプを切り替えると、キャンバスに図のプレビューが表示されます。
  </Step>

  <Step title="バリアントを選ぶ">
    **Variant** のドロップダウンを開き、図のレイアウトを選びます。ドロップダウンにはビジュアルのプレビューが表示され、選ぶ助けになります。
  </Step>

  <Step title="内容を入力する">
    タイプに応じて、ノードと接続を追加する (**Relation**)、ルートの下に子ノードを入れ子にする (**Hierarchy**)、ラベルと説明付きの項目を追加する (**Items**)、ラベルと値のあるデータポイントを追加する (**Chart**)、重み付きの単語を追加する (**Word Cloud**)、グループとその項目を追加する (**Compare**)、AntV の記法を直接入力する (**詳細設定** (Advanced)) などの操作を行います。
  </Step>

  <Step title="ストリーミングアニメーションを設定する（任意）">
    **Streaming animation** のコントロールで、スライドが最初に表示されるときに図をアニメーションさせます。選択肢は **オフ** (Off)（デフォルト）、**Slow**、**中** (Medium)、**Fast** です。
  </Step>

  <Step title="タイトルを追加する（任意）">
    右側のパネル上部の **Title** 欄にタイトルを入力します。その下に短い説明を加えることもできます。
  </Step>
</Steps>

<Frame>
  <img src="https://mintcdn.com/ahaslides/xRqJBlSTbY-PEvpk/images/diagram-choose-type.png?fit=max&auto=format&n=xRqJBlSTbY-PEvpk&q=85&s=f544cd177e9cf2da3986468854043943" alt="エディターの AhaSlides Diagram スライド。Diagram のタイプのドロップダウンが強調表示されている" width="1920" height="1080" data-path="images/diagram-choose-type.png" />
</Frame>

<Tip>
  * **最初に適切なタイプを選ぶ** — 後でタイプを切り替えると内容がリセットされるため、項目を入力する前に適切なタイプを選びます。
  * **つながりのあるフローには Relation、ツリーには Hierarchy を使う** — 項目が厳密な親子関係で、相互のリンクがない場合は、Hierarchy のほうが管理しやすくなります。
  * **プレゼン前にプレビューする** — エディターのヘッダーにある **プレビュー** (Preview) をクリックして、全画面での表示を確認します。
  * **アニメーションは控えめに使う** — ストリーミングアニメーションは、接続を順に見せられる Relation と Hierarchy で最も効果的です。項目の多い Chart や Word Cloud では、Off のほうがすっきりします。
</Tip>

<Tip>
  エディターのツールバーにある **改善する** (Improve) AI ボタンは、Diagram スライドでも使えます。作りたいフローや構造を自然な言葉で説明すると AI が初期データを作成するので、それをパネルで調整してください。
</Tip>

<Note>
  Diagram スライドは、現在 AhaSlides MCP の `create_slides()` ツールではサポートされていません。Diagram スライドはエディターで手動で追加してください。
</Note>

## Diagram スライドを実施する

プレゼンテーション中に Diagram スライドに到達すると、プレゼンター画面ではスライド領域いっぱいに図が表示されます。参加者のデバイスにも同じビジュアルが読み取り専用で表示され、Diagram スライドでは参加者からの回答や操作は必要ありません。ストリーミングアニメーションが有効な場合は、スライドが最初に表示されるときに図がアニメーションで現れます。

<Frame>
  <img src="https://mintcdn.com/ahaslides/TKkv83kp-W9KNutc/images/diagram-presenting.png?fit=max&auto=format&n=TKkv83kp-W9KNutc&q=85&s=83447271ec200d22ffc4b749cf574f08" alt="プレゼン中の AhaSlides Diagram スライド。プレゼンター画面に Start から Process、End へのフローが表示されている" width="1600" height="1000" data-path="images/diagram-presenting.png" />
</Frame>

## Diagram のタイプとバリアント

| タイプ | 説明 | バリアント |
| - | - | - |
| **Relation** | ノードとエッジからフロー図やネットワーク図を作成します。**Nodes** とその間の **Connections** を定義し、必要に応じてエッジにラベルを付けます。 | Flow (left → right), Flow (top → bottom), Flow LR (animated), Flow TB (animated), Circle (progress), Circle (icons), Network |
| **Hierarchy** | 子要素を入れ子にしたツリーです。ルートノードを定義し、その下に子と孫を入れ子にします。 | Radial tree, Tree (top → bottom), Tree (left → right), Tree (right → left), Tree (bottom → top), Tech-style tree |
| **Items** | フラットなリストや手順のシーケンスです。ラベルと任意の説明を持つ項目のリストを定義します。 | Pyramid, Horizontal arrows, Row (icon arrows), Vertical arrows, Grid, Grid (progress), Zigzag (down), Zigzag (up), Sector, Sector (half), Stairs, Timeline, Roadmap, Funnel, Circular, Steps, Snake steps, Pyramid (sequence) |
| **Chart** | ラベル付きの値から、棒、縦棒、折れ線、円、ドーナツグラフを作成します。**Label** と数値の **Value** を持つ項目を定義します。 | Bar, Column, Line, Pie, Donut |
| **Word Cloud** | 重みに応じた大きさの単語です。数値の **Weight**（最小 1）を持つ単語のリストを定義します。 | Standard |
| **Compare** | 並べて比較します。ラベルと任意の項目を持つ項目のグループを定義します。デフォルトのテンプレートは SWOT 分析です。 | Quadrant (cards), plus additional binary and hierarchy variants |
| **詳細設定** (Advanced) | AntV のインフォグラフィックのマークアップを直接記述します。Variant ドロップダウンはありません。 | — |

<Note>
  Word Cloud の Diagram タイプは、ご自身で設定する、重み付きの静的なワードクラウドを作成します。参加者がライブで回答を送信するインタラクティブな [Word Cloud スライド](/jp/using-slide-types/using-the-word-cloud-slide)とは別のものです。
</Note>

## Diagram スライドと Content スライドの違い

| | Diagram スライド | Content スライド |
| - | - | - |
| ソース | 右側のパネルで入力したデータ | 静的な画像のアップロード |
| エディターで編集 | 可能：ラベルと値を変更できます | 不可（変更するには再アップロード） |
| 最適な用途 | フロー、ツリー、チャート、タイムライン、SWOT | 写真、スクリーンショット、インフォグラフィック |
| 自動レイアウト | あり：バリアントがレイアウトを自動で制御します | なし |
| 参加者の操作 | なし（表示のみ） | なし（表示のみ） |

**ご質問はありますか？**

サポートチームまでお問い合わせください。ログイン済みの場合はダッシュボード右下のチャットアイコンから、ログインしていない場合は[こちらからお問い合わせ](https://ahaslides.com/contact-us/)いただくか、[hi@ahaslides.com](mailto:hi@ahaslides.com) までメールをお送りください。

他のユーザーと交流したい方は、[AhaSlides コミュニティ](https://community.ahaslides.com/)に参加して、コツを共有したり、機能をリクエストしたり、他の人がどのように聴衆を巻き込んでいるかを確認しましょう。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.