嗨，我是小华同学，专注解锁高效工作与前沿AI工具！每日精选开源技术、实战技巧，助你省时50%、领先他人一步。👉免费订阅，与10万+技术人共享升级秘籍！
Smart Excalidraw：用自然语言，绘制专业图表
Smart Excalidraw 是一个基于 Excalidraw 的智能绘图工具：你只需要用中文或英文写一句话描述需求，它就能调用大语言模型（LLM），自动生成结构清晰、可编辑的专业图表，并且格式完全兼容 Excalidraw。项目目前在 GitHub 上已经收获 2k Stars / 245 Forks，热度不低。
项目本身是一个基于 Next.js 16 + React 19 + Excalidraw + Tailwind CSS 4 + Monaco Editor 搭建的 Web 应用，可以在线使用，也可以一键本地启动。
为什么我们还在为一张图熬夜？
如果你的日常工作里，离不开「图」——流程图、架构图、时序图、ER 图、思维导图……大概率踩过这些坑：
- 语法记不住：Mermaid、PlantUML 写起来门槛不低，复杂一点就开始翻文档。
- 排版太耗时：一个流程改 3 次，箭头连线就要调半天；对齐、间距、配色全靠手工。
- 图表类型太多：到底用流程图、时序图还是架构图？描述完需求还得自己选图形表达方式。
- 团队协作困难：有人用 Mermaid，有人用 PPT，还有人用白板截图，素材散落各处，很难统一管理。
Smart Excalidraw 的项目架构图里，其实已经把这些痛点概括出来：左边是「痛点分析」，中间是「Smart-Excalidraw 解决方案」，右边是「应用场景」（如 PPT 制作助手、内容创作阅读助手、图表复刻等），一图串起了从问题到方案再到场景的全链路。
简而言之，这个项目想做的事就是——让画图回到「说人话」的难度，而不是「抠像素」的难度。
核心功能
官方 README 里给出了 Smart Excalidraw 的核心特性，我们在此基础上做一点拆解和场景化说明。
AI 驱动，一句话生成专业图表
通过先进的大语言模型理解你的需求，生成结构清晰、布局合理的专业级图表。
在 Smart Excalidraw 中，你只需要在输入框里写类似：
- 「画一个用户登录的流程图」
- 「创建一个微服务架构图，包含网关、认证服务和业务服务」
- 「设计一个电商系统的数据库 ER 图」
系统会自动调用配置好的 LLM（支持 OpenAI 或 Anthropic），把这段自然语言翻译成 Excalidraw 元素：矩形、连线、泳道、节点等，并按照逻辑顺序排布在画布上。
独创连接算法，告别「线成一团」
采用独创的智能箭头优化算法，自动计算最佳连接点，确保图表井然有序、逻辑清晰，告别混乱的线条交叉。
这点非常关键：很多基于 AI 的画图工具可以生成节点，但连线一团糟——箭头互相穿插，读起来比看原文还累。 Smart Excalidraw 在 README 中专门强调了「智能箭头优化算法」，目标就是把连线做「人类画图水准」的布局，而不是随便接上就完事。
支持 20+ 图表类型，AI 帮你选图
支持 20+ 种图表类型，包括流程图、架构图、时序图、ER 图、思维导图等。也可以让 AI 根据你的描述自动选择最合适的图表类型。
你不需要一开始就纠结「到底应该用什么图」——只要如实描述你的业务或系统，AI 会根据意图来决定：
- 是用 流程图 描述步骤？
- 用 架构图 展示模块与服务？
- 用 时序图 表达调用链？
- 还是用 ER 图 表示数据模型关系？
这部分逻辑完全交给模型处理，你只负责说清楚自己的需求。
完全兼容 Excalidraw，可自由二次编辑
生成的图表完全基于 Excalidraw 格式，可以在画布上自由编辑、调整样式、添加细节，实现 AI 生成与手动精修的完美结合。
很多 AI 画图工具的痛点是：生成完就不好改。 Smart Excalidraw 直接使用 Excalidraw 的数据结构，意味着：
- 任何一个节点、连线、文字都可以编辑；
- 你可以继续添加手绘样式、贴纸、注释；
- 生成的结果可以导出为 Excalidraw 标准格式，在其它集成了 Excalidraw 的工具中继续使用。
开箱即用：只需要一个 API Key（甚至可以不需要）
只需配置一个 AI API 密钥即可开始使用，无需复杂的环境搭建。所有配置保存在本地浏览器，隐私安全有保障。
使用方式有两种：
- 访问密码模式（更像 SaaS）
- 管理员在服务器上配置好 LLM 相关环境（API Key、模型、Base URL 等）；
- 用户侧只需要在前端输入一串「访问密码」即可调用服务器端 LLM；
- 所有逻辑由服务器统一代理，适合团队或组织统一付费、统一管理。
- 自带 AI Key 模式（开发者 / 个人用户）
- 在页面右上角点击「配置 LLM」；
- 选择提供商类型（OpenAI 或 Anthropic）；
- 填入自己的 API Key，选择模型（官方推荐
claude-sonnet-4.5）； - 保存后即可在浏览器直接调用模型生成图表。
所有这类配置都只存在于你的浏览器本地（例如 LocalStorage），不会上传到后台，数据安全上比较友好。
多提供商支持 + 服务器端统一配置
在可选的服务器端配置里，项目通过 .env 支持如下环境变量：
# 访问密码（用户需要输入此密码才能使用服务器端 LLM）
ACCESS_PASSWORD=your-secure-password
# LLM 提供商类型（openai 或 anthropic）
SERVER_LLM_TYPE=anthropic
# API 基础 URL
SERVER_LLM_BASE_URL=https://api.anthropic.com/v1
# API 密钥
SERVER_LLM_API_KEY=sk-ant-your-key-here
# 模型名称
SERVER_LLM_MODEL=claude-sonnet-4-5-20250929
意味着你可以：
- 在服务端统一配置 OpenAI 或 Anthropic 的模型；
- 通过访问密码控制谁能用这些配额；
- 做团队内部共享、成本可控的 AI 绘图平台。
本地部署：完全掌控你的环境
项目提供了非常直接的本地启动方式：
# 克隆项目
git clone
cd smart-excalidraw-next
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
然后访问 http://localhost:3000 即可使用。
你可以在自己的机器、内网服务器上运行一套 Smart Excalidraw，不依赖任何第三方网站。
技术架构
架构拆解
结合 README，可以把系统拆成三层：
| 层级 | 关键组件 | 主要职责 |
| 前端展示层 | Next.js 16、React 19、Tailwind CSS 4 | 提供 AI 对话输入区、配置面板和 Excalidraw 画布界面 |
| 绘图与编辑层 | Excalidraw、Monaco Editor | 把 AI 返回的结构化数据转成图表；支持手工编辑、增删节点和连线 |
| AI 接入层 | OpenAI / Anthropic API、本地或服务端配置 | 负责调用大语言模型，将自然语言解析为图表结构；支持本地配置和服务器端统一配置 |
技术优势概览
| 维度 | Smart Excalidraw 的做法 | 带来的好处 |
| 前端架构 | 统一用 Next.js + React 构建 | 前后端一体化，部署简单，适合个人开发者 |
| 绘图引擎 | 采用 Excalidraw 官方格式 | 与生态内工具兼容度高，生成结果可移植 |
| 样式系统 | Tailwind CSS 4 | 快速迭代 UI，便于自定义主题和样式 |
| 编辑体验 | Monaco Editor | 更适合展示复杂 JSON/代码等结构化信息 |
| AI 接入 | 支持 OpenAI / Anthropic，支持本地与服务端双配置 | 既适合个人使用，也方便团队统一化管理 Key |
| 配置存储 | 配置保存在浏览器本地，访问密码模式使用服务器端 | 兼顾隐私和统一管理，灵活度较高 |
界面效果
使用流程
对应的文字步骤如下：
- 配置 AI（一次即可）
- 有统一服务器：按照管理员给的访问密码，在右上角输入并启用；
- 自己玩：点击「配置 LLM」，选择 OpenAI/Anthropic，填入 Key 和模型名称并保存。
- 用自然语言描述要画的图
- 例如「画一个 SaaS 系统的租户-用户-角色权限的 ER 图」；
- 点击生成，等待 LLM 返回图表。
- 在画布上编辑和微调
- 调整节点位置、修改字段名、补充备注；
- 需要更多细节时，可以再补充一段描述，让 AI 重构或扩展图表（根据模型能力和项目当前实现）。
- 导出与复用
- 由于底层是 Excalidraw，你可以导出为
.excalidrawJSON，或通过 Excalidraw 的导出能力转成 PNG/SVG 等格式，用在 PPT、文档或知识库中。
哪些人适合用 Smart Excalidraw？
结合架构图右侧以及 README 中提到的图表类型，我们可以整理出几类典型场景。
PPT / 汇报制作
- 在写 PPT 结构、产品方案汇报、业务流程讲解时，最耗时间的往往是那几页「复杂流程图」。
- 直接把业务逻辑写成自然语言描述，让 Smart Excalidraw 先生成一个「70% 完成度」的草图，再手工微调。
- 收益：从「半小时抠一张图」变成「5 分钟生成 + 5 分钟微调」。
架构设计与技术文档
- 设计微服务架构、系统边界、调用关系时，往往要画很多版本的架构图。
- 用自然语言一次性写清各模块的职责和交互，AI 会输出基础架构图；
- 后续迭代时，只需要调整局部节点即可。
数据建模 / ER 图
- 在设计电商、CRM、SaaS 等系统时，数据库表结构很多，关系复杂；
- 把实体及其关系用文本描述清楚，让 AI 自动生成 ER 图骨架；
- 生成后通过 Excalidraw 继续补充字段、索引等细节。
流程梳理与知识沉淀
- 适合运营流程、客户服务流程、内部制度流程等；
- 比起完全手动画图，更适合与同事一起「改文字」再重新生成图表，协作成本更低。
图表复刻与内容整理（基于官方架构图规划的场景）
在官方项目架构图中，可以看到「图表复刻」这样的应用场景：上传已有的图表，对其结构进行重新建模和可视化整理。
这一类能力特别适合：
- 整理旧 PPT、培训材料中的经典图；
- 将扫描版/图片版的图表，转成可编辑的 Excalidraw 图。
（具体支持程度可以结合项目的最新版本体验实际验证。）
它到底强在了哪里？
Smart Excalidraw 本身在 README 中也挂了一条「友情链接」，指向另一个同类项目 Auto-Drawio，同样是用自然语言生成流程图。
我们结合 Auto-Drawio 和 Excalidraw 官方项目，做一个简单的对比表：
| 维度 | Smart Excalidraw | Auto-Drawio | Excalidraw 官方 |
| 核心定位 | 用自然语言生成 Excalidraw 手绘风图表 | 用自然语言生成 Draw.io 流程图 | 开源手绘风白板/绘图引擎，无内置 AI 生图 |
| 输出格式 | Excalidraw JSON | Draw.io XML / 图表 | Excalidraw JSON |
| 是否 AI 驱动 | 是（LLM：OpenAI / Anthropic） | 是（支持多种 LLM，包括 Claude、OpenAI 及国内模型） | 否（可通过社区封装接入） |
| 前端技术栈 | Next.js 16 + React 19 + Tailwind CSS 4 + Monaco Editor | Vue 3 + Vite | React + TypeScript（官方） |
| 后端 / 部署方式 | 可本地运行，支持服务器端 LLM 代理（通过 .env 配置访问密码与模型） | 提供 FastAPI 后端 + Docker 一键部署方案，支持多种部署场景 | 官方提供 Web 应用与 npm 包，可自行嵌入项目或部署 |
| 图表类型 | 流程图、架构图、时序图、ER 图、思维导图、网络拓扑图等 20+ 类型 | 以流程图和结构化图为主 | 通用白板，图形类型丰富但未强调 AI 自动选择 |
| 编辑体验 | 完全基于 Excalidraw 画布，可二次手绘与精修 | 集成 Draw.io 编辑器，支持拖拽与调整 | 原生 Excalidraw 编辑体验，支持协作、PWA 等 |
| 适用人群 | 喜欢 Excalidraw 手绘风，想要 AI + 手动混合工作流的开发者、产品、架构师 | 熟悉 Draw.io 流程图体系的技术/产品团队 | 需要白板和手绘风图表的个人或团队（可自行集成 AI） |
优势小结
- 站在 Excalidraw 肩膀上
- 直接使用 Excalidraw 生态，意味着可以与大量已有工具和工作流无缝衔接。
- AI 生成 + 手工精修一体化
- 很多 AI 工具生成图表后很难改，而这里生成结果就是标准 Excalidraw 图形，改起来跟自己画的没有区别。
- 部署方式灵活，既适合个人也适合团队
- 本地 Key 模式满足个人开发者；
- 访问密码 + 服务器端 LLM 的方式又方便团队统一管理额度与权限。
- 门槛低，学习成本接近「会说话就会画图」
- 对于不想学 Mermaid、不想花大量时间调连线和布局的人来说，几乎没有额外学习曲线。
总结
如果用一句话概括 Smart Excalidraw：
它把「画图」这件事，从「学语法 + 手动排版」变成了「写一句话 + 小幅微调」。
从痛点角度看，它瞄准的是职场中大量「被图表折磨的人」：产品、研发、运营、讲师、顾问…… 从技术角度看，它用 Next.js + React + Excalidraw + LLM API 搭了一个非常轻量的「AI 画图前端」，部署简单，改造空间也很大。
对于普通用户，你可以直接作为在线 AI 画图工具来用； 对于开发者，这又是一个非常不错的二次开发基座——你可以在它的基础上继续做团队协作、模板库、知识库联动等高级能力。
