如何快速上手 fireworks-tech-graph：Codex 与 Claude Code 双端安装部署 5 分钟完整教程

如何快速上手 fireworks-tech-graphCodex 与 Claude Code 双端安装部署 5 分钟完整教程【免费下载链接】fireworks-tech-graphGenerate production-quality SVGPNG technical diagrams from natural language. 7 styles, UML support, and AI/Agent workflow patterns.项目地址: https://gitcode.com/gh_mirrors/fi/fireworks-tech-graphfireworks-tech-graph 是一个开源 AI Agent Skill用一句自然语言描述系统即可生成经过几何校验的生产级 SVG 技术图并自动导出 1920px 高清 PNG内置 12 种视觉风格、14 种 UML 图型和 AI/Agent 领域绘图模式且同一份技能文件同时兼容 Codex 与 Claude Code。本文将带你用 5 分钟完成双端安装部署、验证与首次出图零画图基础也能直接上手。一、安装前 1 分钟认知它能帮你做什么 传统画架构图要打开绘图工具逐个拖框拉线而 fireworks-tech-graph 把这件事变成了一次对话️自然语言输入说画一个 RAG 流水线流程图直接得到矢量图12 种视觉风格从扁平图标到暗色终端、玻璃拟态、蓝图工程风一句话切换✅自动质检闭环XML 结构、箭头走线、标签避让全部由脚本校验输出即交付质量双端兼容Codex 和 Claude Code 使用同一套 SKILL.md装一次思路两端通用。下面是它生成的一张默认风格Style 1 · Flat IconMem0 记忆架构示例图可以直观感受成品效果二、环境准备确认 3 个前置条件项目要求说明Python3.9渲染与校验脚本运行所需cairosvg推荐安装一行命令python3 -m pip install cairosvgNode.js可选18仅用于 Puppeteer 高保真导出与 GIF 动效 系统支持 macOS、Linux、WSL 与 Git Bash原生 Windows 请将~换成%USERPROFILE%对应路径。如果只需要静态 SVG/PNG装好 Python cairosvg 就足够开工其余按需补充即可。三、5 分钟安装步骤双端任选1️⃣ 为 Codex 安装约 2 分钟mkdir -p ~/.agents/skills git clone https://gitcode.com/gh_mirrors/fi/fireworks-tech-graph.git ~/.agents/skills/fireworks-tech-graphCodex 会从~/.agents/skills目录发现个人技能并读取仓库内 agents/openai.yaml 中的可选 UI 元数据。2️⃣ 为 Claude Code 安装约 2 分钟mkdir -p ~/.claude/skills git clone https://gitcode.com/gh_mirrors/fi/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graphClaude Code 从~/.claude/skills发现技能并自动忽略 Codex 专属的元数据文件两端互不干扰。3️⃣ 进阶一份仓库双端共享推荐长期维护只想维护一份代码、两端同时生效时可以克隆到共享目录再建软链接mkdir -p ~/.local/share/agent-skills ~/.agents/skills ~/.claude/skills git clone https://gitcode.com/gh_mirrors/fi/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这样 SKILL.md、参考文档、脚本与模板在两个 Agent 间完全一致。4️⃣ 最后一步重启运行时 ⚠️首次安装后必须重启 Codex 和 Claude Code两端才会发现新技能。后续更新只需一条命令git -C ~/.agents/skills/fireworks-tech-graph pull或对你实际安装的那份 checkout 执行pull。SKILL.md的修改会自动生效脚本或参考文档变更后建议再重启一次运行时。四、安装验证3 步确认技能就位 安装完成后用统一 CLI 快速自检。以 Codex 端为例Claude Code 端把SKILL_ROOT换成~/.claude/skills/fireworks-tech-graph即可SKILL_ROOT$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第 ① 步能正常打印各依赖状态说明环境就绪第 ② 步输出校验通过说明 scripts/fireworks.py 与数据契约工作正常想批量回归测试可运行 scripts/validate-svg.sh 或完整测试集 tests/ 中的兼容性用例。五、首次出图3 句提示词跑通全流程 ✍️技能就位后直接用自然语言下达指令即可触发generate diagram、draw diagram、生成 GIF等短语都会自动命中① 画一张架构图并指定风格Draw a microservices architecture diagram, style 2 (dark terminal)效果示例Style 2 · Dark Terminal非常适合深色主题的文档与博客② 画一张系统分层架构图Generate a system architecture diagram, style 6 (Claude official)效果示例Style 6 · Claude Official暖色米白底适合正式文档③ 让图动起来让这张图动起来对已生成的语义 SVG 可导出 960px、5.75 秒的动效 GIF需提前安装 FFmpeg动效细节见 references/motion-effects.md。 不确定风格选哪个参考 references/style-diagram-matrix.md 中的风格-场景对照表12 种风格的色板与图案规范都在 references/ 目录中。六、常见问题快速排查 ️症状原因解决办法PNG 未生成渲染器未安装python3 -m pip install cairosvg推荐PNG 空白或全黑SVG 中引用了外部字体移除import改用系统字体栈PNG 缺边框/文字使用了 rsvg-convert 渲染 CSS换用 cairosvg详见 references/png-export.mdAgent 找不到技能安装后未重启重启 Codex / Claude Code图底部被截断viewBox 高度不够增大viewBox的 height小结5 分钟回顾环境Python 3.9 与 cairosvg可选 Node.js安装clone 到~/.agents/skills或~/.claude/skills双端可共享一份 checkout重启运行时运行fireworks.py doctor验证出图一句自然语言 风格编号SVG 与 PNG 即刻到手。想继续深入推荐阅读以下资料技能主文件SKILL.md图型、布局规则与形状语义字典中文文档README.zh.md能力清单docs/CAPABILITIES.md完整示例与交互 HTMLexamples/interactive-architecture.htmlnpx 镜像目录skills/fireworks-tech-graph/【免费下载链接】fireworks-tech-graphGenerate production-quality SVGPNG technical diagrams from natural language. 7 styles, UML support, and AI/Agent workflow patterns.项目地址: https://gitcode.com/gh_mirrors/fi/fireworks-tech-graph创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考