百度360必应搜狗淘宝本站头条
shell 字符串比较my.cnfword空格下划线不显示applicationcontextawaremaven镜像
当前位置：网站首页 > 技术资源 > 正文

部署开源流程图架构图软件drawio

lipiwang 2025-03-05 17:48 29 浏览 0 评论

drawio是github上面一款开源的产品，可以用于画流程图、架构图、原型图等等，因为其有着丰富的图标资源，被很多人所喜欢。

官网：https://www.drawio.com/

github主页：
https://github.com/jgraph/drawio-desktop

在github主页的
https://github.com/jgraph/drawio-desktop/releases这个页面里，可以下载到跨多个平台的二进制安装包

本文可以看作是一个docker的练习。我们将通过dockerfile的方式，拉取github上面的代码，直接构建出属于自己的drawio镜像，再使用该镜像运行自己的容器来使用drawio。

1、拉取github代码到本地

demouser@demohosts:~$ git clone https://github.com/jgraph/drawio.git
正克隆到 'drawio'...
remote: Enumerating objects: 58612, done.
remote: Counting objects: 100% (563/563), done.
remote: Compressing objects: 100% (400/400), done.
remote: Total 58612 (delta 225), reused 464 (delta 151), pack-reused 58049 (from 1)
接收对象中: 100% (58612/58612), 1.51 GiB | 17.23 MiB/s, 完成.
处理 delta 中: 100% (36123/36123), 完成.
正在更新文件: 100% (3393/3393), 完成.

安装ant和openjdk1.8.0。进入到目录中，编译项目为war，

demouser@demohosts:~$ sudo apt install ant openjdk-8-jdk
demouser@demohosts:~$ cd drawio/etc/build/ && ant war
Buildfile: /home/demouser/drawio/etc/build/build.xml

merge:
   [jscomp] Compiling 1 file(s) with 112 extern(s)
   [jscomp] 0 error(s), 0 warning(s)
   [delete] Deleting directory /home/demouser/drawio/build

app:
     [copy] Copying 1 file to /home/demouser/drawio/etc/build
     [copy] Copying 1 file to /home/demouser/drawio/etc/build
   [jscomp] Compiling 10 file(s) with 112 extern(s)
   [jscomp] 0 error(s), 0 warning(s)
   [jscomp] Compiling 60 file(s) with 112 extern(s)
   [jscomp] 0 error(s), 0 warning(s)
   [jscomp] Compiling 5 file(s) with 112 extern(s)
   [jscomp] ../../src/main/webapp/js/jscolor/jscolor.js:434:3: WARNING - [JSC_SUSPICIOUS_LEFT_OPERAND_OF_LOGICAL_OPERATOR] Left operand of || operator is always falsy.
   [jscomp]   434|                      h<0 h='0)' h>6 && (h=6);
   [jscomp]                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] ../../src/main/webapp/js/jscolor/jscolor.js:435:3: WARNING - [JSC_SUSPICIOUS_LEFT_OPERAND_OF_LOGICAL_OPERATOR] Left operand of || operator is always falsy.
   [jscomp]   435|                      s<0 s='0)' s>1 && (s=1);
   [jscomp]                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] ../../src/main/webapp/js/jscolor/jscolor.js:436:3: WARNING - [JSC_SUSPICIOUS_LEFT_OPERAND_OF_LOGICAL_OPERATOR] Left operand of || operator is always falsy.
   [jscomp]   436|                      v<0 v='0)' v>1 && (v=1);
   [jscomp]                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] ../../src/main/webapp/js/jscolor/jscolor.js:447:3: WARNING - [JSC_SUSPICIOUS_LEFT_OPERAND_OF_LOGICAL_OPERATOR] Left operand of || operator is always falsy.
   [jscomp]   447|                      r<0 r='0)' r>1 && (r=1);
   [jscomp]                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] ../../src/main/webapp/js/jscolor/jscolor.js:448:3: WARNING - [JSC_SUSPICIOUS_LEFT_OPERAND_OF_LOGICAL_OPERATOR] Left operand of || operator is always falsy.
   [jscomp]   448|                      g<0 g='0)' g>1 && (g=1);
   [jscomp]                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] ../../src/main/webapp/js/jscolor/jscolor.js:449:3: WARNING - [JSC_SUSPICIOUS_LEFT_OPERAND_OF_LOGICAL_OPERATOR] Left operand of || operator is always falsy.
   [jscomp]   449|                      b<0 b='0)' b>1 && (b=1);
   [jscomp]                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] 0 error(s), 6 warning(s)
   [jscomp] Compiling 1 file(s) with 112 extern(s)
   [jscomp] 0 error(s), 0 warning(s)
   [jscomp] Compiling 17 file(s) with 112 extern(s)
   [jscomp] ../../src/main/webapp/js/diagramly/Editor.js:208:2: WARNING - [JSC_USELESS_CODE] Suspicious code. This code lacks side-effects. Is there a bug?
   [jscomp]   208|              Editor.enableServiceWorker && navigator.serviceWorker;
   [jscomp]                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] ../../src/main/webapp/js/diagramly/Editor.js:208:42: WARNING - [JSC_USELESS_CODE] Suspicious code. The result of the 'getprop' operator is not being used.
   [jscomp]   208|              Editor.enableServiceWorker && navigator.serviceWorker;
   [jscomp]                                                             ^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] ../../src/main/webapp/js/diagramly/EditorUi.js:6948:8: WARNING - [JSC_USELESS_CODE] Suspicious code. The result of the 'eq' operator is not being used.
   [jscomp]   6948|             else (linkSelect.parentNode == null)
   [jscomp]                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] 0 error(s), 3 warning(s)
   [jscomp] Compiling 1 file(s) with 112 extern(s)
   [jscomp] 0 error(s), 0 warning(s)
   [delete] Deleting: /home/demouser/drawio/src/main/webapp/js/extensions.min.js
   [delete] Deleting: /home/demouser/drawio/etc/build/.tmp0.js
   [delete] Deleting: /home/demouser/drawio/etc/build/.tmp0.min.js
   [delete] Deleting: /home/demouser/drawio/etc/build/.tmp1.js
   [delete] Deleting: /home/demouser/drawio/etc/build/.tmp2.js
   [delete] Deleting: /home/demouser/drawio/etc/build/.tmp2.min.js
   [delete] Deleting: /home/demouser/drawio/etc/build/.tmp3.js
   [delete] Deleting: /home/demouser/drawio/etc/build/.tmp1.xml
   [delete] Deleting: /home/demouser/drawio/etc/build/.tmp2.xml
   [jscomp] Compiling 27 file(s) with 112 extern(s)
   [jscomp] ../../src/main/webapp/js/diagramly/Editor.js:208:2: WARNING - [JSC_USELESS_CODE] Suspicious code. This code lacks side-effects. Is there a bug?
   [jscomp]   208|              Editor.enableServiceWorker && navigator.serviceWorker;
   [jscomp]                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] ../../src/main/webapp/js/diagramly/Editor.js:208:42: WARNING - [JSC_USELESS_CODE] Suspicious code. The result of the 'getprop' operator is not being used.
   [jscomp]   208|              Editor.enableServiceWorker && navigator.serviceWorker;
   [jscomp]                                                             ^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] ../../src/main/webapp/js/diagramly/EditorUi.js:6948:8: WARNING - [JSC_USELESS_CODE] Suspicious code. The result of the 'eq' operator is not being used.
   [jscomp]   6948|             else (linkSelect.parentNode == null)
   [jscomp]                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] 0 error(s), 3 warning(s)
   [jscomp] Compiling 6 file(s) with 112 extern(s)
   [jscomp] ../../src/main/webapp/js/diagramly/vsdx/importer.js:718:24: WARNING - [JSC_USELESS_CODE] Suspicious code. This code lacks side-effects. Is there a bug?
   [jscomp]   718|                         if (layer.Lock == 1)
   [jscomp]                                ^^^^^^^^^^^^^^^^^^^^
   [jscomp]   719|                         {
   [jscomp]        ^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp]   720|                             //layerCell.setStyle("locked=1;");
   [jscomp]        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp]   721|                         }
   [jscomp]        ^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] ../../src/main/webapp/js/diagramly/vsdx/importer.js:1277:7: WARNING - [JSC_USELESS_CODE] Suspicious code. This code lacks side-effects. Is there a bug?
   [jscomp]   1277|                                                     if (rows[i] instanceof com.mxgraph.io.vsdx.geometry.NURBSTo)
   [jscomp]                                                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp]   1278|                                                     {
   [jscomp]         ^^^^^^^^
   [jscomp] ...
   [jscomp]   1280|                                                             //var str = rows[i].handle({}, edgeShape);
   [jscomp]         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp]   1281|                                                     }
   [jscomp]         ^^^^^^^^
   [jscomp] 
   [jscomp] 0 error(s), 2 warning(s)
   [delete] Deleting: /home/demouser/drawio/src/main/webapp/js/orgchart.min.js
   [jscomp] Compiling 1 file(s) with 112 extern(s)
   [jscomp] 0 error(s), 0 warning(s)
   [delete] Deleting: /home/demouser/drawio/etc/build/.tmp3.js
   [delete] Deleting: /home/demouser/drawio/etc/build/.tmp1.js
   [jscomp] Compiling 51 file(s) with 112 extern(s)
   [jscomp] ../../src/main/webapp/js/diagramly/Editor.js:208:2: WARNING - [JSC_USELESS_CODE] Suspicious code. This code lacks side-effects. Is there a bug?
   [jscomp]   208|              Editor.enableServiceWorker && navigator.serviceWorker;
   [jscomp]                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] ../../src/main/webapp/js/diagramly/Editor.js:208:42: WARNING - [JSC_USELESS_CODE] Suspicious code. The result of the 'getprop' operator is not being used.
   [jscomp]   208|              Editor.enableServiceWorker && navigator.serviceWorker;
   [jscomp]                                                             ^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] ../../src/main/webapp/js/diagramly/EditorUi.js:6948:8: WARNING - [JSC_USELESS_CODE] Suspicious code. The result of the 'eq' operator is not being used.
   [jscomp]   6948|             else (linkSelect.parentNode == null)
   [jscomp]                           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   [jscomp] 
   [jscomp] 0 error(s), 3 warning(s)
   [delete] Deleting: /home/demouser/drawio/etc/build/Graph-Stylesheet.js
   [delete] Deleting: /home/demouser/drawio/etc/build/Graph-Resources.js
   [delete] Deleting: /home/demouser/drawio/etc/build/grapheditor.min.js
   [delete] Deleting: /home/demouser/drawio/etc/build/sidebar.min.js
   [delete] Deleting: /home/demouser/drawio/etc/build/client.min.js
   [delete] Deleting: /home/demouser/drawio/etc/build/.tmp1.js

javac:
    [mkdir] Created dir: /home/demouser/drawio/src/main/webapp/WEB-INF/classes
    [javac] Compiling 25 source files to /home/demouser/drawio/src/main/webapp/WEB-INF/classes
    [javac] 注: 某些输入文件使用了未经检查或不安全的操作。
    [javac] 注: 有关详细信息, 请使用 -Xlint:unchecked 重新编译。
     [copy] Copying 1 file to /home/demouser/drawio/src/main/webapp/WEB-INF/classes

war:
      [zip] Building zip: /home/demouser/drawio/build/draw.war

BUILD SUCCESSFUL
Total time: 1 minute 4 seconds

2、创建Dockerfile

先进入到上面项目构建后存有war文件的目录中

cd /home/$USER/drawio/build/

利用ubuntu的镜像自己封装tomcat，并把上面war文件也复制到镜像中，dockerfile的内容如下：

# 使用Ubuntu镜像作为基础镜像
FROM ubuntu:latest
 
# 安装Java环境
RUN apt-get update && \
    apt-get install -y openjdk-8-jdk curl && \
    rm -rf /var/lib/apt/lists/*
 
# 设置环境变量
ENV CATALINA_HOME /usr/local/tomcat
ENV JAVA_HOME /usr/lib/jvm/java-8-openjdk-amd64
 
# 下载并解压Tomcat到容器中
RUN mkdir /usr/local/tomcat && \
    curl -SL https://downloads.apache.org/tomcat/tomcat-9/v9.0.95/bin/apache-tomcat-9.0.95.tar.gz | tar -xz -C /usr/local/tomcat --strip-components=1
 
# 设置Tomcat的环境变量
ENV CATALINA_HOME /usr/local/tomcat
ENV CATALINA_BASE /usr/local/tomcat
ENV CATALINA_TMPDIR /usr/local/tomcat/temp
ENV JRE_HOME /usr/lib/jvm/java-8-openjdk-amd64/jre

# 将drawio构建包的war包复制到tomcat中
COPY draw.war /usr/local/tomcat/webapps

# 暴露8080端口
EXPOSE 8080
 
# 启动Tomcat服务器
CMD ["/usr/local/tomcat/bin/catalina.sh", "run"]

3、 构建自己的镜像文件

demouser@demohosts:~/drawio/build$ docker build -t drawio:latest .DEPRECATED: The legacy builder is deprecated and will be removed in a future release.
            Install the buildx component to build images with BuildKit:
            https://docs.docker.com/go/buildx/

Sending build context to Docker daemon     54MB
Step 1/12 : FROM ubuntu:latest
 ---> 61b2756d6fa9
Step 2/12 : RUN apt-get update &&     apt-get install -y openjdk-8-jdk curl &&     rm -rf /var/lib/apt/lists/*
 ---> Using cache
 ---> be9505e58075
Step 3/12 : ENV CATALINA_HOME /usr/local/tomcat
 ---> Using cache
 ---> c0d94dd92a17
Step 4/12 : ENV JAVA_HOME /usr/lib/jvm/java-8-openjdk-amd64
 ---> Using cache
 ---> 988fc8f6b0ec
Step 5/12 : RUN mkdir /usr/local/tomcat &&     curl -SL https://downloads.apache.org/tomcat/tomcat-9/v9.0.95/bin/apache-tomcat-9.0.95.tar.gz | tar -xz -C /usr/local/tomcat --strip-components=1
 ---> Running in 843d3a62ab3c
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 12.1M  100 12.1M    0     0  3616k      0  0:00:03  0:00:03 --:--:-- 3616k
Removing intermediate container 843d3a62ab3c
 ---> 0a75087190f8
Step 6/12 : ENV CATALINA_HOME /usr/local/tomcat
 ---> Running in e1b368691118
Removing intermediate container e1b368691118
 ---> 044955945bcd
Step 7/12 : ENV CATALINA_BASE /usr/local/tomcat
 ---> Running in 52a3b9b3e12e
Removing intermediate container 52a3b9b3e12e
 ---> 8510133983b8
Step 8/12 : ENV CATALINA_TMPDIR /usr/local/tomcat/temp
 ---> Running in 7ce5e32c6ac2
Removing intermediate container 7ce5e32c6ac2
 ---> 58d17a1e1143
Step 9/12 : ENV JRE_HOME /usr/lib/jvm/java-8-openjdk-amd64/jre
 ---> Running in 8affaa816c9c
Removing intermediate container 8affaa816c9c
 ---> c969ed96132c
Step 10/12 : COPY draw.war /usr/local/tomcat/webapps
 ---> b10d935b31b1
Step 11/12 : EXPOSE 8080
 ---> Running in a8a70f1f5cf0
Removing intermediate container a8a70f1f5cf0
 ---> 58473e503fdb
Step 12/12 : CMD ["/usr/local/tomcat/bin/catalina.sh", "run"]
 ---> Running in f96bb0218aed
Removing intermediate container f96bb0218aed
 ---> 7a26098bf116
Successfully built 7a26098bf116
Successfully tagged drawio:latest

4、运行镜像创建自己的容器

demouser@demohosts:~/drawio/build$ docker run -d -p 8080:8080 --name drawio drawio:latest
96ec152414bca10a4824274b7a09be13d7106f6ee2b8cff000d1272a4dc643bc

5、验证部署

通过在浏览器中输入 http://服务器IP:8080/draw 就可以访问得到咱们自己的私有化drawio服务了。

使用过程中可以将你的图存在google drive、dropbox、onedrive、github、gitlab或者device（本地设备）中。这里我演示以本地设备为例打开一个对话


6、结尾

在其项目的github页面中，提供了更为方便的二进制安装和官方可以用官方封装好的镜像来进行部署。无论使用哪种方式进行部署，都是可以的，看您自己的需求而已。



相关推荐

如何在 Linux 中压缩文件和目录?（linux压缩文件夹到指定目录）

在Linux系统中，文件和目录的压缩是一项常见且重要的操作。无论是为了节省存储空间、便于文件传输，还是进行备份管理，掌握压缩技术都能极大地提升工作效率。Linux中常用的压缩工具1.tar：打...

什么是LIM模具?与普通硅胶模具有何本质区别?

要深入理解LIM模具及其与普通硅胶模具的本质区别，需从成型逻辑、技术架构、应用价值三个层面拆解，以下是系统性解析：一、LIM模具：定义与核心技术1.定义LIM模具（LiquidInj...

前后端安全机制（前后端分离安全的token）

一、密钥安全管理方案1.动态密钥分发机制密钥与会话绑定后端为每个用户会话生成临时密钥（如AES-256密钥），通过HTTPS加密传输给前端，会话结束后自动失效。例如：javascript//...

Switch 2芯片细节曝光，英伟达专门定制支持DLSS，网友:掌机模式相当于PS4

Switch2处理器，细节被实锤！数毛社（DigitalFoundry）消息，已经确定Switch2采用的是英伟达真·定制版芯片，包含8核CPU和12GBLPDDR5X内存。GPU则基于Amp...

独立站的PageSpeed Insights 指标在seo中的作用?

这是一个非常关键的问题，关于独立站（如Shopify、WordPress、自建FastAPI/Vue等网站）的PageSpeedInsights指标（Google的网页性能评分工具）在...

前端工程化-webpack 分包的方式有哪些?

Webpack的分包（CodeSplitting）是优化应用性能的重要手段，主要通过合理拆分代码减少首次加载体积、提升缓存利用率。以下是常见的分包方式及生产/开发环境配置建议：一、Webpack...

液态硅胶(LSR)套啤注塑件的关键技术难点与解决方案?

液态硅胶（LSR）套啤注塑件（即二次注塑成型，一次成型基材+二次LSR包胶）在医疗、电子、汽车等领域应用广泛，但其关键技术难点需从材料、模具、工艺等多维度突破。以下是核心难点及解决方案：一、关...

spa首屏加载慢怎样解决（spa首屏优化）

SPA（SinglePageApplication，单页应用）首屏加载慢是一个常见问题，主要原因通常是首次加载需要拉取体积较大的JavaScript文件、样式表、初始化数据等。以下是一些常见的...

揭秘|为什么新华三(H3C)要自主研发运维管理软件?

1概述1.1产生背景随着互联网技术的快速发展，企业对计算、网络的需求也越来越大。为了保证整个数据系统可靠、稳定地运行，相关企业对运维系统的要求越来越高，运维成本也在随之逐步增加。H3C公司自主研发的运...

动态主机配置协议——DHCP详解（dhcp动态主机配置协议的功能是?）

一、DHCP简介DHCP(DynamicHostConfigurationProtocol),动态主机配置协议，是一个应用层协议。当我们将客户主机ip地址设置为动态获取方式时，DHCP服务器就会...

OGG同步到Kafka（oggforbigdata到kafka）

目的：测试使用OGG将数据单向同步到Kafka上。简要说明：Kafka使用单节点单Broker部署；单独部署简单ZooKeeper；需要使用到JAVA1.8；OGG需要2个版本，一个fororacl...

Zabbix入门操作指南（zabbix4.0使用手册）

上篇：安装与配置一.概述在开始之前，一些概念和定义需要我们提前了解一下（以下内容摘自官方网站）。1.1几个概念架构Zabbix由几个主要的功能组件组成，其职责如下所示。ServerZabbixs...

绝对干货!升级MySQL5.7到MySQL8.0的最佳实践分享

一、前言事出必有因，在这个月的某个项目中，我们面临了一项重要任务，即每年一次的等保测评整改。这次测评的重点是Mysql的一些高危漏洞，客户要求我们无论如何必须解决这些漏洞。尽管我们感到无奈，但为了满足...

pytorch v2.7.0震撼发布!Blackwell GPU支持+编译性能狂飙，AI开发

重点内容测试版（Beta）：oTorch.Compile支持Torch函数模式oMega缓存原型（Prototype）：o支持NVIDIABlackwell架构oPyTorch...

kubernetes1.31.3集群搭建(上)（kubectl连接集群）

1集群规划1.1物理机环境电脑操作系统CPU内存硬盘网卡IP地址（静态）虚拟机软件服务器操作系统联想Windows11Intel12900K24核128GB4TBPcIE4.0无线网卡192...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表