@trending_repos: 本周热门仓库 diagram-design 29种编辑图表类型 for Claude Code. 自包含 HTML + SVG. N…

字体系列 |title字体 | | `` 字体系列 |node-name字体 | | `` / `` 字体 |sublabel字体 | ### 对比度检查自动进行 在书写令牌之前，技能会验证ink在paper 上的 WCAG AA 对比度。如果您网站的颜色在图表尺寸（9–12px）下对比度不达标，它会建议调整后的值并解释原因。 ### 默认即可访问 每个图表模板都为内联 SVG 提供可访问的名称和描述：role=“img”、一个确定的 aria-labelledby，以及首位的 `` / 插槽。ID 根据图表和变体进行前缀化，因此多个 SVG 导出可以安全地内联到一个页面中，而不会出现重复的可访问名称 ID。装饰性的示例图标则对辅助技术隐藏。 ### 手动覆盖 更喜欢手动设置令牌？打开 [skills/diagram-design/references/style-guide.md](skills/diagram-design/references/style-guide.md) 并编辑表格。所有下游内容都从那里读取——全部 27 个图表、注释原语和画廊都继承语义角色名称（accent，而不是 #eb6c36）。 ### 首次运行门控 技能不会默默地将默认样式的图表放入品牌项目中。在新项目中首次使用时，它会检查 style-guide.md 是否已自定义。如果没有，它会暂停并询问： > *"这是您在该项目中的第一个图表。样式指南仍为默认设置。您想要运行引导流程、粘贴令牌，还是使用默认设置继续？"* 请参阅 [skills/diagram-design/references/onboarding.md](skills/diagram-design/references/onboarding.md) 了解完整规范。 ### 与多个客户协作 一次性为一个品牌设置入门流程，将结果保存为命名的配置文件，然后在每个客户项目中添加一个包含 profile: 的.diagram-design标记。标记项目直接读取~/.diagram-design/profiles/.md，因此并行工作区可以使用不同的品牌，而无需覆盖共享的已安装 style-guide.md。配置文件库在 Claude Code、Codex 和 Pi 之间共享。在 Claude Code 中使用 /diagram-design:profile，在 Pi 中使用 /profile，或在任何主机中以自然语言询问。请参阅 [profiles.md](skills/diagram-design/references/profiles.md) 了解存储、标记和恢复约定。 --- ## 快速开始 ``bash # 从克隆的检出中，打开画廊查看所有 27 个图表 open skills/diagram-design/assets/index.html # macOS xdg-open skills/diagram-design/assets/index.html # Linux # 在 Claude Code、Codex 或 Pi 中，询问： # “为我的应用制作一个架构图：前端、后端、数据库、Redis 缓存。” # “我需要一个象限图，展示第二季度项目按影响力与工作量分布。” # “给我一个 Bearer 调用序列，其中包含令牌刷新在 401 响应时。” # （分支刷新使用 type-sequence.md 中的 ALT 组合片段语法； # 参见 skills/diagram-design/assets/example-sequence-oauth.html —— 并非完整的授权码握手） `` 您的代理将选择正确的类型，构建 HTML，并保存它。您也可以直接从模板开始： ``bash cp skills/diagram-design/assets/template.html my-diagram.html # 最小化、浅色 cp skills/diagram-design/assets/template-full.html my-diagram.html # 带摘要卡片的编辑性模板 cp skills/diagram-design/assets/template-motion.html my-diagram.html # 可选的可访问动效 `` ### 语义模式和可选动效 当行为很重要时，技能首先选择语义模式，其次才是视觉类型。这七种路由模式涵盖了扇入队列和瓶颈、重复阶段插槽、非结构化输入转换、成对的策略跟踪、安全铺设道路、治理目录和补偿安全层。每种模式在 [semantic-patterns.md](skills/diagram-design/references/semantic-patterns.md) 中定义了其触发器、原语、预算、反模式、静态回退和最近的视觉类型。 动效是可选的，不会创建另一种视觉类型。[animation.md](skills/diagram-design/references/animation.md) 定义了 none、reveal、step和loop模式，具有完整的静态首帧、确定性时间轴，并在交互可用时提供控制。简化运动输出显示完整的静态帧，并隐藏/禁用播放控制。 动效 HTML 使用template-motion.html中经过精确审查的控制器；任意或修改的内联脚本、远程资源、CSS 导入和可执行 HTML 属性会被拒绝。默认值为none：普通输出保持静态且无脚本。[example-policy-trace-animated.html](skills/diagram-design/assets/example-policy-trace-animated.html) 是独立的交互式示例。 --- ## 从 draw.io 或 Mermaid 导入 已经有 draw.io / diagrams.net 或 Mermaid 图表了吗？将技能指向源，它将**重绘**它们——内容相同，使用此设计系统，并适应目标所需。 *从 .drawio 文件重绘的图表* *一个 12 节点的 draw.io 文件以 balanced 细节级别重绘，用于博客文章。源中的六种柔和填充变成了一种强调色；其手动拖动的坐标变成了 4px 网格。* `` /diagram-design:import platform.drawio /diagram-design:import platform.drawio --size=slide-16x9 --detail=simplified --audience=executive /diagram-design:import platform.drawio --detail=faithful --format=png --page=all /diagram-design:import-mermaid README.md --diagram=all /diagram-design:import-mermaid architecture.mmd --size=slide-16x9 --detail=simplified `` 或者直接询问：*“为我的演示文稿重绘这个 drawio 文件”*、*“让这个 Mermaid 块变得适合编辑”* 或 *“この Mermaid をスライド用にきれいにして”*。 它读取 draw.io 写入的常见容器——.drawio、.drawio.xml、.drawio.png（嵌入图表）和 .drawio.svg——包括在编辑器中看起来像 base64 乱码的压缩负载。 对于 Mermaid，它接受 .mmd、.mermaid以及 Markdown 中的一个或多个带围栏的mermaid块。它只解析文本：不进行渲染、JavaScript、浏览器、网络或跟踪点击目标。 ### 四个调节旋钮 重点不是转换，而是**使输出适应其用途**。相同的源文件，三个不同的图表： | 旋钮 | 选项 | 改变什么 | |---|---|---| | **格式** |html·svg·png·html+png| 交付物。SVG 用于 Figma，PNG 用于幻灯片，HTML 用于网页。 | | **尺寸** |doc-inline·doc-wide·slide-16x9·slide-4x3·social-og·social-square·print-a4-landscape·print-letter-landscape·fit|viewBox**以及字体比例**——一个投射的幻灯片节点名称使用 16px，而不是 12px。 | | **细节** |faithful（≤24 节点，分区） · balanced（≤12） · simplified（≤7） | 源内容有多少保留，通过固定的降级阶梯——装饰物，然后重复项，然后叶节点集群，然后基础设施。 | | **受众** | engineer·mixed·executive | *措辞*，而不是数量。Auth Service / JWT · RS256 · :8443→Auth Service / token check→Sign-in。 | 每次导入都以**保真度账本**结束——哪些被合并、折叠或丢弃了。您了解源；您本来也会注意到。 `` 细节：balanced · 12 个源节点 → 8 个已绘制 折叠："Token valid?" 决策 → Gateway 上的边标签 → Auth 丢弃：1 个便签（"遗留路径，待退役"）——在源中未连接 完整保留：请求路径（Web/Mobile → Gateway → Orders → Postgres） `` 永远不会带过来的：源或渲染器坐标、源调色板、源字体、draw.io 的对角线连接器杂乱，或 Mermaid 的自动布局。总是带过来的：组件、关系、分组和方向。 请参阅 [references/import-drawio.md](skills/diagram-design/references/import-drawio.md)、[references/import-mermaid.md](skills/diagram-design/references/import-mermaid.md) 和 [references/output-spec.md](skills/diagram-design/references/output-spec.md)。 --- ## 导出为 PNG / SVG 图表以独立 HTML 形式发布，但您可以将图表本身导出为 Figma、幻灯片或社交卡片使用。使用您代理的斜杠命令： **Pi:** `` /export-diagram path/to/diagram.html /export-diagram path/to/diagram.html --svg-only /export-diagram path/to/diagram.html --png-only --scale=3 `` **Claude Code:** `` /diagram-design:export path/to/diagram.html /diagram-design:export path/to/diagram.html --svg-only /diagram-design:export path/to/diagram.html --png-only --scale=3 `` 或者直接以自然语言询问： `` "Export this diagram as SVG and PNG." "Save my-diagram.html as PNG." `` - **SVG** — 提取 节点并注入 Google Fonts，使其可在浏览器、Figma 和 Illustrator 中独立渲染。 - **PNG** — 默认通过 Playwright 以 2× 分辨率对图表进行栅格化。一次性设置：pip install playwright && playwright install chromium。 两种格式仅包含图表本身——-full 变体中的编辑卡片和标题不包含在内。要获取完整编辑布局的屏幕截图，请使用浏览器的打印到 PDF 或全页截图功能。 请参阅 [skills/diagram-design/references/export.md](skills/diagram-design/references/export.md) 了解完整流程。 对于启用动效的 HTML，请导出明确的最终状态：打开 ?motion=static，等待 document.fonts.ready，并在捕获前确认动效根节点具有 data-frame=“static”。仅当请求了命名的中间帧时，才使用 ?motion=step&step=N。 --- ## 架构 渐进式公开。SKILL.md在需要时首先路由行为，然后是布局。语义、类型和动画引用仅在相关时加载。 `` diagram-design/ ├── .agents/plugins/marketplace.json — Codex 市场目录 ├── .claude-plugin/ — Claude 市场 + 插件清单 ├── .codex-plugin/ — Codex 插件清单 ├── commands/ │ ├── export-diagram.md — Claude Code 导出命令 │ ├── import-drawio.md — Claude Code draw.io 导入命令 │ ├── import-mermaid.md — Claude Code Mermaid 导入命令 │ └── profile.md — Claude Code 客户配置文件命令 ├── prompts/ │ ├── export-diagram.md — Pi/export-diagram提示模板 │ ├── import-mermaid.md — Pi Mermaid 导入提示模板 │ └── profile.md — Pi/profile提示模板 ├── skills/ │ └── diagram-design/ │ ├── SKILL.md — 理念、选择指南、检查清单 │ ├── references/ — 仅在类型或原语被选中时加载 │ │ ├── style-guide.md — 颜色和字体的唯一真实来源 │ │ ├── semantic-patterns.md — 独立于布局的行为模式 │ │ ├── animation.md — 可选动效 + 可访问性约定 │ │ ├── onboarding.md — URL 到令牌的流程 │ │ ├── profiles.md — 命名的客户配置文件 + 项目标记 │ │ ├── import-drawio.md — draw.io 重绘流程 │ │ ├── import-mermaid.md — Mermaid 重绘流程 │ │ ├── output-spec.md — 格式 × 尺寸 × 细节级别 │ │ ├── export.md — SVG / PNG 导出 + 尺寸调整 │ │ ├── type-architecture.md │ │ ├── type-flowchart.md │ │ ├── type-sequence.md │ │ ├── type-state.md │ │ ├── type-er.md │ │ ├── type-timeline.md │ │ ├── type-swimlane.md │ │ ├── type-quadrant.md │ │ ├── type-nested.md │ │ ├── type-tree.md │ │ ├── type-org-chart.md │ │ ├── type-layers.md │ │ ├── type-venn.md │ │ ├── type-pyramid.md │ │ ├── primitive-annotation.md │ │ ├── primitive-sketchy.md │ │ └── primitive-terminal.md │ ├── scripts/ │ │ ├── drawio_extract.py — draw.io → 结构化 IR │ │ ├── mermaid_extract.py — Mermaid → 结构化 IR │ │ └── self_check.py — 打包输出自检（运行已安装的） │ └── assets/ │ ├── index.html — 实时画廊，带标签页 │ ├── template*.html — 新图表的脚手架 │ ├── example-<type>.html — 3 个变体 × 27 种类型 │ ├── example-loop-terminal.html │ ├── example-quadrant-consultant.html │ ├── example-import-drawio.html │ ├── example-import-mermaid.html │ ├── example-policy-trace-animated.html │ └── example-sequence-oauth*.html ├── scripts/ │ ├── bump-plugin-version.py — 同步的 Claude/Codex 版本提升 │ ├── verify-plugin-package.py — 版本 + 市场包门控 │ ├── test-plugin-package.py — 对抗性包门控测试 │ ├── test-verify-docs-sync.py — 文档/配置文件表面门控测试 │ └── fixtures/ │ ├── sample-flowchart.mmd │ ├── sample-readme-with-mermaid.md │ └── sample-adversarial.mmd ├── docs/adr/ — 已定设计决策的简短记录 └── docs/screenshots/ — 此 README 中使用的图像 `` 这使得代理的工作上下文保持紧凑：常规图表加载一个类型引用；行为丰富的图表添加路由的语义引用；动画仅在选中时添加其约定。 ### 贡献 / 样式检查 在提交新示例之前，运行python3 scripts/lint-skin.py <your-new-example.html>。仓库范围的检查 python3 scripts/lint-skin.py –all –baseline覆盖示例和模板，并且必须保持绿色。CI 单独验证语义路由、动画示例结构、动画样式、每个发布的动效资产以及控制器约定的对抗性变异，即使前一个门控失败也会报告后续门控结果。 语义路由必须通过python3 scripts/verify-semantic-motion.py –markdown-only；动画示例有单独的 –example-only门控。每个发布的动效模板/示例也必须通过python3 scripts/verify-motion.py –shipped。 检查器的 a11y类别拒绝没有确定可访问名称的图表 SVG、空的或放置不当的标题/描述，或不安全的裸露title/descID。它还固定了经过精确审查的动效控制器，并拒绝远程资源、CSS@import、非片段 CSS url()和可执行属性（如onclick或srcdoc）。 如果您修改了 draw.io 导入路径，python3 scripts/verify-drawio-import.py也必须通过——它针对scripts/fixtures/sample-architecture.drawio 在所有四种容器格式中驱动真实的提取器，并检查引用是否保持同步。 如果您修改了 Mermaid 导入路径，python3 scripts/verify-mermaid-import.py 也必须通过——它涵盖所有支持的语法、多块 Markdown、对抗性标签、信任边界行为、资源上限、命名失败以及引用/命令连接。 标签放置通过几何方式门控：python3 scripts/verify-geometry.py –all 当标签掩码与文档中后声明的节点重叠时会使 CI 失败，因为在渲染时节点填充会裁剪文本。python3 scripts/test-verify-geometry.py 在两个方向上保持该检查器的诚实性。 文档和路由表面本身也受到门控：python3 scripts/verify-docs-sync.py当 SKILL.md 描述丢失类型的词汇钩子、画廊无法到达已发布的示例、README 树命名的文件不存在、SKILL.md 中的相对references/*.md链接损坏，或 Claude/Pi 配置文件表面与profiles.md 漂移时，会使 CI 失败。python3 scripts/test-verify-docs-sync.py以对抗性方式练习这些新的检查。 技能还发布了skills/diagram-design/scripts/self_check.py——一个精炼的输出检查器，已安装的代理可以对自己生成的图表运行；python3 scripts/test-self-check.py保持其诚实性。 已定的设计决策（为什么固定一个控制器、为什么模式从不添加类型、自动播放策略、SKILL.md 字节限制、为什么标签放置通过几何方式验证，以及为什么客户配置文件使用标记优先解析）作为简短的 ADR 存放在docs/adr/ 中——在重新辩论之前阅读它们，在确定新策略时添加一个。 所有拉取请求和推送都通过 GitHub Actions CI（.github/workflows/ci.yml）在 Linux、Windows 和 macOS 运行器上自动验证。 ### 何时加载什么 启动时，代理只看到技能名称和描述。当请求匹配时，它加载 SKILL.md；语义、类型和动画引用仅在相关时引入。 | 您要求... | 代理加载 | |---|---| | “为我制作一个流程图” | SKILL.md+references/type-flowchart.md| | “构建一个架构图” |SKILL.md+references/type-architecture.md| | “比较为什么这两个策略请求不同” |SKILL.md+references/semantic-patterns.md+references/type-flowchart.md| | “为该策略跟踪添加动画” | 之前的选择 +references/animation.md| | “将此技能引入我的网站” |SKILL.md+references/onboarding.md` |