Erstellen von Diagrammen

GitHub Copilot Chat kann Ihnen helfen, Diagramme zu erstellen, um Ihre Daten besser zu verstehen und Einblicke zu vermitteln.

In diesem Artikel

GitHub Copilot Gespräch on GitHub.com kann Ihnen helfen, Mermaid-Diagramme zu erstellen, um Daten zu visualisieren und so Erkenntnisse leichter zu verstehen und zu kommunizieren. Du kannst Copilot-Chat bitten, Diagramme basierend auf deinen Daten oder deinem Code zu generieren, und es stellt dir den erforderlichen Code bereit, um diese Diagramme zu erstellen.

Beispielszenario

Sie möchten ein Gantt-Diagramm erstellen, um den Zeitplan eines Projekts zu visualisieren. Sie können Copilot-Chat auf GitHub.com anfragen, um den Mermaid-Code für das Gantt-Diagramm mit spezifischen Details zu den Projektphasen und deren Dauer zu generieren. Sie können diesen Code dann in jeder Markdown-Datei verwenden, die Mermaid-Syntax unterstützt, z. B. Probleme, Diskussionen oder Pullanforderungen für GitHub.

Beispielprompt

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.

Beispielantwort

Hinweis

Die folgende Antwort ist ein Beispiel. Da die Copilot-Chat-Antworten nicht deterministisch sind, erhältst du möglicherweise eine andere Antwort als die hier beschriebene.

Copilot stellt Ihnen den Mermaid-Code bereit, um das Flussdiagramm zu erstellen. Sie können den von Copilot-Chat bereitgestellten Code kopieren und ihn an einer beliebigen Stelle auf GitHub einfügen, die Markdown unterstützt, z. B. in einem Problem oder einer Diskussion.

Stellen Sie sicher, dass Sie die richtige Mermaid-Syntax vor ```mermaid und ``` nach dem Codeblock einfügen, um das Diagramm ordnungsgemäß zu rendern.

```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
```

Dieser Mermaid-Code würde das folgende Diagramm generieren:

Screenshot eines gerenderten Mermaid Gantt-Diagramms.

Weitere Informationen

  •         [Mermaid-Dokumentation](https://mermaid-js.github.io/mermaid/#/)

  •         [GitHub Copilot Chat-Dokumentation](/copilot/how-tos/use-chat)