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…...
Python|GIF 解析与构建(5):手搓截屏和帧率控制
目录 Python|GIF 解析与构建(5):手搓截屏和帧率控制 一、引言 二、技术实现:手搓截屏模块 2.1 核心原理 2.2 代码解析:ScreenshotData类 2.2.1 截图函数:capture_screen 三、技术实现&…...
vscode里如何用git
打开vs终端执行如下: 1 初始化 Git 仓库(如果尚未初始化) git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...

通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍
文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结: 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析: 实际业务去理解体会统一注…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版!!!6.8截至答题,大家注意呀! 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:( B ) A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:
根据万维钢精英日课6的内容,使用AI(2025)可以参考以下方法: 四个洞见 模型已经比人聪明:以ChatGPT o3为代表的AI非常强大,能运用高级理论解释道理、引用最新学术论文,生成对顶尖科学家都有用的…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...