文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >专栏 >【Docker项目实战】使用Docker部署Drawnix开源白板工具

【Docker项目实战】使用Docker部署Drawnix开源白板工具

原创
作者头像
江湖有缘
发布于 2025-09-09 16:10:52
发布于 2025-09-09 16:10:52
4020
举报
文章被收录于专栏：Docker项目实战Docker项目实战

一、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正常运行。

代码语言：bash
复制
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版本

代码语言：bash
复制
root@jeven01:~# docker -v
Docker version 27.1.1, build 6312585

3.3 检查docker compose 版本

检查Docker compose版本，确保2.0以上版本。

代码语言：bash
复制
root@jeven01:~# docker compose version
Docker Compose version v2.19.1

四、构建Drawnix镜像

4.1 下载Drawnix项目

  • 执行以下命令，下载Drawnix项目。
代码语言：bash
复制
git clone https://github.com/plait-board/drawnix.git
  • 进入项目目录，查看项目内容如下所示：
代码语言：bash
复制
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 构建镜像

  • 执行以下命令，开始构建本地容器镜像
代码语言：bash
复制
docker build -t jeven/drawnix:latest  .
在这里插入图片描述
在这里插入图片描述

4.3 查看镜像

  • 查看本地构建的镜像，如下所示：
代码语言：bash
复制
root@jeven01:~/drawnix# docker images |grep drawnix
jeven/drawnix                                                               latest          f0965388c67a   About an hour ago   5.11MB

五、部署Drawnix服务

5.1 docker-cli方式部署(可选）

如果使用docker-cli方式部署，可参考以下命令：

代码语言：bash
复制
docker run -d \
   --restart always  \
   --name drawnix \
   -p 7200:80 \
  jeven/drawnix

5.2 编辑部署文件

在部署目录下，创建docker-compose.yaml文件，如下所示：

代码语言：bash
复制
vim docker-compose.yaml
代码语言：yaml
复制
version: '3'

services:
  drawnix:
    image: jeven/drawnix
    container_name: drawnix
    restart: always
    ports:
      - "7200:80"

5.3 创建Drawnix容器

执行以下命令，创建Drawnix容器。

代码语言：bash
复制
docker compose up -d
在这里插入图片描述
在这里插入图片描述

5.4 查看Drawnix容器状态

检查Drawnix容器运行状态，确保Drawnix容器正常启动。

代码语言：bash
复制
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的更新而有所变化。

代码语言：bash
复制
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图表和思维导图等协作功能在实际使用中表现出色，为团队在线协作提供了高效支持，验证了其作为开源工具的实用价值。此次实践不仅成功搭建了功能完备的协作平台，更为后续其他应用的容器化部署积累了宝贵经验，明确了容器化技术在提升开发效率和资源利用率方面的重要作用。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S15#自选日志

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S15#自选日志
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
目录
  • 一、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 思维导图功能
  • 八、总结
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

Copyright © 2013 - 2025 Tencent Cloud.

All Rights Reserved. 腾讯云 版权所有

登录 后参与评论