zoetrope Skill：将 Claude Code 会话实时画成流程图的可视化神器

Skill超级捕获手 技术创作者 2026-09-03 12 阅读

zoetrope 是一个将 Claude Code 会话实时绘制成交互式流程图的 Rust 工具——把主 agent、子 agent、工作流分支和每个工具调用节点在终端或浏览器里以可视化节点图的方式呈现，跑完还能按原始时间戳回放「时间旅行」。它解决的是 Claude Code 用户长期缺少会话可观测性的痛点：想知道 agent 到底在做什么、卡在哪里、子任务怎么分解，只能靠读日志或靠脑补。zoetrope 把黑箱变成了透明画布，8 月 18 日开源后迅速在 Twitter/X 上被开发者刷屏，8 月末登上 Trendshift 每日和每周 trending 榜。

功能与原则

核心功能是读取 Claude Code 本地生成的 JSONL 转录文件（~/.claude/projects/ 下的会话记录），将其解析为节点图后在终端渲染或浏览器里展示。具体能力包括：

  • 实时跟随：指向正在运行的会话文件，图形随新事件追加实时生长
  • 时间旅行回放：指向已完成的会话，按原始时间戳匀速或快进回放，可暂停、跳转、倒带
  • 节点展开：每个 agent 节点显示状态、当前工具、工具调用次数、输出 token
  • 工具调用 chip：每个工具显示为节点下方的 chip（⚒ bash ×5，或 ⚒ bash 0.5s 正在执行中），完成后变为 ✓ 或 ✗
  • minimap 导航：会话图超出屏幕时，右下角 minimap 显示视口位置
  • 会话审查：点击任意 agent 节点查看派生它的 prompt、reasoning 过程、模型信息和每个工具调用的耗时
  • 纯本地、零网络：依赖树里无 HTTP 客户端，tokio 引入时禁用了 net 功能，浏览器版是 WebAssembly 编译，不上传任何数据

设计原则：事实优先于启发式——所有节点命名、完成状态、血缘关系均来自 JSONL 格式的实际记录字段，而非字符串猜测；图结构不会在渲染过程中重新排列，保证历史可回溯。

认可度

  • GitHub Stars：772（截至 2026-09-03），Forks: 45
  • 创建时间：2026-08-18，开源约 16 天
  • 最后一次 commit：2026-09-01，仍在活跃维护
  • 登上 Trendshift 每日和每周 trending 榜（JavaScript 分类）
  • 被多家 AI 开发者社区（X/Twitter、Mastodon）开发者主动传播，Twitter 上相关推文最高 500+ likes

链接

GitHub：https://github.com/furkankly/zoetrope

在线体验（无需安装）：https://zoetrope.furkankly.dev/app（浏览器版，直接拖入 JSONL 文件即出图）

原作者

Furkan Kalaycioglu（GitHub @furkankly），独立开发者。zoetrope 是他继 rataflow（流程引擎）之后的第二个开源项目，核心技术栈为 Rust + ratatui（终端 UI 库）+ ratzilla（WebAssembly 渲染层）。

介绍

Claude Code 每次会话都会在本地写入 JSONL 格式的转录文件——包含主 agent 的每次 prompt、子 agent 的派生记录、每个工具的调用和返回结果。这些数据在磁盘上沉睡，用户想理解 agent 到底做了什么只能一行行读日志或靠猜测。

zoetrope 把这些 JSONL 记录读出来，用 Rust 编写的渲染引擎画成一张可交互的节点图。主 agent 是根节点，每个子 agent、工作流组作为子节点，工具调用以 chip 形式挂在所属节点下方，边的动态动画表示 agent 正在工作，完成后边自动沉淀。整体界面在终端里靠 ratatui 渲染，在浏览器里靠 WebAssembly，同一个渲染核心。

这个工具的出现填补了 AI coding agent 生态里「会话可观测性」的空白。之前开发者想复盘一次 Claude Code 的工作过程，只能靠终端的滚动输出或事后读日志。zoetrope 把这个过程变成了可视图，并且支持时间维度的导航——回放时拖动进度条，可以看到 agent 在任意时刻的完整状态：agent 会「未完成」、工具计数会回退、图会缩小。

特点

  • 纯 Rust 实现，无外部依赖：无 HTTP 客户端，tokio 引入时禁用 net，依赖树可验证干净，适合对安全敏感的团队
  • 终端 + 浏览器双前端：同一个渲染核心编译为原生 TUI 和 WASM，开发者无需安装也能在浏览器里使用
  • 零安装体验：浏览器版直接访问 zoetrope.furkankly.dev/app，拖入 JSONL 文件即可生成图形
  • 时间旅行能力：事件驱动的 timeline，而非时钟驱动——忙碌的一分钟会获得更多空间，不会被压缩成细线
  • minimap 全局导航：会话图规模大时，右下角 minimap 显示当前视口位置，可快速跳转

使用方法

安装

Homebrew（macOS / Linux）：

brew install furkankly/tap/zoetrope

Cargo（需要 Rust 工具链）：

cargo install zoetrope

预编译二进制（macOS / Linux / Windows）：

# 从 GitHub Releases 下载对应平台压缩包
# 解压后将 zoe 加入 PATH 即可

构建源码：

git clone https://github.com/furkankly/zoetrope
cd zoetrope
cargo build --release
./target/release/zoe

基本调用

zoe                      # 跟随当前项目的 live session
zoe <dir>               # 跟随指定项目的 session
zoe <file.jsonl>        # 回放已完成的 session
zoe <file.jsonl> --follow   # 在 live edge 处打开
zoe <file.jsonl> --speed 4  # 播放速度（默认 8x）
zoe inspect <file.jsonl>     # 无头模式：打印完整会话树并退出

终端内控制：scrub（拖动）、follow（跟随）、pause（暂停）、jump back to live（跳回实时边缘）。

使用场景与人群

适用场景：
– AI coding agent（Claude Code、Codex CLI 等）的开发调试和复盘
– 团队 code review 流程中展示 agent 工作过程
– 教学场景：展示 agent 如何分解任务、调用工具
– 性能分析：查看每个工具调用的耗时

目标用户：
– 日常使用 Claude Code 的软件工程师
– AI coding agent 框架开发者
– 需要向非技术人员解释 AI 编程工具行为的团队负责人
– 研究 agent 行为模式的研究者

输入与输出案例

输入： 运行 zoe /path/to/session.jsonl --speed 8 并拖动 timeline 到某个时间点

输出： 终端渲染出节点图，显示：

  • 根节点：main（idle，⚒ bash ×12，⚒ read ×3，✓）
  • 子节点：subagent-1（completed，⚒ bash ×7，⚒ write ×2，✓）
  • 子节点：subagent-2（working，⚒ bash ×2，当前 ⚒ bash 0.3s）
  • 节点间有向边，活跃中 animating，已完成 solid
  • 右侧 minimap 显示视口在图中的位置

输入： zoe inspect session.jsonl

输出： 纯文本树状结构，无 TUI 环境也可获取完整会话信息，适合 CI 集成或日志导出：

main
├── ⚒ bash (grep -r "TODO" src/) 0.12s ✓
├── ⚒ read (src/utils.rs) ✓
├── subagent-1
│   ├── ⚒ bash (cargo test) 4.2s ✓
│   └── ⚒ write (tests/utils_test.rs) 0.3s ✓
└── subagent-2
    └── ⚒ bash (rustfmt) running...

GitHub: https://github.com/furkankly/zoetrope

评论区

0 条评论

登录后可评论。

Skill超级捕获手 12 阅读