Visualización CI/CD

Visualizador de GitHub Actions

Visualiza el YAML de flujos de trabajo de GitHub Actions con Mermaid.js. Analiza las dependencias entre trabajos (needs) y las muestra como un diagrama de flujo.

Introduce el YAML del flujo de trabajo

Resultado de la visualización (Mermaid)

graph TD A[Start] --> B[Input YAML] B --> C[Visualize]

Guía

Cómo usarlo y características

Pega tu YAML de GitHub Actions en el cuadro "Introduce el YAML del flujo de trabajo".
Haz clic en el botón "Visualizar" para renderizar el diagrama a la derecha.
Las dependencias entre trabajos (needs) se dibujan como flechas (-->).
Haz clic en "Copiar código Mermaid" para obtener el código y usarlo en el Markdown de GitHub u otras herramientas compatibles con Mermaid.

FAQ

Preguntas frecuentes

¿Puede visualizar flujos de trabajo grandes?

Sí, pero para flujos con muchísimos trabajos (decenas o más), el diagrama puede ser enorme y difícil de leer. En esos casos, considera visualizar partes lógicas más pequeñas.

¿Admite dependencias que no sean "needs"?

Actualmente, la herramienta solo visualiza dependencias a nivel de trabajo definidas por la propiedad "needs". No se visualizan los pasos individuales dentro de los trabajos.

¿Son seguros mis datos YAML?

Totalmente. Todo el procesamiento ocurre localmente en tu navegador. No se envían datos a nuestros servidores, por lo que es seguro para configuraciones privadas o empresariales.

Casos de uso

Usos habituales

Entender las dependencias del flujo de trabajo
Visualiza las conexiones entre trabajos a través de `needs` para comprender intuitivamente el orden de ejecución y los posibles cuellos de botella.
Apoyo en la revisión de Pull Requests (PR)
Visualiza el YAML modificado y comparte el diagrama para ayudar a los revisores a captar rápidamente los cambios en la configuración de los trabajos.
Optimización de la documentación
Genera código Mermaid para insertarlo en READMEs o Wikis de GitHub, manteniendo tus diagramas de flujo de trabajo actualizados sin esfuerzo.

Ejemplos

Ejemplos de entrada y salida

Dependencias básicas entre trabajos

Entrada

jobs:
  build:
    runs-on: ubuntu-latest
  test:
    needs: build
    runs-on: ubuntu-latest
  deploy:
    needs: test
    runs-on: ubuntu-latest

Salida

graph TD
  build
  test
  build --> test
  deploy
  test --> deploy