iT邦幫忙

1

[筆記本: Draw.io] 跨平台線上製作圖表工具

Draw.io

Draw.io是個跨平台的網頁圖表工具支援Chrome、IE、Safari及FireFox等等瀏覽器,也可以設定將檔案儲存至硬碟、Google Drive或是OneDrive。圖庫量也相當豐富,不管是畫商用圖表、工程製圖、流程圖或是UML等等都非常適合,同時還提供許多模板。

基本使用方法

傳送門:Draw.io
本示範使用Chrome瀏覽器。

選擇儲存的方式
選擇Google DriveOneDrive需要登入使用者帳戶,本示範使用本機硬碟。
Draw.io提供多種語言版本,點選語言列表(紅框)並選擇語言後,重新整理網頁即可更改語言。
https://ithelp.ithome.com.tw/upload/images/20181208/201136226xm33ghOBi.png

新增檔案 > 新增圖表
https://ithelp.ithome.com.tw/upload/images/20181208/20113622UiCCH1ZZOC.png

選擇模板及編輯檔案名稱 > 新增
https://ithelp.ithome.com.tw/upload/images/20181208/201136226cZlLQJGaT.png

如果不使用空白模板,可以於列表(紅框)選擇模板
https://ithelp.ithome.com.tw/upload/images/20181208/20113622rPRxiicgqK.png

空白模板
左邊圖庫列表可供選擇適合的圖樣,按下圖庫分類(紅框)可以收放分類表。
https://ithelp.ithome.com.tw/upload/images/20181208/20113622PzmljnFfcR.png

點擊圖庫中的圖樣即可將其圖樣加入圖表中
圖表中的圖樣可任意拖曳至其他位置
NOTE: 如果圖樣超出圖表邊界,圖表會自動擴增
https://ithelp.ithome.com.tw/upload/images/20181208/20113622zQ3VHZwBOU.png

加入一個互相連接的同圖樣,可以點選圖樣下方方向鍵
https://ithelp.ithome.com.tw/upload/images/20181208/2011362294gnJ7seMU.png

若要連結圖樣,將滑鼠指標移至圖樣外框的藍色'='節點(紅圈)會出現綠圈,並拖曳至想要放置的圖樣節點上
https://ithelp.ithome.com.tw/upload/images/20181208/20113622ogOSpVRVvw.png

編輯圖樣文字
連點圖樣即可開始輸入
https://ithelp.ithome.com.tw/upload/images/20181208/20113622xdt2DZCSP6.png

右方區域提供圖樣及文字樣是編輯
https://ithelp.ithome.com.tw/upload/images/20181211/20113622snb4vOTlX4.png

例如選擇START物件的填滿顏色即可選擇顏色
https://ithelp.ithome.com.tw/upload/images/20181208/20113622HzAjaAX9r5.png

流程圖示範成品
https://ithelp.ithome.com.tw/upload/images/20181208/20113622OK4iqoSwe8.png

檔案儲存
上方列表選擇檔案 > 另存新檔
Draw.io可再編輯檔案的格式為xml
同時Draw.io提供多儲存平台
https://ithelp.ithome.com.tw/upload/images/20181208/20113622JfLj6ONarX.png

匯出圖表
上方列表選擇檔案 > 匯出為 > PNG(或其他格式)
設定圖表匯出設定
https://ithelp.ithome.com.tw/upload/images/20181208/20113622pVLkZbK7PW.png

https://ithelp.ithome.com.tw/upload/images/20181208/20113622uJWATwJm2o.png


尚未有邦友留言

立即登入留言