drawio 网页版二次开发(1):源码下载和环境搭建
目录
一 说明
二 源码地址以及下载
三 开发环境搭建
1. 前端工程地址
2. 配置开发环境
(1)安装 node.js
(2)安装 serve 服务器
3. 运行
四 最后
一 说明
应公司项目要求,需要对drawio进行二次开发,并将html界面通过iframe 嵌入到本公司产品中使用,但是由于功能限制,做到最后还是放弃了使用drawio。但是之前的研究内容可不能浪费。便准备写个专栏进行记录,希望能够帮到需要将drawio进行二次开发的朋友,其中有涉及到不正确的地方还请大家多包涵!
二 源码地址以及下载
网页版在线使用地址:体验和使用地址(https://app.diagrams.net/)
drawio源码地址:git 下载地址(https://github.com/jgraph/drawio)
在界面可以看到,当前最新版本为:v24.3.1(我做开发的时候版本为23.1.5,版本更新的还是挺快的),点击进去并下载,然后拿出来放到自己的地方进行解压,准备开发使用。
三 开发环境搭建
1. 前端工程地址
打开文件夹可以看到,main里面包含三个文件夹,但是前端代码在:src\main\webapp 中,Java文件夹用处不大(因为我们要求数据保存到本地,所以Java这边没有用到)。
2. 配置开发环境
(1)安装 node.js
作为前端开发,node.js 肯定是已经安装好了的,就不多说,如果没有安装,网上有很多安装教程,看着安装了即可。
(2)安装 serve 服务器
为了将drawio运行起来,我使用了serve 服务器。这样就不用再去修改package.json 文件了。
安装很简单,使用npm命令即可:npm install -g serve
3. 运行
在ide中(我是webstorm)进入到webapp文件夹下面,运行:serve 命令,成果后会有链接。如下图(我的serve版本有点低了,再提示最新版本,可以忽略)所示,就成功了,点击下面的链接,就会进入到drawio的主界面。
四 最后
通过上面的步骤,就再本地通过代码运行起来了drawio网页版。下一篇文章将进行drawio的二次开发流程。
相关文章:

drawio 网页版二次开发(1):源码下载和环境搭建
目录 一 说明 二 源码地址以及下载 三 开发环境搭建 1. 前端工程地址 2. 配置开发环境 (1)安装 node.js (2)安装 serve 服务器 3. 运行 四 最后 一 说明 应公司项目要求,需要对drawio进行二次开发&…...
算法训练Day33 |● 509. 斐波那契数 ● 70. 爬楼梯 ● 746. 使用最小花费爬楼梯
509. 斐波那契数 class Solution { public:int fib(int n) {if(n<1) return n;int pre2 0;int pre1 1;int result 0;for(int i2; i<n; i ){result pre1pre2;pre2 pre1;pre1 result;}return result;} };参考文章:代码随想录- 509. 斐波那契数 70. 爬楼梯…...

【算法】滑动窗口——将x减到0的最小操作数
本节博客主要是讲的我解“将x减到0的最小操作数”这道题的思路历程,从最开始的想法到代码提交的详细记录,有需要借鉴即可。 目录 1.题目2.代码示例3.细节3.1left越界3.2特殊情况 4.总结 1.题目 题目链接:LINK 看题目意思是就是给你一个数X&…...

《引爆流量获客技术》实操方法,手把手教你搭建盈利流量池
[1]-先导课.mp4 [2]-第1节:设计客户终身价值的方法和买客户思维.mp4 [3]-第2节:【渠道模型】解决谁是我的客户如何找到.mp4 [4]-第3节:【诱饵模型】解决 如何获得更多的客户.mp4 [5]-第4节:【钩子模型】解决让目标客户主动找你…...

【记录】常见的前端设计系统(Design System)
解释一下设计系统的定义,以及在国内,都有那些优秀的设计系统可以学习,希望可以帮到大家。 什么是设计系统(Design System)? 设计系统(Design System)是一套综合性的指导原则、组件和规则&…...

如何使用Whisper音频合成模型
Whisper 是一个通用语音识别模型,由 OpenAI 开发。它可以识别多种语言的语音,并将其转换为文本。Whisper 模型采用了深度学习技术,具有高准确性和鲁棒性。 1、技术原理及架构 Whisper 的工作原理:音频被分割成 30 秒的片段&#…...

网络相关笔记
IPv4地址 IPv4地址通常以“点分十进制”形式书写,即四个0-255之间的十进制数,各数之间用英文句点(.)分隔,例如:192.0.2.1。总共32位的地址空间可以表示大约42亿个不同的地址。 IPv4地址结构包括ÿ…...
由C# yield return引发的思考
前言 当我们编写 C# 代码时,经常需要处理大量的数据集合。在传统的方式中,我们往往需要先将整个数据集合加载到内存中,然后再进行操作。但是如果数据集合非常大,这种方式就会导致内存占用过高,甚至可能导致程序崩溃。 …...
【问题解决】EasyExcel导出数据,并将数据中的实体类url转为图片
EasyExcel导出数据,并将数据中的实体类url转为图片 在导出excel数据时,用户要求把存储二维码url转为图片保存,然后研究了一下具体实现。 代码展示: public void exportData(String pointName, String districtName, String str…...

winform植物大战僵尸
winform植物大战僵尸 植物大战僵尸源码 半成品 需要的拿去学习 登陆注册选择关卡 向日葵 豌豆射手 双枪豌豆射手 项目获取: 项目获取:typora: typora/img (gitee.com) 备用项目获取链接1:yifeiyixiang/kamo: 源码下载 (github.com) 备用…...
Pointnet++改进即插即用系列:全网首发UIB轻量化模块
简介:1.该教程提供大量的首发改进的方式,降低上手难度,多种结构改进,助力寻找创新点!2.本篇文章对Pointnet++特征提取模块进行改进,加入UIB,提升性能。3.专栏持续更新,紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一 2.2 步骤二 2.3 步骤三...
【视频格式转换】【ffmepg】对mp4文件进行重新编码输出新的mp4文件
【视频格式转换】【ffmepg】对mp4文件进行重新编码输出新的mp4文件 背景 之前开发调试了个能正常调用ffmpeg解码mp4文件得到yuv数据的testbed(把ffmpeg开源库移植并交叉编译到一个嵌入式平台),用了好几年了,今天用来挂测一批新的采集视频mp4文件&#x…...

mysql基础概念
文章目录 登录mysqlmysql和mysqld数据库操作主流数据库MYSQL架构SQL分类 登录mysql 登录mysql连接服务器,mysql连接时可以指明主机用-h选项,然后就可以指定主机Ip地址,-P可以指定端口号 -u指定登录用户 -P指定登录密码 查看系统中有无mysql&…...

成功案例(IF=7.3)| 转录组+蛋白质组+代谢组联合分析分析揭示胰腺癌中TAM2相关的糖酵解和丙酮酸代谢重构
研究背景 肿瘤的进展和发展需要癌细胞的代谢重编程,癌细胞能量代谢模式的改变可以满足快速增殖和适应肿瘤微环境的需要。肿瘤微环境(TME)中的代谢状态受到多种因素的影响,包括血管生成、与其他细胞的相互作用和系统代谢。代谢异质…...

【C++ | 函数】默认参数、哑元参数、函数重载、内联函数
😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 ⏰发布时间⏰:2024-05-04 1…...

Spring事件
📝个人主页:五敷有你 🔥系列专栏:Spring⛺️稳中求进,晒太阳 Spring事件 简洁 Spring Event(Application Event)就是一个观察者模式,一个bean处理完任务后希望通知其他Bean的…...

mysql安装及基础设置
关系型数据库 MySQL是一种关系型数据库管理系统,采用了关系模型来组织数据的数据库,关系数据库将数据保存在不同的表中,用户通过查询 sql 来检索数据库中的数据。 yum 方式安装 mysql # yum -y install mysql-server # systemctl start my…...

【prometheus】Pushgateway安装和使用
目录 一、Pushgateway概述 1.1 Pushgateway简介 1.2 Pushgateway优点 1.3 pushgateway缺点 二、测试环境 三、安装测试 3.1 pushgateway安装 3.2 prometheus添加pushgateway 3.3 推送指定的数据格式到pushgateway 1.添加单条数据 2.添加复杂数据 3.SDk-prometheus-…...
【无标题】vue webrtc 播放rtsp视频流
最近有个小活其中有涉及播放大华及海康摄像头视频流的需求,经调查发现可以使用webrtc来实现相关功能,记录一下,步骤如下: 1、下载webrtc :Releases mpromonet/webrtc-streamer GitHub winows下下载&…...

redis进阶--IDEA环境
目录 一、解决redis服务器端口问题 二、java环境下使用redis 三、javaSpringt环境下使用redis 四、redis持久化 1、持久化概念 2、redis持久化策略 3、RDB策略 4、AOF策略 5、混合持久化策略 五、redis事务 1、数据库事务 2、redis事务特点 3、redis事务的作用 4…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...

优选算法第十二讲:队列 + 宽搜 优先级队列
优选算法第十二讲:队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...

push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中,push 和 present 是两种不同的视图控制器切换方式,它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型(算法、数据分析、机器学习等)不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

ubuntu22.04有线网络无法连接,图标也没了
今天突然无法有线网络无法连接任何设备,并且图标都没了 错误案例 往上一顿搜索,试了很多博客都不行,比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动,重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...