企业官网建设流程全解析

fireworks-tech-graph Style 7（OpenAI Official）样式实战指南：从设计令牌到可复用的极简技术架构图

【免费下载链接】fireworks-tech-graphGenerate production-quality SVG+PNG 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 7（OpenAI Official）样式的设计规范与工程落地：从色板、字体、节点、箭头到布局网格与完整 SVG 模板，并深入源码展示该样式在生成管线中的真实配置、示例 Fixture 与运动场景绑定。读完本文，你将能够手工绘制或基于 generate-from-template.py 生成一套「白底白盒、细边框、品牌绿点缀」的极简精确技术架构图，并理解其与 UML、序列图等场景的适配边界。

图为仓库内置的 Style 7 样例输出（对应 assets/samples/sample-style7-openai.png，GIF 动图见 sample-style7-openai.gif），白底细边框、绿色主路径的视觉特征一目了然。

一、Style 7 的定位：极简但精确

Style 7 的核心理念是一句话：Clean, modern aesthetic matching OpenAI's documentation and research diagrams — minimal but precise（与 OpenAI 官方文档与研究图表一致、极简但精确的现代美学）。它刻意放弃装饰，把视觉权重全部让给结构信息本身，是文档、API 说明、技术博客与研究图表中最「安静」也最「准确」的一档样式。

在仓库的 style-diagram-matrix.md 适配矩阵中，Style 7 的整体定位如下：

• 架构图：Good —— 干净精确、细边框 + 品牌绿点缀，适合正式架构文档；
• 类图 / ER 图：Excellent —— 极简美学与 UML 的精确性天然匹配；
• 序列图：Excellent —— 极简精确，最适合 API 文档；
• 用例图 / 状态机图：Excellent —— 干净的 UML 表达；
• 流程图 / 思维导图 / 数据流图 / 网络拓扑 / 对比矩阵 / 时间线：Good；
• Agent / 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: 0

No custom fonts. System font stack only for maximum compatibility.（不引入自定义字体，仅用系统字体栈以最大化兼容性。）

这套字体栈覆盖 macOS（-apple-system、BlinkMacSystemFont）、Windows（Segoe UI）、Linux（Roboto、Helvetica Neue）以及中文字体（PingFang SC、Microsoft YaHei、Microsoft JhengHei、SimHei），在任何平台的浏览器、文档系统或绘图工具中渲染结果都保持一致。

字号与字重是分级的：

在 SVG 模板中，字体通过一段<style>统一声明，避免在每个<text>上重复写font-family（见后文完整模板）。

四、Node Boxes：白底细边框，可选的品牌绿左缘条

标准节点是一个白色填充 + 1.5px 浅灰细边框 + rx=8 圆角的矩形，无阴影、无渐变、无装饰：

<!-- Standard node --> <rect x="100" y="100" width="180" height="80" rx="8" ry="8" fill="#ffffff" stroke="#e5e5e5" stroke-width="1.5"/>

需要强调某个节点（如核心服务、主流程入口）时，使用品牌绿左缘条（accent strip）：在原节点之上叠加一条 4px 宽的#10a37f竖条：

<!-- Accent node (with green left border) --> <rect x="100" y="100" width="180" height="80" rx="8" ry="8" fill="#ffffff" stroke="#e5e5e5" stroke-width="1.5"/> <rect x="100" y="100" width="4" height="80" rx="2" ry="2" fill="#10a37f"/>

Key techniques（要点速记）：

1. 白色填充 + 浅灰边框（无阴影）；
2. 可选 4px 宽的彩色左缘条作为强调；
3. rx="8"带来轻微圆角，保持锐利感；
4. stroke-width: 1.5细而精确的边框；
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 id="arrow-oai" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> <polygon points="0 0, 10 3.5, 0 7" fill="#71717a"/> </marker> <!-- Accent arrow (green) --> <marker id="arrow-oai-green" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> <polygon points="0 0, 10 3.5, 0 7" fill="#10a37f"/> </marker> </defs> <!-- Default connection --> <line x1="280" y1="140" x2="400" y2="140" stroke="#71717a" stroke-width="1.5" marker-end="url(#arrow-oai)"/> <!-- Accent connection --> <line x1="280" y1="140" x2="400" y2="140" stroke="#10a37f" stroke-width="1.5" marker-end="url(#arrow-oai-green)"/>

Arrow guidelines（箭头纪律）：

• 优先直线，走线用正交折线（right-angle orthogonal routing）；
• stroke-width: 1.5，细而精确；
• 箭头必须是填充多边形，不要用基于 stroke 的箭头；
• 灰色为默认，绿色用于主/强调流转；
• 可选/异步流转使用虚线stroke-dasharray="4,3"。

工程印证：在 generate-from-template.py 中，Style 7 的箭头颜色按语义流类型（flow）分派，control（主控制流）映射为品牌绿#10a37f，其余write/read/data/async/feedback/neutral分别映射到青、蓝、琥珀、灰等次级色——这正是规范中「绿 = 主路径，灰 = 次级」在生成管线里的落地方式。

六、Arrow Labels：12px 小灰字，白底兜底

箭头标签保持最小化：

<text x="340" y="133" text-anchor="middle" fill="#6e6e80" font-size="12"> 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 cx="200" cy="100" rx="50" ry="12" fill="#ffffff" stroke="#e5e5e5" stroke-width="1.5"/> <path d="M 150,100 L 150,140 Q 200,155 250,140 L 250,100" fill="#ffffff" stroke="#e5e5e5" stroke-width="1.5"/> <ellipse cx="200" cy="140" rx="50" ry="12" fill="none" stroke="#e5e5e5" stroke-width="1.5"/>

注意细节：底椭圆使用fill="none"，只保留轮廓线，避免在柱身内形成多余的填充分界——这是圆柱绘制中常见的一个坑，Style 7 规范做了明确处理。

八、Grouping Containers：虚线分组容器

需要表达逻辑分组（如分层、子系统、泳道）时，使用虚线矩形容器 + 容器标题：

<rect x="80" y="80" width="400" height="200" rx="8" ry="8" fill="none" stroke="#e5e5e5" stroke-width="1" stroke-dasharray="4,3"/> <text x="90" y="97" fill="#6e6e80" font-size="12" font-weight="500"> Group Label </text>

容器本身的规则：

• fill="none"：容器永远透明，不遮挡内部元素；
• stroke-width="1"：比节点边框更细，体现层级差异；
• stroke-dasharray="4,3"：4px 实线 + 3px 空隙的虚线节奏；
• 容器标题 12px、500 字重、灰#6e6e80，放置在容器左上角内侧。

在 api-flow-style7.json 的containers数组里可以看到三个真实的分组容器：Integration（y=120）、Model + Tools（y=280）、Delivery（y=450），它们在源码配置中对应section_fill: "none"、section_stroke: "#e2e8f0"、section_dash: "5 4"（generate-from-template.py），虚线语义一致。

九、Node Content：一行主标签 + 一行描述

节点内部文本保持「一行主标签 + 一行描述」的极简结构，全部居中对齐：

<rect x="100" y="100" width="180" height="80" rx="8" ry="8" fill="#ffffff" stroke="#e5e5e5" stroke-width="1.5"/> <text x="190" y="130" text-anchor="middle" fill="#0d0d0d" font-size="16" font-weight="600"> Component Name </text> <text x="190" y="150" text-anchor="middle" fill="#6e6e80" font-size="13"> Brief description </text>

Content guidelines（内容规范）：

• 每个盒子 1–2 行文本，不堆砌；
• 主标签：16px、600 字重、近黑#0d0d0d；
• 描述：13px、400 字重、灰#6e6e80；
• 盒内文本一律水平居中（text-anchor="middle"）。

两行文本的 y 坐标需要预留垂直间距（示例中主标签 y=130、描述 y=150，即描述放在主标签下方 20px），确保 80px 高的盒子内有舒适留白。

十、Layout Principles：8px 网格与严格对齐

Style 7 的布局是**精确、网格对齐（precise, grid-aligned）**的：

• 所有坐标吸附到8px 网格（snap all coordinates to 8px grid）；
• 水平间距统一100px；
• 垂直间距统一120px；
• 四周留白 ≥40px；
• 禁止装饰性元素。

这条规则的价值在于：网格对齐意味着任意两个节点之间的尺寸差、间距差都是 8 的整数倍，这在架构评审、尺寸对比、批量生成场景下能保证不同图之间的视觉一致性。

OpenAI minimalism（极简原则）：

• 只有在语义上真正有意义时才使用颜色（品牌绿只给主流程）；
• 白盒 + 白底 —— 节点差异仅靠边框与标签实现；
• 避免：阴影、渐变、图案、图标、装饰元素；
• 偏好：直线、正交路由、细描边。

对照 Fixture 坐标即可验证网格约束：api-flow-style7.json中所有节点坐标（如 x=80、x=370、x=700，y=156、y=340、y=510）与宽度（180/220）均可被 10 整除，且相邻列间距恒为 190px、行间距约 184px，符合「均匀间距 + 大留白」的工程化落地。

十一、完整 SVG 模板：开箱即用的骨架

规范提供了一个 960×600 的完整可运行模板，包含背景、标题、标准节点、连接线与箭头标签五个要素：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 600" width="960" height="600"> <style> text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica Neue, 'PingFang SC', 'Microsoft YaHei', 'Microsoft JhengHei', 'SimHei', sans-serif; } </style> <defs> <marker id="arrow-oai" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> <polygon points="0 0, 10 3.5, 0 7" fill="#71717a"/> </marker> <marker id="arrow-oai-green" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto"> <polygon points="0 0, 10 3.5, 0 7" fill="#10a37f"/> </marker> </defs> <!-- White background --> <rect width="960" height="600" fill="#ffffff"/> <!-- Title --> <text x="480" y="30" text-anchor="middle" fill="#0d0d0d" font-size="20" font-weight="600">Diagram Title</text> <!-- Standard node --> <rect x="100" y="70" width="180" height="80" rx="8" ry="8" fill="#ffffff" stroke="#e5e5e5" stroke-width="1.5"/> <text x="190" y="100" text-anchor="middle" fill="#0d0d0d" font-size="16" font-weight="600">Component</text> <text x="190" y="120" text-anchor="middle" fill="#6e6e80" font-size="13">Description</text> <!-- Connection --> <line x1="280" y1="110" x2="400" y2="110" stroke="#71717a" stroke-width="1.5" marker-end="url(#arrow-oai)"/> <text x="340" y="103" text-anchor="middle" fill="#6e6e80" font-size="12">label</text> </svg>

模板要点：

• 顶部<style>全局声明字体栈，<text>元素无需重复font-family；
• <defs>集中声明两个箭头 marker，全部连线复用；
• 显式绘制白色背景矩形，避免透明背景在深色阅读器中出现色差；
• 标题 20px/600 居中对齐，作为整张图的信息入口。

此模板可直接保存为.svg，再通过仓库提供的 svg2png.js 与 svg2gif.js 导出 PNG / GIF，或通过 generate-diagram.sh 纳入批量生成流程。

十二、Design Philosophy：四项强调与五项禁止

Style 7 强调（Emphasizes）：

• Minimalism（极简）：白上加白，只保留必要视觉元素；
• Precision（精确）：细描边、锐利圆角（rx=8）、网格对齐；
• Clarity（清晰）：内容优先，零视觉噪音；
• Brand consistency（品牌一致性）：#10a37f绿色被克制地用于主流程。

避免（Avoid）：

• 阴影与渐变；
• 彩色填充（只允许白色填充）；
• 粗边框（>2px）；
• 装饰元素（图标、图案、纹理）；
• 自定义字体（只用系统字体栈）。

十三、在生成管线中使用 Style 7：别名、Fixture 与运动场景

除了手工绘制 SVG，Style 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. 官方 Fixture：API Integration Flow

仓库内置了 Style 7 的官方示例 api-flow-style7.json，一个 960×700 的「API 集成流」图，其结构完整展示了本规范的全部要素：

• 3 个分组容器：Integration → Model + Tools → Delivery，构成从上到下的三层流水线；
• 7 个节点：Application（CLIENT）、OpenAI SDK Layer（SDK，双矩形double_rect）、Prompt Builder（INPUT）、Model Runtime（REASONING，双矩形）、Tool Calls（ACTIONS）、Response Formatter（OUTPUT）、Observability（METRICS）、Release Control（CONFIG）；
• 8 条边：connect → prepare → invoke → tool call/stream → measure/govern → promote，每条边都带flow语义（control / read / feedback）与运动角色（motion_role）；
• 图例（legend）：horizontal 布局，标注primary API path（control）、prompt / tools（read）、governance（feedback）三种流类型；
• 页脚：Style 7 · OpenAI Official · precise integration stages。

其中 SDK 层与 Model Runtime 使用double_rect（双矩形）kind，配合stroke: "#10a37f"，正是规范中「绿色左缘条强调核心组件」的工程化变体；而普通节点使用stroke: "#dce5e3"、flat: true保持白底细边。

3. 运动场景绑定：token-stream

Style 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-train（motion.py）按 stage 1→6 编排动画帧，其中token-stream位于 stage 4、order 1（motion.py），即模型输出令牌流这一核心动作在动画序列的中间高潮阶段。

这些配置也通过了测试验证：tests/test_motion.py断言了 Style 7 相关颜色与动画帧序列，tests/test_skill_compatibility.py校验了sample-style7-openai.gif等样例资产存在且与 skill 包一致。

十四、何时使用 Style 7（附速查建议）

结合 style-diagram-matrix.md 的适配结论，给出如下选型速查：

最后一条纪律：Style 7 的全部价值在于「少即是多」。如果你在绘制过程中发现自己想加阴影、渐变、彩色填充或装饰图标，请先回到第十一节的模板重新审视——往往删掉多余元素，图反而更接近 OpenAI 官方文档的质感。

延伸阅读：完整的样式族谱与选型矩阵见 style-diagram-matrix.md；与其他风格（如 Flat Icon、Dark Terminal、Blueprint 等）的逐一对比可参考 references 目录下的各样式规范文档。

【免费下载链接】fireworks-tech-graphGenerate production-quality SVG+PNG technical diagrams from natural language. 7 styles, UML support, and AI/Agent workflow patterns.项目地址: https://gitcode.com/gh_mirrors/fi/fireworks-tech-graph