VAUXLAND PROJECT PROFILE · GitHub 项目

diagram-design

cathrynlavery/diagram-design

为 AI 编码助手生成品牌一致的 HTML+SVG 图表

GitHub Stars
49K
价格
代码开放 · 运行费用另计
许可证
MIT
分类
AI Agent 与自动化

先看懂,再决定是否打开。

先用一句话看懂用途,再判断它为什么值得你继续了解。

EDITOR'S NOTE · WHY IT MATTERS

为什么值得关注

解决 AI 助手生成图表依赖 Mermaid 导致样式不可控的问题,提供 44 种图表类型并以独立 HTML+SVG 文件输出,支持通过网站 URL 自动提取配色和字体实现品牌匹配。

GET STARTED

如何开始使用

从官方 README 的安装与使用章节开始。先确认运行环境、API 密钥和许可证;代码开放不代表模型调用、云服务或硬件运行没有成本。

打开官方使用说明 ↗

做决定前,
再看这些事实。

只保留能帮助判断成熟度、使用门槛和来源可信度的信息。

项目类型
GitHub 项目
所属分类
AI Agent 与自动化
GitHub 仓库
cathrynlavery/diagram-design
英文原始描述
Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, and Pi. 44 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.
GitHub Stars
49K
价格
代码开放 · 运行费用另计
许可证
MIT
Vauxland 资料更新
2026 年 10 月 10 日
查看生成文案参考的 README 摘录

**An agent skill that draws diagrams as one self-contained HTML + SVG file, in your brand. 44 diagram types. No shadows. No Mermaid slop.** **Website · Gallery · Changelog** Install · What it makes · Quickstart · Match your brand · Import · Export · Contributing npx skills add cathrynlavery/diagram-design Ask your agent in plain words: - *"Make me an architecture diagram of my app: frontend, backend, database, Redis cache."* - *"I need a quadrant showing Q2 projects by impact vs effort."* - *"Give me a sequence of a bearer call with token refresh on 401."* - *"Onboard diagram-design to https://yoursite.com"* (pulls your palette and fonts so every diagram after this one matches your site) The agent picks the type, states its plan, and writes one `.html` file you can open by double-clicking. --- ## Install Works with any host that reads Agent Skills, including Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf and Amp: In Claude Code, the plugin marketplace gets you updates and the slash commands: Official builds come only from this repository. LittleMight, Cathryn Lavery's company, publishes the plugin directory listings; a listing under any other name is an unofficial copy. PRIVACY.md lists what the skill sends over the network. Claude Code : turn on auto-update After installing, run `/plugin`, open **Marketplaces**, select **diagram-design**, and choose **Enable auto-update**. Claude Code disables auto-update by default for third-party marketplaces; after this toggle, it refreshes the marketplace and installed plugin in the background after startup. Run `/reload-plugins` when prompted, or let the next session load the update. Cursor , Cline, Gemini CLI, Windsurf, Amp, Zed, Warp, Roo, Kilo and other Agent Skills hosts The cross-agent `skills` CLI resolves this repository, detects `skills/diagram-design/SKILL.md`, and installs the whole skill (`references/`, `assets/`, `scripts/`) into every host root you select, including Cursor's: When the selected roots resolve to more than one skills directory, the CLI asks for an installation method and recommends **Symlink**: one canonical copy, linked into each root, so a later update reaches all of th

资料检查:2026 年 10 月 11 日;这是最近抓取的来源资料,不是历史 README 存档。核对完整 README ↗