企业官网建设流程全解析

如何用 Diagram Design 的 Slopegraph 变体比较两个状态之间的变化？

【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design

当你的数据是「若干指标在恰好两个状态下的取值」——两个年份、before/after、两个队列、两个场景——并且希望读者同时读出方向（升还是降）、陡度（变化多快）和交叉（谁超过了谁）时，Diagram Design 的 Line chart 类型提供了 Slopegraph 变体来做这件事。它的产出是一个自包含的 HTML + 内联 SVG 文件，并且仓库自带scripts/verify-slopegraph.py，用机械检查验证「画出来的斜率没有说谎」。本文的操作路径是：确认数据适用 → 从仓库自带的 slopegraph 示例起步 → 按类型规范画出布局并绑定每个可见字符串 → 跑校验脚本确认通过。

先确认数据是否适合 Slopegraph

skills/diagram-design/references/type-line.md给出的适用边界很明确：

• 适合：恰好两个可比状态、多条 series 的变化。阅读方式是三重编码：方向、陡度、交叉，没有其他图型能同时给出这三点。
• 不适合：
  • 三个及以上状态 —— 那是父类型的 Line chart，或 bump chart；
  • 单条 series —— 直接写一句话；
  • 只在一个时刻看排名、没有变化 —— 用 Bar chart；
  • 两个变量单位不同 —— 用 Scatter plot，「不同单位之间的斜率没有意义」。
• Series 数量 4–10：少于 4 条，一句话或一对条形图更短；超过 10 条，端点标签会互相碰撞。注意父类型 Line chart 的预算上限是 5 条 series，而类型参考明确给 slopegraph 放宽到 10——因为 slopegraph 没有图中折线段，上限由端点标签碰撞决定，而不是线条纠缠。

先看仓库自带的示例

仓库在skills/diagram-design/assets/下提供三个变体，先用浏览器打开它们（任何现代浏览器即可，文件自包含）：

• example-slopegraph.html —— minimal light，默认变体；
• example-slopegraph-dark.html —— minimal dark，用于暗色站点；
• example-slopegraph-full.html —— full editorial，用于长文配图。

示例内容（文档示例数据，非实测发布）：一组服务的 p95 响应时间，在加缓存层之前与之后，两条轴共用同一 100–550ms 刻度：

示例里唯一上升的 Recommender 拿到了 accent 色和更粗的描边——accent 标记的是「编辑上焦点的那条线」，不是最好或最大的那条。图例末尾还声明了SAME 100-550 SCALE ON BOTH AXES · ILLUSTRATIVE FIGURES, NOT A MEASURED RELEASE，即两条轴共用同一刻度、数据为示意值。这正是一个合格 slopegraph 该有的样子。

准备条件与新建图

前置条件：

• Diagram Design 仓库的 checkout；
• Python 3.10+（CONTRIBUTING.md 对开发脚本的要求，CI 跑 3.11/3.12）；
• 如果是在新项目里让 agent 生成图，SKILL.md §0 的首次使用闸门会检查 style guide 是否仍是默认皮肤（paper#f5f5f5、ink#2d3142、accent#eb6c36），并按 references/profiles.md 决定是否先定制品牌；本文以下按仓库内直接绘制示例的默认皮肤展开。

新建步骤（依据 SKILL.md 「To create a new diagram」与 CONTRIBUTING.md 「Working on examples」）：

1. 复制最接近的模板（template.html /template-dark.html/template-full.html），或者复制一份 slopegraph 示例直接改数据；
2. 加载 type-line.md，按其中 Slopegraph 一节的布局约定绘制；
3. 替换 eyebrow、h1 和 SVG 正文；把[diagram-slug]占位符替换为你的文件 slug，填好<title>/<desc>；
4. 满足 accessible SVG 契约：<svg>带role="img"和aria-labelledby，指向<slug>-title/<slug>-desc形式的 ID；<title>是<svg>的第一个子元素，<desc>用一句话描述内容而非几何位置。

按布局常量绘制

以下常量来自 type-line.md 的 Slopegraph 小节：

• viewBox0 0 1000 500；两条轴竖线在x=320与x=680，y40→420。绘图区在x40→956 内，旋转的值轴题注在x=24。
• 不要画网格线：每个端点都印自己的数值，两条轴竖线本身就是刻度。
• 横向跨度保持窄于纵向高度（360px run 对 380px 高度），加宽会把所有斜率压平，丢掉这个图型存在的意义。
• Label gutters：左侧名称右对齐结束于x=272、数值右对齐结束于x=304；右侧镜像，数值从x=696、名称从x=728开始。gutter 宽度按最长名称定——名称与轴碰撞是唯一无法靠挪坐标补救的问题。
• 状态题注：Geist Mono 9px，居中于各轴下方y=440，letter-spacing0.14em。
• Domain：选能包住数据的整数边界，并写进 source line。示例是 100–550ms 映射到y420→40，即 0.84px/ms。比零更紧的 domain 合法但必须声明——两条轴一起平移原点时每条斜率不变，但紧窗口会等比放大所有斜率，所以要写出来让读者自行校准；对数刻度直接出局。
• 4px 网格适用于设计常量（轴位置、gutter 边缘、题注基线）；端点y是数据缩放值，豁免。图例横线y=462与LEGEND基线 478 是全仓库共享的既有常量，保持 off-grid。
• 颜色：一个 accent +ink不透明度梯度，不是 series 调色板。梯度 0.80→0.62，按左侧数值排序，硬下限 0.53（ink在浅纸面上越过 3:1 对比度的位置）；焦点线用 accent，且焦点靠描边宽度承载——2.4px 对 1.2px，因为 accent 在浅纸面上只有 2.86:1，比它要支配的 ink 梯度对比度还低，数据读取不能只靠 accent。
• 端点圆点两条轴都画：非焦点r=3，焦点r=4。
• 所有 series 的名称标签用ink、数值标签用muted，焦点 series 也不例外——9–11px 的 accent 文字达不到 AA。图例措辞写 "strongest tone"，不要写 "darkest"：梯度是 ink-at-opacity，在暗色皮肤上梯度顶端反而是最浅的线。

让每个可见字符串都绑定数值

slopegraph 的完整契约是：每个承载意义的可见字符串都绑定一个声明同一件事的属性。参考文档给出的绑定模式（文档示例，数值取自仓库示例的 Recommender series，绘制时替换成你的数据）：

<!-- State captions:>python3 scripts/verify-slopegraph.py skills/diagram-design/assets/example-slopegraph.html

--all则检查所有出货示例：

python3 scripts/verify-slopegraph.py --all

退出码：0 干净、1 有发现、2 用法/读取错误。脚本先判断文件是否「以 slopegraph 自居」——文件名以example-slopegraph开头、源码声明data-series、或<title>/<desc>提到 slopegraph，三者居其一才会被校验，其余文件计入 out of scope 跳过。

脚本检查六条不变量（来自 verify-slopegraph.py 的文档）：

1. 共享刻度：左右两轴必须用同一线性变换把值映射到y，斜率和原点分开检查——只查斜率会通过「整轴平移」这种更隐蔽的错误；
2. 不许抖动：每个声明值必须落在共享刻度给它的位置（端点容差 1.0px）；
3. 未变换几何：任何 transform 直接拒绝而不是尝试解析；
4. 完整印刷值：可见的完整数字 token 必须与声明值一致；
5. 标签绑定到意义：题注属于命名轴，名称属于 series 加端点；一个标签画在离别的 series 端点比离自己更近的位置，会被单独报出——「贴错行的标签等于给线改名」；
6. fail closed：自称 slopegraph 却解析不出可验证 series 的文件是发现，不是通过。

成功时脚本打印形如（脚本自身的输出格式）：

OK slopegraph: 1 file(s), one shared scale on both axes, no transforms on verified geometry, and every printed value, name and caption bound to what it describes

失败时每条发现是文件:行号: 消息的形式。CONTRIBUTING.md 给出的修复方向是：改坐标，不改标签——而且绝不为了拉开两个碰撞的端点标签而移动数据点，因为标签拥挤本身说明这两个值真的靠得很近，移动点会把可读性问题变成虚假陈述。

数据诚实规则：这些做法直接出局

type-line.md 的 Slopegraph 反模式清单里与数据诚信相关的条目：

• 两条轴刻度、单位或原点不一致——这个图型唯一不可饶恕的错误；
• 端点缺失：删掉这条 series 并说明，永远不要插值补线；两条 series 两端都重合时合并成一条，或在 source line 里点名删掉了哪条；
• 把端点挪开给标签腾位置；
• 给交叉点标注日期，或从斜线上读出任何中间值——直线是连接器不是轨迹，两个端点对中间路径说明不了任何事（示例中 Recommender 越过三条线，但没有任何交叉被标注）；
• 每个 series 一种 hue、数值标签用 accent、出现网格线、曲线上加平滑；
• 任何没有绑定属性的可见字符串。

收尾：皮肤检查与变体

如果这个文件是仓库的新示例，slopegraph 校验通过之后还要过皮肤检查：

python3 scripts/lint-skin.py skills/diagram-design/assets/example-my-type.html

需要暗色站点或长文 hero 位时，用example-slopegraph-dark.html/example-slopegraph-full.html作为起点，保持同一套数据绑定和校验命令。三条命令构成完整闭环：verify-slopegraph.py保证斜率几何与数值一致，lint-skin.py保证皮肤与可访问性契约，浏览器打开文件确认渲染结果。

【免费下载链接】diagram-design38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.项目地址: https://gitcode.com/GitHub_Trending/di/diagram-design