This article is part of our build-in-public series on Semaphore Backstage, where we share how we’re designing and building our new open-source CD workflows feature, Canvas.
From YAML to Canvas: A New Way to Ship Software
CI/CD pipelines are essential to build and test your software. But complexity is always increasing, and once your app spans multiple services, environments, and approval steps, your deployment logic can get hard to reason about.
That’s the challenge Canvas solves.
Semaphore Canvas is a new visual way to design, track, and automate your deployments across clouds, environments, and teams. It’s a live, interactive diagram of your delivery workflow.
It builds on top of your existing Semaphore pipelines, giving you a new layer to manage:
- Complex multi-stage rollouts
- Queued versions with manual or automatic approvals
- Dynamic promotion paths
- Run and failure history per environment
Whether you’re deploying nightly RCs or promoting releases from staging to prod, Canvas helps you ship with confidence and visibility. It’s the bridge between developer automation and human decisions.
Why We’re Building a Visual Deployment Designer
Developers already use Semaphore to define CI/CD workflows in YAML. But when your software grows across services and environments, reasoning about your delivery logic in code alone becomes limiting. You end up with interdependent pipelines, environment-specific rules, manual approvals, rollback logic, and more.
We wanted to make this complexity visible and manageable. That’s what Canvas is for.
Canvas lets you:
- Model your deployments visually
- Chain stages together based on events
- Add manual approvals and conditions
- Track runs and queue history
- Understand which version is where
As always, you’re still setting up jobs and pipelines with the visual editor. But now, you can orchestrate them using a visual interface that mirrors how your team thinks about environments and release flows.
Want to deploy to QA, then trigger staging and production only when tests pass? Want to auto-clean test environments after three hours? Want to roll back a release candidate that failed validation in AWS but passed on GCP?
With Canvas, you can.
Managing Real-World Deployments — Queues, Approvals, and Rollbacks
We designed Canvas to reflect how teams ship software — iteratively, carefully, and often across many clouds.
Let’s say you’re releasing RC versions of your app. With Canvas, you can model a testing flow like this:
- A new GitHub release triggers a deployment to a DigitalOcean test instance
- The version enters the queue and waits for your manual approval
- You test the deployment manually
- Once you’re satisfied, you approve it for Google Cloud and AWS
- If something breaks, you can reject, rerun, or rollback the queued item
Each environment becomes a stage. Each version that flows through it is a queued item. And Canvas lets you manage it all visually.
More advanced use cases are supported too:
- Selective deployments — Skip RC versions and only promote stable builds
- Parallel targets — Fan out from a single stage to deploy to multiple cloud targets
- Approval chains — Add manual gates, per-stage conditions, or fallback paths
- Timeout logic — Auto-delete test clusters three hours after creation
And Canvas keeps your audit trail clean: every run, every approval, and every rejection is tracked and timestamped.
Building Canvas in Public with React Flow and AI Prototyping
We’re not just building Canvas — we’re building it in public.
To prototype the UI, we skipped the usual wireframing tools. Instead, we paired up with AI and started coding directly with React Flow, a powerful graph visualization library for React.
We used an AI programming assistant to:
- Scaffold the project structure
- Create reusable node types (e.g. stages, event sources)
- Add interaction logic and state management
- Style nodes, edges, and queues based on state (e.g. running, failed, approved)
- Implement interactive sidebars with run history, current status, and queue items
The result? A living prototype — where we could click, test, and explore real deployment logic.
This helped us:
- Move fast without boilerplate
- Iterate on real feedback from our team
- Share progress during internal demos
- Avoid building the wrong thing early on
It also gave us confidence that the final UI would feel intuitive for developers, not like a bolt-on abstraction.
Looking Ahead
Canvas is already changing how we reason about deployments — and we’re just getting started.
If you want to follow our progress:
- Subscribe to the https://www.youtube.com/@SemaphoreBackstage
- Watch us build features in real time
- Share your feedback — we’d love to hear how you’d use Canvas
The post Introducing Semaphore Canvas: Visual Workflow Automation for Deployments appeared first on Semaphore.
