GitHub Actions Visualizer

Welcome to the YAML Forest

How many lines long is your team’s workflow.yml right now?

Usually, CI/CD starts off so innocent. “Just lint, test, and build!” But then your product grows. Suddenly, someone adds a rule to notify Slack if E2E tests fail. Another person adds a logic bypass for deploying certain branches. Before you know it, you’ve created a 800-line YAML monster.

  build:
    needs: [test-frontend, test-backend, check-format]
  deploy:
    needs: [build, security-scan]

I remember staring blankly at GitHub’s dark mode screen, wondering, “Wait… does the frontend build job actually have to wait for the backend tests to finish?” I was getting lost in code I had written myself. Human brains simply aren’t wired to read deeply nested, interconnected dependency graphs from flat text.

Drawing the Invisible Strings

“I can’t keep this abstract tree in my head anymore. I need to physically see it.”

That frustration was the spark for this visualizer. The concept was simple: you paste your massive YAML file, and some clever JavaScript sneaks in, parses all the needs: parameters, grabs the parent-child relationships, and spits them out into a gorgeously organized flowchart using Mermaid.js.

The most surprisingly fun part to develop was the error handling. YAML is a notoriously cruel language—miss one indentation space, and the whole thing explodes. Instead of just throwing a generic “Parsing Error,” I spent extra time making sure the tool yells at you with exact line numbers so you can actually find the typo.

Nowadays, my team uses this visualizer as a documentation tool to onboard new developers and explain the CI flow. If you ever feel like you’re losing your mind looking at YAML, copy-paste it here. You might be relieved to see your logic actually has a beautiful shape to it.