oliver-im

Claude Workflows Viz — Productivity skill for Claude Code

Productivity community

claude-workflows-viz is a Node CLI that converts a Claude Code workflow .js file into a diagram with execution steps and agent topology.

How to install Claude Workflows Viz

This entry records only its repository, not the path inside it, so there is no exact command to give. Open oliver-im/claude-workflows-viz and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Workflows Viz does

claude-workflows-viz is a Node CLI that converts a Claude Code workflow .js file into a diagram with execution steps and agent topology.

Alternatives in Productivity

P7 — PUA P7 骨干模式 — 方案驱动执行 19.5k ★
Performance Optimization Skill — Systematic performance analysis and optimization for RTK CLI tool, focusing on startup time (<10ms), memory us 11.9k ★
Pi Subagents — Claude Code like Sub-Agents & Workflow Orchestration for Pi — parallel execution, live widget, fleet view, cus 967 ★

README

The following is 100% written by a human.

claude-workflows-viz is a Node CLI that converts a Claude Code workflow .js file into a diagram with execution steps and agent topology.

![Anatomy of a claude-workflows-viz diagram — the meta block, phase table, and inferred agent graph, keyed to an Anatomy legend](examples/level-2/review-pr.annotated.png)

Install

npm install -g claude-workflows-viz

# run it without installing
npx claude-workflows-viz

Dynamic workflows - Introduction

Dynamic workflows was introduced by Anthropic in May this year as a way to launch multiple agents in a structured, yet dynamic way. It is structured because unlike [Agent Teams](https://code.claude.com/docs/en/agent-teams), the harness is defined in JavaScript. It is also dynamic, because the file only defines the topology and the execution steps, and delegates implementation details to the main agent. Dynamic workflows are clearly in the direction of the "thin harness" movement, but it also introduced a minimalistic way to define the structure of the harness. Overall it is quite clever, and I encourage you to read the official [docs](https://code.claude.com/docs/en/workflows) and blog [post](https://claude.com/blog/a-harness-for-every-task-dynamic-workflows-in-claude-code) if you haven't already done so.

Dynamic workflows - Need for visualization

Dynamic workflows inherently have a graph formulation within, because it involves multiple agents working together. You can see this in the Claude blog where they visualize the workflow [patterns](https://claude.com/blog/a-harness-for-every-task-dynamic-workflows-in-claude-code), and also in the Bun [blog post](https://bun.com/blog/bun-in-rust) where they visualize via animation. If you work with dynamic workflows, it becomes immediately clear that a visual representation is needed.