Skip to main content

Creación de diagramas

GitHub Chat de Copilot puede ayudarle a crear diagramas para comprender mejor los datos y comunicar información.

Copilot Chat de GitHub en GitHub.com puede ayudarte a crear diagramas Mermaid para visualizar datos y facilitar la comprensión y la comunicación de conclusiones. Puede pedir que Chat de Copiloto genere diagramas basados en los datos o el código, y le proporcionará el código necesario para crear esos diagramas.

Escenario de ejemplo

Quiere crear un gráfico de Gantt para visualizar el cronograma de un proyecto. Puede pedirle a Chat de Copiloto en GitHub.com que genere el código Mermaid para el diagrama de Gantt, con detalles concretos de las fases del proyecto y de sus duraciones. A continuación, puede usar este código en cualquier archivo Markdown que admita la sintaxis de Mermaid, como incidencias, discusiones o solicitudes de extracción en GitHub.

Mensaje de ejemplo

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.

Respuesta de ejemplo

Nota:

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

Copilot le proporcionará el código Mermaid para crear el diagrama de flujo. Puede copiar el código Chat de Copiloto y pegarlo en cualquier parte que GitHub admita Markdown, como un problema o discusión.

Asegúrese de incluir la sintaxis correcta de Mermaid con ```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 Mermaid representado.

Lectura adicional