All in one 白板，思维导图、流程图、自由画等
- 💯 免费 + 开源
- ⚒️ 思维导图、流程图
- 🖌 画笔
- 😀 插入图片
- 🚀 基于插件机制
- 🖼️ 📃 导出为 PNG, JSON(
.drawnix) - 💾 自动保存（浏览器缓存）
- ⚡ 编辑特性：撤销、重做、复制、粘贴等
- 🌌 无限画布：缩放、滚动
- 🎨 主题模式
- 📱 移动设备适配
- 📈 支持 mermaid 语法转流程图
- ✨ 支持 markdown 文本转思维导图（新支持 🔥🔥🔥）
爱图(Aitu) ，源于对创作的热爱与图形表达的追求。
爱 代表着对创作的热情与专注，图 象征着视觉表达的无限可能。在这里，每一次创作都是对美好的追求，每一笔绘画都是想象力的延伸。
创意源于内心的热爱，而 爱图(Aitu) 致力于成为每个创作者的得力助手。
爱创作，图未来。
爱图(Aitu) 的定位是一个开箱即用、开源、免费的工具产品，它的底层是 Plait 框架，Plait 是开源的画图框架，代表着在知识可视化产品上的重要技术积累。
爱图 采用插件架构，虽然技术架构相对复杂，但插件架构也有其优势，比如能够支持多种 UI 框架（Angular、React），能够集成不同富文本框架（当前仅支持 Slate 框架），在开发上可以很好的实现业务的分层，开发各种细粒度的可复用插件，可以扩展更多的画板的应用场景。
aitu/
├── apps/
│ ├── web # 爱图 Web 应用
│ │ └── index.html # HTML
├── dist/ # 构建产物
├── packages/
│ └── drawnix/ # 白板应用核心
│ └── react-board/ # 白板 React 视图层
│ └── react-text/ # 文本渲染模块
├── package.json
├── ...
└── README.md
└── README_en.md
https://aitu.chat 是 爱图 的在线应用。
近期会高频迭代应用功能，持续优化用户体验。
直接访问 aitu.chat 立即开始使用，无需安装任何软件。
- Node.js >= 16.0.0
- npm >= 8.0.0
# 克隆仓库
git clone https://github.com/ljquan/aitu.git
cd aitu
# 安装依赖
npm install
# 启动开发服务器
npm start启动成功后，访问 http://localhost:4200 即可看到应用。
# 开发
npm start # 启动开发服务器
npm test # 运行测试
npm run build # 构建所有包
npm run build:web # 仅构建 web 应用
# 版本管理
npm run version:patch # 版本号 +0.0.1
npm run version:minor # 版本号 +0.1.0
npm run version:major # 版本号 +1.0.0
# 发布
npm run release # 发布补丁版本
npm run release:minor # 发布小版本
npm run release:major # 发布大版本详细的开发文档位于 docs/ 目录：
# 运行所有测试
npm test
# 运行特定项目测试
nx test drawnix
nx test react-board- 思维导图: 点击工具栏中的思维导图图标，开始创建分支节点
- 流程图: 选择流程图工具，拖拽创建形状和连接线
- 自由绘画: 使用画笔工具进行手绘创作
- 文本编辑: 双击任意位置添加文本
- 导出格式: 支持 PNG、JPG、JSON(.drawnix) 格式
- 文本转换:
- 支持 Markdown 文本转思维导图
- 支持 Mermaid 语法转流程图
Ctrl/Cmd + Z: 撤销Ctrl/Cmd + Y: 重做Ctrl/Cmd + C: 复制Ctrl/Cmd + V: 粘贴- 鼠标滚轮: 缩放画布
- 拖拽: 移动画布
爱图 基于插件架构，支持自定义扩展：
import { withFreehand, withMind, withDraw } from '@aitu/core';
// 创建带有特定插件的编辑器实例
const editor = withFreehand(
withMind(
withDraw(createEditor())
)
);# 拉取镜像
docker pull ljquan/aitu:latest
# 运行容器
docker run -d -p 8080:80 ljquan/aitu:latest访问 http://localhost:8080 即可使用。
- 前端框架: React 18.3+ with TypeScript
- 构建工具: Vite + Nx (Monorepo)
- UI 组件库: TDesign React
- 绘图引擎: Plait Framework
- 富文本编辑: Slate.js
- 状态管理: React Context + Hooks
- 样式方案: Sass + CSS Module
packages/
├── drawnix/ # 核心白板应用
│ ├── src/
│ │ ├── components/ # React 组件
│ │ ├── plugins/ # 功能插件
│ │ ├── transforms/ # 数据转换
│ │ └── utils/ # 工具函数
├── react-board/ # Plait React 适配层
├── react-text/ # 文本渲染组件
采用组合式插件架构，每个插件负责特定功能：
- withFreehand: 自由绘画功能
- withMind: 思维导图功能
- withDraw: 基础图形绘制
- withHotkey: 快捷键支持
- withTextLink: 文本链接功能
- plait - 开源画图框架，提供底层绘图能力
- slate - 富文本编辑器框架，处理文本编辑逻辑
- floating-ui - 浮层定位库，用于工具栏和弹窗定位
- tdesign-react - 企业级 UI 组件库
- localforage - 浏览器存储方案，支持自动保存
- Nx: Monorepo 管理工具
- Vite: 现代构建工具，提供快速的开发体验
- TypeScript: 类型安全的 JavaScript 超集
- ESLint + Prettier: 代码质量和格式化工具
我们欢迎并感谢任何形式的贡献！
- 使用 GitHub Issues 报告 Bug
- 请提供详细的重现步骤和环境信息
- 附上截图或录屏会更有帮助
- 在 Issues 中标记为
enhancement - 描述使用场景和预期效果
- 讨论技术实现方案
-
Fork 项目
git clone https://github.com/your-username/aitu.git
-
创建功能分支
git checkout -b feature/your-feature-name
-
本地开发
npm install npm start
-
代码规范
- 遵循现有代码风格
- 运行
nx lint检查代码质量 - 运行
nx test确保测试通过 - 添加必要的测试用例
-
提交更改
git add . git commit -m "feat: add your feature description"
-
推送并创建 PR
git push origin feature/your-feature-name
- 改进 README 文档
- 完善代码注释
- 编写使用教程
- 提交信息格式: 遵循 Conventional Commits
- 分支命名:
feature/功能名称、fix/问题描述、docs/文档更新 - 代码风格: 使用 ESLint + Prettier 保持一致性
# 清除缓存重新安装
npm cache clean --force
rm -rf node_modules package-lock.json
npm install# 检查端口占用
lsof -i :4200
# 指定其他端口
npm start -- --port 3000# 检查 TypeScript 类型错误
nx typecheck drawnix
# 检查代码风格
nx lint drawnix- 大型画板文件可能导致渲染缓慢
- 建议分割为多个小文件
- 关闭不必要的插件功能
- 📖 查看 文档
- 💬 提交 Issue
- 🗣️ 参与 Discussions
- ✅ 基础白板功能
- ✅ 思维导图和流程图
- ✅ 自由绘画和图片插入
- ✅ Markdown/Mermaid 转换
- ✅ 移动端适配
- 🚧 协作功能 (多人实时编辑)
- 🚧 更多导出格式 (PDF, SVG)
- 🚧 模板系统
- 🚧 插件市场
- 📅 云端同步存储
- 📅 版本历史管理
- 📅 API 开放平台
- 📅 桌面客户端
发布计划请关注 Releases 页面。