ダイアグラムの作成

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

シナリオ例

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

プロンプトの例

Copilot 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 は、フローチャートを作成するための Mermaid コードを提供します。コード Copilot チャットをコピーして、問題やディスカッションなど、Markdown をサポートする GitHub 上の任意の場所に貼り付けることができます。

図を正しくレンダリングするには、コードブロックの前と後に```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 Chat のドキュメント](/copilot/how-tos/use-chat)

この記事で

シナリオ例

プロンプトの例

応答の例

参考資料