fireworks-tech-graph：从自然语言生成生产级技术图表

Installation Recommended: install the complete skill for both runtimes Use the real nested skill path. The final /skills/fireworks-tech-graph segment is required because a bare repository install can select only the root SKILL.md in current versions of skills CLI.

npx -y [email protected] add \

yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph \ --agent codex claude-code -g -y --copy This creates complete copies at ~/.agents/skills/fireworks-tech-graph for Codex and ~/.

claude/skills/fireworks-tech-graph for Claude Code, including scripts, schemas, fixtures, templates, tests, references, and metadata. Editable Git checkout for Codex

mkdir -p ~ /.agents/skills

git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~ /.agents/skills/fireworks-tech-graph

Codex discovers personal skills from ~/.agents/skills and reads the optional agents/openai.yaml metadata included in this repository. Editable Git checkout for Claude Code

mkdir -p ~ /.claude/skills

git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~ /.claude/skills/fireworks-tech-graph

Claude Code discovers personal skills from ~/.claude/skills and ignores the Codex-only UI metadata. One editable checkout shared by Codex and Claude Code For a fresh install with Claude Code 2.1.

203 or newer, keep one checkout and link both discovery paths to it. Move any existing destinations aside before creating the links.

mkdir -p ~ /.local/share/agent-skills ~ /.agents/skills ~ /.claude/skills

git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~ /.local/share/agent-skills/fireworks-tech-graph

ln -s ~ /.local/share/agent-skills/fireworks-tech-graph ~ /.agents/skills/fireworks-tech-graph ln -s ~ /.local/share/agent-skills/fireworks-tech-graph ~ /.claude/skills/fireworks-tech-graph This keeps SKILL.

md , references, scripts, templates, and future updates identical in both agents. The npm registry is a separate distribution channel and may lag GitHub Releases.

For the current Skill version, use the nested GitHub path above; the npm page remains available for package metadata: https://www.npmjs.com/package/@yizhiyanhua-ai/fireworks-tech-graph Update For a skills CLI copy, rerun the recommended nested-path command.

For Git installations, update whichever checkout you installed:

git -C ~ /.agents/skills/fireworks-tech-graph pull

or

git -C ~ /.claude/skills/fireworks-tech-graph pull

or, for the shared checkout

git -C ~ /.local/share/agent-skills/fireworks-tech-graph pull

After the first install, restart Codex and Claude Code so both discover the skill. Later SKILL.md edits are detected automatically; restart the runtime after changing bundled scripts or references if the update is not visible.

The shell commands above target macOS, Linux, WSL, and Git Bash. On native Windows, use the equivalent %USERPROFILE%\.agents\skills and %USERPROFILE%\.claude\skills paths. Python 3.9+ is required; the optional Puppeteer path requires Node.js 18+.

Unified CLI SKILL_ROOT= " ${CLAUDE_SKILL_DIR :- $HOME / .agents / skills / fireworks-tech-graph} "

python3 " $SKILL_ROOT /scripts/fireworks.py " doctor

python3 " $SKILL_ROOT /scripts/fireworks.py " validate architecture " $SKILL_ROOT /fixtures/api-flow-style7.json "

python3 " $SKILL_ROOT /scripts/fireworks.py " render architecture " $SKILL_ROOT /fixtures/api-flow-style7.json " diagram.svg --report layout.json

python3 " $SKILL_ROOT /scripts/fireworks.py " check diagram.svg

python3 " $SKILL_ROOT /scripts/fireworks.py " export-html diagram.svg diagram.html --title " Agent Runtime Architecture "

python3 " $SKILL_ROOT /scripts/fireworks.py " animate diagram.svg diagram.gif

The HTML export is one offline file. It sanitizes the SVG, adds pan/zoom/reset, light and dark themes, SVG source copy, and SVG/PNG/JPEG/WebP downloads at 1×–4×. For motion, say “Generate a GIF” , “Animate this diagram” , 生成 GIF , 制作 GIF , or 让这张图动起来 .

The command accepts a generated semantic SVG that carries one of the twelve approved motion contracts.

Exact source bytes are not pinned, so validated title and content variants of a supported topology work; missing or changed role/stage/order coverage, route direction, required colors, or geometry fails closed.

GIF is the only motion media format, and the default command also writes <output>.motion.json as its verification report. The approved default is 960px, 5.75 seconds, 20fps, and 115 frame-center samples.

All twelve scenes start connector-free, draw routes on frames 1–36, fade live flow on 36–38, hold full settled flow on 38–109, and reset on 110–114.

Their approved identities include the packet heads, terminal evidence trace, Blueprint registration beads, 14×10 Notion memory cards, and the eight scene-specific signatures listed below.

Default packages report both the style contract and shared +2s-settled-flow timing revision as user-approved . Timelines of 75 frames or fewer remain all-unique.

Longer timelines allow non-adjacent repeated rasters inside the full-opacity interval; frame 110 is the sole boundary exception because its unchanged reset opacity is exactly 1.00, and such evidence is classified as intentional_reset_boundary_repeat .

Frames 111–114 remain globally distinct. Long timelines require at least 75 unique rasters and forbid adjacent duplicates.

The all-style 75-vs-115 gate counts binary-exact and decoded-RGBA-exact frames separately; compositor-only fallback is accepted only at AE ≤ 128, normalized RMSE ≤ 0.001, with components no thicker than 2px and confined to edge or node borders.

DOM and signature geometry remain strict-exact. Explicit 3.75s/75-frame and 2.75s/55-frame calls remain supported. See Focused SVG-to-GIF Motion .

Style Preset Live signature 5 agent-orchestration glass task capsule + coordinator halo 6 governed-runtime governance thread + policy seal 7 token-stream API rail + three-cell token train 8 golden-circuit luxury circuit rail + gem tracer 9 review-trace review rail + moving review cursor 10 cloud-flow region chevrons + replication capsule 11 event-transit event train + exception/projection cars 12 ops-pulse ECG/export heads + trace reveal + waterfall scanner Requirements The bundled SVG/PNG scripts require cairosvg (recommended) or rsvg-convert .

Optional SVG-to-GIF export requires FFmpeg/FFprobe, Chrome/Chromium, and puppeteer or puppeteer-core .

Recommended: cairosvg (best CSS support)

python3 -m pip install cairosvg

Fallback: rsvg-convert (system package; may drop CSS / <foreignObject>)

brew install librsvg # macOS

sudo apt install librsvg2-bin # Ubuntu/Debian

Optional semantic motion export. Install beside every copied Skill because the

renderer intentionally does not load modules from the caller's directory.

brew install ffmpeg # macOS; use your system package manager elsewhere

for SKILL_ROOT in \ " $HOME /.agents/skills/fireworks-tech-graph " \ " $HOME /.claude/skills/fireworks-tech-graph " do [ -d " $SKILL_ROOT " ] || continue

npm install --prefix " $SKILL_ROOT " --ignore-scripts --no-save --package-lock=false [email protected]

python3 " $SKILL_ROOT /scripts/fireworks.py " doctor

done

Verify either supported script renderer

python3 -c " import cairosvg; print(cairosvg.__version__) "

rsvg-convert --version