使用画图工具draw.io的嵌入模式实现uml图绘制功能的尝试（2）
使用画图工具draw.io的嵌入模式实现uml图绘制功能的尝试（3）

正在编写的本科毕设项目中要求实现绘制UML图的需求，我搜索了一些相关的开源软件，发现了jsUML2、jTopo、PlantUML、Java UML Generator、JS-Sequence-Diagrams、draw.io等可参考的开源软件（*具体介绍详见页面下方），经过考虑决定使用draw.io的嵌入模式。
因为找资料找到头秃，决定把自己做的一些工作记录下来分享给大家。才疏学浅，如有错漏欢迎批评指正！

开始

draw.io是一个基于mxGraph、使用Java和JS等技术的开源绘图软件，其功能和界面类似processon，在线网址为：www.draw.io 。
获取draw的源码请访问：draw.io的github地址，你可以用它搭建一个自己的drawio服务器。
同时，有一个官方桌面版。

嵌入模式

draw.io的嵌入模式将其作为一个应用程序嵌入到另一个应用程序之中，其功能与网页版基本相同。

嵌入模式的url参数

可使用iframe和js跨域通讯将嵌入到我们的页面，并可以通过css对iframe的style进行调整。

首先，在需要嵌入draw.io的div建立一个id为iframe的dom节点，设置其src属性为draw.io的url，并添加url参数，来实现对编辑界面和功能的简单配置。
例如：src='https://www.draw.io/embed=1&ui=atlas&spin=1&modified=unsavedChanges&proto=json%27'

如果使用了embed = 1参数，客户端将以嵌入模式运行。并且页面将在加载时向其opener或parent发送"ready" message。收到ready后，可以使用XML或压缩的XML发送data。

以下URL参数在嵌入模式下可用：

spin=1: Shows a Loading… spinner while waiting for the diagram data
in embed mode.
modified=0: Disables update of the modified state in embed mode
after save is pressed and enables update of the status message
after changes. If 0 is used, the status bar is cleared after changes.
Else the value of this is used as the resource key. Instead of using
this URL parameter, this can also be specified in the load message
below.
keepmodified=1: If modified (above) specifies a resource key,
this is used to keep the modified state after save is pressed.
libraries=1: If libraries should be enabled in embed mode. Default
is disabled.
saveAndExit: Displays an additional save and exit button (see
below). Instead of using this URL parameter, this can also be
specified in the load message below.
ready=message: The message to send in embed or client mode.
Default is ‘ready’. If JSON protocol is used then this is
ignored.
returnbounds=1: Returns a JSON structure with the graph bounds in
embed and client mode. This message is dispatched immediately after
receiving the graph XML.
proto=json: Uses JSON for message passing in embed and client
mode.（当前常用）
configure=1: Sends load event and waits for configure action.

配置项

如果设置了configure = 1，客户端发送 {event: 'configure'}并在创建主应用前等待{action: 'configure', config: obj}。其中config:obj代表的可配置项参见How to configure draw.io in Confluence, Quip and embed mode?

其他url参数

在此仅介绍我用到的几个参数，其他详见：What url parameters are supported?

ui = [min | atlas | dark]：使用Minimal，Atlas或Dark UI主题（默认为Kennedy）
create = url / name：从模板URL创建新文件/ 如果该值不是URL且不为空，则script将尝试使用window.opener [url]。在嵌入模式下，window.opener [name]将用于获取初始XML。请注意，这需要在opener / parent中用于读取变量的相同origin policy。
title = title：新文件标题（与create和url参数一起使用）
chrome = 0： Chromeless模式下的只读viewer
lang = xy：指定用户界面的语言，可选值为id: Bahasa Indonesia, ms: Bahasa Melayu, bs: Bosanski, ca: Català, cs: Čeština, da: Dansk, de: Deutsch, et: Eesti, en: English, es: Español, fil: Filipino, fr: Français, it: Italiano, hu: Magyar, nl: Nederlands, no: Norsk, pl: Polski, pt-br: Português (Brasil), pt: Português (Portugal), ro: Română, fi: Suomi, sv: Svenska, vi: Tiếng Việt, tr: Türkçe, el: Ελληνικά, ru: Русский, sr: Српски, uk: Українська, he: עברית, ar: العربية, th: ไทย, ko: 한국어, ja: 日本語, zh: 中文（中国）, zh-tw: 中文（台灣）
libs = key1; key2; …; keyN：指定当前库，可选值为 allied_telesis, android, archimate, archimate3, arrows2, atlassian, aws3, aws3d, aws4, azure, basic, bootstrap, bpmn, cabinets, cisco, cisco_safe, citrix, clipart, dfd, eip, electrical, er, floorplan, flowchart, gcp2, general, gmdl, ibm, images, infographic, ios, lean_mapping, mockups, mscae, network, office, pid, rack, signs, sitemap, sysml, uml, veeam , webicons

参考：

搭建自己的draw.io
官方给出的html5集成例子
Simple draw.io embedding walk through?
How does embed mode work?

*：
jsUML2：一个轻量级的 HTML5/javascript 库，用来绘制 UML2 图表，允许开发者在网页中嵌入使用（官网需翻墙，如需源码可在github上搜索到别人保存的镜像）
jTopo：快速创建一些关系图、拓扑等相关图形化的展示
PlantUML：一个用来绘制UML图的Java类库
JS-Sequence-Diagrams：从文字表述中绘制简单的序列图
Java UML Generator：是用于从Java类文件自动生成UML类图的工具
（发现以上两个与csdn博客编辑器中含有的功能类似）

使用画图工具draw.io的嵌入模式实现uml图绘制功能的尝试（1）相关推荐

【冷门实用小工具】JAVA和C#轻量级的UML图绘制工具NClass，UML类图编辑器免安装版【亲测有效】
下载地址:NClass下载地址 NClass是一款免费的UML图绘制工具,它很小巧轻量级,解压之后大小不到2M,便于携带和使用,是很实用UML绘制工具. 功能介绍: 1.支持完整的C#和Java支持多 ...
程序员画图工具Draw.io
程序员不要认为写好代码就好,画好图也很重要,难道你没听过PPT架构师,PPT架构师不就天天画图么.关于画图,俗话说,有图有真相!哦,不对,是一图胜千言.一图胜千言,沟通效率那不是刚刚的. Draw.i ...
软件开发免费的画图工具draw.io
是否免费:是下载地址:https://github.com/jgraph/drawio-desktop/releases/tag/v13.3.9 效果图:
推荐一款最流行的流程图及图表工具draw.io，老掉牙的工具已无人再用
推荐一款最流行的流程图及图表工具draw.io,老掉牙的工具已无人再用目录推荐一款最流行的流程图及图表工具draw.io,老掉牙的工具已无人再用一.前身今世二.原始库作者三.大面积被跟进与扩 ...
【已解决】将CentOS7系统安装至U盘（九）：使用AppImage方式安装图形处理工具Draw.io和Inkscape
目录 1 安装Draw.io 2 安装Inkscape AppImage是一种较新的Linux软件安装格式,它提供了便利的安装方式,或者说根本不用安装,因为整个软件仅仅只是一个文件,你只需下载下来即可 ...
绘图工具Draw.io开源免费供下载-draw.io-12.6.5-windows-installer.exe
draw.io 是一个强大简洁的在线的绘图网站,支持流程图,UML图,架构图,原型图等图标.支持Github,Google Drive, One drive等网盘同步,并且永久免费.如果觉得使用Web ...
比炒币还香的在线作图工具draw.io
文章目录前言认识工具 1. 创建文件 2. 具体操作模板展示前言 draw.io是一款非常轻量级的在线画图工具,他不像Visio那么笨重,也不像matplotlib一样需要代码,适合各位科研小 ...
程序员画流程图的工具Draw.io
Draw.io 是一个很好用的免费流程图绘制工具,制图结果本质上是xml文件,web版和桌面版可以支持导出图像(png或者svg矢量图都可以). 你可以利用它绘制一系列的图表.图示或图形,包括流程图. ...
在线图表编辑工具 draw.io 10.6.2 版本发布
draw.io 10.6.2 版本已发布,更新内容如下: 添加通用布局菜单项另外,几天前发布的 10.6.1 版本更新内容如下: 修复 CSV import 的问题为模板和 AWS 组添加 poi ...

使用画图工具draw.io的嵌入模式实现uml图绘制功能的尝试（1）

开始

嵌入模式

嵌入模式的url参数

配置项

其他url参数

参考：

使用画图工具draw.io的嵌入模式实现uml图绘制功能的尝试（1）相关推荐

最新文章

热门文章