项目预览
项目数据
项目介绍
Star 增长趋势
本站每日记录该项目 GitHub 星标变化,观测越久曲线越完整
数据来源:GitHub API 逐日快照 · 收录于 2026-09-22 · 当前星标 ★ 11952
技术标签
使用教程
环境要求
- Node.js 与 npx 可用,用于运行 skills CLI
- Python 3,用于运行 fireworks.py 脚本
- 已安装 Codex 或 Claude Code 之一
- 可选:PNG/GIF 导出依赖,可用 doctor 检查
安装与启动步骤
-
1确认运行环境
确保本机已安装 Codex 或 Claude Code,并且 Node.js、npx、python3 命令可用。
-
2安装完整技能
用官方推荐的 skills CLI 安装到 Codex 和 Claude Code 全局技能目录,必须带末尾路径段。
npx -y skills@1.5.17 add yizhiyanhua-ai/fireworks-tech-graph/skills/fireworks-tech-graph --agent codex claude-code -g -y --copy -
3设置技能根目录
把 SKILL_ROOT 指向安装后的技能目录,例如 Codex 的全局路径,然后运行 version 验证。
export SKILL_ROOT=~/.agents/skills/fireworks-tech-graph python3 "$SKILL_ROOT/scripts/fireworks.py" version -
4检查可选依赖
运行 doctor 区分 SVG/HTML 基础支持与可选 PNG/GIF 依赖,便于判断能否导出位图。
python3 "$SKILL_ROOT/scripts/fireworks.py" doctor -
5在 Agent 中出图
在 Codex 或 Claude Code 对话中输入自然语言描述,例如生成 RAG 流程图或 Agentic Search 架构图。
-
6导出 PNG
把已生成的 SVG 导出为指定宽度的 PNG,便于文档分享与版本化。
python3 "$SKILL_ROOT/scripts/fireworks.py" export-png diagram.svg diagram.png --width 1920
关键配置
| 配置项 | 必填 | 说明 | 示例 |
|---|---|---|---|
SKILL_ROOT | 是 | 指向安装后的技能根目录,用于运行 fireworks.py 脚本 | ~/.agents/skills/fireworks-tech-graph |
text_policy | 否 | 设为 strict 可在输出写入前拒绝可见文本截断 | strict |
--agent | 是 | 安装时指定目标 Agent 运行时,可同时装 Codex 和 Claude Code | codex claude-code |
--width | 否 | export-png 导出的 PNG 宽度像素值 | 1920 |
如何确认成功
运行 version 能报告包、Skill root 与 Git 状态;检查 ~/.agents/skills 和 ~/.claude/skills 下技能目录存在。
常见问题
Q:安装后 Agent 找不到技能怎么办?
A:确认安装路径包含 /skills/fireworks-tech-graph 末段,并检查 ~/.agents/skills 与 ~/.claude/skills 目录。
Q:PNG 导出失败怎么办?
A:运行 doctor 检查可选 PNG/GIF 依赖;也可用浏览器 PNG 导出器保证 Chromium 保真。
Q:支持中文描述吗?
A:支持,中文描述会使用可用第二行;可加 "text_policy": "strict" 拒绝可见截断。
Q:如何导出 PNG 图?
A:使用 export-png 命令,指定输入 SVG、输出 PNG 和 --width 宽度值。
Q:为什么必须写完整的嵌套技能路径?
A:裸仓库安装可能只选中根 SKILL.md,带 /skills/fireworks-tech-graph 才能装完整技能。
注意事项
- 安装命令末段 /skills/fireworks-tech-graph 不能省略,否则可能只装根 SKILL.md。
- 同时为 Codex 和 Claude Code 安装会创建两份完整副本,包含脚本、模板、测试等。
- PNG/GIF 属于可选依赖,doctor 可区分基础 SVG/HTML 支持与位图导出能力。
- 中文描述使用可用第二行;设 text_policy 为 strict 可在输出前拒绝截断。
核心亮点
- 自然语言直接出图,省去手工拖拽排版
- 输出矢量 SVG 加 PNG,缩放不糊、便于嵌入文档
- 内置 7 种风格与 AI/Agent 工作流、UML 模板,覆盖面广
不足之处
- 复杂或高度定制的图形仍需人工调整
- 生成质量依赖描述清晰度,模糊需求易返工
适用场景
- 写技术方案或 RFC 时快速配架构图
- 梳理多智能体/工具调用链路并出流程图
- 把图表生成接入文档或 CI 流水线自动更新
替代项目
Mermaid、PlantUML
上一篇:Libraries.dev
下一篇:boardui
同类项目推荐
sd-ppp
开源
在 Photoshop 里直接调用 AI 画图,不用切换软件
A Photoshop AI plugin
elm-canvas
开源
用 Elm 纯函数式语法轻松绘制 Canvas 图形,告别命令式代码
A canvas drawing library for Elm
intent
开源
把设计方法论装进 AI agent,按体验设计流程出方案
Design with Intent: A collection of specialized AI agents and skills for experience ···
GenerativeArt
开源
用代码生成无限视觉图案,零基础也能玩转生成艺术。
svg.py
开源
用 Python 代码轻松生成矢量图,告别手写 SVG
Type-safe and powerful Python library to generate SVG files
impeccable
开源
让 AI 写界面自带设计师审美,少返工
The design vocabulary for your coding agent. Steer with polish and bolder, review wi···
q5.js
开源
用 WebGPU 轻松画交互艺术,小白也能秒上手
Beginner friendly graphics powered by WebGPU, optimized for interactive art!
ai-design-check
开源
给 AI 写的界面做设计体检,零依赖直接跑
Design rules and a zero-dependency checker for interfaces built with AI coding agent···
design.how
开源
给 AI 编码代理装上统一设计系统
Design systems, skills and visuals for coding agents
