Convert Figma logo to code with AI

liujuntao123 logosmart-excalidraw-next

A smart, powerful, and beautiful excalidraw drawing tool.Draw Professional Charts with Natural Language

3,014
365
3,014
25

Quick Overview

Error generating quick overview

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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. 保存配置

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

第二步:创建图表

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

  • "画一个用户登录的流程图"
  • "创建一个微服务架构图,包含网关、认证服务和业务服务"
  • "设计一个电商系统的数据库 ER 图"

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。

优势:

  • 用户无需自己申请和配置 API Key
  • 统一管理 API 使用和成本
  • 适合团队或组织内部使用
  • 提供免费体验给用户

❓ 常见问题

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
  • 💬 分享给更多需要的人
  • 💰 成为赞助者(联系作者微信)

友情链接


Star History

Star History Chart

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