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/zh-hant/n/288593.html
微信掃一掃 
支付寶掃一掃 