ダイアグラムの作成

GitHub Copilot Chat は、データをより深く理解し、分析情報を伝えるためのダイアグラムを作成するのに役立ちます。

この記事の内容

GitHub Copilot Chat は、データを視覚化するための Mermaid ダイアグラムを作成するのに役立ちます。これにより、分析情報の理解と伝達が容易になります。 Copilot Chat に、データまたはコードに基づいてダイアグラムを生成するように指示すると、それらのダイアグラムを作成するために必要なコードが提供されます。

シナリオ例

プロジェクトのタイムラインを視覚化するガント チャートを作成する必要があるとします。 Copilot Chat に、プロジェクトのフェーズとその期間に関する具体的な詳細を含むガント チャートの Mermaid コードを生成するように求めることができます。 このコードは、GitHub の issue、ディスカッション、pull request など、Mermaid 構文をサポートする任意の Markdown ファイルで使用できます。

プロンプトの例

Copilot Chat prompt
Create a mermaid gantt diagram that covers the period August 1st 2025 until January 31st, 2025. Include 5 phases, each taking 6 weeks, and overlapping equally.

応答の例

メモ

次の応答は例です。 Copilot Chat の応答は非決定的であるため、ここで示したものとは異なる応答が返される可能性があります。

Copilot により、フローチャートを作成するための Mermaid コードが提供されます。 Copilot Chat によって提供されたコードをコピーし、GitHub 上の issue やディスカッションなど、Markdown をサポートする任意の場所に貼り付けることができます。

ダイアグラムを正しくレンダリングするために、コード ブロックの前に ```mermaid、後に ``` という正しい Mermaid 構文を必ず挿入してください。

```mermaid
gantt
    title Project Timeline: Aug 2025 - Jan 2026
    dateFormat  YYYY-MM-DD
    axisFormat  %b %d

    section Phase 1
    Phase 1           :a1, 2025-08-01, 42d

    section Phase 2
    Phase 2           :a2, 2025-09-07, 42d

    section Phase 3
    Phase 3           :a3, 2025-10-13, 42d

    section Phase 4
    Phase 4           :a4, 2025-11-18, 42d

    section Phase 5
    Phase 5           :a5, 2025-12-24, 42d
```

この Mermaid コードによって次のダイアグラムが生成されます。

レンダリングされた Mermaid ガント チャートのスクリーンショット。

参考資料