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文件。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/288593.html
微信扫一扫 
支付宝扫一扫 