draw.io 是一個強大簡潔的在線的繪圖網站，支持流程圖，UML圖，架構圖，原型圖等圖標。支持Github，Google Drive, One drive等網盤同步，而且永久免費。若是以爲使用Web版不方便，draw.io 也提供了多平臺的離線桌面版可供下載。windows
在線版：https://www.draw.io/架構
PC電腦版：http://t.cn/Aid48ecf框架
第一次使用，能夠點擊「language」切換爲簡體中文哦！ide
本文的主要內容以下:佈局
- draw.io 的核心設計元素
- draw.io 的基本操做
- 使用 draw.io 繪製簡單流程圖
核心設計
在學習基本操做以前咱們先來了解一下draw.io的基本設計，對網頁的元素有一個直觀的認識。有了基本的框架，學習起來就有跡可循了。大部分的繪圖應用都離不開三個基本的元素，圖形，連接，文本。每一個元素都有基本的操做和樣式，元素與元素之間又能夠進行組合，「三生萬物」，生成各類各樣的圖表。post
首先打開draw.io的網站，加載以後會出現如下的畫面。這裏是選擇圖表保存的方式，你能夠選擇經常使用的網盤，也能夠選擇decide later 在以後繪圖結束保存的時候在進行選擇。學習
繪圖區
進入應用後，界面很是直觀簡潔。頂部菜單欄提供各項基本操做，左側是圖形區，中間部分是畫布，右側部分是檢查器，根據當前的元素顯示不一樣的操做。網站
快速開始
整個界面的操做很是直觀，若是有相關繪圖軟件的使用經驗，相信已經能夠上手繪圖了。spa
- 添加圖形
- 經過簡單的拖拽，便可在畫布上面添加圖形。
- 添加文本
- 在畫布上任何位置雙擊均可以添加文本框，在其中輸入文字
- 添加連接
- 在圖形上鼠標懸浮，在圖形上會浮現基本的連接點。這裏分爲外邊界藍色的大箭頭和邊上的x型焦點。這兩種連接方式稍有不一樣，在後面我會詳細說明。
基本操做
移動、多選、複製與刪除
圖形、連接、文本這三個元素均可以被選中。可使用cmd(windows下爲ctrl，下同) + A 選擇所有元素，也可使用cmd + click(鼠標左鍵點擊)來進行特定元素的多選。選擇元素後能夠進行如下操做設計
- 移動：拖拽
- 複製： cmd + C
- 複製並粘貼： cmd + D
- 刪除：delete鍵
建立連接
上面提到過在圖形上面懸浮鼠標會出現圖形的連接點。
- 使用藍色箭頭進行快速連接
- 點擊藍色箭頭，會在指定方向建立連接，並在連接末端生成一個徹底一致的元素
- 若是須要控制連接位置，能夠按住ctrl鍵，拖拽藍色箭頭到指定位置
- 連接圖形
- 在懸浮圖形後選擇x型焦點（會高亮爲綠色）能夠建立連接，拖拽連接線到目標圖形上的x型焦點，完成固定連接
- 在懸浮圖形後選擇x型焦點（會高亮爲綠色）能夠建立連接，拖拽連接線到目標圖形的邊上，直到圖形外邊變成藍色，鬆開鼠標，完成浮動連接
固定連接是指連接始終固定在圖形的連接點上，不會隨着圖形移動而變化，浮動連接則會根據圖形的移動在圖形的邊上進行移動自適應。以下圖，固定連接始終固定在右邊，而浮動連接則從上邊移動到了下邊
圖形替換與旋轉
經過快速建立連接的方式能夠快速的建立圖形並進行連接，可是若是須要不一樣的圖形呢？
-
替換：從左側圖形庫選擇須要的圖形，拖拽到要替換的圖形中央，直到出現了一個替換的褐色標誌，鬆開便可實現替換
image.png -
旋轉：選中圖形，拖拽上方的旋轉箭頭便可
[圖片上傳失敗...(image-9629c4-1523589315413)]
製做流程圖
基本繪圖
掌握了圖形，文本和連接的基本操做，就能夠實操來畫一個流程圖了，檢驗一下學習效果，若是哪個部分不夠熟練能夠溫習一下上面的教程
編輯樣式
選中元素在右側的檢查器能夠修改元素的顏色，大小，佈局等等。請讀者自行操做。
保存和導出
在File菜單能夠執行保存，並將圖片導出成圖片或其餘格式的文件。
總結
- 介紹draw.io的基本組成元素：圖形、連接、文本
- 介紹元素的基本操做
- 介紹連接的建立方式
- 介紹元素的替換方法
實際上藉助draw.io的模板庫還能夠繪製更多種類的圖，包括UML圖，結構圖等等。限於篇幅本文就不進行介紹了，可是整體仍是離不開本文介紹的基本操做。但願你們閱讀完本文可以有所收穫，繪製簡潔大方的圖表，提高本身的軟實力！