@grgerwcwetwet: 发现一个很猛的开源 Skill！以后画流程图、架构图，真不用再折腾 Figma 了！ 推荐一个 GitHub 项目：Diagram Design，直接让 Claude Code、Codex、Cursor 帮你生成专业级图表。 1、内置 4…
摘要
推荐一个开源 Skill 项目 Diagram Design，可让 Claude Code、Codex、Cursor 自动生成流程图、架构图等专业图表，内置 45 种图表类型并支持品牌配色匹配与 HTML/SVG 导出。
查看缓存全文
缓存时间: 2026/10/22 16:34
发现一个很猛的开源 Skill！以后画流程图、架构图，真不用再折腾 Figma 了！
推荐一个 GitHub 项目：Diagram Design，直接让 Claude Code、Codex、Cursor 帮你生成专业级图表。
1、内置 45 种图表类型，流程图、架构图、时序图、甘特图、思维结构图等都能画。
2、支持读取网站配色和字体，自动匹配品牌风格。
3、支持导入 Mermaid、http://draw.io 等图表，重新设计排版。
4、生成独立 HTML + SVG 文件，浏览器直接打开，还能导出图片。
最爽的是，不用自己拖框、拉线、调配色，告诉 AI 想画什么就行！
安装命令： npx skills add cathrynlavery/diagram-design
GitHub： https://github.com/cathrynlavery/diagram-design…
相似文章
@wanerfu: 最近发现一个特别适合做「知识可视化」的 Skill：diagram-design。 已经有近 6 万 Stars。 它干的事很简单： 把长文、流程和关系，做成一张专业好看的图表。 对我这种内容创作者来说，主要用在 6 个地方： 01｜给文…
一位内容创作者推荐开源 Agent Skill「diagram-design」，可将长文、流程和关系自动渲染成单文件 HTML+SVG 专业图表，支持 45 种图表类型、品牌定制以及从 draw.io/Mermaid/Excalidraw 导入，已获近 6 万 Stars。
@0xQiYan: 还在手动画架构图？拖来拖去改半天？ 收藏！今天必须安利这个skill——我最近装了个 `drawio-skill`，一句话就能生成专业图表，再也不用自己画了。 它的逻辑特别简单：你只用说人话（比如“画一个交易系统架构图”），它直接给你生成…
介绍 drawio-skill 工具，通过自然语言描述即可生成架构图、流程图、ER图等专业图表，支持多轮迭代和导出多种格式，大幅提升画图效率。
@10xmylife: 开源一个论文风格插图 skill：paper-style-diagram 我自己很喜欢这类插图，所以封装成了一个 skill，方便 codex 生成 如果你在写比较严肃的内容，比如说教程、经验分享，可以尝试一下这个 Skill 它生成的图…
开源了一个名为 paper-style-diagram 的技能，用于在 Codex 中生成论文风格的插图，支持中文和自定义尺寸。
@GitHub_Daily: 需要跟同事讲解项目系统架构，光说不画图效果有限，自己动手画又费时间还画得不好看。 archify，一个能装进 Claude Code、Codex CLI 和 opencode 的 Agent Skill，把一段大白话描述直接变成一张架构图…
archify 是一个能装进 Claude Code、Codex CLI 和 opencode 的 Agent Skill，可将大白话描述直接生成系统架构图、工作流程图、时序图、数据流向图和生命周期状态图，支持深色/浅色主题切换和多种格式导出。
@tom_doerr: Generates 27 types of diagrams including flowcharts and architecture charts that automatically match your website's fon…
Introduces diagram-design, an open-source Claude Code skill that generates 27 types of branded diagrams (flowcharts, architecture, etc.) automatically matching a website's fonts and colors.