ダイアグラムの作成

GitHub.com 上の GitHub Copilot チャットは、人魚図を作成してデータを視覚化するのに役立ち、分析情報を理解して伝達しやすくなります。 Copilot チャットに、データまたはコードに基づいてダイアグラムを生成するように指示すると、それらのダイアグラムを作成するために必要なコードが提供されます。

シナリオ例

プロジェクトのタイムラインを視覚化するガントチャートを作成する必要があるとします。 GitHub.com の Copilot チャットに依頼して、プロジェクトフェーズとその期間に関する具体的な詳細を含むガントチャートの人魚コードを生成することができます。その後、GitHub の問題、ディスカッション、pull requests などの、人魚構文をサポートする 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.

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.

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 チャットの応答は非決定的であるため、ここで示したものとは異なる応答が返される可能性があります。

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

図を正しくレンダリングするには、コードブロックの前と後に```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 のドキュメント](https://mermaid-js.github.io/mermaid/#/)

        [GitHub Copilot チャットのドキュメント](/copilot/how-tos/use-chat)

この記事の内容

シナリオ例

プロンプトの例

応答の例

参考資料