Skill Flow Visualizer

Skill Flow Visualizer is a Codex/agent Skill for turning another Skill into an execution map: how the agent decides to trigger it, what files it reads, which branches it takes, what safety gates apply, how validation happens, and what final output should be produced.

It is meant for people who maintain reusable agent Skills and want to make hidden agent behavior visible before changing the workflow.

What It Does

• Visualizes a target SKILL.md as a Mermaid flowchart.
• Extracts trigger rules, inputs, workflow steps, resource reads, decision points, validation, and output contracts.
• Separates explicit instructions from inferred agent behavior.
• Flags safety gates such as writes, network access, credentials, publishing, uploads, SSH, database, and WordPress/admin actions.
• Supports a safe adjustment workflow: propose changes first, explain impact and version bump, then edit only after confirmation.

Why This Exists

Most agent Skills are written as instructions, but the real execution path is often hard to see. This Skill helps answer:

• "What will the agent do from user request to final output?"
• "Which files or references will be loaded, and when?"
• "Where are the risky actions or required confirmations?"
• "What should a successful run produce?"
• "If I change this step, what part of the workflow is affected?"

Install

Copy the Skill folder into your local Skills directory:

cp -R skill-flow-visualizer ~/.codex/skills/skill-flow-visualizer

Then ask Codex to use it:

Use skill-flow-visualizer to visualize ~/.codex/skills/imagegen/SKILL.md.
Show the Mermaid flowchart, resource map, safety gates, and final-output contract.
Do not modify the target Skill.

Example Prompt

Use skill-flow-visualizer to inspect product-image-pipeline.
Visualize the full agent path from trigger to final output.
Mark explicit vs inferred steps.
List every referenced file that may be read.
Suggest workflow improvements, but do not edit anything yet.

Interactive Prototype

An optional draggable browser prototype is included at:

examples/interactive-ui/index.html

Open it locally in a browser, or serve it with:

cd examples/interactive-ui
python3 -m http.server 4177 --bind 127.0.0.1

Then open:

http://127.0.0.1:4177/

The prototype lets you drag nodes, pan/zoom, edit labels, create links, and export Mermaid or JSON.

中文简介

skill-flow-visualizer 是一个用来可视化其它 Skill 执行流程的 Agent Skill。它会读取目标 SKILL.md，把 agent 从触发、读取资源、分支判断、执行动作、风险确认、校验到最终产出的全过程整理成流程图和步骤表。

它适合用来维护复杂 Skill：先把流程看清楚，再决定要不要调整。需要修改目标 Skill 时，它会先输出修改建议、影响范围和版本变化，等用户确认后再动手。

Repository Layout

skill-flow-visualizer/
  SKILL.md
examples/
  interactive-ui/
    index.html

Status

Draft v0.1.0.

License

MIT.