【Docker项目实战】使用Docker部署Drawnix开源白板工具一、Drawnix介绍1.1 Drawnix简介1.2 Drawnix主要特点二、本次实践规划2.1 本地环境规划2.2 本次实践介绍三、本地环境检查3.1 检查Docker服务状态3.2 检查Docker版本3.3 检查docker compose 版本四、构建Drawnix镜像4.1 下载Drawnix项目4.2 构建镜像4.3 查看镜像五、部署Drawnix服务5.1 docker-cli方式部署(可选5.2 编辑部署文件5.3 创建Drawnix容器5.4 查看Drawnix容器状态六、访问Drawnix服务七、Drawnix基本使用7.1 Mermaid图表7.2 思维导图功能八、总结一、Drawnix介绍1.1 Drawnix简介Drawnix是一款开源的在线白板工具SaaS集思维导图、流程图绘制、自由画图等多种功能于一体支持协作与插件扩展适用于个人创作、团队协作和远程办公场景。它完全免费且开源提供丰富的编辑功能和良好的跨平台体验。1.2 Drawnix主要特点✅ 免费 开源无使用成本代码开放透明可自由定制部署。⚒️支持思维导图与流程图编辑内置专业图形结构提升逻辑表达效率。画笔功能自由手绘满足创意草图与标注需求。插入图片轻松导入外部图像丰富内容展示形式。基于插件机制灵活扩展功能适应多样化使用场景。️ 导出为 PNG、JSON(.drawnix)支持多种格式导出便于分享与备份。自动保存浏览器缓存防止数据丢失保障编辑连续性。⚡编辑特性完善支持撤销、重做、复制、粘贴等常用操作。无限画布自由缩放与滚动打造广阔创作空间。主题模式多主题切换满足个性化视觉体验。移动设备适配支持手机和平板操作随时随地进行创作。支持 Mermaid 语法转流程图通过文本快速生成专业流程图。✨支持 Markdown 文本转思维导图新功能一键将结构化文本转化为可视化思维导图极大提升效率。二、本次实践规划2.1 本地环境规划本次实践为个人测试环境操作系统版本为Ubuntu 22.04.1。hostnameIP地址操作系统版本Docker版本部署项目jeven01192.168.3.88Ubuntu 22.04.1 LTS27.1.1Drawnix2.2 本次实践介绍1.本次实践部署环境为个人测试环境生产环境请谨慎2.在Docker环境下部署Drawnix开源白板工具。三、本地环境检查3.1 检查Docker服务状态检查Docker服务是否正常运行确保Docker正常运行。rootjeven01:~# systemctl status docker● docker.service - Docker Application Container Engine Loaded: loaded(/lib/systemd/system/docker.service;enabled;vendor preset: enabled)Active: active(running)since Wed2025-07-0214:16:57 UTC;21h ago TriggeredBy: ● docker.socket Docs: https://docs.docker.com Main PID:878(dockerd)Tasks:28Memory:1.2G CPU: 1min50.356s CGroup: /system.slice/docker.service ├─878/usr/bin/dockerd-Hfd://--containerd/run/containerd/containerd.sock3.2 检查Docker版本检查Docker版本rootjeven01:~# docker -vDocker version27.1.1, build63125853.3 检查docker compose 版本检查Docker compose版本确保2.0以上版本。rootjeven01:~# docker compose versionDocker Compose version v2.19.1四、构建Drawnix镜像4.1 下载Drawnix项目执行以下命令下载Drawnix项目。gitclone https://github.com/plait-board/drawnix.git进入项目目录查看项目内容如下所示rootjeven01:~# cd drawnix/rootjeven01:~/drawnix# lltotal828drwxr-xr-x8root root4096Jul1216:31 ./ drwx------10root root4096Jul1216:31../ drwxr-xr-x4root root4096Jul1216:31 apps/ -rw-r--r--1root root1034Jul1216:31 CFPAGE-DEPLOY.md -rw-r--r--1root root25173Jul1216:31 CHANGELOG.md -rw-r--r--1root root305Jul1216:31 Dockerfile -rw-r--r--1root root23Jul1216:31 .dockerignore -rw-r--r--1root root245Jul1216:31 .editorconfig -rw-r--r--1root root13Jul1216:31 .eslintignore -rw-r--r--1root root880Jul1216:31 .eslintrc.json drwxr-xr-x8root root4096Jul1216:31 .git/ drwxr-xr-x3root root4096Jul1216:31 .github/ -rw-r--r--1root root530Jul1216:31 .gitignore -rw-r--r--1root root126Jul1216:31 jest.config.ts -rw-r--r--1root root88Jul1216:31 jest.preset.js -rw-r--r--1root root1064Jul1216:31 LICENSE -rw-r--r--1root root1765Jul1216:31 nx.json -rw-r--r--1root root2573Jul1216:31 package.json -rw-r--r--1root root711664Jul1216:31 package-lock.json drwxr-xr-x5root root4096Jul1216:31 packages/ -rw-r--r--1root root103Jul1216:31 .prettierignore -rw-r--r--1root root26Jul1216:31 .prettierrc -rw-r--r--1root root4364Jul1216:31 README_en.md -rw-r--r--1root root3976Jul1216:31 README.md drwxr-xr-x2root root4096Jul1216:31 scripts/ -rw-r--r--1root root676Jul1216:31 tsconfig.base.json drwxr-xr-x2root root4096Jul1216:31 .vscode/4.2 构建镜像执行以下命令开始构建本地容器镜像dockerbuild-tjeven/drawnix:latest.4.3 查看镜像查看本地构建的镜像如下所示rootjeven01:~/drawnix# docker images |grep drawnixjeven/drawnix latest f0965388c67a About an hour ago5.11MB五、部署Drawnix服务5.1 docker-cli方式部署(可选如果使用docker-cli方式部署可参考以下命令dockerrun-d\--restartalways\--namedrawnix\-p7200:80\jeven/drawnix5.2 编辑部署文件在部署目录下创建docker-compose.yaml文件如下所示vimdocker-compose.yamlversion:3services:drawnix:image:jeven/drawnixcontainer_name:drawnixrestart:alwaysports:-7200:805.3 创建Drawnix容器执行以下命令创建Drawnix容器。dockercompose up-d5.4 查看Drawnix容器状态检查Drawnix容器运行状态确保Drawnix容器正常启动。rootjeven01:~/drawnix# docker psCONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES d32b3bd3d639 jeven/drawnix/busybox-httpd -f -…6seconds ago Up5seconds3000/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图表和思维导图等协作功能在实际使用中表现出色为团队在线协作提供了高效支持验证了其作为开源工具的实用价值。此次实践不仅成功搭建了功能完备的协作平台更为后续其他应用的容器化部署积累了宝贵经验明确了容器化技术在提升开发效率和资源利用率方面的重要作用。