Draw.io--線上流程圖UML圖繪製軟體簡易教程

概述

draw.io是一個強大簡潔的線上的繪圖網站，支援流程圖，UML圖，架構圖，原型圖等圖示。支援Github，Google Drive, One drive等網盤同步，並且永久免費。如果覺得使用Web版不方便，draw.io 也提供了多平臺的離線桌面版可供下載。

本文的主要內容如下:

• draw.io 的核心設計元素
• draw.io 的基本操作
• 使用 draw.io 繪製簡單流程圖
• https://github.com/jgraph/drawio-desktop

核心設計

在學習基本操作之前我們先來了解一下draw.io的基本設計，對網頁的元素有一個直觀的認識。有了基本的框架，學習起來就有跡可循了。大部分的繪圖應用都離不開三個基本的元素，圖形，連結，文字。每個元素都有基本的操作和樣式，元素與元素之間又可以進行組合，“三生萬物”，生成各種各樣的圖表。

首先開啟draw.io的網站，載入之後會出現以下的畫面。這裡是選擇圖表儲存的方式，你可以選擇常用的網盤，也可以選擇decide later 在之後繪圖結束儲存的時候在進行選擇。

繪圖區

進入應用後，介面非常直觀簡潔。頂部選單欄提供各項基本操作，左側是圖形區，中間部分是畫布，右側部分是檢查器，根據當前的元素顯示不同的操作。

快速開始

整個介面的操作非常直觀，如果有相關繪圖軟體的使用經驗，相信已經可以上手繪圖了。

• 新增圖形
  • 通過簡單的拖拽，即可在畫布上面新增圖形。
• 新增文字
  • 在畫布上任何位置雙擊都可以新增文字框，在其中輸入文字
• 新增連結
  • 在圖形上滑鼠懸浮，在圖形上會浮現基本的連結點。這裡分為外邊界藍色的大箭頭和邊上的x型焦點。這兩種連結方式稍有不同，在後面我會詳細說明。

基本操作

移動、多選、複製與刪除

圖形、連結、文字這三個元素都可以被選中。可以使用cmd(windows下為ctrl，下同) + A 選擇全部元素，也可以使用cmd + click(滑鼠左鍵點選)來進行特定元素的多選。選擇元素後可以進行以下操作

• 移動：拖拽
• 複製： cmd + C
• 複製並貼上： cmd + D
• 刪除：delete鍵

建立連結

上面提到過在圖形上面懸浮滑鼠會出現圖形的連結點。

• 使用藍色箭頭進行快速連結
  • 點選藍色箭頭，會在指定方向建立連結，並在連結末端生成一個完全一致的元素
  • 如果需要控制連結位置，可以按住ctrl鍵，拖拽藍色箭頭到指定位置

• 連結圖形
  • 在懸浮圖形後選擇x型焦點（會高亮為綠色）可以建立連結，拖拽連結線到目標圖形上的x型焦點，完成固定連結
  • 在懸浮圖形後選擇x型焦點（會高亮為綠色）可以建立連結，拖拽連結線到目標圖形的邊上，直到圖形外邊變成藍色，鬆開滑鼠，完成浮動連結

固定連結是指連結始終固定在圖形的連結點上，不會隨著圖形移動而變化，浮動連結則會根據圖形的移動在圖形的邊上進行移動自適應。如下圖，固定連結始終固定在右邊，而浮動連結則從上邊移動到了下邊

圖形替換與旋轉

通過快速建立連結的方式可以快速的建立圖形並進行連結，但是如果需要不同的圖形呢？

• 替換：從左側圖形庫選擇需要的圖形，拖拽到要替換的圖形中央，直到出現了一個替換的褐色標誌，鬆開即可實現替換

  
  

製作流程圖

基本繪圖

掌握了圖形，文字和連結的基本操作，就可以實操來畫一個流程圖了，檢驗一下學習效果，如果哪一個部分不夠熟練可以溫習一下上面的教程

編輯樣式

選中元素在右側的檢查器可以修改元素的顏色，大小，佈局等等。請讀者自行操作。

儲存和匯出

在File選單可以執行儲存，並將圖片匯出成圖片或其他格式的檔案。

總結

• 介紹draw.io的基本組成元素：圖形、連結、文字
• 介紹元素的基本操作
• 介紹連結的建立方式
• 介紹元素的替換方法

實際上藉助draw.io的模板庫還可以繪製更多種類的圖，包括UML圖，結構圖等等。限於篇幅本文就不進行介紹了，但是總體還是離不開本文介紹的基本操作。希望大家閱讀完本文能夠有所收穫，繪製簡潔大方的圖表，提升自己的軟實力！