smart-excalidraw-next README

The project's README from github.com/liujuntao123/smart-excalidraw-next. As one markdown file: README.md.

Smart Excalidraw

用自然语言，绘制专业图表

🚀🚀🚀全面升级的新版本，更强大好用的绘图平台

https://ai-draw-nexus.aizhi.site

🚀🚀🚀新版本github地址：

https://github.com/liujuntao123/ai-draw-nexus

一图介绍 generated-image-1766739999192

generated-image-1766740104116

English Version

Read the English version: README_EN.md

效果预览

操作界面 PixPin_2025-10-31_17-14-27 技术架构图 Untitled-2025-11-03-1105 信息图 Untitled-2025-11-03-1054

✨ 核心特性

🎯 AI 驱动，效果出众

通过先进的大语言模型理解你的需求，生成结构清晰、布局合理的专业级图表。

🔗 独创连接算法

采用独创的智能箭头优化算法，自动计算最佳连接点，确保图表井然有序、逻辑清晰，告别混乱的线条交叉。

📊 丰富图表类型

支持 20+ 种图表类型，包括流程图、架构图、时序图、ER 图、思维导图等。也可以让AI根据你的描述自动选择最合适的图表类型。

🎨 完美 Excalidraw 集成

生成的图表完全基于 Excalidraw 格式，可以在画布上自由编辑、调整样式、添加细节，实现 AI 生成与手动精修的完美结合。

⚡ 开箱即用

只需配置一个 AI API 密钥即可开始使用，无需复杂的环境搭建。所有配置保存在本地浏览器，隐私安全有保障。

🚀 快速开始

方式一：使用访问密码

如果服务器管理员已配置访问密码，你可以直接使用服务器端的 LLM 配置，无需自己提供 API Key：

  1. 点击右上角的 "访问密码" 按钮
  2. 输入管理员提供的访问密码
  3. 点击 "验证密码" 测试连接
  4. 勾选 "启用访问密码" 并保存

启用后，应用将优先使用服务器端配置，你无需配置自己的 API Key 即可开始创作！

方式二：配置自己的 AI

  1. 点击右上角的 "配置 LLM" 按钮
  2. 选择提供商类型（OpenAI 或 Anthropic）
  3. 填入你的 API Key
  4. 选择模型（推荐使用 claude-sonnet-4.5，效果最佳）
  5. 保存配置

就这么简单！现在你可以开始创作了。

第二步：创建图表

在输入框中用自然语言描述你的需求，例如：

AI 会自动生成图表，你可以在画布上直接编辑和调整。

💻 本地部署

如果你想在本地运行项目：

# 克隆项目
git clone <your-repo-url>
cd smart-excalidraw-next

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

访问 http://localhost:3000 即可使用。

配置服务器端 LLM（可选）

如果你想为用户提供统一的 LLM 配置，避免他们自己申请 API Key，可以配置服务器端访问密码功能：

  1. 复制环境变量示例文件：
cp .env.example
  1. 在 .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
  1. 重启开发服务器，用户即可通过访问密码使用服务器端配置的 LLM。

优势：

❓ 常见问题

Q: 推荐使用哪个 AI 模型？ A: 强烈推荐使用 claude-sonnet-4.5，它在理解需求和生成图表方面表现最佳。

Q: 数据安全吗？ A: 所有配置信息仅保存在你的浏览器本地，不会上传到任何服务器。

Q: 支持哪些图表类型？ A: 支持流程图、架构图、时序图、ER 图、思维导图、网络拓扑图等 20+ 种类型，AI 会自动选择最合适的类型。

Q: 生成的图表可以修改吗？ A: 当然可以！生成后可以在 Excalidraw 画布上自由编辑，包括调整位置、修改样式、添加元素等。

Q: 什么是访问密码功能？ A: 访问密码功能允许服务器管理员配置统一的 LLM，用户只需输入密码即可使用，无需自己申请 API Key。启用访问密码后，将优先使用服务器端配置，忽略本地配置。

Q: 访问密码和本地配置的优先级是什么？ A: 如果启用了访问密码，系统将优先使用服务器端的 LLM 配置。只有在未启用访问密码时，才会使用本地配置的 API Key。

🛠️ 技术栈

Next.js 16 · React 19 · Excalidraw · Tailwind CSS 4 · Monaco Editor

📄 许可证

MIT License

联系作者

微信号： liujuntaoljt

微信图片_20251103110224_44_85

💖 赞助

感谢以下赞助者对本项目的支持：

如果这个项目对你有帮助，欢迎通过以下方式支持：

友情链接

Star History

Star History Chart

用自然语言，绘制专业图表 - 让可视化创作回归简单

smart-excalidraw-next (liujuntao123/smart-excalidraw-next)

Searching Database…

3.5K ·GitHub
Smart-excalidraw-next
Что это?Smart Excalidraw — инструмент для рисования на базе AI, который превращает описания на естественном языке в профессиональные диаграммы (блок-схемы, архитектурные диаграммы, ER-диаграммы, майндмэпы и т.д.), отрисовываемые на холсте Excalidraw.
Это отдельное приложение для рисования или оно построено поверх Excalidraw?Это веб-приложение на Next.js, построенное прямо поверх Excalidraw: AI генерирует стандартные элементы Excalidraw, так что все созданное остается полностью редактируемым на обычном холсте Excalidraw.
Как его запустить?Склонируйте репозиторий и запустите dev-сервер Next.js локально или пользуйтесь хостинговым экземпляром прямо в браузере; в любом случае нужно лишь добавить API-ключ AI, чтобы начать создавать диаграммы.
Каких AI-провайдеров он поддерживает и нужен ли мне свой API-ключ?В панели 'Configure LLM' настраивается API-ключ OpenAI или Anthropic; для лучших результатов рекомендуется модель claude-sonnet-4.5.
Всегда ли нужно использовать свой API-ключ?Не обязательно: если администратор сервера настроил функцию пароля доступа, можно пользоваться их общей конфигурацией LLM вместо своего ключа; иначе потребуется свой ключ OpenAI или Anthropic.
Какие типы диаграмм он умеет генерировать?Поддерживается более 20 типов диаграмм, включая блок-схемы, архитектурные диаграммы, диаграммы последовательностей, ER-диаграммы и майндмэпы, а AI может сам выбрать лучший тип под ваше описание.
Чем его раскладка отличается от ручного рисования в Excalidraw?Он использует собственный алгоритм маршрутизации стрелок, который автоматически вычисляет оптимальные точки соединения, избавляя от пересекающихся неопрятных линий, которые получаются при рисовании связей вручную.
Можно ли потом продолжать редактировать диаграмму, созданную AI?Да, результат — обычные элементы Excalidraw, так что после генерации AI можно свободно двигать, менять стиль и добавлять детали на холсте.
Зачем нужен режим с паролем доступа?Он позволяет администратору сервера настроить один общий ключ LLM, чтобы команда или организация могли пользоваться инструментом без необходимости каждому получать свой API-ключ — это удобно для бесплатного пробного доступа пользователей.
What are similar projects?drawnix, excalidraw-mcp, trade-journal, mermaid, chatbot-ui, OpenIntelligentUI, OpenTerminal, gitdiagram
Which topics is it in?mindmap, drawing, flowchart, chart, diagrams, data-visualization, nextjs, generative-ai, anthropic, claude, web-app, openai
Creator
liujuntao123
Size
0.2 MB
Stars
3.5K
Updated
CommitOct 12
Age
11mo
Commits · 90 Days