Excalidraw 简介： Excalidraw 是一个开源的虚拟白板工具，支持实时协作绘图、流程图、思维导图等功能，为 LangChat Pro 提供绘图和可视化功能。
快速部署
使用 Docker Compose 部署
LangChat Pro 项目根目录提供了完整的 Excalidraw 部署配置，位于 docs/docker/excalidraw/ 目录下。
进入部署目录
cd docs/docker/excalidraw/
启动服务
# 启动 Excalidraw 服务
docker-compose up -d
# 查看服务状态
docker-compose ps
# 查看日志
docker-compose logs -f excalidraw
验证部署
# 检查服务是否正常运行
curl http://localhost:3000
# 或者访问 Web 界面
# http://localhost:3000
配置说明
Docker Compose 配置
项目提供的 docker-compose.yml 文件包含了完整的 Excalidraw 部署配置：
version: '3.8'
services:
excalidraw:
image: excalidraw/excalidraw
container_name: excalidraw
ports:
- "3000:80"
restart: on-failure
stdin_open: true
environment:
- NODE_ENV=development
volumes:
- ./excalidraw_data:/opt/node_app/app:delegated
环境变量配置
| 变量名 | 说明 | 默认值 | 必需 |
|---|
NODE_ENV | 运行环境 | development | 否 |
PORT | 服务端口 | 80 | 否 |
| 变量名 | 说明 | 默认值 | 必需 |
|---|
REACT_APP_BACKEND_V2_GET_URL | 后端API地址 | - | 否 |
REACT_APP_BACKEND_V2_POST_URL | 后端POST API地址 | - | 否 |
REACT_APP_SOCKET_SERVER_URL | WebSocket服务器地址 | - | 否 |
REACT_APP_FIREBASE_CONFIG | Firebase配置 | - | 否 |
LangChat Pro 集成
配置 Excalidraw 服务
在 LangChat Pro 的配置文件中添加 Excalidraw 服务配置：
langchat:
excalidraw:
enabled: true
url: http://127.0.0.1:3000
timeout: 30
max_file_size: 10MB
| 参数 | 说明 | 默认值 |
|---|
enabled | 是否启用 Excalidraw 服务 | true |
url | Excalidraw 服务地址 | http://127.0.0.1:3000 |
timeout | 请求超时时间（秒） | 30 |
max_file_size | 最大文件大小 | 10MB |
Excalidraw 在 LangChat Pro 中的应用：
- 流程图绘制：AI 助手可以生成流程图并展示
- 思维导图：创建和展示思维导图
- 架构图：绘制系统架构图和技术图表
- 协作绘图：支持多人实时协作绘图
- 文档可视化：将复杂概念可视化展示
- 会议白板：提供虚拟会议白板功能
功能特性
核心功能
丰富的绘图工具：
- 基础图形：矩形、圆形、三角形、箭头等
- 文本工具：支持多种字体和样式
- 连接线：直线、曲线、折线连接
- 自由绘制：手绘工具和自由线条
- 图层管理：多图层支持和图层操作
实时协作特性：
- 多人编辑：支持多人同时编辑同一画布
- 实时同步：所有更改实时同步到所有用户
- 用户标识：显示当前在线用户和光标位置
- 权限控制：可设置编辑和查看权限
- 版本历史：支持版本回滚和历史记录
多种导出格式：
- 图片格式：PNG、SVG、JPEG
- 文档格式：PDF、Markdown
- 代码格式：可导出为代码片段
- 链接分享：生成可分享的链接
- 嵌入代码：提供嵌入到网页的代码
服务管理
常用命令
# 启动服务
docker-compose up -d
# 启动并查看日志
docker-compose up excalidraw
# 重新启动服务
docker-compose restart excalidraw
# 停止服务
docker-compose down
# 停止并删除数据卷
docker-compose down -v
# 停止特定服务
docker-compose stop excalidraw
# 查看服务状态
docker-compose ps
# 查看日志
docker-compose logs excalidraw
# 实时查看日志
docker-compose logs -f excalidraw
# 查看资源使用
docker stats excalidraw
# 拉取最新镜像
docker-compose pull excalidraw
# 重新创建容器
docker-compose up -d --force-recreate excalidraw
# 完整更新流程
docker-compose down
docker-compose pull
docker-compose up -d
故障排查
常见问题
# 检查端口占用
netstat -tlnp | grep 3000
# 检查 Docker 服务状态
docker ps -a | grep excalidraw
# 查看详细错误日志
docker-compose logs excalidraw
- 端口 3000 被占用
- 镜像拉取失败
- 权限问题
- 磁盘空间不足
# 检查容器状态
docker ps | grep excalidraw
# 检查端口映射
docker port excalidraw
# 测试容器内部服务
docker exec excalidraw curl http://localhost:80
- 确认容器正在运行
- 检查端口映射是否正确
- 验证防火墙设置
- 检查网络连接
# 检查资源使用
docker stats excalidraw
# 检查内存使用
free -h
# 查看磁盘使用
df -h
- 增加容器内存限制
- 优化磁盘I/O
- 使用SSD存储
- 配置反向代理缓存
性能优化
资源配置
services:
excalidraw:
# ... 其他配置
deploy:
resources:
limits:
memory: 1G
reservations:
memory: 512M
services:
excalidraw:
# ... 其他配置
environment:
- NODE_ENV=production
networks:
- excalidraw_network
services:
excalidraw:
# ... 其他配置
volumes:
- ./excalidraw_data:/opt/node_app/app:delegated
- excalidraw_cache:/opt/node_app/.cache
安全配置
访问控制
使用 Nginx 作为反向代理：server {
listen 80;
server_name your-domain.com;
location /excalidraw/ {
proxy_pass http://127.0.0.1:3000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
# WebSocket 支持
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
配置 HTTPS 访问：server {
listen 443 ssl;
server_name your-domain.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
location /excalidraw/ {
proxy_pass http://127.0.0.1:3000/;
# ... 其他代理配置
}
}
限制访问IP范围：server {
# ... 其他配置
# 限制访问IP
allow 192.168.1.0/24;
allow 10.0.0.0/8;
deny all;
location /excalidraw/ {
# ... 代理配置
}
}
监控和维护
健康检查
services:
excalidraw:
# ... 其他配置
healthcheck:
test: ["CMD", "curl", "-f", "http://localhost:80"]
interval: 30s
timeout: 10s
retries: 3
start_period: 40s
日志管理
services:
excalidraw:
# ... 其他配置
logging:
driver: "json-file"
options:
max-size: "10m"
max-file: "3"
备份策略
#!/bin/bash
# backup-excalidraw.sh
BACKUP_DIR="/opt/backups/excalidraw"
DATE=$(date +%Y%m%d_%H%M%S)
# 备份数据目录
tar -czf $BACKUP_DIR/data_$DATE.tar.gz -C ./excalidraw_data .
# 备份配置文件
tar -czf $BACKUP_DIR/config_$DATE.tar.gz docker-compose.yml .env
# 清理旧备份（保留30天）
find $BACKUP_DIR -name "*.tar.gz" -mtime +30 -delete
自动更新
#!/bin/bash
# update-excalidraw.sh
# 停止服务
docker-compose down
# 拉取最新镜像
docker-compose pull
# 启动服务
docker-compose up -d
# 清理旧镜像
docker image prune -f
高级配置
自定义主题
创建自定义主题配置：
// 在容器内创建自定义主题
const customTheme = {
name: "LangChat Theme",
colors: {
primary: "#16A34A",
secondary: "#07C983",
background: "#ffffff",
surface: "#f8f9fa"
}
};
插件配置
启用额外功能插件：
services:
excalidraw:
# ... 其他配置
environment:
- REACT_APP_PLUGINS_ENABLED=true
- REACT_APP_CUSTOM_PLUGINS_URL=https://your-plugins.com
协作配置
配置协作功能：
services:
excalidraw:
# ... 其他配置
environment:
- REACT_APP_BACKEND_V2_GET_URL=https://your-backend.com/api/v2
- REACT_APP_BACKEND_V2_POST_URL=https://your-backend.com/api/v2
- REACT_APP_SOCKET_SERVER_URL=wss://your-socket.com
使用示例
基础使用
- 访问界面：打开浏览器访问
http://localhost:3000
- 创建画布：点击”新建”开始绘图
- 选择工具：使用左侧工具栏选择绘图工具
- 保存作品：点击保存按钮或使用快捷键 Ctrl+S
协作使用
- 创建房间：点击”创建房间”生成协作链接
- 邀请用户：分享链接给其他用户
- 实时协作：多人同时编辑同一画布
- 权限管理：设置用户编辑和查看权限
API 集成
// 嵌入 Excalidraw 到网页
const excalidrawElement = document.createElement('iframe');
excalidrawElement.src = 'http://localhost:3000';
excalidrawElement.width = '100%';
excalidrawElement.height = '600px';
document.body.appendChild(excalidrawElement);
