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

news2024/11/13 21:50:46

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.coloradmin.cn/o/1616855.html

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

相关文章

vscode 解决无法创建临时文件。

报错: Fatal error: cant create C:\Users???y\AppData\Local\Temp\ccqkCS9j.o: No such file or directory 右击此 电脑 -> 属性 打开 系统信息 -> 高级系统设置 系统属性 -> 高级 -> 环境变量 将temp 和 tmp 改为其它英文路径 只更改用户变量…

Opencv_2_ 图像色彩空间转换

ColorInvert.h 内容如下&#xff1a; #pragma once #include <opencv.hpp> using namespace std; #include <opencv.hpp> using namespace cv; using namespace std; class ColorInvert{ public : void colorSpaceInvert(Mat&image); }; ColorInvert.cpp…

kubernetes中的副本控制器rc(replicationcontrollers)和rs(replicasets)

一、rc控制器replicationcontrollers rc控制器就是控制相同pod副本数量 使用rc控制器资源创建pod&#xff0c;设定创建pod资源的数量 1.1 案例 1.1.1、创建资源清单 [rootmaster rc-demo]# cat rc.yaml apiVersion: v1 kind: ReplicationController metadata: name: rc01 …

Spring Cloud面试篇

面试篇-nacos面试题 1. springboot常见组件 注册中心组件&#xff1a;Eureka、Nacos 负载均衡组件&#xff1a;Ribbon 远程调用组件&#xff1a;OpenFeign 网关组件&#xff1a;Zuul、Gateway 服务保护组件&#xff1a;Hystrix、Sentinel 服务配置管理组件&#xff1a;SpringCl…

如何用PHP语言实现远程语音播报

如何用PHP语言实现远程语音播报呢&#xff1f; 本文描述了使用PHP语言调用HTTP接口&#xff0c;实现语音播报。通过发送文本信息&#xff0c;来实现远程语音播报、语音提醒、语音警报等。 可选用产品&#xff1a;可根据实际场景需求&#xff0c;选择对应的规格 序号设备名称1…

路由引入,路由过滤,路由策略实验

1&#xff0c;配置IP地址 R1&#xff1a; [R1]dis ip interface brief Interface IP Address/Mask Physical Protocol GigabitEthernet0/0/0 100.1.1.1/24 up up LoopBack0 …

环境配置--idea练习java实现一键运行

背景 练习java时&#xff0c;先编译再运行&#xff0c;手动执行效率太慢。需要像运行python脚本一下快速获取脚本执行效果。 idea配置 使用java草稿方式实现java脚本的快速调试。 具体配置&#xff1a; 添加java草稿配置 指定java主要类、文件路径、工作目录&#xff0c;…

高频前端面试题汇总之前端性能优化篇

一、CDN 1. CDN的概念 CDN&#xff08;Content Delivery Network&#xff0c;内容分发网络&#xff09;是指一种通过互联网互相连接的电脑网络系统&#xff0c;利用最靠近每位用户的服务器&#xff0c;更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户&#…

基于51单片机的宠物自动喂食语音播报,有实物

1. 51仿真&#xff1a; LCD第一屏显示食物重量&#xff0c;当前时间&#xff0c;温湿度。第二屏显示喂食时间&#xff0c;第三屏显示喂食重量。可通过点击查看喂食时间翻转屏幕显示。 点击查看喂食时间后&#xff0c;显示喂食时间&#xff0c;可以设置三个时间&#xff0c;再点…

3D Gaussian Splatting介绍

目录 一、概述二、基础介绍1. 多维高斯分布2. 将3D 高斯投影到2D像素平面3. 球谐函数4. Splatting and α \alpha α blending 三、整体流程四、 伪代码五、评价指标六、实验结果七、reference 一、概述 3D Gaussian Splatting和NeRF一样&#xff0c;主要用于新视图合成。 特…

视频批量剪辑新风尚:横屏内容轻松转竖屏,引领内容创作新风尚!

随着移动设备的普及和社交媒体的崛起&#xff0c;横屏视频逐渐成为内容创作的新宠。然而&#xff0c;在某些场景下&#xff0c;竖屏视频仍然具有无可比拟的优势。为了满足创作者多样化的需求&#xff0c;我们推出了全新的视频剪辑功能——横屏转竖屏&#xff01; 第一步&#…

合合信息Embedding模型:引领中文文本向量化技术新高度

目录 &#x1f345;前言&#x1f353;赛事含金量&#x1f353;Embedding技术简介&#x1f353;Embedding在大模型中的价值&#x1f353;合合信息Embedding模型特点及优势&#x1f353;合合信息Embedding模型测试&#x1f353;技术突破&#x1f353;公司介绍 &#x1f345;总结 …

flutter 谷歌的苹果系统消息推送

flutter firebase 云消息通知教程 (android-安卓、ios-苹果) Android、ReactNative、Flutter集成Firebase推送注意事项 Android&#xff1a;Firebase 凭据 iOS&#xff1a;基于 p8 令牌的 APN 连接 iOS&#xff1a;p12 生成证书 Flutter之对接国外推送onesignal踩坑笔记&a…

计算机网络学习day02|HTTP协议

目录 一、HTTP报文格式长什么样&#xff1f;是如何分割的&#xff1f; 请求行 状态行 头部字段 常用头字段 小结 二、HTTP提供了哪些方法&#xff1f;GET和POST的区别是什么&#xff1f; 1.HTTP有哪些方法 2.GET/HEAD 3.PSOT/PUT 小结 三、URI和URL URI 的格式 U…

【C++】 【进程】第二天

1.类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。 默认成员函数&#xff1a;用户没有显式实现&#xff0c;编译器会…

2024三掌柜赠书活动第二十四期:containerd原理剖析与实战

目录 前言 Containerd的架构 Containerd的工作流程 Containerd的实战演示 关于《containerd原理剖析与实战》 编辑推荐 内容简介 作者简介 图书目录 书中前言/序言 《containerd原理剖析与实战》全书速览 结束语 前言 作为开发者&#xff0c;对于编程语言并不陌生&…

【ARM 裸机】C 语言 led 驱动

前面刚学习了汇编 led 驱动的编写和验证&#xff0c;现在开始就要进入 C 语言 led 驱动编写与验证了 ! 1、C 语言运行环境构建 1.1、设置处理器模式 使 6ULL 处于 SVC 模式下&#xff0c;之前已经提到了处理器的九种模式&#xff0c;参考&#xff1a;【ARM 裸机】汇编 led 驱…

在Nuxt.js中添加PostCSS自动前缀器

在其他浏览器中&#xff0c;有些 CSS 属性需要带有前缀。如-webkit- | -o- | -ms- 等等 Autoprefixer 是一个 PostCSS 插件&#xff0c;可以将你的CSS代码渲染到浏览器中自动补充厂商前缀&#xff0c;因此你不用担心自己编写的CSS代码有浏览器兼容性问题。 如&#xff1a; .fl…

Golang | Leetcode Golang题解之第43题字符串相乘

题目&#xff1a; 题解&#xff1a; func multiply(num1 string, num2 string) string {if num1 "0" || num2 "0" {return "0"}m, n : len(num1), len(num2)ansArr : make([]int, m n)for i : m - 1; i > 0; i-- {x : int(num1[i]) - 0fo…

AI大模型探索之路-认知篇3:大语言模型微调基础认知

文章目录 前言一、微调技术概述二、微调的必要性三、大模型的微调方法四、微调过程中的技术细节五、微调后的模型评估与应用总结 前言 在人工智能的广阔研究领域内&#xff0c;大型预训练语言模型&#xff08;Large Language Models, LLMs&#xff09;已经成为推动技术革新的关…