diagram-design：用于生成多种图表的纯前端AI绘图工具

一款纯 HTML+SVG 实现的图表设计工具，自动抓取配色与字体，适用于架构图、流程图等，包括对 Claude Code、Codex 等 Agent 的兼容。

概览

diagram-design 专为 Claude Code、Codex 等 Agent 打造，旨在解决 AI 绘图常见的千篇一律方框问题。该工具声称具备如下特性：

• 支持多达 39 种图表类型（包括架构图、流程图等）
• 纯 HTML + SVG 实现，不需要任何构建工具
• 能输入网址自动抓取配色和字体，匹配品牌调性
• 适用于技术博文、设计文档、产品演示等场景，直接使用

🔗 项目地址： https://github.com/cathrynlavery/diagram-design

使用要点

• 适用场景：技术文档、演示材料、设计方案等
• 技术实现：前端实现，无需额外构建流程
• 自动化能力：根据输入网址提取品牌色与字体

兼容性

• 目标 Agent：Claude Code、Codex 等

备注

• 该工具以纯前端方式提供图表生成功能，能够减少对 Figma 的依赖，降低迭代成本

参考链接保持原文链接，不做改动以保证信息完整性

下载链接

GitHub：
https://github.com/cathrynlavery/diagram-design