之前汇总介绍过绘图工具超强大免费绘图工具draw.io初体验Mermaid语法、实战画图工具汇总Excalidraw、tldraw、Drawnix、Drawio绘图工具汇总FossFLOW、LogicFlow、oxdraw、LucidChart、iCraft EditorNext AI Draw.io官网基于Draw.io的开源GitHub28.4K Star3K Fork跨平台AI图表生成工具。优势专业级输出质量完全开源支持本地部署与Draw.io生态完全兼容支持团队协作和版本控制核心功能自然语言驱动图表创建支持流程图、UML图、架构图等实时编辑和修改多AI模型支持OpenAI、Claude、Google等实战官方提供多种使用方式官网就是在线SaaS无需登录即可基于浏览器使用从GitHub Release页面下载二进制安装包文件官方提供快速示例Fireworks-Tech-Graph开源GitHub8.4K Star725 ForkClaude Code技能用自然语言描述系统生成生产级的SVGPNG技术图表支持中英文。功能特性8种视觉风格Flat Icon白底扁平风适合博客和文档干净利落Dark Terminal暗黑终端风霓虹配色加等宽字体Blueprint深蓝底加网格线适合工程图纸Notion Clean极简Glassmorphism玻璃拟态一种UI设计风格通过背景模糊、半透明填充、高光边框三大要素模拟磨砂玻璃的通透悬浮质感Claude OfficialAnthropic温暖奶油色OpenAI Official纯白底配品牌绿Dark Luxury支持14种UML图表类型类图、组件图、包图、部署图、序列图、时序图、状态机图、活动图、用例图、交互图、ER图、架构图、流程图、网络拓扑图自带AI/Agent领域的知识库Mem0记忆架构、Tool Call流程、Multi-Agent协作拓扑…Agentic Search模式Query Planning查询规划Multi-step Retrieval多步检索Synthesis综合合成Reflection反思优化的完整搜索闭环。自带4个辅助脚本generate-diagram.sh用来验证SVG并导出PNGgenerate-from-template.py从模板快速创建起始SVGvalidate-svg.sh单独验证语法test-all-styles.sh批量测试所有风格对比工具优点缺点fireworks-tech-graph自然语言生成、专业美观需要CCMermaid简单易用样式单一、难调试draw.io功能全面操作繁琐、耗时excalidraw手绘风格样式有限实战# 基于CC安装claude skillsaddhttps://github.com/yizhiyanhua-ai/fireworks-tech-graph# 基于npx安装npx skillsaddyizhiyanhua-ai/fireworks-tech-graph# 从源码安装gitclone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph# 导出PNG还得装rsvg-convertbrewinstalllibrsvgsudoapt-getinstalllibrsvg2-bin# Windows用户手动安装MSYS2、librsvg在CC中直接用中英文描述想要的图表画一个Multi-Agent协作的架构图包含Manager Agent、Worker Agent和Communication Bus。玻璃拟态核心特征与实现原理背景模糊使用backdrop-filter: blur()模糊元素后方内容而非元素本身营造景深半透明填充背景色需带低不透明度如rgba(255,255,255,0.1~0.3)确保背景可见但内容清晰高光边框添加细窄半透明边框通常白色或浅色不透明度10%-30%模拟玻璃边缘反光依赖背景必须置于色彩丰富或有渐变的背景上单调背景无法体现效果CSS基础代码示例.glass{background:rgba(255,255,255,0.15);/* 半透明底色 */backdrop-filter:blur(12px);/* 核心背景模糊 */-webkit-backdrop-filter:blur(12px);/* Safari兼容 */border:1px solidrgba(255,255,255,0.2);/* 高光边框 */box-shadow:0 8px 32pxrgba(0,0,0,0.1);/* 悬浮阴影 */border-radius:16px;}Architecture Diagram Generator开源GitHub5.8K Star440 Fork专门用于生成架构图的Claude Skill。SKILL.md定义一套完整的设计系统包括颜色规范、组件样式、排版规则、SVG布局约定让AI按这套系统生成HTML内联SVG代码。AI输出完整HTML文件SVG全部内联样式全部嵌入打开即用。设计细节语义色彩分层Frontend用Cyan青色Backend用Emerald翠绿Database用Violet紫色Cloud用Amber琥珀安全相关用Rose玫瑰红。颜色有对应语义箭头渲染顺序连接线先于组件框绘制保证箭头在视觉上位于组件之后避免箭头盖住文字。组件框还会在半透明色块下面额外画一个纯色遮罩层防止箭头透过半透明区域。这种细节在draw.io里需要手动处理Skill直接内置图例位置约束Legend必须放在所有边界框的外面并计算最低边界再加20px距离防止标注被区域框遮住深色主题Slate-950深色背景配上40px的网格图案JetBrains Mono字体更具技术感对话式迭代改图不用重画颜色Cyan青色常用在前端、客户端、UI的设计中Emerald翠绿在后端、API、服务的设计中经常用Violet紫罗兰常用在数据库、存储、AI/ML的设计中Amber琥珀云服务、基础设施画图中会比较常用Rose玫瑰搭配认证、安全、加密场景Slate石板灰用在外部系统、第三方服务的设计中如支付、短信、邮件等使用从GitHub Release页面下载architecture-diagram.zip以Claude Code为例打开claude.ai进入SettingsCapabilitiesSkills点击Add上传zip文件最后开启Skill即可。局限生成图表是静态的不支持多人实时协作。团队要在线白板协作还是得用Miro或FigJam等其他工具。Excalidraw Diagram Skill基于开源白板工具Excalidraw构建的开源GitHub2.9K Star375 ForkAI技能插件允许AI助手如Claude、ChatGPT等在对话中直接创建、编辑和解释手绘风格的图表。这个技能将自然语言转换为可视化图表大大增强AI在技术沟通、系统设计和思维导图方面的能力。核心功能特性图表创建能力手绘风格图表创建具有手绘感的流程图、架构图、思维导图多元素支持支持形状、箭头、文本、连接线、图标等实时协作支持多人实时编辑和协作导出格式支持PNG、SVG、Excalidraw文件格式导出AI集成特性自然语言到图表用户用自然语言描述AI生成对应图表图表解释分析AI可以分析现有图表并解释其内容智能布局自动优化图表布局和元素排列样式建议根据内容推荐合适的图表样式和颜色技术架构前端基于React的Excalidraw核心AI集成通过API与AI模型交互数据格式使用JSON格式存储图表数据扩展性支持自定义组件和插件安装gitclone https://github.com/coleam00/excalidraw-diagram-skill.gitcp-rexcalidraw-diagram-skill .claude/skills/excalidraw-diagram设置cd.claude/skills/excalidraw-diagram/references uvsyncuv run playwrightinstallchromium代码仓库主要就是Skill.md文档Codag官网专为软件工程师打造的开源GitHub516 Star42 ForkVS Code扩展分析代码画流程图。利用Tree-sitter解析器和LLM深入理解代码语义。能识别出所有LLM API调用、决策分支Branching Logic和数据转换步骤并将它们渲染成交互式的DAG有向无环图。修改代码时DAG也会实时更新。官方Demo动图有21.5M请去GitHub查看。功能实时联动所见即所得 (Live Graph Updates)利用Tree-sitter增量解析技术修改函数名或增加新的LLM调用右侧流程图会瞬间刷新。修改过的节点还会高亮显示可清楚地看到变动点。点击跳转双向导航 (Click-to-Source)每一个节点都对应代码中的具体函数或调用双向链接彻底打通逻辑视图和代码视图的隔阂图到代码点击图上的节点编辑器直接跳转到对应的代码行。代码到图在代码中选中函数图上对应的节点也会高亮。全栈兼容包括Python、TypeScript等语言OpenAI等模型LangChain、LlamaIndex、CrewAI等智能体框架。实战基于源码安装gitclone https://github.com/michaelzixizhou/codag.gitcdcodagcpbackend/.env.example backend/.envvimbackend/.env# 填入GEMINI_API_KEYxxxxxdockercompose up-d安装VS Code插件或下载.vsix文件本地安装连接本地。Smart Draw项目首页开源GitHub416 Star86 Fork专注于Excalidraw的AI增强工具。功能特性自然语言生成Excalidraw图表实时流式响应和渲染多会话管理支持多种AI API包括国内服务商本地存储数据安全移动端适配良好Diagram GPT项目首页基于Mermaid.js用自然语言生成图表的开源GitHub318 Star76 Fork项目支持多种图表类型流程图、序列图、类图、用户旅程图、甘特图、C4架构图、思维导图。核心特性无需学习专业绘图语法一键生成多种图表类型支持导出为SVG、PNG、Markdown响应式设计移动端友好安装gitclone https://github.com/fraserxu/diagram-gpt.gitcddiagram-gptnpmrun dev# oryarndev# orpnpmdev浏览器打开http://localhost:3000开始体验。AI Excalidraw项目首页专为Excalidraw优化的AI集成的开源GitHub191 Star44 Fork工具。功能特性自然语言绘图多模型支持OpenAI、智谱AI、阿里百炼等本地优先存储响应式设计基于源码部署gitclone https://github.com/co-pine/ai-excalidraw.gitcdai-excalidraw buninstallbun run dev浏览器打开http://localhost:3000开始体验。
代码画图项目、Skill插件汇总：Next AI Draw.io、Fireworks-Tech-Graph、Architecture Diagram Generator、Excalidraw Diag
之前汇总介绍过绘图工具超强大免费绘图工具draw.io初体验Mermaid语法、实战画图工具汇总Excalidraw、tldraw、Drawnix、Drawio绘图工具汇总FossFLOW、LogicFlow、oxdraw、LucidChart、iCraft EditorNext AI Draw.io官网基于Draw.io的开源GitHub28.4K Star3K Fork跨平台AI图表生成工具。优势专业级输出质量完全开源支持本地部署与Draw.io生态完全兼容支持团队协作和版本控制核心功能自然语言驱动图表创建支持流程图、UML图、架构图等实时编辑和修改多AI模型支持OpenAI、Claude、Google等实战官方提供多种使用方式官网就是在线SaaS无需登录即可基于浏览器使用从GitHub Release页面下载二进制安装包文件官方提供快速示例Fireworks-Tech-Graph开源GitHub8.4K Star725 ForkClaude Code技能用自然语言描述系统生成生产级的SVGPNG技术图表支持中英文。功能特性8种视觉风格Flat Icon白底扁平风适合博客和文档干净利落Dark Terminal暗黑终端风霓虹配色加等宽字体Blueprint深蓝底加网格线适合工程图纸Notion Clean极简Glassmorphism玻璃拟态一种UI设计风格通过背景模糊、半透明填充、高光边框三大要素模拟磨砂玻璃的通透悬浮质感Claude OfficialAnthropic温暖奶油色OpenAI Official纯白底配品牌绿Dark Luxury支持14种UML图表类型类图、组件图、包图、部署图、序列图、时序图、状态机图、活动图、用例图、交互图、ER图、架构图、流程图、网络拓扑图自带AI/Agent领域的知识库Mem0记忆架构、Tool Call流程、Multi-Agent协作拓扑…Agentic Search模式Query Planning查询规划Multi-step Retrieval多步检索Synthesis综合合成Reflection反思优化的完整搜索闭环。自带4个辅助脚本generate-diagram.sh用来验证SVG并导出PNGgenerate-from-template.py从模板快速创建起始SVGvalidate-svg.sh单独验证语法test-all-styles.sh批量测试所有风格对比工具优点缺点fireworks-tech-graph自然语言生成、专业美观需要CCMermaid简单易用样式单一、难调试draw.io功能全面操作繁琐、耗时excalidraw手绘风格样式有限实战# 基于CC安装claude skillsaddhttps://github.com/yizhiyanhua-ai/fireworks-tech-graph# 基于npx安装npx skillsaddyizhiyanhua-ai/fireworks-tech-graph# 从源码安装gitclone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.claude/skills/fireworks-tech-graph# 导出PNG还得装rsvg-convertbrewinstalllibrsvgsudoapt-getinstalllibrsvg2-bin# Windows用户手动安装MSYS2、librsvg在CC中直接用中英文描述想要的图表画一个Multi-Agent协作的架构图包含Manager Agent、Worker Agent和Communication Bus。玻璃拟态核心特征与实现原理背景模糊使用backdrop-filter: blur()模糊元素后方内容而非元素本身营造景深半透明填充背景色需带低不透明度如rgba(255,255,255,0.1~0.3)确保背景可见但内容清晰高光边框添加细窄半透明边框通常白色或浅色不透明度10%-30%模拟玻璃边缘反光依赖背景必须置于色彩丰富或有渐变的背景上单调背景无法体现效果CSS基础代码示例.glass{background:rgba(255,255,255,0.15);/* 半透明底色 */backdrop-filter:blur(12px);/* 核心背景模糊 */-webkit-backdrop-filter:blur(12px);/* Safari兼容 */border:1px solidrgba(255,255,255,0.2);/* 高光边框 */box-shadow:0 8px 32pxrgba(0,0,0,0.1);/* 悬浮阴影 */border-radius:16px;}Architecture Diagram Generator开源GitHub5.8K Star440 Fork专门用于生成架构图的Claude Skill。SKILL.md定义一套完整的设计系统包括颜色规范、组件样式、排版规则、SVG布局约定让AI按这套系统生成HTML内联SVG代码。AI输出完整HTML文件SVG全部内联样式全部嵌入打开即用。设计细节语义色彩分层Frontend用Cyan青色Backend用Emerald翠绿Database用Violet紫色Cloud用Amber琥珀安全相关用Rose玫瑰红。颜色有对应语义箭头渲染顺序连接线先于组件框绘制保证箭头在视觉上位于组件之后避免箭头盖住文字。组件框还会在半透明色块下面额外画一个纯色遮罩层防止箭头透过半透明区域。这种细节在draw.io里需要手动处理Skill直接内置图例位置约束Legend必须放在所有边界框的外面并计算最低边界再加20px距离防止标注被区域框遮住深色主题Slate-950深色背景配上40px的网格图案JetBrains Mono字体更具技术感对话式迭代改图不用重画颜色Cyan青色常用在前端、客户端、UI的设计中Emerald翠绿在后端、API、服务的设计中经常用Violet紫罗兰常用在数据库、存储、AI/ML的设计中Amber琥珀云服务、基础设施画图中会比较常用Rose玫瑰搭配认证、安全、加密场景Slate石板灰用在外部系统、第三方服务的设计中如支付、短信、邮件等使用从GitHub Release页面下载architecture-diagram.zip以Claude Code为例打开claude.ai进入SettingsCapabilitiesSkills点击Add上传zip文件最后开启Skill即可。局限生成图表是静态的不支持多人实时协作。团队要在线白板协作还是得用Miro或FigJam等其他工具。Excalidraw Diagram Skill基于开源白板工具Excalidraw构建的开源GitHub2.9K Star375 ForkAI技能插件允许AI助手如Claude、ChatGPT等在对话中直接创建、编辑和解释手绘风格的图表。这个技能将自然语言转换为可视化图表大大增强AI在技术沟通、系统设计和思维导图方面的能力。核心功能特性图表创建能力手绘风格图表创建具有手绘感的流程图、架构图、思维导图多元素支持支持形状、箭头、文本、连接线、图标等实时协作支持多人实时编辑和协作导出格式支持PNG、SVG、Excalidraw文件格式导出AI集成特性自然语言到图表用户用自然语言描述AI生成对应图表图表解释分析AI可以分析现有图表并解释其内容智能布局自动优化图表布局和元素排列样式建议根据内容推荐合适的图表样式和颜色技术架构前端基于React的Excalidraw核心AI集成通过API与AI模型交互数据格式使用JSON格式存储图表数据扩展性支持自定义组件和插件安装gitclone https://github.com/coleam00/excalidraw-diagram-skill.gitcp-rexcalidraw-diagram-skill .claude/skills/excalidraw-diagram设置cd.claude/skills/excalidraw-diagram/references uvsyncuv run playwrightinstallchromium代码仓库主要就是Skill.md文档Codag官网专为软件工程师打造的开源GitHub516 Star42 ForkVS Code扩展分析代码画流程图。利用Tree-sitter解析器和LLM深入理解代码语义。能识别出所有LLM API调用、决策分支Branching Logic和数据转换步骤并将它们渲染成交互式的DAG有向无环图。修改代码时DAG也会实时更新。官方Demo动图有21.5M请去GitHub查看。功能实时联动所见即所得 (Live Graph Updates)利用Tree-sitter增量解析技术修改函数名或增加新的LLM调用右侧流程图会瞬间刷新。修改过的节点还会高亮显示可清楚地看到变动点。点击跳转双向导航 (Click-to-Source)每一个节点都对应代码中的具体函数或调用双向链接彻底打通逻辑视图和代码视图的隔阂图到代码点击图上的节点编辑器直接跳转到对应的代码行。代码到图在代码中选中函数图上对应的节点也会高亮。全栈兼容包括Python、TypeScript等语言OpenAI等模型LangChain、LlamaIndex、CrewAI等智能体框架。实战基于源码安装gitclone https://github.com/michaelzixizhou/codag.gitcdcodagcpbackend/.env.example backend/.envvimbackend/.env# 填入GEMINI_API_KEYxxxxxdockercompose up-d安装VS Code插件或下载.vsix文件本地安装连接本地。Smart Draw项目首页开源GitHub416 Star86 Fork专注于Excalidraw的AI增强工具。功能特性自然语言生成Excalidraw图表实时流式响应和渲染多会话管理支持多种AI API包括国内服务商本地存储数据安全移动端适配良好Diagram GPT项目首页基于Mermaid.js用自然语言生成图表的开源GitHub318 Star76 Fork项目支持多种图表类型流程图、序列图、类图、用户旅程图、甘特图、C4架构图、思维导图。核心特性无需学习专业绘图语法一键生成多种图表类型支持导出为SVG、PNG、Markdown响应式设计移动端友好安装gitclone https://github.com/fraserxu/diagram-gpt.gitcddiagram-gptnpmrun dev# oryarndev# orpnpmdev浏览器打开http://localhost:3000开始体验。AI Excalidraw项目首页专为Excalidraw优化的AI集成的开源GitHub191 Star44 Fork工具。功能特性自然语言绘图多模型支持OpenAI、智谱AI、阿里百炼等本地优先存储响应式设计基于源码部署gitclone https://github.com/co-pine/ai-excalidraw.gitcdai-excalidraw buninstallbun run dev浏览器打开http://localhost:3000开始体验。
