cathrynlavery/diagram-design

项目概览

值得关注之处在于，它把网站品牌令牌提取、既有图表重绘、目标场景适配和多格式导出放进同一套图表工作流；静态版本可直接在浏览器中打开，导入过程还会报告被合并、折叠或丢弃的内容。

项目类型

AI 工作流 · 图像视觉

应用场景

文档办公

部署方式

查看项目说明

License

MIT

适合谁

• 适合希望通过自然语言请求制作编辑风格、品牌匹配图表的内容创作者。
• 适合需要导入受支持的 draw.io、Mermaid 或 Excalidraw 图表源文件并重新设计其视觉呈现的用户。
• 适合偏好通过命令行交互，且不要求编写代码来完成已记录使用路径的用户。

核心能力

• 提供可复用的技能说明、视觉类型和模板，用于生成自包含 HTML 与 SVG 格式的编辑风格图表。
• 获取用户提供的网站，提取主要色板和字体栈，将其映射到语义化设计角色后应用于图表。
• 读取受支持的 draw.io、Mermaid 和 Excalidraw 源文件，并使用项目的设计体系重新绘制其中内容。
• 根据预期发布位置和受众，调整输出格式、画布尺寸、保留细节与措辞。
• 可从生成的 HTML 中提取独立 SVG，或通过 Playwright 栅格化为 PNG。
• 提供可选的揭示、分步和循环模式，并包含完整静态帧与减少动态效果的行为；普通输出保持静态且不包含脚本。
• 模板为 SVG 提供可访问的名称和描述、带前缀的标识符，并对装饰性图标进行辅助技术处理。
• 可保存具名品牌配置并按项目选择，使并行工作区能够使用不同品牌设置，而不覆盖共享样式指南。

限制与风险

• 不能把 Excalidraw 导出的 PNG 或 SVG 作为导入源；导入器接受“.excalidraw”和“.excalidraw.json”场景文件。
• Excalidraw 导入器不用于渲染场景、执行 JavaScript、使用浏览器或网络，也不会跟随点击目标。
• 使用 PNG 导出前，需要完成一次 Playwright 和 Chromium 安装。
• SVG 和 PNG 导出只保留图表，不包含完整变体中的编辑卡片和页眉。
• 动态输出不接受任意或修改过的内联脚本、远程资源、CSS 导入以及可执行 HTML 属性。
• 如果直接修改托管式安装中的“references/style-guide.md”，软件包更新可能替换这些定制；采用此安装方式前应确认样式配置的保存方式。

如何开始

• 已记录的路径是：将该仓库添加到 GitHub Copilot 插件市场，安装 diagram-design，通过“copilot skill list”或“/skills”确认技能已被发现，然后使用自然语言请求图表。

核验依据

• GitHub 项目简介: Editorial diagram design for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.
• README: Every time I needed a diagram — an architecture sketch, a flowchart, a pyramid of what matters most — I'd ask Claude and get back a generic rounded-box thing that looked nothing l…
• README: Every visual type ships in three static variants: minimal light, minimal dark, and full-editorial. Open any of them directly in a browser. There is no build step, JavaScript, or e…
• README: *New in 2.0 — the Loop: flywheels with a shared-memory hub. The dashed lines are the write-backs.* *New in 2.3: semantic system patterns and optional accessible motion, while stat…
• README: The whole point: ship editorial-quality diagrams in **your** colors and typography, not a generic template. Out of the box, diagrams render in a clean **jet-black + atomic-tangeri…

来源更新时间：2026-09-18T18:19:54Z

打开原始 GitHub 项目