【Docker项目实战】使用Docker部署Drawnix开源白板工具
一、Drawnix介绍
1.1 Drawnix简介
Drawnix
是一款开源的在线白板工具(SaaS),集思维导图、流程图绘制、自由画图等多种功能于一体,支持协作与插件扩展,适用于个人创作、团队协作和远程办公场景。它完全免费且开源,提供丰富的编辑功能和良好的跨平台体验。
1.2 Drawnix主要特点
- ✅ 💯 免费 + 开源:无使用成本,代码开放透明,可自由定制部署。
- ⚒️ 支持思维导图与流程图编辑:内置专业图形结构,提升逻辑表达效率。
- 🖌 画笔功能:自由手绘,满足创意草图与标注需求。
- 😀 插入图片:轻松导入外部图像,丰富内容展示形式。
- 🚀 基于插件机制:灵活扩展功能,适应多样化使用场景。
- 🖼️ 📃 导出为 PNG、JSON(.drawnix):支持多种格式导出,便于分享与备份。
- 💾 自动保存(浏览器缓存):防止数据丢失,保障编辑连续性。
- ⚡ 编辑特性完善:支持撤销、重做、复制、粘贴等常用操作。
- 🌌 无限画布:自由缩放与滚动,打造广阔创作空间。
- 🎨 主题模式:多主题切换,满足个性化视觉体验。
- 📱 移动设备适配:支持手机和平板操作,随时随地进行创作。
- 📈 支持 Mermaid 语法转流程图:通过文本快速生成专业流程图。
- ✨ 支持 Markdown 文本转思维导图(新功能🔥🔥🔥):一键将结构化文本转化为可视化思维导图,极大提升效率。
二、本次实践规划
2.1 本地环境规划
本次实践为个人测试环境,操作系统版本为Ubuntu 22.04.1。
hostname | IP地址 | 操作系统版本 | Docker版本 | 部署项目 |
---|---|---|---|---|
jeven01 | 192.168.3.88 | Ubuntu 22.04.1 LTS | 27.1.1 | Drawnix |
2.2 本次实践介绍
1.本次实践部署环境为个人测试环境,生产环境请谨慎;
2.在Docker环境下部署Drawnix开源白板工具。
三、本地环境检查
3.1 检查Docker服务状态
检查Docker服务是否正常运行,确保Docker正常运行。
root@jeven01:~# systemctl status docker
● docker.service - Docker Application Container Engine
Loaded: loaded (/lib/systemd/system/docker.service; enabled; vendor preset: enabled)
Active: active (running) since Wed 2025-07-02 14:16:57 UTC; 21h ago
TriggeredBy: ● docker.socket
Docs: https://docs.docker.com
Main PID: 878 (dockerd)
Tasks: 28
Memory: 1.2G
CPU: 1min 50.356s
CGroup: /system.slice/docker.service
├─ 878 /usr/bin/dockerd -H fd:// --containerd=/run/containerd/containerd.sock
3.2 检查Docker版本
检查Docker版本
root@jeven01:~# docker -v
Docker version 27.1.1, build 6312585
3.3 检查docker compose 版本
检查Docker compose版本,确保2.0以上版本。
root@jeven01:~# docker compose version
Docker Compose version v2.19.1
四、构建Drawnix镜像
4.1 下载Drawnix项目
- 执行以下命令,下载Drawnix项目。
git clone https://github.com/plait-board/drawnix.git
- 进入项目目录,查看项目内容如下所示:
root@jeven01:~# cd drawnix/
root@jeven01:~/drawnix# ll
total 828
drwxr-xr-x 8 root root 4096 Jul 12 16:31 ./
drwx------ 10 root root 4096 Jul 12 16:31 ../
drwxr-xr-x 4 root root 4096 Jul 12 16:31 apps/
-rw-r--r-- 1 root root 1034 Jul 12 16:31 CFPAGE-DEPLOY.md
-rw-r--r-- 1 root root 25173 Jul 12 16:31 CHANGELOG.md
-rw-r--r-- 1 root root 305 Jul 12 16:31 Dockerfile
-rw-r--r-- 1 root root 23 Jul 12 16:31 .dockerignore
-rw-r--r-- 1 root root 245 Jul 12 16:31 .editorconfig
-rw-r--r-- 1 root root 13 Jul 12 16:31 .eslintignore
-rw-r--r-- 1 root root 880 Jul 12 16:31 .eslintrc.json
drwxr-xr-x 8 root root 4096 Jul 12 16:31 .git/
drwxr-xr-x 3 root root 4096 Jul 12 16:31 .github/
-rw-r--r-- 1 root root 530 Jul 12 16:31 .gitignore
-rw-r--r-- 1 root root 126 Jul 12 16:31 jest.config.ts
-rw-r--r-- 1 root root 88 Jul 12 16:31 jest.preset.js
-rw-r--r-- 1 root root 1064 Jul 12 16:31 LICENSE
-rw-r--r-- 1 root root 1765 Jul 12 16:31 nx.json
-rw-r--r-- 1 root root 2573 Jul 12 16:31 package.json
-rw-r--r-- 1 root root 711664 Jul 12 16:31 package-lock.json
drwxr-xr-x 5 root root 4096 Jul 12 16:31 packages/
-rw-r--r-- 1 root root 103 Jul 12 16:31 .prettierignore
-rw-r--r-- 1 root root 26 Jul 12 16:31 .prettierrc
-rw-r--r-- 1 root root 4364 Jul 12 16:31 README_en.md
-rw-r--r-- 1 root root 3976 Jul 12 16:31 README.md
drwxr-xr-x 2 root root 4096 Jul 12 16:31 scripts/
-rw-r--r-- 1 root root 676 Jul 12 16:31 tsconfig.base.json
drwxr-xr-x 2 root root 4096 Jul 12 16:31 .vscode/
4.2 构建镜像
- 执行以下命令,开始构建本地容器镜像
docker build -t jeven/drawnix:latest .
4.3 查看镜像
- 查看本地构建的镜像,如下所示:
root@jeven01:~/drawnix# docker images |grep drawnix
jeven/drawnix latest f0965388c67a About an hour ago 5.11MB
五、部署Drawnix服务
5.1 docker-cli方式部署(可选)
如果使用docker-cli方式部署,可参考以下命令:
docker run -d \
--restart always \
--name drawnix \
-p 7200:80 \
jeven/drawnix
5.2 编辑部署文件
>在部署目录下,创建docker-compose.yaml文件,如下所示:
```bash
vim docker-compose.yaml
version: '3'
services:
drawnix:
image: jeven/drawnix
container_name: drawnix
restart: always
ports:
- "7200:80"
5.3 创建Drawnix容器
执行以下命令,创建Drawnix容器。
docker compose up -d
5.4 查看Drawnix容器状态
检查Drawnix容器运行状态,确保Drawnix容器正常启动。
root@jeven01:~/drawnix# docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
d32b3bd3d639 jeven/drawnix "/busybox-httpd -f -…" 6 seconds ago Up 5 seconds 3000/tcp, 0.0.0.0:7200->80/tcp, [::]:7200->80/tcp drawnix
六、访问Drawnix服务
浏览器地址:
http://<个人的服务器IP>:7200
,访问Drawnix的初始页。如果无法访问,请确保宿主机的防火墙已关闭或已放行相关端口,对于云服务器还需配置相应的安全组规则。
七、Drawnix基本使用
7.1 Mermaid图表
Mermaid 是一个基于 JavaScript 的图表绘制工具,允许用户通过简单的文本语法生成流程图、时序图、甘特图等各类图表。它无需复杂的绘图软件,直接在 Markdown 或文本编辑器中编写代码即可生成可视化图表,适合集成到文档、博客或项目管理工具中。
在Drawnix中绘制Mermaid流程图时,需注意当前版本主要支持基本的流程图元素和语法。对于不支持的类型,将通过图片形式展示。可参照以下示例进行操作,以确保流程图能够正确呈现。请注意,具体的支持范围可能依据Drawnix的更新而有所变化。
graph TD;
A[开始] --> B[编写测试用例];
B --> C{测试用例是否准备好?};
C -->|是| D[执行测试];
C -->|否| B;
D --> E{测试是否通过?};
E -->|是| F[完成测试];
E -->|否| G[分析并修正错误];
G --> B;
7.2 思维导图功能
选择Markdown到Drawnix选项,直接绘制思维导图。
可参开系统自动给出的思维导图示例,如下所示:
八、总结
本次通过Docker部署Drawnix开源白板工具的实践,系统掌握了从环境准备、镜像构建到服务部署的完整流程,切实体会到容器化技术在简化应用部署与管理中的显著优势。Drawnix的Mermaid图表和思维导图等协作功能在实际使用中表现出色,为团队在线协作提供了高效支持,验证了其作为开源工具的实用价值。此次实践不仅成功搭建了功能完备的协作平台,更为后续其他应用的容器化部署积累了宝贵经验,明确了容器化技术在提升开发效率和资源利用率方面的重要作用。
- 点赞
- 收藏
- 关注作者
评论(0)