桌面应用AI 应用【免费下载链接】Easydict一个简洁优雅的词典翻译 macOS App。开箱即用支持离线 OCR 识别支持有道词典 苹果系统词典 苹果系统翻译OpenAIGeminiDeepLGoogleBing腾讯百度阿里小牛彩云和火山翻译。A concise and elegant Dictionary and Translator macOS App for looking up words and translating text.项目地址https://gitcode.com/gh_mirrors/ea/Easydict点击查看免费下载本文基于 fireworks-tech-graph Skill 的scripts/脚本集见 .agents/skills/fireworks-tech-graph/scripts/README.md系统讲解如何用脚本化的方式稳定产出高质量 SVG 技术图表从 XML 语法校验、箭头碰撞检测、语义几何契约检查到模板化 JSON 生成、PNG 导出与 SVG→GIF 语义动效。读完本文你将掌握一整套可在 Codex / Claude Code 工作流中直接复用的「生成—验证—导出—动效」命令管线并理解其背后的源码级实现原理。Fireworks Tech Graph 12 种图表风格总览一、脚本集全景四个核心脚本与统一 CLIscripts/目录是整套 Skill 的可执行层围绕「稳定性和效率」两个目标设计。目录中除本文档外包含以下关键文件完整结构见 目录结构脚本定位核心能力validate-svg.shSVG 验证XML / marker / 碰撞 / 几何 / 构图 / 渲染六类检查generate-diagram.sh图表生成入口参数化驱动验证与 PNG 导出generate-from-template.py模板化生成器按 JSON 数据 风格配置计算并渲染 SVGtest-all-styles.sh批量回归测试覆盖 12 种风格的 fixture 渲染与验证fireworks.py统一 CLIrender/validate/check/inspect/export-png/export-html/animate/doctor/versionmotion.pysvg2gif.js语义动效SVG → 校验 → 逐帧渲染 → GIF 编码与原子报告从源码看validate_svg.py采用纯 Python 标准库实现xml.etree.ElementTree 手写几何计算刻意不引入额外运行时依赖validate_svg.py 文件头注释明确说明这一点这让 Skill 在全新环境安装后即可直接运行验证。而fireworks.py则在脚本之上统一了命令面doctor子命令会一次性探测 Python、cairosvg、rsvg-convert、node、ffmpeg 与动效渲染器是否就绪并输出 JSON 报告fireworks.py。二、validate-svg.sh六道关卡守门 SVG 质量2.1 用法与检查项验证脚本的用法非常直观./validate-svg.sh svg-file脚本set -euo pipefail严格退出逐项打印✓ Pass/✗ Fail任何一项失败都会汇总错误数并以非零码退出。对照 validate-svg.sh 源码实际执行的是六道检查而非文档表面上列出的三项XML 结构与属性语法调用validate_svg.py --check xml使用真正的 XML parser 解析因此top_k5这类带下划线的文本不会被误判为属性同时检查属性转义、、等。marker 引用完整性检查marker-start/marker-mid/marker-end三属性中url(#id)引用的每个 id 是否都有对应的marker定义缺定义即报missing marker: id实现见 validate_svg.py 的marker_references()。箭头与组件碰撞检测这是最复杂的部分。脚本把带 marker 的line/polyline/path视为边把rect/circle/ellipse/polygon视为障碍物逐段做线段-矩形求交。find_collisions()完整支持绝对/相对M/L/H/V/Q/C/S/T路径命令对二次、三次贝塞尔曲线按 12/16 步采样对椭圆弧A命令做了端点到中心参数化的完整换算后采样sample_arc()。语义几何契约geometry仅针对标注了data-graph-role语义角色的元素审计——节点/标签是否越出 viewBox、边是否正交生成器产物强制、边与节点是否相交、边与边是否重叠、交叉处是否有合法 bridge mask 且绘制顺序正确、标签是否与障碍物/其他标签/边相交geometry_check()。构图质量预算composition从 SVG 根节点读取data-quality-profile与data-max-bends-per-edge、data-min-node-gap、data-min-label-clearance等属性构造契约审计每条边的弯折数、总弯折数、路由拉伸、桥接交叉数与标签间距是否超标composition_check()。渲染验证优先探测 Python 环境是否有 cairosvg其次回退到rsvg-convert两者都没有则直接判失败并提示安装命令渲染过程写入临时文件成功后自动清理。2.2 角色标注让启发式让位于显式语义对于启发式难以区分的形状可以在 SVG 元素上显式声明语义角色这是几何与构图检查的重要输入rect>./generate-diagram.sh [OPTIONS]选项含义默认值-t, --type TYPE图表类型必填-s, --style STYLE风格编号1–121-o, --output PATH输出路径当前目录-w, --width WIDTHPNG 宽度像素1920--no-validate跳过验证默认验证-h, --help显示帮助—源码中VALID_TYPES明确定义了 14 种受支持类型architecture |># 生成架构图Style 1 ./generate-diagram.sh -t architecture -s 1 -o ./output/arch.svg # 生成流程图Style 22400px 宽 ./generate-diagram.sh -t flowchart -s 2 -w 2400脚本内部会自动在references/下按style-N-*.md查找对应风格参考文件找不到即报错若 SVG 已存在则先跑validate-svg.sh验证通过再调用fireworks.py export-png按指定宽度导出 PNG。⚠️ 注意SVG 内容本身需要先由 Codex / Claude Code 准备好generate-diagram.sh只负责验证与导出不负责内容创作。脚本运行时会明确打印这一提示。四、generate-from-template.pyJSON 驱动的模板化生成器这是「内容生成」的真正实现者。它早已不是简单地把nodes/arrows塞进模板而是会执行 style guide 中的可计算规则让输出尽量贴近 showcase 样例质量。4.1 命令格式python3 ./generate-from-template.py template-type output-path [data-json]例如python3 ./generate-from-template.py architecture ./output/arch.svg {style:1,title:My Diagram,containers:[],nodes:[],arrows:[]}4.2 JSON 数据契约对照 generate-from-template.py 源码与 mem0-style1.json 真实 fixture可用的核心字段如下字段说明style风格编号1–12或规范风格名Style 9–12 默认分别启用 C4、云部署、事件流、可观测性语义契约semantic_profile可选语义契约如memory-weave、tool-groundingtemplate_type/mode模板类型与模式architecture / memory / agent 等containers[]泳道 / 分组容器支持header_prefix/header_text工程编号式分区标题与side_label左侧 layer labelnodes[].kind语义组件类型double_rect双层矩形、cylinder圆柱/存储、document、terminal、circle_cluster、speech、user_avatar等arrows[].flow语义箭头类型control/write/read/data/async/feedback/neutralFLOW_ALIASES中main/api也归一为controlsource_port/target_port端口锚点left/right/top/bottom驱动正交路由route_points/corridor_x/corridor_y控制复杂图的走线质量如corridor_y: [240]指定走廊 Y 坐标style_overrides对现有 style 做局部覆盖window_controls/meta_*顶部终端 chromeStyle 2 专用红黄绿三圆点与 meta 栏文本blueprint_title_block工程蓝图右下角 title blocklegend/legend_orientation/legend_locked图例配置footer/footer_x/footer_y页脚文本与位置生成器内部为 12 种风格预置了完整的视觉档案STYLE_PROFILES每种风格都定义了字体族、背景色、节点填充/描边/圆角、阴影、标题对齐与字号、箭头宽度与七种 flow 的颜色映射、文字层级色等几十个参数。例如 Style 2 Dark Terminal 使用等宽字体SF Mono, Fira Code, Menlo、背景#0f172aStyle 3 Blueprint 使用#082f49深蓝背景并叠加网格 patternStyle 11 Event Transit 使用#e4475b控制色与 2.8px 加粗箭头。所有marker的大小、refX/refY、箭头多边形形状也按风格差异化生成render_defs()。完整示例Mem0 记忆架构Style 1节选自 mem0-style1.jsonpython3 ./generate-from-template.py memory ./output/mem0.svg { style: 1, title: Mem0 Memory Architecture, containers: [ {x:30,y:90,width:900,height:90,label:Input Layer,header_prefix:01} ], nodes: [ {id:manager,kind:double_rect,x:360,y:220,width:300,height:72,label:Memory Manager}, {id:vector,kind:cylinder,x:90,y:360,width:140,height:110,label:Vector Store} ], arrows: [ {source:manager,target:vector,flow:write,dashed:true} ] }4.3 特殊说明Style 8 不走模板Style 8Dark Luxury是AI 手绘风格AI 读取 style-8-dark-luxury.md 后直接手写 SVGgenerate-from-template.py对其会抛出明确的 ValueError提示加载风格参考后手工创作源码_AI_AUTHORED_STYLES与_AI_AUTHORED_MSG。相应地test-all-styles.sh对 Style 8 使用静态 SVG fixturefixtures/dark-luxury-style8.svg而非 JSON fixture。五、test-all-styles.sh12 风格批量回归测试当需要验证整套风格体系没有回归时直接运行./test-all-styles.sh脚本流程对照 test-all-styles.sh 源码按STYLES(1..12)遍历全部 12 种风格检查对应风格参考文件是否存在扫描fixtures/下所有*.json解析每个 fixture 的style字段与当前风格匹配Style 1–7 与 9–12 从 JSON fixture 生成AI 手绘的 Style 8 使用静态 SVG fixture——任何风格缺少回归 fixture 都会使批测失败对 JSON fixture 调用generate-from-template.py渲染 SVG模板类型取 fixture 内的template_type静态 SVG fixture 则直接复制对每个 SVG 运行validate-svg.sh验证调用fireworks.py export-png导出 1920px 宽 PNG 到test-output/目录文件带_YYYYmmdd_HHMMSS时间戳汇总输出通过/失败统计。测试输出位置可通过环境变量覆盖TEST_OUTPUT_DIR默认test-output/。批量验证失败时会抓取✗|Error|intersects|missing marker关键行缩进打印方便定位问题。六、语义动效SVG → 校验 → 逐帧渲染 → GIF从 v1.2.0 起脚本集支持把「带语义契约的生成器 SVG」转成经过验收的动效 GIF。动效由fireworks.py animate、motion.py与svg2gif.js协作完成输入必须是生成器语义 SVG——携带 12 套已验收 role/stage/order 契约之一精确源文件字节不锁定但任意同风格拓扑不会自动套用动效媒体输出只允许经过验证的 GIF默认还会生成同名.motion.json报告可用--report改路径运行时需要 FFmpeg/FFprobe、Chrome/Chromium以及 Skill 安装位置可解析到的puppeteer或puppeteer-coreNode.js 22.12当前工作目录中的同名模块不会被隐式执行——这是刻意的安全设计。依赖安装与最简命令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-lockfalse puppeteer-core25.3.0 done SKILL_ROOT${CLAUDE_SKILL_DIR:-$HOME/.agents/skills/fireworks-tech-graph} python3 $SKILL_ROOT/scripts/fireworks.py animate diagram.svg diagram.gif6.1 默认时间线与动效契约默认输出自动识别风格5.75 秒、20fps、960px 宽、115 帧、无限循环 GIF帧段划分第 1–36 帧保持既有 draw-on连线按语义顺序绘制第 36–38 帧淡入运行流第 38–109 帧为完整稳定数据流operating hold第 110–114 帧按[1, .7575, .515, .2725, .03]五帧 opacity 系数 reset风格签名Style 1–12 的 signature、速度、路径、几何与构建合同均为user-approved包括persistent-data-flow-head、terminal-evidence-stream、blueprint-registration-bead、14×10notion-memory-card、glass-task-capsule、policy-seal、token-train、gem-tracer、review-cursor、region chevrons、event train 与 ops scanner共享时间修订2s-settled-flow已于 2026-07-17 验收默认新包的review_status为user-approved兼容时间线显式 3.75 秒/75 帧与 2.75 秒/55 帧继续支持。6.2 帧唯一性与 raster 门禁动效质量契约详见 motion-effects.md对帧做了严格约束75 帧及以下要求全部 raster 唯一更长时间线允许非相邻重复出现在 full-opacity 区间frame 110 是 reset opacity 为1.00的唯一例外分类为intentional_reset_boundary_repeatframe 111–114 必须全局不同至少保留 75 个唯一 raster 且相邻重复数为零75-vs-115 gate 分开统计 binary / decoded-RGBA / guarded-antialias 三类guarded 等价要求 AE ≤ 128、normalized RMSE ≤ 0.001、component 宽或高不超过 2px 且只落在 edge/node border而 DOM 与 signature geometry 仍须 strict-exact。七、目录结构与角色标注约定Skill 的完整目录结构如下与 README.md 一致fireworks-tech-graph/ ├── SKILL.md # Skill 主文档 ├── references/ # 风格参考文件 │ ├── style-1-flat-icon.md │ ├── style-2-dark-terminal.md │ └── ... ├── fixtures/ # 回归测试样例JSON │ ├── mem0-style1.json │ ├── tool-call-style2.json │ └── ... ├── scripts/ # 辅助脚本本目录 │ ├── README.md # 本文档 │ ├── validate-svg.sh # SVG 验证 │ ├── generate-diagram.sh # SVG 验证与 PNG 导出 │ ├── generate-from-template.py # 模板化生成 SVG │ ├── motion.py # SVG 转 GIF 校验、编码与原子报告 │ ├── svg2gif.js # Chromium 手动时间轴逐帧渲染 │ └── test-all-styles.sh # 批量测试 └── test-output/ # 测试输出目录自动创建角色标注的补充约定对启发式难以区分的形状可显式添加data-graph-rolenode|container|legend|decoration|label|background。node会强制纳入障碍物检测其余角色会从组件障碍物中排除legend组内的示例箭头也不会被当作业务流。八、依赖安装所有脚本需要至少一个 PNG 渲染器推荐 cairosvgcairosvg推荐——SVG 转 PNGCSS 支持最好python3 -m pip install cairosvgrsvg-convert备选——系统包复杂 SVG 可能丢失 CSS /foreignObjectbrew install librsvg # macOS sudo apt install librsvg2-bin # Ubuntu/Debiangenerate-diagram.sh会优先调用 cairosvg缺失时自动回退到 rsvg-convertvalidate-svg.sh的渲染验证同理。完整对比见 PNG 导出参考其中还说明需要浏览器级像素还原时可用svg2png.js走 Puppeteer Chromium 渲染适合含 CJK/emoji 回退或foreignObject的场景。文本处理仅需 macOS / Linux 自带的grep、sed、awk。九、典型使用场景场景 1验证现有 SVGSKILL_ROOT~/.agents/skills/fireworks-tech-graph # Codex # SKILL_ROOT~/.claude/skills/fireworks-tech-graph # Claude Code $SKILL_ROOT/scripts/validate-svg.sh /path/to/your-diagram.svg场景 2生成并验证图表使用 Codex 或 Claude Code 生成 SVG 内容运行验证和导出SKILL_ROOT~/.agents/skills/fireworks-tech-graph # Codex # SKILL_ROOT~/.claude/skills/fireworks-tech-graph # Claude Code $SKILL_ROOT/scripts/generate-diagram.sh -t architecture -s 1 -o ./output/arch.svg场景 3批量测试所有风格SKILL_ROOT~/.agents/skills/fireworks-tech-graph # Codex # SKILL_ROOT~/.claude/skills/fireworks-tech-graph # Claude Code $SKILL_ROOT/scripts/test-all-styles.sh测试脚本会自动读取fixtures/*.json→ 按template_type style调用generate-from-template.py→ 运行validate-svg.sh→ 导出 PNG 到test-output/。场景 4validator 单元测试python3 -m unittest discover -s tests -p test_validate_svg.py -v测试覆盖 marker 双端引用、文本等号、H/V路径、曲线路径、虚线组件和容器排除等正反例对应 tests/test_validate_svg.py。查看测试输出ls -lh ../test-output/十、故障排除问题找不到 PNG 渲染器解决方案任选其一推荐 cairosvgpython3 -m pip install cairosvg # 推荐 brew install librsvg # macOS 系统包 sudo apt install librsvg2-bin # Ubuntu/Debian问题rsvg-convert 渲染缺框/缺文字原因rsvg-convert 对foreignObject、CSSfilter、复杂style块支持有限。解决方案切换到 cairosvgpython3 -m pip install cairosvg脚本会自动优先使用 cairosvg。如果仍需要像素级还原例如浏览器生成的 SVG按 PNG 导出参考 使用svg2png.js。问题权限被拒绝chmod x *.sh问题SVG 验证失败查看详细错误信息validate-svg.sh会逐项打印失败原因与相关行使用编辑工具修复语法或几何问题缺 marker 定义补marker碰撞则调整走线或标注data-graph-role重新运行验证。十一、开发说明如何扩展脚本集添加新的验证规则编辑 validate-svg.sh在现有检查项后追加检查逻辑# Check N: Your new check echo -n Checking something... # Your validation logic here if [ condition ]; then echo -e ${GREEN}✓ Pass${NC} else echo -e ${RED}✗ Fail${NC} FAILURES$((FAILURES 1)) fi对应地validate_svg.py中每个--check分支都是一个独立函数run_check()分发新规则可以在该模块中按同样模式注册。扩展支持的图表类型编辑 generate-diagram.sh在--type参数处理的VALID_TYPES列表中添加新类型并在generate-from-template.py的DEFAULT_VIEWBOX中补充该类型的默认画布尺寸。十二、版本历史v1.2.0(2026-07-17) —— 语义动效与动态展示12 种已验收的 SVG→GIF 场景动效与 5.75 秒 settled-flow 默认时间线README 全动态图集、GIF manifest、媒体回读与安装副本全风格门禁动效源 SVG 保持语义契约约束不绑定标题和内容字节。v1.1.0(2026-07-15) —— 几何与分发升级Schema v1 与类型化 Diagram IR正交路由、端口分流、图例/标签避让、跨线桥与确定性布局报告fireworks.py统一 CLI 与离线交互 HTML 导出完整 npx Skill 镜像、CI、Release archive parity 与安装 canary。v1.0.0(2026-04-11) —— 初始版本SVG 验证脚本、图表生成脚本、批量测试脚本。许可证MIT License——与 fireworks-tech-graph skill 相同见 LICENSE。赞分享桌面应用AI 应用【免费下载链接】Easydict一个简洁优雅的词典翻译 macOS App。开箱即用支持离线 OCR 识别支持有道词典 苹果系统词典 苹果系统翻译OpenAIGeminiDeepLGoogleBing腾讯百度阿里小牛彩云和火山翻译。A concise and elegant Dictionary and Translator macOS App for looking up words and translating text.项目地址https://gitcode.com/gh_mirrors/ea/Easydict点击查看免费下载相关推荐Fireworks Tech Graph v1.2.0 发布SVG 语义图动画化到验证 GIF 的完整指南Fireworks Tech Graph v1.2.0 发布SVG 语义图动画化到验证 GIF 的完整指南 Fireworks Tech Graph v1.2AI 技能数据可视化fireworks-tech-graph 工程蓝图风格完全指南Style 3 Blueprint 的配色、SVG 规范与实战生成fireworks tech graph 工程蓝图风格完全指南Style 3 Blueprint 的配色、SVG 规范与实战生成 本篇技术指南以 firewoAI 技能数据可视化AI技术图表生成技能fireworks-tech-graph完全指南一句话自然语言生成生产级SVG架构图AI技术图表生成技能fireworks tech graph完全指南一句话自然语言生成生产级SVG架构图 还在手绘架构图、流程图吗 fireworks teAI 技能数据可视化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
