使用 Docker 部署 Draw.io 在线流程图系统

devtools/2024/9/23 4:16:56/

1)介绍 Draw.io

GitHub:https://github.com/jgraph/drawio

Draw.io 是一款开源的绘制流程图的工具,拥有大量免费素材和模板。程序本身支持中文在内的多国语言,创建的文档可以导出到多种网盘或本地。无论是创建流程图、组织结构图、网络拓扑图还是其他类型的图表,Draw.io 基本都能满足你对图形展示的多样需求。

image.png

2)功能特性

  • 支持多种类型的图表和图形: Drawio 支持多种类型的图表和图形,包括流程图、网络拓扑图、组织结构图、UML 和 ER 图等。这使得 Drawio 能够满足不同用户的不同需求。
  • 易于使用的用户界面: Drawio 采用了简洁易懂的用户界面,即使是新手也能快速上手。
  • 可导出多个文件格式: Drawio 可以导出多种文件格式,包括 PDF、PNG、SVG、JPG等。这使得用户可以方便地分享和保存图表。
  • 可与云存储服务集成: Drawio 可与 Google Drive 和 OneDrive 等云存储服务集成。这使得用户可以方便地在云端存储和访问图表。
  • 多平台客户端支持: 如果觉得使用 Web 版不方便,Draw.io 也提供了多平台的离线桌面版可供下载。

3)在线体验

Demo:https://app.diagrams.net/

image.png
image.png
image.png

4)在线部署

Docker__32">4.1)安装 Docker 环境

# 高版本 Docker 安装
curl -fsSL https://get.docker.com/ | sh
# 关闭防火墙
systemctl disable --now firewalld
setenforce 0
# 启用 Docker
systemctl enable --now docker

4.2)开启 IPv4 forwarding

echo "net.ipv4.ip_forward=1" >> /etc/sysctl.conf
systemctl restart network
sysctl net.ipv4.ip_forward

4.3)部署 Draw.io

# 创建 Draw.io 数据存放目录
mkdir /docker/Drawio -p && cd /docker/Drawio# 使用 Docker-Cli 运行 Drawio 容器
docker run -dit --name=drawio -p 8080:8080 \
-v drawiojs:/usr/local/tomcat/webapps/draw/js/ \
--restart=always jgraph/drawio

4.4)验证 Draw.io

docker ps -a

image.png

5)访问 Draw.io

使用浏览器访问 Draw.io 前台,http://服务器IP地址:8080

选择 Device
image.png

可选择 创建新的流程图( Create New Diagram )
或选择 打开现有的流程图( Open Existing Diagram )
image.png

可选择 流程图 类型( 然后选择对应模板 )
当然,也可以直接 基于空白页 自行绘制流程图
image.png

效果展示
image.png
image.png
image.png
image.png

6)总结

Drawio 是一款功能丰富的在线绘图工具,提供流程图、组织结构图等多种类型的图表。用户可以轻松拖放元素,实时编辑并与团队共享。支持多种文件格式导入导出,无需安装即可使用,适用于个人和团队快速创建各种图表。


http://www.ppmy.cn/devtools/8833.html

相关文章

【通信原理笔记】【四】数字基带传输——4.1 数字基带信号

文章目录 前言一、数字信号二、数字基带信号波形2.1 码元波形2.2 相对码2.3 多电平码 总结 前言 从这一节开始介绍数字通信系统中的数字基带传输部分。与模拟通信系统相比,数字通信系统传输的对象是数字的离散信号而非连续的模拟信号,本节先学习什么是数…

ChatGPT及GIS、生物、地球、农业、气象、生态、环境科学领域案例

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮,可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…

c#创建安装windows服务

在C#中创建并安装Windows服务,通常需要以下几个步骤: 创建Windows服务项目编写服务逻辑编译服务项目安装服务启动和停止服务 下面是一个简单的步骤指南: 步骤 1: 创建Windows服务项目 在Visual Studio中,创建一个新的Windows服…

@CrossOrigin的使用

CrossOrigin的使用 1.使用场景2.用法3.示例3.1 标注在方法上3.2 标注在类上 3.属性配置 1.使用场景 前后端分离应用:当前端应用和后端服务部署在不同的域或端口上时,前端应用尝试向后端服务发起请求时,可能会遇到同源策略的限制。这时&#…

射频识别技术助力产品分拣:提升效率与准确性

射频识别技术助力产品分拣:提升效率与准确性 RFID技术在产品分拣中具有重要的应用,它利用射频信号进行非接触式的自动识别,能够高效、准确地完成产品分拣工作。 在产品分拣中,RFID技术的主要应用方式是在产品上粘贴RFID电子标签&…

MyBatisCodeHelperPro插件免激活安装

1、下载 MyBatisCodeHelperPro 插件包(内部已经激活) 链接: https://pan.baidu.com/s/1i2Nvlnaea92U1Jx5E8xJUA 提取码: jmms 2、安装,点开插件,选择本地安装,选择下载的MyBatisCodeHelper-Pro.zip即可完成安装。

图像处理的魔法师:Pillow 库探秘

文章目录 图像处理的魔法师:Pillow 库探秘第一部分:背景介绍第二部分:库是什么?第三部分:如何安装这个库?第四部分:库函数使用方法第五部分:场景应用第六部分:常见Bug及解…

笔试题4 -- 除2!(k次机会偶数除2求最小和)

除2!(k次机会偶数除2求最小和) 文章目录 除2!(k次机会偶数除2求最小和)读懂题目方案一(基于multiset实现 -- 超时)方案二(改进算法--基于 priority_queue 实现)总结 题目链接: 除2!…