携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

前言

Drawio是一款强大、免费的绘图工具（基本可以替代收费的visio等），使用起来非常方便。支持网页版使用（网页版可以自己部署一套）以及客户端使用（支持windows，MacOS以及Linux）。

• Drawio官网地址

• GitHub项目开源地址

项目结构

D:\drawio-20.2.1
├─.travis.yml
├─ChangeLog
├─CODE_OF_CONDUCT.md
├─LICENSE
├─README.md
├─SECURITY.md
├─teams.html
├─VERSION
├─src
|  ├─main
|  |  ├─webapp
|  |  ├─java
├─etc
|  ├─propgen
|  |    ├─build.xml
|  |    ├─convert.js
|  |    ├─package-lock.json
|  |    ├─package.json
|  |    ├─README
|  |    ├─com
|  |    |  ├─mxgraph
|  |    |  |    ├─properties
|  |    |  |    |     └PropGen.java
|  ├─integrate
|  |     └Integrate.js
|  ├─docker
|  |   └README.md
|  ├─dependencies
|  |      ├─package.json
|  |      └README.md
|  ├─build
|  |   ├─build.properties
|  |   ├─build.xml
|  |   ├─compiler.jar
|  |   ├─Xml2Js.class
|  |   └Xml2Js.java

分离前端代码

src>main>webapp 为前端代码

安装本地服务器工具

npm i serve -D

• package.json

{
  "scripts": {
    "dev:drawio": "cd src/main/webapp && serve"
  },
  "devDependencies": {
    "serve": "^14.0.1"
  }
}

运行

npm run dev:drawio

• 浏览器访问localhost:3000 即可

默认开启开发模式

由./src/main/webapp/index.html源码可见，通过URL参数?dev=1开启调试模式。

Notes：开启调试模式后，个别静态资源请求会报错 —— 根据报错域名devhost.jgraph.com查找对应资源

• index.html

<script type = "text/javascript">
/**
 * URL Parameters and protocol description are here:
 *
 * https://desk.draw.io/support/solutions/articles/16000042546-what-url-parameters-are-supported
 *
 * Parameters for developers:
 *
 * - dev=1: For developers only
 * - test=1: For developers only
 * - export=URL for export: For developers only
 * - ignoremime=1: For developers only (see DriveClient.js). Use Cmd-S to override mime.
 * - createindex=1: For developers only (see etc/build/README)
 * - filesupport=0: For developers only (see Editor.js in core)
 * - savesidebar=1: For developers only (see Sidebar.js)
 * - pages=1: For developers only (see Pages.js)
 * - lic=email: For developers only (see LicenseServlet.java)
 * --
 * - networkshapes=1: For testing network shapes (temporary)
 */
var urlParams = (function() {
    var result = new Object();
    var params = window.location.search.slice(1).split('&');
    for (var i = 0; i < params.length; i++) {
        var idx = params[i].indexOf('=');
        if (idx > 0) {
            result[params[i].substring(0, idx)] = params[i].substring(idx + 1);
        }
    }
    // 默认开启开发模式
    if (!result.hasOwnProperty('dev')) {
        result['dev'] = 1
    }
    return result;
})(); 
// Changes paths for local development environment
if (urlParams["dev"] == "1") {
  // Used to request grapheditor/mxgraph sources in dev mode
  var mxDevUrl =
    document.location.protocol + "//devhost.jgraph.com/drawio/src/main";

  // Used to request draw.io sources in dev mode
  var drawDevUrl =
    document.location.protocol + "//devhost.jgraph.com/drawio/src/main/webapp/";
  var geBasePath = drawDevUrl + "/js/grapheditor";
  var mxBasePath = mxDevUrl + "/mxgraph";

  if (document.location.protocol == "file:") {
    geBasePath = "./js/grapheditor";
    mxBasePath = "./mxgraph";
    drawDevUrl = "./";

    // Forces includes for dev environment in node.js
    mxForceIncludes = true;
  }

  mxForceIncludes = false;

  // ====> 开发模式文件指向本地
  if (location.hostname == "localhost" || location.hostname == "127.0.0.1") {
    drawDevUrl = `http://${location.host}/`;
    geBasePath = `http://${location.host}/js/grapheditor`;
    mxBasePath = `http://${location.host}/mxgraph`;
    mxForceIncludes = true;
  }
  // ====> 开发模式文件指向本地

  mxscript(drawDevUrl + "js/PreConfig.js"); // 全局配置
  mxscript(drawDevUrl + "js/diagramly/Init.js"); // 依据URL Query String初始化urlParmas对象
  mxscript(geBasePath + "/Init.js"); // 初始化全局路径
  mxscript(mxBasePath + "/mxClient.js"); // 提供控件形状&文本渲染、交互的基础库

  // Adds all JS code that depends on mxClient. This indirection via Devel.js is
  // required in some browsers to make sure mxClient.js (and the files that it
  // loads asynchronously) are available when the code loaded in Devel.js runs.
  mxscript(drawDevUrl + "js/diagramly/Devel.js");

  // Electron
  if (mxIsElectron) {
    mxscript("js/diagramly/DesktopLibrary.js");
    mxscript("js/diagramly/ElectronApp.js");
  }

  mxscript(drawDevUrl + "js/PostConfig.js");
} else {
  (function () {
    var hostName = window.location.hostname;

    // Supported domains are *.draw.io and the packaged version in Quip
    var supportedDomain =
      hostName.substring(hostName.length - 8, hostName.length) === ".draw.io" ||
      hostName.substring(hostName.length - 13, hostName.length) ===
        ".diagrams.net";

    function loadAppJS() {
      mxscript("js/app.min.js", function () {
        mxScriptsLoaded = true;
        checkAllLoaded();

        // Electron
        if (mxIsElectron) {
          mxscript("js/diagramly/DesktopLibrary.js", function () {
            mxscript("js/diagramly/ElectronApp.js", function () {
              mxscript("js/extensions.min.js", function () {
                mxscript("js/stencils.min.js", function () {
                  mxscript("js/shapes-14-6-5.min.js", function () {
                    mxscript("js/PostConfig.js");
                  });
                });
              });
            });
          });
        } else if (!supportedDomain) {
          mxscript("js/PostConfig.js");
        }
      });
    }

    if (!supportedDomain || mxIsElectron) {
      mxscript("js/PreConfig.js", loadAppJS);
    } else {
      loadAppJS();
    }
  })();
}
</script>