如何用 Diagram Design 画 Kanban 看板图：WIP 上限、受阻卡片与状态普查

如何用 Diagram Design 画 Kanban 看板图WIP 上限、受阻卡片与状态普查【免费下载链接】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如果你需要一张「工作此刻处于什么状态」的快照——哪些任务在排队、哪些在推进、哪些被卡住、哪里超出了 WIPwork-in-progress上限——Diagram Design 的 Kanban 类型就是为这个用途定义的。它的产物是一个自包含的 HTML 文件内联 SVG 与 CSS、无构建步骤、默认无 JavaScript双击就能在浏览器打开。Kanban 是 2.5.10 加入的布局语法之一当前技能元数据版本为 2.6见 SKILL.md 的 metadata 字段。上图即 example-kanban.html 的渲染结果一个平台团队的看板In progress 列 4 张卡超过上限 3第一张 Postgres 16 upgrade 是受阻卡。先判断你要的是「状态普查」不是「流程」type-kanban.md 开宗明义Kanban 是state census状态普查不是流程图——整张图不允许出现任何连线。这也是它和另外两种类型的分界线需要跨泳道流动、交接是承重边 → 用Swimlane需要有序步骤和方向性交接 → 用Process。判断标准很硬如果图里需要出现一支箭头它就不再是 Kanban。SKILL.md 的类型路由表也把 Kanban 限定在「Work-in-progress by state, with WIP limits and blocked items」这一触发条件上。准备安装技能与样式门槛在支持 Agent Skills 的客户端中安装完整安装说明见 README 的 Install 一节包括 Factory Droid、Pi 和组织市场安装Claude Code/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-designdiagram-designCodexcodex plugin marketplace add cathrynlavery/diagram-design codex plugin add diagram-designdiagram-design安装后有一个一次性门槛在一个新项目中第一次生成图之前技能会检查 references/style-guide.md 是否仍是出厂默认令牌paper#f5f5f5、ink#2d3142、accent#eb6c36。如果是它会停下来询问你从网站 URL 提取品牌、手动粘贴令牌、直接沿用默认、或加载已保存的客户端 profile。对内部快照类看板选「沿用默认」即可后续不再触发该门槛。不写代码也可以先参考实现三个 Kanban 示例文件可以直接用浏览器打开无构建步骤、无外部图片依赖example-kanban.html — 极简浅色example-kanban-dark.html — 极简深色同一份数据example-kanban-full.html — 完整编辑版容器框 3 张不同宽度的摘要卡 页脚布局约定列、WIP chip 与卡片Kanban 类型有固定的布局语法出自 type-kanban.md无论让 agent 画还是自己手画都应遵守列最多 5 个等宽垂直列列宽 240px列间距 32px列背景为ink 0.02列本身无描边每列顶部有 header band列名用 Geist sans 12px / 600、左对齐右对齐放一个WIP chip——矩形标签rx2不是药丸形Geist Mono 8px内容格式n/limitheader band 下方一条贯穿列宽的rule发丝线。WIP 上限的两种写法进入流程中的列如 In progress、Review必须标注上限写作n/limit入口队列Backlog和终端列Done没有上限约束只写裸计数n。这是类型规范明确给出的例外——「没有工作流过的列无法表达超限」而 Done 列堆多少完成项都不构成约束。卡片节点盒模式rx6宽度为列宽减去左右各 16px 内边距高 56px卡间距 12px标题Geist sans 12px / 600副标签Geist Mono 9pxmuted色格式TICKET-ID · owner例如AVA-214 · nadia。绘制顺序影响层叠照抄即可 背景 → 列填充 → header 文本 WIP chip → header 发丝线 → 卡片每张依次盒体、受阻时的左侧 accent 条、标题、副标签→ 图例。卡片的四种状态每张卡恰好处于四种状态之一这是 Kanban 的语义词汇表状态填充描边附加default白色ink—blockedaccent 0.05accent全不透明虚线4,4卡片左缘 4pxaccent竖条waiting / externalink 0.02ink 0.20虚线4,3—doneink 0.05muted—这四种状态直接复用 SKILL.md §5 的节点处理表security→ blocked、optional→ waiting/external、store→ done看板没有发明新的填充色。超限列与 accent 预算当某列的卡片数n超过其声明的limit该列 WIP chip 的描边和文字变为accent。注意超限 chip 一张受阻卡就是整张图 2 个 accent 元素的全部预算不能花在别处。以 example-kanban.html 为例超限 chip 和受阻卡的真实写法如下文档示例数值来自该文件!-- 超限 WIP chipstroke 与文字均为 accent -- rect x488 y48 width40 height16 rx2 filltransparent stroke#eb6c36 stroke-width0.8/ text x508 y59 fill#eb6c36 font-size8 font-familyGeist Mono, monospace text-anchormiddle4/3/text !-- 受阻卡accent0.05 填充 accent 虚线描边 左缘 4px accent 条 -- rect x320 y88 width208 height56 rx6 fillrgba(235,108,54,0.05) stroke#eb6c36 stroke-width1 stroke-dasharray4,4/ rect x320 y88 width4 height56 fill#eb6c36/ text x336 y110 fill#2d3142 font-size12 font-weight600 font-familyGeist, sans-serifPostgres 16 upgrade/text text x336 y126 fill#4f5d75 font-size9 font-familyGeist Mono, monospaceAVA-118 · sam/text示例文件构建于早期 skin当前 style-guide.md 的浅色默认值与之一致accent#eb6c36、ink#2d3142。复杂度预算限制规则列数最多 5 列每列卡片最多 4 张总卡片最多 12 张accent 元素最多 2 个超限 chip 计 1 个受阻卡计 1 个某一列超预算时把积压聚合成一张计数卡文档示例格式14 more而不是把每一项都列出来。Done 列要有上限并在副标签或脚注里注明归档点——无限增长的 Done 列会变成第二个 Backlog。操作步骤主路径让 agent 按类型规范画在客户端里直接描述看板数据。示例请求数据取自 example-kanban.html按你的实际看板替换画一张 Kanban 看板Backlog 3 张卡In progress 上限 3、实际 4 张超上限 Review 上限 3、实际 2 张其中一张是 waiting/externalVendor SSO integration Done 2 张。In progress 第一张是受阻卡 Postgres 16 upgradeAVA-118 · sam。按 SKILL.md §3 的约定agent 动笔前会用一条短消息给出计划选定的视觉类型这里是 Kanban、尺寸预设、以及复杂度预算会裁掉什么。你可以在这之前纠偏它渲染出的应是一个自包含 HTML 文件。替代路径从模板手画想逐像素控制时复制模板自己填my-kanban.html是你自选的输出文件名cp skills/diagram-design/assets/template.html my-kanban.html然后按 SKILL.md §10 的流程替换 eyebrow、h1 和 SVG 正文把模板里的[diagram-slug]占位替换为你的文件 slug填好 SVG 的title/desc。列、WIP chip、卡片的写法直接参照 example-kanban.html 的结构复制。验证按 README 的「Its working if」一节验收分三层能直接打开双击 HTML 文件任何现代浏览器都应正确渲染除 Google Fonts 外无网络请求、无构建步骤。通过自检脚本从仓库 checkout 下执行python3 skills/diagram-design/scripts/self_check.py my-kanban.html输出OK说明可访问性 SVG 契约、单文件安全等基础检查通过。从已安装技能目录执行时是python3 scripts/self_check.py file。Kanban 专项核对对照 type-kanban.md 与 SKILL.md §9 的 taste gate全图没有任何连线/箭头accent 只出现在超限 chip 和受阻卡上≤2 处WIP chip 是rx2矩形标签不是药丸形流程中的每列都有n/limit队列与 Done 列是裸计数列数 ≤5、每列 ≤4、总卡片 ≤12svg带roleimg与aria-labelledbytitle是svg的第一个子元素ID 带 slug 前缀示例中为kanban-title/kanban-desc。反模式这些画法不属于 Kanbantype-kanban.md 明确列出的反模式逐条对照在卡片之间画箭头——看板表达状态不表达流动要表达流动改用 Swimlane 或 Process。一列超过 4 张卡——聚合成计数卡不要让列滚出画布。一人一卡——那是穿着看板外衣的组织架构图org chart。流程中的列不写 WIP 上限——上限是这个类型的一半意义无上限的列无法表达「超预算」。每张受阻卡都上 accent——一两张受阻卡是信号一整列 accent 是噪声。WIP 标签画成药丸形——chip 必须与 §6 的 type-tag 原语一致rx2矩形。可选分支深色/编辑版变体与导出同一份数据有三个变体文件可参考或让 agent 按变体重画minimal light默认、minimal dark、full editorial容器框 摘要卡 页脚适合长文 hero 图。需要把图放进 Figma 或幻灯片时用导出命令而不是整页截图导出只交付svg节点-full变体的摘要卡和 header 按设计会被丢弃导出是手动操作不会自动触发/diagram-design:export-diagram path/to/diagram.html /diagram-design:export-diagram path/to/diagram.html --png-only --scale3PNG 路径依赖 Playwright 一次性的pip install playwright playwright install chromiumexport.md 有完整流程。若交付物仍是 HTML到这里就完成了。【免费下载链接】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），仅供参考