当前位置: 首页 > news >正文

画图项目汇总:SimpleMindMap、AI-Draw-Nexus、Smart Mermaid、Diagram GPT、AI Excalidraw、Auto-Drawio

绘图项目系列:

  • 超强大免费绘图工具draw.io初体验
  • Mermaid语法、实战
  • 画图工具汇总:Excalidraw、tldraw、Drawnix、Drawio
  • 绘图工具汇总:FossFLOW、LogicFlow、oxdraw、LucidChart、iCraft Editor
  • 代码画图项目、Skill插件汇总:Next AI Draw.io、Fireworks-Tech-Graph
  • AI绘图项目:Beautiful-Mermaid、LikeC4、DeepDiagram

SimpleMindMap

官网,开源(GitHub,12.6K Star,1.7K Fork)思维导图工具,基于原生JS开发,不依赖任何前端框架,既可集成到项目里,也可直接当日常工具用。支持多人协同编辑,采用插件化架构,核心功能之外的其他功能都可以按需加载,打包体积可以减小60%以上。在线体验,官方文档。

内置多种主题,支持注册新主题,节点形状、颜色、字体、线条样式、布局算法都可自由调整。

功能特性:

  1. 支持创建无限数量的文件、节点(自由节点);支持创建使用模板
  2. 提供丰富的设置:基础设置、自定义字体/快捷键/右键菜单/图标、图床配置、AI配置、webdav云同步配置等等,可玩性很高
  3. 支持思维导图、逻辑结构图、目录组织图、组织结构图、时间轴、鱼骨图、表格等多种结构类型
  4. 内置上百个丰富好看的主题,也支持自定义主题及AI生成主题
  5. 节点支持添加文本、图片、链接、图标、备注、附件、标签、概要节点、关联线、外框、标记、待办、描述、编号、数学公式等丰富内容
  6. 支持导入XMind、FreeMind、Markdown、Txt、Xlsx等格式文件;支持导出为PNG、XMind、SVG、PDF、Markdown、Txt、Xlsx、FreeMind、Mermaid、Html等格式
  7. 丰富的样式设置:文字、边框、背景、形状、线条、内外边距、图片标签布局等等
  8. 支持历史版本管理、演示模式、AI生成、手绘风格、大纲编辑、水印、滚动条、同级节点对齐、小地图、进入指定节点、彩虹线条、节点双向链接、搜索替换等等实用有趣的功能
  9. WebDAV云同步:支持配置WebDAV协议,轻松实现多设备文件同步,保障数据一致性的同时不牺牲隐私
  10. 跨平台、多语言支持
  11. 提供Obsidian和UTools插件

三种使用方式:

  • 网页版:打开浏览器就能用,自动保存,不用安装
  • 桌面客户端:基于Electron开发,支持主流系统
  • 私有化部署:提供Docker镜像,可以部署在自己的服务器上,数据完全自主可控

支持:

  • 思维导图
  • 逻辑结构图(向左/向右)
  • 思维导图(经典中心发散)
  • 组织结构图(上下级关系)
  • 目录组织图(层级目录)
  • 时间轴(横向/竖向)
  • 鱼骨图(因果分析)

节点支持填写:

  • 文本:普通文本、富文本
  • 图片:直接插入
  • 图标:内置图标库
  • 超链接:链接到网页或其他节点
  • 备注:隐藏的详细信息
  • 标签:分类标记
  • 概要:节点摘要
  • 数学公式:支持LaTeX语法

导出为:

  • 图片格式:PNG、SVG
  • 文档格式:PDF、Markdown、TXT
  • 思维导图格式:XMind、JSON

支持从XMind、Markdown、JSON导入

小功能

  • 小地图:让你在大画布里看清全局位置
  • 搜索替换:批量修改节点文字
  • 手绘风格:让导图看起来更生动可爱
  • 彩虹线条:分支自动渐变配色
  • 关联线:任意两个节点之间画连接线
  • 演示模式:直接拿思维导图当PPT用

实战

在线体验:

样式及设置

AI-Draw-Nexus

官网,专注于绘图的开源AI增强工具,官方文档托管在飞书文档。

比较迷糊的点在于,(不确定)官网提供的能力(是不是)由同一个创作者的2个不同GitHub仓库提供,都指向官网:

  • smart-excalidraw-next,3.5K Star,425 Fork,负责支持Excalidraw类型
  • smart-draw,427 Star,94 Fork,负责支持Draw.io类型

功能全景

(GitHub上这个图,不知道是项目自身生成还是用GPT生成)

用户操作首次

功能特性:

  • 自然语言生成图表:用最普通的大白话发起绘图需求
  • 图表类型支持:Mermaid、Excalidraw、Draw.io
  • 丰富图表类型:支持20+种图表类型,包括流程图、架构图、时序图、ER图、思维导图、网络拓扑图、甘特图等。也可让AI根据你的描述自动选择最合适的图表类型
  • 实时流式响应和渲染
  • 完美编辑器集成:生成的图表完全基于Draw.io或Excalidraw格式,可在画布上自由编辑、调整样式、添加细节,实现AI生成与手动精修的完美结合
  • 独创连接算法:采用独创的智能箭头优化算法,自动计算最佳连接点,确保图表井然有序、逻辑清晰,告别混乱的线条交叉
  • 多会话管理:支持查看历史会话
  • 开箱即用:只需配置一个AI API密钥即可开始使用,无需复杂的环境搭建。所有配置保存在本地浏览器,隐私安全有保障
  • 支持多种AI API,包括国内服务商
  • 本地存储,数据安全
  • 移动端适配良好

引擎对比

引擎特点适用场景
Mermaid代码驱动,简洁工整,短小精悍流程图、时序图、类图、ER图
Excalidraw手绘风格,简洁美观头脑风暴、草图、概念图
Draw.io功能丰富,专业强大复杂架构图、网络拓扑图

技术栈:Next.js 16、React 19、Excalidraw、Tailwind CSS 4、Monaco Editor

实战

官网即在线demo:

基于源码本地部署:

# 克隆项目gitclone https://github.com/liujuntao123/smart-excalidraw-next.gitcdsmart-excalidraw-next# 安装依赖pnpminstall# 启动开发服务器pnpmdev

浏览器打开http://localhost:3000,开始体验,和官网没啥区别。

Smart Mermaid

官网即在线体验,还是上面2个项目的作者开源(GitHub,1.2K Star,137 Fork)的另一个绘图项目。

一个将自然语言文本转换为Mermaid代码,并渲染为图表的Web应用;支持常见Mermaid图表类型(如流程图、序列图、甘特图、状态图等),提供标准渲染与手绘风渲染两种模式,并内置代码修复与优化能力。

功能概览

  • 文本转图表:将文本转换为符合Mermaid规范的代码,可自动或手动选择图表类型
  • 流式生成(可选):基于SSE增量返回内容,编辑器可实时显示生成片段
  • 双渲染器:
    • Mermaid渲染器(SVG):支持缩放、平移、重置、全屏与SVG下载
    • Excalidraw渲染器(手绘风格):基于转换结果渲染,支持PNG下载
  • 代码辅助:复制、AI智能修复(/api/fix-mermaid)、一键方向切换(TD/LR)
  • 优化能力:AI优化(/api/optimize-mermaid)与优化建议(/api/optimize-mermaid/suggestions),可一键应用或输入自定义指令
  • 文件导入:支持.txt.md.docx提取文本后生成图表
  • 历史记录:本地存储历史条目,可回看与回填
  • 使用限制与解锁:默认每日5次(本地存储计数)。通过访问密码验证或自定义AI配置可解除限制
  • 模型选择:可通过环境变量AI_MODELS提供候选列表;未配置则使用默认模型

技术栈:Next.js 15(App Router)、React 19、shadcn/ui、Radix UI、next-themes、Tailwind CSS v4、Mammoth(.docx文件解析)

实战

打开官网,奇奇怪怪,(默认情况下)生成并渲染Excalidraw类型图表,点击切换开关,编程Mermaid渲染:

默认每日5次免费额度(基于浏览器本地按日计数),用于功能体验。

刷新网页,默认渲染Excalidraw,下面某个项目(AI Excalidraw)和这个界面高度相似:

基于源码和Docker Compose本地部署:

gitclone https://github.com/liujuntao123/smart-mermaid.gitcdsmart-mermaiddocker-composeup-d

或基于源码和npm本地部署:

gitclone https://github.com/liujuntao123/smart-mermaid.gitcdsmart-mermaidnpminstallnpmrun dev

浏览器打开http://localhost:3000,开始体验,和官网没啥区别。

Diagram GPT

官网即在线demo,基于Mermaid.js,TypeScript编写、用自然语言生成图表的开源(GitHub,319 Star,76 Fork)项目,支持多种图表类型:流程图、序列图、类图、用户旅程图、甘特图、C4架构图、思维导图。

核心特性:

  • 无需学习专业绘图语法
  • 一键生成多种图表类型
  • 支持导出为SVG、PNG、Markdown
  • 响应式设计,移动端友好

实战

基于源码以及Node.js环境安装:

gitclone https://github.com/fraserxu/diagram-gpt.gitcddiagram-gptnpminstallnpmrun dev# oryarndev# orpnpmdev

可能会遇到报错,但不要紧

报错意思是下载字体失败,使用默认字体。浏览器打开http://localhost:3000开始体验。

实际上和官网一模一样,官网即demo。

未配置API Key时,发起Query,提示:

非常可惜,只支持OpenAI API Key:

使用OpenAI API兼容Key,如DeepSeek,报错提示:

得掏钱去买国外的Token。

AI Excalidraw

官网,中文名构图AI,专为Excalidraw优化的AI集成的开源(GitHub,215 Star,49 Fork)绘图工具。

功能特性

绘图

  • 自然语言描述即可生成Excalidraw元素
  • 流式、响应式设计,边生成边渲染到画布
  • 选中元素后可让AI局部修改(同id更新)

会话与工具

  • 多会话管理;新会话使用独立画布
  • 多轮对话上下文:自动清洗历史中的JSON/思考内容
  • 工具调用:查询画布、删除元素、批量更新元素
  • 多模型支持(OpenAI、智谱AI、阿里百炼等)

交互体验

  • 桌面端与移动端共用同一套绘图会话逻辑
  • 中英文界面;暗色模式跟随Excalidraw主题
  • 本地优先存储
  • 导入/导出本地备份(会话、画布、API配置)

实战

可直接在线体验,注意需要微信扫描登录,只能体验一次:

之后使用需付费:

那还不如自己本地部署,基于源码和Bun环境部署:

gitclone https://github.com/co-pine/ai-excalidraw.gitcdai-excalidraw buninstallbun run dev

浏览器打开http://localhost:5173开始体验,提示设置API Key。

简单测试一下,输入提示词【RAG通用技术架构示意图】,效果还行:

Auto-Drawio

基于AI的开源(GitHub,56 Star,5 Fork)自动化流程图生成工具,支持通过自然语言描述快速创建专业的Draw.io流程图,体验地址已打不开。

实战

官方支持多种部署方式:

gitclone https://github.com/ZhangQL2824/auto-drawio.gitcdauto-drawio# 基于Docker Composedocker-composeup-d# 基于Python和Node.jscdbackend pipinstall-rrequirements.txtcp.env.example .envvim.env python main.pycdfrontendnpminstallnpmrun dev

浏览器打开http://localhost:5173开始体验,打开http://localhost:8000参考后端服务状态。

http://www.jsqmd.com/news/1368203/

相关文章:

  • 云监控告警配置:DevOps Interview Guide中的CloudWatch实战指南
  • 2026成都家装公司实力盘点:正规合规、高性价比品牌详解,附选型避坑全流程FAQ - U渠道
  • 5种表格样式任你选:csview的Markdown与网格风格应用指南
  • Vue-Giant-Tree高级配置:打造个性化高性能树形组件
  • 豆包接入Langfuse观测全攻略
  • 掌握Obfuscator-iOS高级技巧:多Salt管理与批量字符串加密最佳实践
  • Scirius高级应用:从公共源到自定义规则,打造专属威胁防御体系
  • FishBun开发者指南:贡献代码、解决issues与版本升级策略
  • OpenStack Cinder源码解析:从调度器到驱动层的核心实现原理
  • MTSplice完全指南:从安装到预测组织特异性剪接效应的5个关键步骤
  • 2026成都旧房改造翻新靠谱的装修公司盘点:正规合规实力口碑详解+签约避坑攻略FAQ - 产业观察报
  • 汕头多肉陶粒采购指南:2026年本地用户优选淮南沐阳建材销售有限公司(汕头办事处) - 品牌优推
  • Nginx URL重写与重定向:geektime-nginx项目rewrite模块实战教程
  • 如何在Android项目中快速集成FishBun?5分钟上手教程
  • SignalHub安全最佳实践:保护WebRTC信令通信的关键措施
  • Rinvex Repository缓存策略完全指南:从基础到高级的灵活缓存控制
  • 2026成都整装全品类多场景需求适配服务商推荐:正规合规实力大盘点+签约避坑指南与常见实操FAQ全解析 - 行业观察网
  • Three.js 3D 渲染与赛博朋克风格 UI 实现:一次故障复盘能留下什么
  • csview高级技巧:自定义分隔符与TSV文件处理实战教程
  • 实战案例:用Kaleido-base分析日常行为背后的价值观倾向
  • 革命性AR/VR开发工具Godot XR Tools:一站式解决虚拟交互与物理模拟难题
  • 2026自动识别视频提取文字:选靠谱工具必看的3个核心标准 - AI办公提效专家
  • Pangolin vs 传统方法:为什么这款CNN模型成为RNA剪接预测的终极选择
  • WebLI数据集上训练的视觉大模型:ViT-L-16-SigLIP-256性能深度测评
  • 解决sublime-autoprefixer常见问题:Node.js配置与路径设置全攻略
  • 泰州预制检查井生产商怎么选?2026年选购指南与合肥市肥西县道稳水泥制品厂(泰州销售中心)推荐 - 品牌优推
  • 工程机械人机一体考勤绩效系统:从设备台账到工资条的全链路设计
  • FAST-Calib性能优化:如何进一步提升标定速度与精度
  • 如何在Rails 4+项目中快速集成acts_as_commentable_with_threading?完整安装教程
  • 2026福建评价高的智慧路灯出口制造厂找哪家广东匠熙新能源科技有限公司(福建销售部) - 品牌优推