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 ★
- Studio — Launch the local design Studio — a live token editor over the latest extraction 3.6k ★
- Canvas — Open, create, or update a visual canvas — add images, text, PDFs, wiki pages, and banana-generated assets to O 3.3k ★
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
DecoupleFlow
DecoupleFlow brings lightweight soft orchestration to your existing agents. Its independent visual state-machi
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
n8n Nodes Claude Code CLI
Run Claude Code inside n8n workflows: automated code review, docs and bug fixes from visual pipelines. Publish
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
PDF Compiler
Compiles {file_prefix}_resume.tex and {file_prefix}_cover_letter.tex into PDFs with local pdflatex when it is
