编辑级图表设计
生成简洁、可直接用于出版的图表，保存为独立的 HTML 文件（内联 SVG + CSS）。请勿使用通用的深青色发光效果、默认的 Mermaid 布局或斜向连接线。
视觉 DNA 与调色板
- 纸张（背景）：
#f5f5f5（平板画布）。 - 墨水（文字与主要线条）：
#2d3142。 - 柔和（辅助文字与标准线条）：
#4f5d75。 - 边框与分割线：
rgba(45, 49, 66, 0.12)。 - 强调（瓶颈/关键焦点）：
#eb6c36（珊瑚/土陶色；每张图最多 1–2 个焦点节点）。 - 外部/松散边界： 虚线 (
stroke-dasharray="4,4")。
排版（Google 字体）
在 HTML 头部嵌入：
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
- 图表标题：
Instrument Serif，28px，正常字重。 - 节点名称：
Geist（无衬线），12px，字重 600。 - 子标签与元数据：
Geist Mono，9px（端口、协议、批量间隔）。 - 连接器徽章/眉标：
Geist Mono，7–8px，大写，字母间距 (letter-spacing: 0.08em)。
SVG 几何与布局标准
- 4px 网格纪律： 所有坐标 (
x、y)、尺寸 (width、height)、内边距和间距必须为 4 的倍数。 - 仅使用正交连接器： 请勿在不成轴的节点之间绘制斜线。每个弯曲必须是直角弯，带有圆角 (
r=8)。仅当节点共享完全相同的轴时，才使用直<line>。 - 带遮罩的连接器徽章： 将协议/数据标签（例如
CSV、XLSX、LOAD）放置在填充色为#f5f5f5（rx=2）的不透明<rect>内。与线条描边保持 6px–10px 的可见间隙，使标签不会穿过箭头。 - 区域与功能容器： 将步骤分组为宽泛的列/区域（例如
收集、处理、分发）。使用 1px 边框（rgba(45,49,66,0.12)）、圆角 (rx=8)，并在左上角放置一个大写的等宽字体标题标签。 - 节点层级：
- 标准： 填充
#ffffff，描边 1px#2d3142，圆角半径 6px (rx=6)。 - 瓶颈/痛点： 填充
#fbeee8（rgba(235,108,54,0.08)），描边#eb6c36。 - 外部： 透明或白色填充，虚线边框 (
stroke-dasharray="4,4")。
- 标准： 填充
- 水平底部图例： 在图表节点下方放置一条水平图例条，通过全宽发丝分隔线与节点区域分开。
结构 SVG 模板
在编写 SVG 之前，请加载 references/template.md（包含标记、区域、连接器、带遮罩的徽章、节点框）。