Flowpiler — Design skill for Claude Code
A visual editor for Claude Code workflows.
How to install Flowpiler
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open yuchi-chang/flowpiler and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Flowpiler does
A visual editor for Claude Code workflows. Drag nodes onto a canvas, wire them together, and Flowpiler compiles the graph into a ready-to-run workflow.js — and parses your existing workflow.js back into a graph. Test it with mocked agents for free, then run it for real and watch every subagent light up live.
Alternatives in Design
- Canvas Design — Create beautiful visual art in PNG and PDF documents using design philosophy 94.1k ★
- Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
- Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
README
Flowpiler
**A visual editor for Claude Code workflows.** Drag nodes onto a canvas, wire them together, and Flowpiler compiles the graph into a ready-to-run `workflow.js` — and parses your existing `workflow.js` back into a graph. Test it with mocked agents for free, then run it for real and watch every subagent light up live.
Think *Pentaho Kettle, but for Claude workflows* — a node-graph front end for the imperative script the `Workflow` tool expects.
What Flowpiler is — and what it isn't
Flowpiler is a **visual compiler for a control-flow language**, not an integration platform. That distinction matters when you compare it to anything else:
| Flowpiler | iPaaS tools (n8n, Node-RED, Zapier) | |
|---|---|---|
| What a node is | a control-flow primitive — parallel, pipeline, while, if, agent |
a connector to one SaaS API — Slack, Postgres, Stripe |
| How you extend it | write a prompt; the agent uses every tool Claude Code has | wait for (or build) a new connector |
| What "node count" means | 11 primitives compose into any control flow | 400+ connectors, one per integration |
| Output | a real workflow.js you own, run, and commit |
a proprietary JSON blob in their runtime |
Counting Flowpiler's **11 node types** against an iPaaS connector catalog is like counting Python's ~35 keywords against Zapier's app directory — different axis. The integration surface of a Flowpiler workflow is whatever the subagents can reach, which is the full Claude Code toolset: the filesystem, shell, MCP servers, and the web.
Flowpiler is deliberately **narrow and deep**: it targets Claude Code's `Workflow` API and compiles to plain JavaScript. That's the design, not a gap in it.
Palette · canvas · inspector + live workflow.js — all three update together.
Ocean
A local-first visual management platform for Claude Code — unified management of agents, skills, command, know
Unity Mockup
Produces a visual mockup for a GitHub issue using the design canvas skill, matching the project's existing vis
Implement Wire
Integration wiring — modify existing files, add script tags, write CSS (Integration phase of /implement)
Canvas To Code Guardrails
Editor-time lint reminders for projects using Canvas-to-Code. Auto-activates when the repo contains .claude-de
CLILoom
CLILoom brings agent harnesses, visual workflows, and real terminals together in one desktop workspace. Quickl
Agent Skill Visualizer
Visual drag-drop workflow builder for Agent skills
Related Agents
Canvas To Code Data Binder
Classifies each visual unit's data source. Decides backend (wire to an existing service) vs mock (emit a JSON
Family Heritage Curator
Specialized ACOS heritage specialist. Curates family tree nodes, parses family source markdown under .frankx/f
Agent Tool Integration Engineer
Use this agent to wire tools and function-calling into an agent loop reliably — clean tool schemas, errors fed
