Skip to main content

Criando diagramas

O GitHub Copilot Chat pode ajudar você a criar diagramas para entender melhor seus dados e comunicar insights.

O GitHub Copilot Chat pode ajudar você a criar diagramas mermaid para visualizar dados, facilitando a compreensão e a comunicação de insights. Você pode pedir ao Copilot Chat para gerar diagramas com base em seus dados ou código e ele fornecerá o código necessário para criar esses diagramas.

Cenário de exemplo

Você quer criar um gráfico de Gantt para visualizar a linha do tempo de um projeto. Você pode pedir ao Copilot Chat para gerar o código mermaid para o gráfico de Gantt, com detalhes específicos sobre as fases do projeto e suas durações. Em seguida, você pode usar esse código em qualquer arquivo Markdown com suporte à sintaxe mermaid, como issues, discussões ou pull requests no GitHub.

Solicitação de exemplo

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.

Exemplo de resposta

Observação

A resposta a seguir é um exemplo. Respostas do Copilot Chat são não determinísticas, portanto, você pode obter uma resposta diferente da mostrada aqui.

O Copilot fornecerá o código mermaid para criar o fluxograma. Você pode copiar o código que o Copilot Chat fornecer e colá-lo em qualquer lugar no GitHub com suporte para Markdown, como um issue ou uma discussão.

Certifique-se de incluir a sintaxe mermaid correta de ```mermaid antes e ``` após o bloco de código para renderizar o diagrama corretamente.

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

Esse código mermaid geraria o seguinte diagrama:

Captura de tela de um gráfico de Gantt mermaid renderizado.

Leitura adicional