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

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)在线部署

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.mzph.cn/bicheng/1713.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何帮助中小企业建立数字化的能力?

中小企业建立数字化的能力,可以从以下几个方面着手: 1、开展数字化评估:中小企业首先需要对自己的数字化基础水平和企业经营管理现状进行评估,这包括了解企业在数字化方面的现有能力和需求,以及内外部转型资源的可用性…

[创业之路-106] :经济学十大陷阱与核心思想:系统论、社会进化论、周期论、阴阳互转论

目录 前言: 一、流动性陷阱。 二、中等收入陷阱。 三、修昔底德陷阱。 四、塔西佗陷阱。 五、金德尔伯格陷阱。 六、卢梭陷阱。 七、拉美陷阱。 八、阿喀琉斯之踵。 九、布拉德伯里悖论。 十、李约瑟之谜 结论:上述陷阱的…

AI智能客服机器人原来这么好用,企业再不使用就落伍了!

随着人工智能技术的不断成熟,AI智能客服机器人已经变得越来越智能,它们正逐渐成为企业提供客户服务的强大助手。企业若不开始部署这种高效的技术,可能会在竞争中失去先机。下面,让我们来看看AI智能客服机器人为何如此好用&#xf…

vue +antvX6 根据节点与线,动态设置节点坐标生成流程图

需求 vue2 + antvX6完成流程图,但只有节点与线,没有节点的坐标,需要根据节点的顺序显示流程图。 需求: 1.根据数据动态生成对应的节点与线; 2.节点不能重叠; 3.节点与线可拖拽; 4.因为线存在重叠可能,所有鼠标移入时线必须高亮显示(红色),鼠标移出复原; 5.要求有…

Spring-基于xml自动装配

版本 Spring Framework 6.0.9​ 1. 定义 Spring IoC容器在无需显式定义每个依赖关系的情况下,根据指定的策略,自动为指定的bean中所依赖的类类型或接口类型属性赋值。 2. 关键配置元素 BeanDefinitionParserDelegate类定义了autowire属性的属性值&…

绿联 安装transmission

绿联 安装transmission及中文UI 1、镜像 linuxserver/transmission:latest 2、安装 2.1、创建容器 按需配置权重。 2.2、基础设置 2.3、网络 桥接即可。 注:如果使用IPV6,请选择"host"模式。 注:如果使用IPV6,请选…

Git禁止松散对象loose objects弹窗

打开仓库时,弹窗如图 This repository currently has approximately XXXX loose objects.解决办法:见How to skip “Loose Object” popup when running ‘git gui’ Git v1.7.9 或以上版本,执行git config --global gui.gcwarning false

【计算机毕业设计】面向学生成绩分析系统产品功能介绍——后附源码

🎉**欢迎来到琛哥的技术世界!**🎉 📘 博主小档案: 琛哥,一名来自世界500强的资深程序猿,毕业于国内知名985高校。 🔧 技术专长: 琛哥在深度学习任务中展现出卓越的能力&a…

NIO之ByteBuffer

NIO中的ByteBuffer是缓冲区,其中有几个比较重要的属性capacity,position和limit。 capacity: 其中,capacity是缓冲区的容量大小,在分配内存空间后不会改变。 limit: limit是限制位置,在读写模…

前端crypto-js, 文件加密,判断相同文件、图片(MD5,SHA256)

文章目录 前情提要应用场景实战解析最后前情提要 大家好,今天我们来接触一个库crypto-js 没错,上面是有道翻译的截图,为了我们得到的信息更权威,这个库是用来加密的,但介绍是说,已经停止维护,但并不影响我们在前端项目中的使用,所以学学也没有坏处 应用场景 判断图片…

亿发:新修订器械GSP重大变化,医疗器械GSP软件助力适应科学监管

随着医疗器械行业的快速发展和监管要求的提升,国家药监局近期发布了新修订的医疗器械GSP(Good Storage Practice)规范,旨在加强医疗器械流通环节的质量管理和监督,确保医疗器械的安全、有效和可追溯。这一重大变化为医…

万益蓝Wonderlab益生菌:吃雪糕的自由,我终于找回来了!

虽然现在不是夏天,但是我必须要来说一下!我不仅在夏天可以吃雪糕!冬天吃也完全没有问题! 夏天,对于很多人来说,是雪糕、冷饮和冰镇西瓜的代名词。但对于我,这简直就是个“禁区”。每次看着别人…

SpringBoot项目启动的时候直接退出了?

SpringBoot项目启动的时候直接退出了? 如下图: 在启动SpringBoot项目的时候仅仅用了1.209s,然后直接退出了,也没有出现启动的项目对应的服务器端口号?为什么会这样呢?因为既然有服务器端口号 那么肯定会有…

【php开发工程师系统性教学】——Laravel框架(验证码)的配置和使用的保姆式教程

👨‍💻个人主页:开发者-曼亿点 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 曼亿点 原创 👨‍💻 收录于专栏&#xff1a…

MySQL的事务相关的语句的使用

MySQL的事务相关的语句的使用 事务是数据库管理系统执行过程中的一个程序单位,由一个或多个数据库操作组成。MySQL作为一款流行的关系型数据库管理系统,支持事务处理,允许用户定义一系列的操作,这些操作要么完全执行,…

数仓建模—数仓架构发展史

数仓建模—数仓架构发展史 时代的变迁,生死的轮回,历史长河滔滔,没有什么是永恒的,只有变化才是不变的,技术亦是如此,当你选择互联网的那一刻,你就相当于乘坐了一个滚滚向前的时代列车,开往未知的方向,不论什么样的技术架构只有放在当前的时代背景下,才是有意义的,…

MySQl-8.3.0版本安装下载教程(超详细保姆级教程)

第一步,去百度找到MySQl官网 第二步,找到DOWNLOAD(下载) 第三步 第四步 第五步 第六步.选择倒数第2个 第七步 第八步然后根据步骤安装就好了

MultiCD工具:创建一个多引导Linux USB驱动器

众所周知,拥有一个可安装多个可用操作系统的 CD 或 USB 驱动器在各种情况下都非常有用。无论是为了快速测试或调试某些内容,还是只是重新安装笔记本电脑或 PC 的操作系统,这都可以为你节省大量时间。 在本文中,将介绍如何使用名为…

最新win11配置cuda以及cudnn补丁教程

1、首先使用指令 nvidia-smi 查看电脑支持的**最高cuda**版本,例如:本机 12.2 2、进入CUDA下载cuda安装包 https://developer.nvidia.com/cuda-toolkit-archive 2、点击上方绿色的链接,按照图中序号选择的即可,最后点击下载。 …

VUE识别图片文字OCR(tesseract.js)

效果:1&#xff1a; 效果图2&#xff1a; 一、安装tesseract.js npm i tesseract.js 二、静态页面实现 <template><div><div style"marginTop:100px"><input change"handleChage" type"file" id"image-input"…