画图 prmpot 分享

llm-latency-chain.svg

帮我画一张 SVG 流程图(链路图),风格要求如下,请严格遵守。

## 主题
[一句话说明这张图要讲什么,例如:大模型从用户发起 prompt 到返回结果的完整链路]
## 节点
[按顺序列出节点,例如:用户输入 → 网关路由 → 队列 → 分词 → Prefill → Decode → 流式返回 → 用户看到文字]
## 主角
[点名哪 1~2 个节点是重点,例如:Prefill 和 Decode 是真正吃机时的两格,其余都是毫秒级配送]

## 视觉规范(硬性)
- 风格:**白板手绘感的信息图**,不是彩色商务 PPT。线条克制、留白充足、信息密度适中。
- 背景:整张 `<rect>` 铺满,`fill="#FAF7F0"`(米白),尺寸必须等于 viewBox。
- 配色只有四个中性色 + 一个强调色,**不得引入任何其它色相**:
  - 墨黑 `#2B2A27`(主文字、主边框)
  - 灰褐 `#8B857C`(次要文字、注脚、普通箭头)
  - 浅辅助线 `#D8D2C6`(分隔线、普通节点边框)
  - 砖红 `#B5432A`**唯一强调色**,只给主角节点和关键标注用;填充可用同色浅染,如 `#F7E4DF`- 字体:根节点 `font-family="-apple-system, 'PingFang SC', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif"`
- 字号层级:主标题 34px bold / 副标题 19px / 分区标题 24px bold / 正文 17–20px / 注脚 16px
- viewBox 建议 `0 0 1400 780`(横向链路),内容完全落在框内,四周留 ~40px 边距,不要只占上半部分。

## 结构要求
1. **左上主标题 + 一行副标题**。副标题必须是**结论句**,不是内容描述——一句话点破这张图想让人记住什么。
2. 横向主链路:普通节点用浅色描边中性卡片,主角节点用砖红卡片(深色标题条 + 浅染底),一眼分出主次。
3. 主角节点卡片内写 2~3 行要点,卡片底部再挂一行 16px 灰褐注脚补充术语。
4. 有循环/重复的环节,画一条回环箭头指回自身,并标注重复次数或条件。
5. 有被反复读写的共享对象(缓存、数据库、状态),单独画成一个小图元挂在下方,用两条方向相反的细线标「写入 / 读取」。
6. 左下角放一个「怎么读这张图」图例框:用色块解释主角色、次要色、特殊标记各代表什么。
7. 底部加一条**对照带**(时间轴 / 进度条 / 占比条),把上方的抽象流程映射到读者能直接感知的东西上(等待时长、成本占比、耗时比例),两端标出起点和终点。

## SVG 技术约束
- 只用:`<rect> <circle> <ellipse> <polygon> <line> <polyline> <path> <text> <tspan> <g>`
- transform 只用 `translate / rotate / scale`;禁止 `skewX / skewY / matrix()`
- 禁止 `<radialGradient> <linearGradient> <filter> <pattern> <clipPath> <mask>`
- 文字必须是 `<text>`,绝不能转成 `<path>`
- 箭头用 `<polyline>` / `<path>` + 小三角 `<polygon>` 手画,不要依赖 `<marker>`
- 连线优先用正交折线(水平/垂直折点),少用斜线
- 宽度预算:中文 ≈ 1em/字,英文 ≈ 0.6em/字,容器要留够,禁止文字溢出方框
- SVG 自包含:有 `<svg>` 根节点和 `viewBox`,不引用外部图片、字体、脚本

## 交付前自检
渲染成图片亲眼看一遍,确认:文字无溢出无重叠、箭头对齐无错位、主角节点强调明显、配色没有超出上面五个色、四周留白均衡。不满足就改到满足。

几点说明,方便你之后按需改:

- 真正让它好看的是四条:① 单一强调色(多一个色相就垮);② 副标题写结论不写描述;③ 底部那条把抽象流程翻译成读者体感的对照带;④ 左下的「怎么读这张图」图例。其余都是执行细节。
- 配色可以整体换,但要保持「低饱和米白底 + 一个高饱和暖色做唯一强调」的结构,比如换成藏青 #1F3A5F 做强调色同样成立。
- 如果不是画到飞书画板(比如直接生成 SVG 文件、做成 HTML、丢给 Figma),「SVG 技术约束」那整节可以删掉——那是飞书画板解析器的限制,删掉后模型能用渐变和滤镜,效果反而更细腻。
- 想要竖版或分栏,把 viewBox 改成 0 0 900 1400 之类,并把「横向主链路」改成「纵向」,其余不用动。

关键词: agent