流程图绘制工具 Draw.io -初步分析及搭建

最新推荐文章于 2023-09-17 13:21:56 发布

privateobject

最新推荐文章于 2023-09-17 13:21:56 发布

阅读量6.3k

点赞数 4

分类专栏： drawio js 其他文章标签： javascript css html jquery

本文链接：https://blog.csdn.net/privateobject/article/details/105143285

版权

其他同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

5 篇文章 1 订阅

订阅专栏

drawio

1 篇文章 0 订阅

订阅专栏

Draw.io 是 GitHub 上一个开源的流程图绘制工具，功能丰富，而且免费。

快捷键

参考

部署方式

当前的构建方式：（支持类型较多）

可以将其网页版自己部署一套离线版，分析得知，网页版默认使用的是压缩的脚本，不利于分析，使用dev版本调试还需要梳理。

模式

使用开发模式，链接如下：

https://www.draw.io/?dev=1

结果页面就变成如下了：

页面内容，是自己做了汉化提示

<div class="geBlock" style="text-align:center;min-width:50%;">
    <h1>Flowchart Maker and Online Diagram Software</h1>
	<p>
	    diagrams.net (formerly draw.io) is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, 
            to design database schema, to build BPMN online, as a circuit diagram maker, and more. draw.io can import .vsdx, Gliffy&trade; and Lucidchart&trade; files .
	</p>
	<p>
	    diagrams.net（以前叫draw.io）是免费的在线图表软件。你可以把它作为流程图制作工具，网络图软件，在线创建UML，作为一个ER图工具，
	    设计数据库模式，在线构建BPMN，作为电路图生成器，等等。draw.io可以导入.vsdx、Gliffy&amp;trade；和Lucidchart&amp;trade；文件。
        </p>
	<h2 id="geStatus">Loading(加载)...</h2>
	<p>
	    Please ensure JavaScript is enabled.(请确保启用了JavaScript。)
	</p>
</div>

其实，在参考的内容已经提示了，是页面脚本处理问题。需要修改链接路径。待补充d=====(￣▽￣*)b

汉化

在看源码的时候，发现官方的汉化包，不是全部汉化：

在fork的代码中，找到 dia_zh.txt ，使用百度翻译操作一番：

默认语言

通过在 index.html 中插入代码，设置默认语言和离线模式

urlParams['lang'] = 'zh';//修改默认语言为中文
urlParams['offline'] = 1;//修改为离线模式

根据下图的代码得知

关于导出

编辑一个新示例

使用导出功能，导出两种文件xml和html：

<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="winsonzhao.gitee.io" modified="2020-03-27T06:27:21.518Z" 
agent="Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 UBrowser/6.2.4098.3 Safari/537.36" 
etag="BpHjZIye2gDW-1UIv-PG" version="12.9.3">
<diagram id="QUYk8n2M0uGZwHH8mf06" 
name="第 1 页">
tVZdk5owFP01eeyOfIjwKKxup93OdsZO+7gTSYS0gUvDVbG/vkGCiLi6O6OOD8nJDbk553CUOFFWPSlapN+AcUnsEauI80hs23Jtm9TfEds1yMT1GiBRgpmiDliIf9yAI4OuBeNlrxABJIqiD8aQ5zzGHkaVgm2/bAWyf2pBEz4AFjGVQ/SXYJg2qG9POvwzF0nanmx5QbOS0bbY3KRMKYPtEeTMiBMpAGxGWRVxWZPX8tLsm7+xemhM8Rzfs+GFheNl+PPLMgi++hvnxwtjfz+Zp2yoXJsLk5lHwjHxQzLzyXROgrFpH3ctJwrWOeP1Y0fECbepQL4oaFyvbrULNJZiJvXM0sMSFfzhEUhQ+93OfG4Frm4yXAkpj3ANzh/dGoccj/CR/gSBxk2rXCGv3uTAOjCrLckh46h2uqTd0NrKuNEemfm209ZqBUuPdPUMRo2dksOjO8b1wJD+AQGcoQCndHOmHWmmoDCFBHIqZx0a9gXpap4BCiPDb464M68XXSP0RWrOrA+6TKzuC9Yq5hcuZPpHqhKO15w3FEpxSVFs+n3cnHX7OutXbE3Loomblahq5m/iTq/vTscdutM/Y07/XuZ0r9NUX1jouHymSy6/QylQQK6XloAImealLZhKkdQLCKcB0eZi7V1Gy/Rg5CY62tg1tUV9cFYl9c/NA82ZAsEedPojjfF1SbWFXwvFy/JmovgnonhDUdwzorj3EmV8NrIDj/iT/SAi02ggk74/XsrlHHJ+EskGoka3WPPF1RlBM8HYPoXOvTH9ZLpjsh/4NjJZwftksj8uk552v9r7taP/Ps7sPw==
</diagram></mxfile>

<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head>
<title>未命名绘图01</title>
<meta charset="utf-8"/>
</head>
<body>
<div class="mxgraph" style="max-width:100%;border:1px solid transparent;" 
data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;xml&quot;:&quot;&lt;mxfile host=\&quot;winsonzhao.gitee.io\&quot; modified=\&quot;2020-03-27T08:40:06.968Z\&quot; agent=\&quot;Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 UBrowser/6.2.4098.3 Safari/537.36\&quot; etag=\&quot;C22Vx2iKDcHtKdSspYj_\&quot; version=\&quot;12.9.3\&quot;&gt;&lt;diagram id=\&quot;QUYk8n2M0uGZwHH8mf06\&quot; name=\&quot;第 1 页\&quot;&gt;tVZdk5owFP01eeyOfIjwKKxup93OdsZO+7gTSYS0gUvDVbG/vkGCiLi6O6OOD8nJDUnOOTlAnCirnhQt0m/AuCT2iFXEeSS2bbm2Ter/iO0aZOJ6DZAowUxRByzEP27AkUHXgvGyV4gAEkXRB2PIcx5jD6NKwbZftgLZX7WgCR8Ai5jKIfpLMEwb1LcnHf6ZiyRtV7a8oBnJaFtsTlKmlMH2CHJmxIkUADatrIq4rMlreWnmzd8YPWxM8RzfM+GFheNl+PPLMgi++hvnxwtjfz8ZMTZUrs2Bycwj4Zj4IZn5ZDonwdhsH3ctJwrWOeP1Y0fECbepQL4oaFyPbrULNJZiJnXP0s0SFfzhEUhQ+9nOfG4Frt5kuBJSHuEanD+6NQ45HuEj/QsCjZutcoW8epMD68CstiSHjKPa6ZJ2Qmsr40Z7ZPrbTlurFSw90tUzGDV2Sg6P7hjXDUP6BwSYDAU4pZsz7UjTBYUpJJBTOevQsC9IV/MMUBgZfnPEnbledI3QF6lZs17oMrF6X7BWMb9wIN9cUqoSjtecNxRKcUlRbPr7uDnr/nXWr9ialkUTNytR1czfxJ1e352OO3Snf8ac/r3MGVynqT6w0HH5TJdcfodSoIBcDy0BETLNS1swlSKpBxBOA6LNxdq7jJbpwchNdLSxa2qLeuGsSurXzQPNmQLBHnT6I43xdUm1hV8LxcvyZqL4J6J4Q1HcM6K49xKljbCTzA484k/2jYhMo4FOmgC8FMw55Pwkkw1EjXCxJoyrM4pmgrF9DJ27Mv1oumO0Hwg3OlnB+3SyP66T7nav7f3Y0cePM/sP&lt;/diagram&gt;&lt;/mxfile&gt;&quot;}">
</div>
<script type="text/javascript" src="https://app.diagrams.net/js/viewer.min.js"></script>
</body>
</html>

html的data-mxgraph的内容是被处理过的，处理代码如下

//view.min.js EditorUi.js
'" data-mxgraph="' + mxUtils.htmlEntities(JSON.stringify(d)) + '"></div>'

//mxClient.js
htmlEntities: function(s, newline){
    s = String(s || '');
    s = s.replace(/&/g,'&amp;'); // 38 26
    s = s.replace(/"/g,'&quot;'); // 34 22
    s = s.replace(/\'/g,'&#39;'); // 39 27
    s = s.replace(/</g,'&lt;'); // 60 3C
    s = s.replace(/>/g,'&gt;'); // 62 3E
    if (newline == null || newline){
	s = s.replace(/\n/g, '&#xa;');
    }
    return s;
}

真正与图有关系的代码，只是如下的字符串：

tVZdk5owFP01eeyOfIjwKKxup93OdsZO+7gTSYS0gUvDVbG/vkGCiLi6O6OOD8nJDUnOOTlAnCirnhQt0m/AuCT2iFXEeSS2bbm2Ter/iO0aZOJ6DZAowUxRByzEP27AkUHXgvGyV4gAEkXRB2PIcx5jD6NKwbZftgLZX7WgCR8Ai5jKIfpLMEwb1LcnHf6ZiyRtV7a8oBnJaFtsTlKmlMH2CHJmxIkUADatrIq4rMlreWnmzd8YPWxM8RzfM+GFheNl+PPLMgi++hvnxwtjfz8ZMTZUrs2Bycwj4Zj4IZn5ZDonwdhsH3ctJwrWOeP1Y0fECbepQL4oaFyPbrULNJZiJnXP0s0SFfzhEUhQ+9nOfG4Frt5kuBJSHuEanD+6NQ45HuEj/QsCjZutcoW8epMD68CstiSHjKPa6ZJ2Qmsr40Z7ZPrbTlurFSw90tUzGDV2Sg6P7hjXDUP6BwSYDAU4pZsz7UjTBYUpJJBTOevQsC9IV/MMUBgZfnPEnbledI3QF6lZs17oMrF6X7BWMb9wIN9cUqoSjtecNxRKcUlRbPr7uDnr/nXWr9ialkUTNytR1czfxJ1e352OO3Snf8ac/r3MGVynqT6w0HH5TJdcfodSoIBcDy0BETLNS1swlSKpBxBOA6LNxdq7jJbpwchNdLSxa2qLeuGsSurXzQPNmQLBHnT6I43xdUm1hV8LxcvyZqL4J6J4Q1HcM6K49xKljbCTzA484k/2jYhMo4FOmgC8FMw55Pwkkw1EjXCxJoyrM4pmgrF9DJ27Mv1oumO0Hwg3OlnB+3SyP66T7nav7f3Y0cePM/sP

而且，drawio通过浏览器的内置数据库indexedDB，如图

key是文件名，value是对象，data的内容和xml内容一致。

§(*￣▽￣*)§

其他待续……

privateobject

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
流程图绘制工具 Draw.io -初步分析及搭建

Draw.io 是 GitHub 上一个开源的流程图绘制工具，功能丰富，而且免费。参考相关链接：在线网页版，直接访问：https://www.draw.io/桌面版下载地址：https://github.com/jgraph/drawio-desktop/releases网页版github：https://github.com/jgraph/drawio国内gitee...
复制链接

扫一扫