Skip to main content

Crear diagramas

GitHub Copilot Chat puede ayudarte a crear diagramas para comprender mejor tus datos y comunicar información.

GitHub Copilot Chat puede ayudarte a crear diagramas de Mermaid para visualizar datos, lo que facilita la comprensión y la comunicación de la información. Puedes pedirle a Copilot Chat que genere diagramas basados en datos o código, y te proporcionará el código necesario para crear esos diagramas.

Escenario de ejemplo

Quieres crear un diagrama de Gantt para visualizar la escala de tiempo de un proyecto. Puedes pedirle a Copilot Chat que generen el código de Mermaid para el diagrama de Gantt, con detalles específicos sobre las fases del proyecto y sus duraciones. Después, puedes usar este código en cualquier archivo Markdown que admita la sintaxis Mermaid, como incidencias, debates o solicitudes de cambios en GitHub.

Ejemplos de indicaciones

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.

Respuesta de ejemplo

Nota:

La respuesta siguiente es un ejemplo. Las respuestas de no son deterministas, por lo que puedes obtener una respuesta diferente a la aquí mostrada.

Copilot te proporcionará el código Mermaid para crear el diagrama de flujo. Puedes copiar el código que proporciona Copilot Chat y pegarlo en cualquier lugar de GitHub que admita Markdown, como una incidencia o un debate.

Asegúrate de incluir la sintaxis de Mermaid correcta de ```mermaid antes y ``` después del bloque de código para representar el diagrama correctamente.

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

Este código Mermaid generaría el siguiente diagrama:

Captura de pantalla de un diagrama de Gantt de Mermaid representado.

Información adicional