ARTICLE · 1182567
【AI工具推荐】日增3300 Star碾压free-claude-code!这个AI图表工具让Mermaid可以退休了
【AI工具推荐】日增3300 Star碾压free-claude-code!这个AI图表工具让Mermaid可以退休了日增3300 Star碾压free-claude-code！这个AI图表工具让Mermaid可以退休了 雷子AI工具箱 · 每日AI工具精选 一个让人拍桌子的数据 昨天刷GitHub Trending的时候，一个数据直接把我震住了： cathrynlavery/diagram-design，一个做图表的开源项目，10月13日单日新增3300颗星，总星标数飙到5.26万。 什么概念？同一天的free-claude-code（让Claude Code免费用的那个爆款）才涨了626颗星，context-mode（上下文压缩神器）只涨了246颗。一个做图表的工具，热度直接碾压了这帮当红炸子鸡。 更离谱的是，这个项目从创建到5万Star，前后也就一两周的事。 你可能会问：图表工具而已，至于吗？ 至于。因为Diagram Design解决的不是"能不能画图"的问题，而是"AI画出来的图为什么总是那么丑"这个让所有开发者抓狂的灵魂拷问。 你的AI画的图，是不是也是这样？ 咱们先回忆一个场景： 你用Claude Code写了一个很漂亮的后端架构，然后说"帮我画个架构图"。结果Claude给你吐出来一个……方方正正、圆角矩形、颜色像PPT模板的东西。 放到技术博客里？跟网站风格完全不搭。 放到产品文档里？丑到产品经理都不想认。 放到PPT里？老板看了直摇头。 于是你打开Figma，折腾了半小时对齐、配色、调字体，最后发现还不如不画。 这就是Diagram Design要杀死的痛点。 它的创造者Cathryn Lavery（BestSelf.co创始人、知名技术博主）说得很直白： "每次我需要一张图——架构图、流程图、金字塔图——我让Claude画，结果都是一个跟我网站风格完全不搭的通用圆角盒子。要么跟Figma较劲半小时，要么干脆不画了。" 所以她做了一个Claude Code技能，让AI能画出编辑出版级的图表，而且自动匹配你的品牌色和字体。60秒搞定。 Diagram Design 2.0：44种图表 + 品牌自动适配 先说核心能力。 🔹 44种图表类型，覆盖你能想到的所有场景 Diagram Design 2.0支持44种图表类型，从最常见的到最专业的，一应俱全： 架构类：系统架构图、组件关系图、部署拓扑图、C4模型图 流程类：流程图、决策树、状态机图、泳道图 时序类：序列图、时序图、调用链图 数据类：ER图、数据流图、数据模型图 对比类：雷达图/蛛网图、对比矩阵、评估表 时间类：时间轴、甘特图、路线图 循环类：飞轮图（Loop）、生命周期图、迭代模型 IT运维类：IT现状图、现代化迁移图、网络拓扑图 概念类：金字塔图、思维导图、维恩图、概念关系图 每种类型都有专业的排版规则，不是随便画几个框连几条线那种。 🔹 60秒品牌适配：读你的网站，用你的配色 这是Diagram Design最炸裂的功能。 你只需要一句话： 然后它就会： 1. 爬取你的网站 2. 自动提取你的配色方案（主色、辅色、强调色、背景色） 3. 自动识别你用的字体 4. 把这些品牌元素注入到每一张图表中 从此以后，你让AI画的所有图表，都是你品牌的视觉风格。 不用挑色、不用选字体、不用调间距。放进去就是对的。 🔹 自包含HTML+SVG：零依赖，到处能用 生成的图表是什么格式？自包含的HTML文件。 什么意思？就是一个HTML文件，所有样式、字体引用、SVG图形全部内嵌，不依赖任何外部库。浏览器直接打开就能看，零构建、零服务器、零框架。 需要嵌入文档？直接引用HTML。 需要放到PPT里？导出PNG或SVG。 需要放到Figma里编辑？导出SVG直接导入。 需要放到GitHub README里？SVG自动适配深色/浅色模式。 5分钟上手指南 🔹 安装方式一：作为Claude Code技能 重启Claude Code，搞定。 🔹 安装方式二：作为插件（更快） 🔹 安装方式三：Codex用户 🔹 兼容平台 不只是Claude Code！Diagram Design 2.0支持： • Claude Code（完整功能） • OpenAI Codex（完整功能） • GitHub Copilot（完整功能） • Cursor（完整功能） • Factory Droid（完整功能） • Pi（完整功能） 基本上你用的任何AI编程助手，它都能接入。 🔹 画第一张图 安装完成后，直接用自然语言描述： Claude会自动选择最合适的图表类型，生成排版精美的HTML文件。打开浏览器一看——嚯，这真是AI画的？ 🔹 导出 或者用斜杠命令： PNG默认2倍分辨率，可以调到3倍甚至更高，打印出来都清清楚楚。 对比竞品：为什么不是Mermaid？ 很多读者的第一反应是：我用Mermaid用得好好的，为什么要换？ 好问题。咱们拉个对比：
核心差异就一句话：Mermaid是"能画出来就行"，Diagram Design是"画出来就是精品"。 Mermaid的优势在于它是Markdown原生语法，GitHub/GitLab直接渲染。如果你的需求是在README里加个简单流程图，Mermaid够了。 但如果你要： • 写技术博客配图 • 做产品文档 • 给客户演示 • 放进PPT汇报 • 任何需要"好看"的场景 Diagram Design碾压Mermaid。 🔹 对比Archify GitHub上还有一个类似项目叫archify（8.2万Star），也是做AI图表的。区别在于： • Archify：侧重架构图，深色/浅色主题切换，偏技术风格 • Diagram Design：44种类型全覆盖，品牌适配能力更强，编辑出版风格 两个都是好工具，但Diagram Design的适用面更广。 55个专业IT图标 Diagram Design 2.0还内置了55个单色IT/云服务图标： 笔记本、手机、用户、服务器、数据库、Docker、Kubernetes、AWS、Azure、GitHub、Postgres…… 全部使用 图标来源：Tabler Icons（MIT协议）+ Simple Icons（CC0协议），商用无压力。 设计哲学：密度4/10，每个节点都要挣到自己的位置 Diagram Design背后有一套非常克制的设计哲学。 Cathryn Lavery在文档里写了一条核心原则：目标密度4/10。意思是，一张图的信息密度只需要四分就够了。每个节点都必须"挣到自己的位置"——如果你删掉它，读者不会损失任何关键信息，那这个节点就不该出现。 强调色只留给读者最应该先看到的1-2个要素。注释用斜体Instrument Serif字体加虚线贝塞尔引导线，安静地待在画面边缘，绝不喧宾夺主。 这种"最高质量的决策通常是删减"的理念，让Diagram Design生成的图表天然就有一种编辑级的克制感。不是把信息堆得越满越好，而是让每一笔都有存在的理由。 对比Mermaid那种"把所有东西都画出来再说"的风格，这就是专业和业余的差距。 为什么它能爆？ 回过头来看，Diagram Design为什么能在一周内冲到5万Star？ 因为它解决的是一个"所有人都忍了很久"的问题。 AI编程助手越来越强，写代码、做分析、debug都没问题。但一让它画图，就露馅了。不是画不出来，而是画出来的东西——丑。 那种方方正正、配色辣眼睛、一看就是AI生成的图，放到正式场合总觉得拿不出手。 Diagram Design用一种极其优雅的方式解决了这个问题：不是让AI学设计，而是让AI学会按设计规则画图。 44种图表类型，每种都有一套编辑级的排版规范。品牌自动适配，让每张图都跟你网站浑然一体。自包含HTML，让输出到处可用。 这不是一个"又一个图表工具"。这是AI编程时代的图表基础设施。 一些实用建议 适合谁： • 技术博主/自媒体人：画配图效率翻倍 • 企业开发者：做技术文档和汇报材料 • 架构师：快速产出专业的架构图 • 产品经理：需求文档里画流程图 不太适合谁： • 只需要README里简单流程图的（Mermaid够了） • 需要高度定制化动画效果的（考虑D3.js） 一个小提醒： Diagram Design每次生成的布局可能略有不同（同样的prompt，出来的图不完全一样）。如果你需要严格的版本控制，建议把生成的HTML文件存到Git里。 今日互动 你平时用什么工具画图？Mermaid、Draw.io、Figma、还是直接让AI随便画一个？ 评论区聊聊你的"AI画图翻车经历"，最离谱的我置顶👇 📌 项目信息 • 项目地址：https://github.com/cathrynlavery/diagram-design • Star数：52.6k（2026-10-13） • 协议：MIT • 语言：HTML • 兼容平台：Claude Code / Codex / Copilot / Cursor / Factory Droid / Pi 关注「雷子AI工具箱」，每天一个AI神器，让你的副业效率起飞🚀 往期精选：REA逆向工程MCP工具 | CLI-Anything万能命令行 | Agent Zero自主编程
"onboard diagram-design to https://yoursite.com"git clone git@github.com:cathrynlavery/diagram-design.git ~/code/diagram-design ln -s ~/code/diagram-design/skills/diagram-design ~/.claude/skills/diagram-design/plugin marketplace add cathrynlavery/diagram-design /plugin install diagram-design@diagram-designnpx skills add https://github.com/cathrynlavery/diagram-design --skill diagram-design"画一个微服务架构图：前端React通过API Gateway连接三个后端服务（用户服务、订单服务、支付服务）， 每个服务连各自的PostgreSQL数据库，共享一个Redis缓存层""把这张图导出为PNG和SVG"/diagram-design:export path/to/diagram.html --png-only --scale=3currentColor，自动继承你的品牌配色或者默认主题色。画架构图的时候直接用，不用再到处找图标了。
