您的位置:

drawio文件用什么软件打开?

drawio是一款开源的流程图和图表绘制工具,可以自助在线绘制、导出、共享流程图、平面图、UML图和其他类型的图表。drawio文件应该如何打开?这涉及到多个方面的考虑,接下来我们会从不同的角度来详细讨论。

一、使用drawio官网打开

首先,最简单的方式就是使用drawio官网来打开drawio文件。只需在drawio官网上单击“打开文件”按钮,选择本地的drawio文件,即可在线编辑和查看文件。这种方式非常适合那些不常使用drawio的用户。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://app.diagrams.net/js/viewer.min.js">
    </script>
  </head>
  <body>
    <!-- 文件路径,可以将 ?url= 后面的参数替换成待打开文件的路径 -->
    <iframe src="https://app.diagrams.net/?lightbox=1&highlight=0000ff&edit=_blank&layers=1&nav=1&title=drawio_file#?url=https%3A%2F%2Fexample.com%2FmyDiagram.drawio" style="width:100%;height:100%;" frameborder="0"></iframe>
  </body>
</html>

二、使用drawio离线版打开

drawio官网同样提供了离线版的drawio,可以下载后直接通过本地的APP来打开drawio文件。首先需在drawio网站上下载安装包,之后进行安装即可,这种方式更适合频繁使用drawio的用户。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>drawio Viewer</title>
  <script src="https://localhost:8080/viewer.min.js"></script>
</head>
<body>
  <div id="canvas"></div>
  <script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'icons.xml', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var container = document.getElementById('canvas');
        container.innerHTML = '';
        viewer = new draw.io.Viewer(container,
          {baseUrl: 'https://localhost:8080/', imagesPath: 'images'});

        viewer.openDiagram('https://example.com/myDiagram.drawio', xhr.responseText);
      }
    };
  </script>
</body>
</html>

三、使用drawio插件

drawio插件是允许在浏览器中打开drawio文件的另一个好选择。用户只需要在浏览器中安装drawio插件,然后单击本地存储的drawio文件,即可在浏览器中打开和编辑文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://app.diagrams.net/js/diagrams.min.js">
    </script>
    <script>
      window.addEventListener('load', function() {
        var plugins = window.mxPlatform.getSupportedPlugins();
        if (plugins != null && plugins.length > 0) {
          var urlParams = new URLSearchParams(window.location.search);
          var hiRes = urlParams.get('highres') === '1';
          var alert = window.mxUtils.alert;
          window.mxPlatform.mxLoadPlugin(plugins[0], function(editorUi) {
            editorUi.editor.setGraphEnabled(false);
            var div = document.getElementById('mxgraph-container');
            editorUi.dblClickAction = mxEditor.prototype.dblClickAction;
            editorUi.setFileData = function(data) {
              editorUi.editor.graph.model.beginUpdate();
              try {
                var doc = mxUtils.parseXml(data);
                var node = doc.documentElement;
                var dec = new mxCodec(node.ownerDocument);
                dec.decode(node, editorUi.editor.getGraph().getModel());
              } finally {
                editorUi.editor.graph.model.endUpdate();
              }
              div.style.display = 'block';
              editorUi.editor.graph.view.refresh();
            };
            editorUi.fileLoaded = function(title, xml, data, mimeType) {
              xml = editorUi.extractGraphModelFromUrl(data);
              editorUi.setFileData(xml);
            };
            editorUi.loadFile = mxUtils.bind(editorUi, function() {
              try {
                var data = atob(urlParams.get('data'));
                editorUi.fileLoaded(null, null, data, null);
              } catch (e) {
                alert('Invalid URL parameter');
              }
            });
            editorUi.loadFile();
          }, false, hiRes);
        } else {
          alert('No viewer plugin available!');
        }
      });
    </script>
  </head>
  <body>
    <div id="mxgraph-container" style="display:none;height:100%;"></div>
  </body>
</html>

四、使用第三方工具打开

除了以上列举的方式之外,还可以使用第三方工具来打开drawio文件,例如LucidCharts、Visio等,这是因为drawio等流程图绘制工具通常支持多种文件格式相互转换。使用第三方工具需要先打开该工具,然后选择要导入的drawio文件,进行转换后再进行编辑。

以上就是几种针对drawio文件打开的常见方式,你可以选择适合自己的方式来打开drawio文件。当然,你也可以在网上查找更多的方式来打开drawio文件。