draw.io 的使用指南

一、draw.io 是什麼

draw.io 是一個免費的在線圖表繪製工具，它支持多種格式的圖表，包括流程圖、UML、網路拓撲圖、組織結構圖等等。除了在線使用，draw.io 也提供了離線版本，方便用戶在本地使用。

二、如何讀取 drawio 文件

讀取 drawio 文件需要先將文件上傳到 draw.io 在線平台或者使用離線版本的 drawio。在 draw.io 中打開已有文件可以直接從雲端打開，也可以從本地上傳文件。

    
// 從本地上傳文件的示例代碼：

<input type="file" onclick="this.value=null;" onchange="loadFile(event)">

function loadFile(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.readAsText(file);
  reader.onload = function(event) {
    const fileContent = event.target.result;
    // 對讀取的文件內容進行操作
  };
}
    

三、從 drawio 中導出圖表

drawio 支持多種格式的圖表導出，包括 PNG、JPEG、SVG、PDF 等。導出文件可以直接在 drawio 中完成，也可以通過代碼進行導出。

    
// 將 drawio 文件導出為 PNG 格式的示例代碼：

const xml = 'drawio xml file';
const scale = 1;
const bg = '#FFFFFF';
const mime = 'image/png';

const parseXml = function(xml) {
  // 將 xml 解析為 DOM 對象
};

const drawImage = function(ctx, url, x, y, w, h) {
  // 繪製圖片
};

const dom = parseXml(xml).documentElement;
const bounds = dom.getAttribute('bounds').split(',');
const img = new Image();
img.onload = function() {
  const canvas = document.createElement('canvas');
  canvas.width = Math.round(bounds[2] * scale);
  canvas.height = Math.round(bounds[3] * scale);
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = bg;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  drawImage(ctx, img, 0, 0, canvas.width, canvas.height);
  canvas.toBlob(function(blob) {
    const a = document.createElement('a');
    a.download = 'filename.png';
    a.href = URL.createObjectURL(blob);
    a.click();
  }, mime);
};
img.src = 'data:image/svg+xml,' + encodeURIComponent(new XMLSerializer().serializeToString(dom));
    

四、drawio 在線平台和離線版本的選擇

根據個人的需求和習慣選擇在線平台或者離線版本的 drawio。在線平台可以任意使用，但需要聯網，而離線版本則可以在本地使用，更加靈活方便。

五、drawio 的常見問題

1、如何在 drawio 中打開已有文件？

答：在 drawio 中打開已有文件可以直接從雲端打開，也可以從本地上傳文件。

2、如何從 drawio 中導出圖表？

答：drawio 支持多種格式的圖表導出，包括 PNG、JPEG、SVG、PDF 等。導出文件可以直接在 drawio 中完成，也可以通過代碼進行導出。

3、drawio 是否支持離線使用？

答：是的，drawio 提供了離線版本，方便用戶在本地使用。

4、drawio 是否免費？

答：是的，drawio 是一個免費的在線圖表繪製工具。

六、drawio 的優缺點

drawio 的優勢在於它的免費、開源、跨平台和支持多種圖表格式。與此同時，drawio 的缺陷在於它需要聯網才能使用，可能存在安全隱患。