fireworks-tech-graph Style 7OpenAI Official样式实战指南从设计令牌到可复用的极简技术架构图【免费下载链接】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本指南完整讲解 fireworks-tech-graph 项目中Style 7OpenAI Official样式的设计规范与工程落地从色板、字体、节点、箭头到布局网格与完整 SVG 模板并深入源码展示该样式在生成管线中的真实配置、示例 Fixture 与运动场景绑定。读完本文你将能够手工绘制或基于 generate-from-template.py 生成一套「白底白盒、细边框、品牌绿点缀」的极简精确技术架构图并理解其与 UML、序列图等场景的适配边界。图为仓库内置的 Style 7 样例输出对应 assets/samples/sample-style7-openai.pngGIF 动图见 sample-style7-openai.gif白底细边框、绿色主路径的视觉特征一目了然。一、Style 7 的定位极简但精确Style 7 的核心理念是一句话Clean, modern aesthetic matching OpenAIs documentation and research diagrams — minimal but precise与 OpenAI 官方文档与研究图表一致、极简但精确的现代美学。它刻意放弃装饰把视觉权重全部让给结构信息本身是文档、API 说明、技术博客与研究图表中最「安静」也最「准确」的一档样式。在仓库的 style-diagram-matrix.md 适配矩阵中Style 7 的整体定位如下架构图Good —— 干净精确、细边框 品牌绿点缀适合正式架构文档类图 / ER 图Excellent —— 极简美学与 UML 的精确性天然匹配序列图Excellent —— 极简精确最适合 API 文档用例图 / 状态机图Excellent —— 干净的 UML 表达流程图 / 思维导图 / 数据流图 / 网络拓扑 / 对比矩阵 / 时间线GoodAgent / Memory 架构图Excellent —— 与 OpenAI 的 AI 产品美学一致。也就是说当你的图表内容是 API 调用链、模型运行时、Agent 工具编排这类「结构本身就需要精确表达」的主题时Style 7 是首选。二、Color Palette五色令牌体系Style 7 的全部颜色收敛为 5 个令牌token其余颜色一律禁止使用Background: #ffffff (pure white) Primary text: #0d0d0d (near black) Secondary text: #6e6e80 (muted gray) Border: #e5e5e5 (light gray) Accent colors (reserved): Green accent: #10a37f (OpenAI brand green) Blue accent: #1d4ed8 (links, actions) Orange accent: #f97316 (highlights, warnings) Gray accent: #71717a (secondary elements)颜色使用纪律背景固定为纯白节点也使用白色填充节点之间的差异只靠边框与文字层级表达绿色#10a37f是唯一的语义色只用于主路径primary flow强调这条边代表核心业务流转蓝色、橙色属于保留色reserved仅在确有链接、动作或警告语义时使用灰色#71717a是次级元素的默认色用于默认箭头与次级装饰。在源码实现中这份令牌被固化在 generate-from-template.py 的样式表第 7 项里虽然工程实现采用了略深的灰阶变体如node_stroke: #dce5e3、text_primary: #0f172a、text_secondary: #475569、section_stroke: #e2e8f0但品牌绿#10a37f被精确保留在section_label_fill与arrow_colors[control]中与规范文档逐字一致。三、Typography纯系统字体栈零自定义字体font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, PingFang SC, Microsoft YaHei, Microsoft JhengHei, SimHei, sans-serif font-size: 16px node labels, 13px descriptions, 12px arrow labels font-weight: 600 for titles, 500 for labels, 400 for descriptions letter-spacing: 0No custom fonts. System font stack only for maximum compatibility.不引入自定义字体仅用系统字体栈以最大化兼容性。这套字体栈覆盖 macOS-apple-system、BlinkMacSystemFont、WindowsSegoe UI、LinuxRoboto、Helvetica Neue以及中文字体PingFang SC、Microsoft YaHei、Microsoft JhengHei、SimHei在任何平台的浏览器、文档系统或绘图工具中渲染结果都保持一致。字号与字重是分级的文本层级字号字重颜色标题Titles20px600近黑#0d0d0d节点主标签Node labels16px600近黑#0d0d0d描述Descriptions13px400灰#6e6e80箭头标签Arrow labels12px400/500灰#6e6e80分组容器标签Group label12px500灰#6e6e80在 SVG 模板中字体通过一段style统一声明避免在每个text上重复写font-family见后文完整模板。四、Node Boxes白底细边框可选的品牌绿左缘条标准节点是一个白色填充 1.5px 浅灰细边框 rx8 圆角的矩形无阴影、无渐变、无装饰!-- Standard node -- rect x100 y100 width180 height80 rx8 ry8 fill#ffffff stroke#e5e5e5 stroke-width1.5/需要强调某个节点如核心服务、主流程入口时使用品牌绿左缘条accent strip在原节点之上叠加一条 4px 宽的#10a37f竖条!-- Accent node (with green left border) -- rect x100 y100 width180 height80 rx8 ry8 fill#ffffff stroke#e5e5e5 stroke-width1.5/ rect x100 y100 width4 height80 rx2 ry2 fill#10a37f/Key techniques要点速记白色填充 浅灰边框无阴影可选 4px 宽的彩色左缘条作为强调rx8带来轻微圆角保持锐利感stroke-width: 1.5细而精确的边框无渐变、无阴影、无任何装饰元素。在工程实现中节点样式对应源码配置的node_fill: #ffffff、node_stroke: #dce5e3、node_radius: 14、node_shadow: 空字符串即关闭阴影见 generate-from-template.py。五、Arrows细线、实心箭头、正交走线箭头统一使用1.5px 细线 实心多边形箭头marker。箭头有两种默认灰色与品牌绿强调色通过marker定义一次、全局复用defs !-- Default arrow (gray) -- marker idarrow-oai markerWidth10 markerHeight7 refX9 refY3.5 orientauto polygon points0 0, 10 3.5, 0 7 fill#71717a/ /marker !-- Accent arrow (green) -- marker idarrow-oai-green markerWidth10 markerHeight7 refX9 refY3.5 orientauto polygon points0 0, 10 3.5, 0 7 fill#10a37f/ /marker /defs !-- Default connection -- line x1280 y1140 x2400 y2140 stroke#71717a stroke-width1.5 marker-endurl(#arrow-oai)/ !-- Accent connection -- line x1280 y1140 x2400 y2140 stroke#10a37f stroke-width1.5 marker-endurl(#arrow-oai-green)/Arrow guidelines箭头纪律优先直线走线用正交折线right-angle orthogonal routingstroke-width: 1.5细而精确箭头必须是填充多边形不要用基于 stroke 的箭头灰色为默认绿色用于主/强调流转可选/异步流转使用虚线stroke-dasharray4,3。工程印证在 generate-from-template.py 中Style 7 的箭头颜色按语义流类型flow分派control主控制流映射为品牌绿#10a37f其余write/read/data/async/feedback/neutral分别映射到青、蓝、琥珀、灰等次级色——这正是规范中「绿 主路径灰 次级」在生成管线里的落地方式。六、Arrow Labels12px 小灰字白底兜底箭头标签保持最小化text x340 y133 text-anchormiddle fill#6e6e80 font-size12 label /text标签规范12px、灰色#6e6e80默认不加背景矩形白底画布通常足够清晰只有当通过坐标偏移仍无法避免与线条/节点重叠时才添加一个白色 fallback 矩形垫底文案使用简短、技术化的语言如invoke、stream、tool call放置于箭头中点midpoint。在真实 Fixture api-flow-style7.json 中可以看到这套标签的实际使用connect、prepare、invoke、tool call、stream、measure、govern、promote八个标签分别标注在八条边上全部是动词短语式的技术语言。七、Database Shapes细边框圆柱体数据库节点使用三段式圆柱顶椭圆 柱身 底椭圆同样遵循白底 #e5e5e51.5px 细边框ellipse cx200 cy100 rx50 ry12 fill#ffffff stroke#e5e5e5 stroke-width1.5/ path dM 150,100 L 150,140 Q 200,155 250,140 L 250,100 fill#ffffff stroke#e5e5e5 stroke-width1.5/ ellipse cx200 cy140 rx50 ry12 fillnone stroke#e5e5e5 stroke-width1.5/注意细节底椭圆使用fillnone只保留轮廓线避免在柱身内形成多余的填充分界——这是圆柱绘制中常见的一个坑Style 7 规范做了明确处理。八、Grouping Containers虚线分组容器需要表达逻辑分组如分层、子系统、泳道时使用虚线矩形容器 容器标题rect x80 y80 width400 height200 rx8 ry8 fillnone stroke#e5e5e5 stroke-width1 stroke-dasharray4,3/ text x90 y97 fill#6e6e80 font-size12 font-weight500 Group Label /text容器本身的规则fillnone容器永远透明不遮挡内部元素stroke-width1比节点边框更细体现层级差异stroke-dasharray4,34px 实线 3px 空隙的虚线节奏容器标题 12px、500 字重、灰#6e6e80放置在容器左上角内侧。在 api-flow-style7.json 的containers数组里可以看到三个真实的分组容器Integrationy120、Model Toolsy280、Deliveryy450它们在源码配置中对应section_fill: none、section_stroke: #e2e8f0、section_dash: 5 4generate-from-template.py虚线语义一致。九、Node Content一行主标签 一行描述节点内部文本保持「一行主标签 一行描述」的极简结构全部居中对齐rect x100 y100 width180 height80 rx8 ry8 fill#ffffff stroke#e5e5e5 stroke-width1.5/ text x190 y130 text-anchormiddle fill#0d0d0d font-size16 font-weight600 Component Name /text text x190 y150 text-anchormiddle fill#6e6e80 font-size13 Brief description /textContent guidelines内容规范每个盒子 1–2 行文本不堆砌主标签16px、600 字重、近黑#0d0d0d描述13px、400 字重、灰#6e6e80盒内文本一律水平居中text-anchormiddle。两行文本的 y 坐标需要预留垂直间距示例中主标签 y130、描述 y150即描述放在主标签下方 20px确保 80px 高的盒子内有舒适留白。十、Layout Principles8px 网格与严格对齐Style 7 的布局是**精确、网格对齐precise, grid-aligned**的所有坐标吸附到8px 网格snap all coordinates to 8px grid水平间距统一100px垂直间距统一120px四周留白 ≥40px禁止装饰性元素。这条规则的价值在于网格对齐意味着任意两个节点之间的尺寸差、间距差都是 8 的整数倍这在架构评审、尺寸对比、批量生成场景下能保证不同图之间的视觉一致性。OpenAI minimalism极简原则只有在语义上真正有意义时才使用颜色品牌绿只给主流程白盒 白底 —— 节点差异仅靠边框与标签实现避免阴影、渐变、图案、图标、装饰元素偏好直线、正交路由、细描边。对照 Fixture 坐标即可验证网格约束api-flow-style7.json中所有节点坐标如 x80、x370、x700y156、y340、y510与宽度180/220均可被 10 整除且相邻列间距恒为 190px、行间距约 184px符合「均匀间距 大留白」的工程化落地。十一、完整 SVG 模板开箱即用的骨架规范提供了一个 960×600 的完整可运行模板包含背景、标题、标准节点、连接线与箭头标签五个要素svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 960 600 width960 height600 style text { font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, PingFang SC, Microsoft YaHei, Microsoft JhengHei, SimHei, sans-serif; } /style defs marker idarrow-oai markerWidth10 markerHeight7 refX9 refY3.5 orientauto polygon points0 0, 10 3.5, 0 7 fill#71717a/ /marker marker idarrow-oai-green markerWidth10 markerHeight7 refX9 refY3.5 orientauto polygon points0 0, 10 3.5, 0 7 fill#10a37f/ /marker /defs !-- White background -- rect width960 height600 fill#ffffff/ !-- Title -- text x480 y30 text-anchormiddle fill#0d0d0d font-size20 font-weight600Diagram Title/text !-- Standard node -- rect x100 y70 width180 height80 rx8 ry8 fill#ffffff stroke#e5e5e5 stroke-width1.5/ text x190 y100 text-anchormiddle fill#0d0d0d font-size16 font-weight600Component/text text x190 y120 text-anchormiddle fill#6e6e80 font-size13Description/text !-- Connection -- line x1280 y1110 x2400 y2110 stroke#71717a stroke-width1.5 marker-endurl(#arrow-oai)/ text x340 y103 text-anchormiddle fill#6e6e80 font-size12label/text /svg模板要点顶部style全局声明字体栈text元素无需重复font-familydefs集中声明两个箭头 marker全部连线复用显式绘制白色背景矩形避免透明背景在深色阅读器中出现色差标题 20px/600 居中对齐作为整张图的信息入口。此模板可直接保存为.svg再通过仓库提供的 svg2png.js 与 svg2gif.js 导出 PNG / GIF或通过 generate-diagram.sh 纳入批量生成流程。十二、Design Philosophy四项强调与五项禁止Style 7 强调EmphasizesMinimalism极简白上加白只保留必要视觉元素Precision精确细描边、锐利圆角rx8、网格对齐Clarity清晰内容优先零视觉噪音Brand consistency品牌一致性#10a37f绿色被克制地用于主流程。避免Avoid阴影与渐变彩色填充只允许白色填充粗边框2px装饰元素图标、图案、纹理自定义字体只用系统字体栈。十三、在生成管线中使用 Style 7别名、Fixture 与运动场景除了手工绘制 SVGStyle 7 也深度集成在 fireworks-tech-graph 的自动化生成管线中可以直接通过自然语言或结构化配置触发。1. 样式别名解析在 semantic_contracts.py 中openai official被显式映射到样式编号 7同时STYLE_ALIASES会自动生成style 7、风格 7等别名semantic_contracts.py。因此在自然语言提示中使用openai official、style 7或风格 7都可以命中 Style 7。2. 官方 FixtureAPI Integration Flow仓库内置了 Style 7 的官方示例 api-flow-style7.json一个 960×700 的「API 集成流」图其结构完整展示了本规范的全部要素3 个分组容器Integration → Model Tools → Delivery构成从上到下的三层流水线7 个节点ApplicationCLIENT、OpenAI SDK LayerSDK双矩形double_rect、Prompt BuilderINPUT、Model RuntimeREASONING双矩形、Tool CallsACTIONS、Response FormatterOUTPUT、ObservabilityMETRICS、Release ControlCONFIG8 条边connect → prepare → invoke → tool call/stream → measure/govern → promote每条边都带flow语义control / read / feedback与运动角色motion_role图例legendhorizontal 布局标注primary API pathcontrol、prompt / toolsread、governancefeedback三种流类型页脚Style 7 · OpenAI Official · precise integration stages。其中 SDK 层与 Model Runtime 使用double_rect双矩形kind配合stroke: #10a37f正是规范中「绿色左缘条强调核心组件」的工程化变体而普通节点使用stroke: #dce5e3、flat: true保持白底细边。3. 运动场景绑定token-streamStyle 7 还绑定了一个专属的「动画」语义——token-stream令牌流。在 motion.py 中样式 7 的场景被定义为token-stream其允许的运动角色集合为{connect, prepare, invoke, tool-call, token-stream, govern, measure, promote}motion.py正好与api-flow-style7.json中八条边的motion_role一一对应。预设openai-official-api-token-trainmotion.py按 stage 1→6 编排动画帧其中token-stream位于 stage 4、order 1motion.py即模型输出令牌流这一核心动作在动画序列的中间高潮阶段。这些配置也通过了测试验证tests/test_motion.py断言了 Style 7 相关颜色与动画帧序列tests/test_skill_compatibility.py校验了sample-style7-openai.gif等样例资产存在且与 skill 包一致。十四、何时使用 Style 7附速查建议结合 style-diagram-matrix.md 的适配结论给出如下选型速查场景建议理由API 文档 / SDK 集成图✅ 首选 Style 7极简精确绿主路径天然对应「主 API 调用链」类图 / ER / 用例 / 状态机✅ Excellent无装饰UML 结构表达最清晰序列图✅ Excellent细线条与生命线兼容性好架构图正式文档✅ Good干净但不花哨适合白皮书流程图 / 数据流 / 拓扑✅ Good结构优先够用且克制需要视觉冲击力的演示/封面⚠️ 换 Style 5/8极简风在演示场景略显朴素最后一条纪律Style 7 的全部价值在于「少即是多」。如果你在绘制过程中发现自己想加阴影、渐变、彩色填充或装饰图标请先回到第十一节的模板重新审视——往往删掉多余元素图反而更接近 OpenAI 官方文档的质感。延伸阅读完整的样式族谱与选型矩阵见 style-diagram-matrix.md与其他风格如 Flat Icon、Dark Terminal、Blueprint 等的逐一对比可参考 references 目录下的各样式规范文档。【免费下载链接】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），仅供参考
