draw.io 网页版二次开发(1):源码下载和环境搭建

目录

一 说明

二 源码地址以及下载

三 开发环境搭建

1. 前端工程地址

2. 配置开发环境

(1)安装 node.js 

(2)安装 serve 服务器

3. 运行

四 最后     


一 说明

        应公司项目要求,需要对draw.io进行二次开发,并将html界面通过iframe 嵌入到本公司产品中使用,但是由于功能限制,做到最后还是放弃了使用draw.io。但是之前的研究内容可不能浪费。便准备写个专栏进行记录,希望能够帮到需要将draw.io进行二次开发的朋友,其中有涉及到不正确的地方还请大家多包涵!

二 源码地址以及下载

        网页版在线使用地址:体验和使用地址(https://app.diagrams.net/)

        draw.io源码地址: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 服务器

        为了将draw.io运行起来,我使用了serve 服务器。这样就不用去修改package.json 文件了。

        安装很简单,使用npm命令即可:npm install -g serve

3. 运行

          在ide中(我是webstorm)进入到webapp文件夹下面,运行:serve 命令,成果后会有链接。如下图(我的serve版本有点低了,再提示最新版本,可以忽略)所示,就成功了,点击下面的链接,就会进入到draw.io的主界面。

四 最后     

        通过上面的步骤,就再本地通过代码运行起来了draw.io网页版。下一篇文章将进行draw.io的二次开发流程。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/326400.html

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

相关文章

福建医疗器械展/2024厦门国际医疗器械展览会重磅来袭

2024中国(厦门)国际医疗器械展览会 时 间:2024年11月1-3日 November 1-3, 2024 地 点:厦门国际会展中心 Xiamen International Conference & Exhibition Center ​ ◆组织机构 主办单位: 中国技术市场协会医…

Mysql-用户变量的声明与使用

#声明变量 #1.标识符不能以数字开头 #2.只能使用_或$符号,不能使用其他符号 #3.不能使用系统关键字 setuserName刘德华; select userName:刘青云;#将赋值与查询结合 #查询变量、使用变量,匿名的时候建议加上as select userName as 读取到的userName变量…

TriCore:Interrupt 2

今天继续来看看 IR 模块。 名词缩写 缩写全称说明IRInterrupt Router SRService Request 包括: 1. External Resource 2. Internal Resource 3.SW(Software) SPService Privoder 包括: 1. CPU 2. DMA SRNService Request NodeS…

【linux-IMX6ULL-uboot初次编译及烧录

目录 1. uboot基本概念1. 1 uboot的编译 3. uboot的烧录2. uboot的烧录结果 第一次不进行原理性的探究,也不关注源码内容,只是进行一个直观的了解,对uboot进行初次编译并进烧录到IMX6ULL板卡中 1. uboot基本概念 U-Boot(Universa…

java项目之智慧图书管理系统设计与实现(springboot+vue+mysql)

风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的智慧图书管理系统设计与实现。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 智慧图书管理…

GT2712-STBD 三菱触摸屏12.1寸型

GT2712-STBD 三菱触摸屏12.1寸型 GT2712-STBD参数说明:12.1型, SVGA, TFT彩色液晶屏 65536色, 黑色边框, 电源DC24V。 一、三菱触摸屏GT2712-STBD性能规格: [显示部*1*2] . 显示软元件:TFT彩色液晶屏 . GT2712-STBD画面尺寸:12.1寸 . GT2712-STBD…

六级翻译笔记

理解加表达 除了专有名词不能自己理解翻译,其它都可以 时态一般唯一 题目里出现有翻译为 客观存在: there be 单词结尾加er和ee的区别:er是主动,ee是被动 中文句子没有被动,也可以英文翻译为被动 中文的状语可以不是…

使用AudioCraft(MusicGen)生成音乐

AudioCraft 是一个 PyTorch 库,用于音频生成的深度学习研究。AudioCraft 包含两个先进的AI生成模型:AudioGen和MusicGen,它们共同致力于生成高质量的音频内容。 MusicGen是一个简单且可控的音乐生成模型。它利用Meta提供的20K小时授权音乐进行训练,能够根据文本描述或已有…

web后端——netbeans ide +jsp+servlet开发学习总结

目录 jsp基础 netbeans开发工具问题访问网页失败,404,not found 等?HTTP Status 405 - HTTP method POST is not supported......netbeans 提示无法启动GlassFish Server 4.1.1:服务器未运行时, HTTP 或 HTTPS 监听程序端口已被占用404 问题netbeans中项目中有多个html文件,如…

嵌入式RTOS面试题目

用过哪些嵌入式操作系统?使⽤RTOS和裸机代码开发有什么区别(优缺点)? 之前的⼀个项⽬是采⽤裸机代码开发的,写起来还⾏,通过状态机来管理业务逻辑和各种外设。 但是随着外设的增加,任务之间的…

2024CCPC郑州站超详细题解(含题面)ABFHJLM(河南全国邀请赛)

文章目录 前言A Once In My LifeB 扫雷 1F 优秀字符串H 随机栈J 排列与合数L Toxel 与 PCPC IIM 有效算法 前言 这是大一博主第一次参加xcpc比赛,虽然只取得了铜牌,但是收获满满,在了解了和别人的差距后会更加激励自己去学习,下面…

基于PHP高考志愿填报系统搭建私有化部署源码

金秋志愿高考志愿填报系统是一款为高中毕业生提供志愿填报服务的在线平台。该系统旨在帮助学生更加科学、合理地选择自己的大学专业和学校,从而为未来的职业发展打下坚实的基础。 该系统的主要功能包括:报考信息查询、志愿填报数据指导、专业信息查询、院校信息查询…

面向对象设计之套路——设计模式

1、总则 面向对象的分析设计编程思想,通过封装、继承、多态把程序的耦合度降低,用设计模式使得程序更加灵活,容易修改,并且易于复用。 让业务逻辑与界面逻辑分开,让它们的耦合度下降,只有分离,…

Tableau学习2.0版——复习

官网下载链接:https://www.tableau.com/zh-cn/support/releases 学生账户申请链接:https://www.tableau.com/zh-cn/academic/students。直接去学信网下载学籍在线验证作为申请证明。 目录 1、可视化原理 2、基础图表制作 2.1 对比分析(比…

windows打开防火墙指定端口(局域网访问本地项目)

windows打开防火墙指定端口(局域网访问本地项目) 本地运行了Vue前端项目,部署在5173端口,想让同事从局域网内访问项目,开放本机端口5173允许访问 在 Windows 上使用自带的防火墙,你可以按照以下步骤来允许局域网内其他设备对特定端…

视频素材哪里找?7个无版权视频素材网站

这篇文章为那些正在学习视频剪辑的新手提供了一份宝贵的资源清单,介绍了7个可以找到高质量且免费可商用的视频素材网站。每个网站都有其独特的资源库,可以帮助用户找到适合各种项目的视频素材,从生活vlog到专业旅行记录,都可以在这…

48.乐理基础-音符的组合方式-休止符

休止符 音乐中总有一些停顿的地方,一次停顿多久是创作人固定好的,休止符就是用来表示每一次停顿多久 需要停顿的位置就用 0 来表示,数字 0 就是简谱中的休止符 音符有全音符、二分音符、四分音符、八分音符、十六分音符、三十二分音符等&…

Amesim基础篇-热仿真常用模型库-Electrical Basics/Electric Storage

前言 在动力电池仿真中中我们不免会用到该元件库中的模型,该库中包含基本的电路元件与电池模型。具体的相关模型介绍如下: 1 电压源、电流源、功率源、接地 如图,分别为电压源、电流源和功率源,其中功率源在仿真中经常用到&…

音视频开发3 视频基础,图片基础

1.RGB彩色原理 2.YUV 3.像素,分辨率,位深,帧率,码率,Stride跨距 ◼ 像素 : 像素是一个图片的基本单位, pix 是英语单词 picture的简写,加上英 语单词“元素element”,就…

从Python整数变量内存大小占用28字节谈起

实验结果 本机环境64位Python 3.12 内存布局图 0 4 8 12 16 20 24 28 |----------|----------|----------|----------|----------|----------|----------| | ob_refcnt | ob_type | ob_digit | …