如何用 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 示例起步 → 按类型规范画出布局并绑定每个可见字符串 → 跑校验脚本确认通过。先确认数据是否适合 Slopegraphskills/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 刻度seriesBEFOREAFTER处理Search512208ink 0.80Catalog376164ink 0.74Checkout291143ink 0.68Auth154121ink 0.62Recommender238431accent焦点线示例里唯一上升的 Recommender 拿到了 accent 色和更粗的描边——accent 标记的是「编辑上焦点的那条线」不是最好或最大的那条。图例末尾还声明了SAME 100-550 SCALE ON BOTH AXES · ILLUSTRATIVE FIGURES, NOT A MEASURED RELEASE即两条轴共用同一刻度、数据为示意值。这正是一个合格 slopegraph 该有的样子。准备条件与新建图前置条件Diagram Design 仓库的 checkoutPython 3.10CONTRIBUTING.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」复制最接近的模板template.html /template-dark.html/template-full.html或者复制一份 slopegraph 示例直接改数据加载 type-line.md按其中 Slopegraph 一节的布局约定绘制替换 eyebrow、h1 和 SVG 正文把[diagram-slug]占位符替换为你的文件 slug填好title/desc满足 accessible SVG 契约svg带roleimg和aria-labelledby指向slug-title/slug-desc形式的 IDtitle是svg的第一个子元素desc用一句话描述内容而非几何位置。按布局常量绘制以下常量来自 type-line.md 的 Slopegraph 小节viewBox0 0 1000 500两条轴竖线在x320与x680y40→420。绘图区在x40→956 内旋转的值轴题注在x24。不要画网格线每个端点都印自己的数值两条轴竖线本身就是刻度。横向跨度保持窄于纵向高度360px run 对 380px 高度加宽会把所有斜率压平丢掉这个图型存在的意义。Label gutters左侧名称右对齐结束于x272、数值右对齐结束于x304右侧镜像数值从x696、名称从x728开始。gutter 宽度按最长名称定——名称与轴碰撞是唯一无法靠挪坐标补救的问题。状态题注Geist Mono 9px居中于各轴下方y440letter-spacing0.14em。Domain选能包住数据的整数边界并写进 source line。示例是 100–550ms 映射到y420→40即 0.84px/ms。比零更紧的 domain 合法但必须声明——两条轴一起平移原点时每条斜率不变但紧窗口会等比放大所有斜率所以要写出来让读者自行校准对数刻度直接出局。4px 网格适用于设计常量轴位置、gutter 边缘、题注基线端点y是数据缩放值豁免。图例横线y462与LEGEND基线 478 是全仓库共享的既有常量保持 off-grid。颜色一个 accent ink不透明度梯度不是 series 调色板。梯度 0.80→0.62按左侧数值排序硬下限 0.53ink在浅纸面上越过 3:1 对比度的位置焦点线用 accent且焦点靠描边宽度承载——2.4px 对 1.2px因为 accent 在浅纸面上只有 2.86:1比它要支配的 ink 梯度对比度还低数据读取不能只靠 accent。端点圆点两条轴都画非焦点r3焦点r4。所有 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 的文档共享刻度左右两轴必须用同一线性变换把值映射到y斜率和原点分开检查——只查斜率会通过「整轴平移」这种更隐蔽的错误不许抖动每个声明值必须落在共享刻度给它的位置端点容差 1.0px未变换几何任何 transform 直接拒绝而不是尝试解析完整印刷值可见的完整数字 token 必须与声明值一致标签绑定到意义题注属于命名轴名称属于 series 加端点一个标签画在离别的 series 端点比离自己更近的位置会被单独报出——「贴错行的标签等于给线改名」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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
