Draw.io 中文線上製作流程圖首選!專業水準完全免費


最近在研究可以畫出流程圖、架構圖、線路圖、網站模板等圖表的製作工具,一開始先研究單機的免費製圖軟體,發現知名的「 Dia 」、「 Pencil 」、「 Diagram Designer 」似乎剩「 Diagram Designer 」還有繼續更新(感謝網友提醒:Dia 也偶爾會有更新),但只能在 Windows 上使用,這也讓我轉而開始研究可以跨平台的線上工具。

線上的圖表製作工具還不少,除了我之前非常推薦的「 Cacoo 」之外,也讓我重新發現了今天要介紹的這個「 Draw.io 」。

單機流程圖軟體推薦:yEd 免費下載商業使用流程圖軟體!自動排版超好用




為什麼要說是重新發現呢?因為「 Draw.io 」前身叫做「 Diagramly 」,是一個已經發展多年的線上流程圖軟體,難能可貴的是,他一直保持「完全免費」,並且直到 2015 年的現在都依然持續更新(最近他們還發表文章說明自己保持永久免費的決心)。

所以當我隔了幾年再次看到「 Draw.io 」後,發現它已經是一個「速度飛快」、「圖庫素材齊全」、「範本專業豐富」,可以「線上、離線」使用,還能與 Google Drive 完美結合的圖表製作工具,而且有中文介面,是對一般工作者、老師學生來說非常值得推薦的流程圖繪製軟體。

「 Draw.io 」還有一個特點,他雖然是一個線上工具,但卻不提供雲端儲存服務(所以也不需註冊登入),也就是說你繪製的圖表不會儲存在「 Draw.io 」,要自己儲存在你的硬碟、你的 Dropbox ,或是你的 Google 雲端硬碟中。

「 Draw.io 」拋棄儲存服務,但專注的去把一個線上流程圖製作軟體發展到最快最好用。

開啟「 Draw.io 」線上工具

延伸閱讀,你一定會感興趣的其他圖表繪製軟體:
  1. DrawExpress Diagram 真手繪流程圖心智圖免費軟體
  2. Coggle 最好用免費線上心智圖軟體教學:簡單卻強大
  3. 不輸 Excel! 用 Google 試算表製作圖表一次上手教學
  4. creately 線上圖表軟體:免費套用數千資訊圖表範本
  5. 好用原型設計軟體 Mockplus 免費畫互動 App 與網頁





  • 1. 免註冊,新增、編輯雲端硬碟或單機硬碟檔案
打開「 Draw.io 」網站,一開始會詢問你要在什麼地方新增流程圖表?你可以選擇 Google Drive、 Dropbox 、硬碟等地方。

如果你已經使用「 Draw.io 」一段時間,也可以選擇從上述地方匯入舊檔案開啟修改。

雖然「 Draw.io 」不能自己儲存我們的流程圖,但這樣一來反而讓我們可以把繪製完成的圖表「存在自己的工作檔案夾」,對我們來說更加方便。





  • 2. 豐富專業的預設圖表範本

當選擇新增流程圖時,會出現可以選擇「 Templates (範本)」的視窗,你可以在右上方的選單裡選擇預設的商務流程圖、工業流程圖、心智圖、網路架構圖、軟體開發流程圖,或是網頁草圖。

這些範本除了幫助我們學習流程圖繪製,有時候也可以省一些時間。





  • 3.簡單易用的中文繪圖介面

「 Draw.io 」有繁體、簡體中文介面,繁體翻譯雖然還沒有很完全,但基本上你可以在重要功能上看到熟悉的中文。

而「 Draw.io 」的介面也簡單易懂,類似 Google Docs 的風格,左方是可以拖曳到畫面中使用的圖表圖庫,右方則是細節編輯面板。





  • 4.齊全多樣化的圖庫素材

「 Draw.io 」內建的圖庫非常豐富,除了流程圖需要的基本符號外,也包含了網頁草圖、手機介面、 UML、電路圖、網路架構,或是規劃 AWS、 Cisco、 Azure 時需要的圖案。

我們可以在左方的圖庫清單裡,選擇「更多圖案」來開啟更多圖庫內容。





  • 5. 進階的圖文細節編修

當把圖案素材拖曳到畫面後,可以利用右方的編輯面板來做微調,包含改變圖案的顏色、特效,修改文字大小風格等等。





  • 6. 流暢的拖拉圖表繪製

在繪製流程圖的便利性上「 Draw.io 」也不輸專業軟體。例如我可以直接從一個方塊的任何邊緣拉出路線到另外一個方塊,「 Draw.io 」會自動畫出路線方向,在操作上很體貼用戶,減少了許多額外操作步驟。

而如果我想要在圖表中新增圖片,也只要從桌面直接拖曳一張圖片進到網頁中,就能如下圖這樣編輯使用。

更重要的一點是「 Draw.io 」速度非常快,可能是我用過速度最流暢的線上圖表繪製工具。





  • 7. 儲存成各種格式的圖表檔案

因為「 Draw.io 」本身不儲存我們的圖表檔案,所以當完成流程圖製作時要記得儲存到自己的空間,例如我們的硬碟,或是雲端硬碟。

我會建議選擇與 Google Drive 或 Dropbox 同步,這樣在使用「 Draw.io 」的過程中會自動幫我們儲存檔案到雲端硬碟,以免編輯到一半的檔案消失。

「 Draw.io 」還可以讓我們把圖表轉存成多種格式,除了支援 PNG、 JPG 圖檔外,也能存成 PDF 或向量 SVG 檔案。若是選擇儲存成「 Draw.io 」的 XML 檔,則可以讓後續隨時編輯這份流程圖。





  • 8. 離線使用,與 Google Drive 連動

雖然也可以和 Dropbox 同步,但是「 Draw.io 」和 Google Drive 有更完美的搭配,你可以安裝「 Draw.io 」的雲端硬碟應用程式,這樣一來你可以從 Google Drive 直接新增「 Draw.io 」的流程圖。

或者你可以安裝「 Draw.io 的離線 Chrome App 」,這樣一來你可以像是單機軟體一樣打開「 Draw.io 」,並且支援離線製作流程圖。

「 Draw.io 」是一款速度飛快、功能專業,又簡單好上手的線上流程圖製作軟體,並且他完全免費,當然他沒有 Cacoo 那樣的協同合作與社群功能,但單人使用應該綽綽有餘,推薦有需要的朋友可以試試看。

轉貼本文時禁止修改,並且必須註明來自電腦玩物原創作者 esor huang(異塵行者),及附上原文連結:Draw.io 中文線上製作流程圖首選!專業水準完全免費


留言

  1. Dia 去年九月還有更新哦。http://ftp.gnome.org/pub/gnome/sources/dia/0.97/dia-0.97.3.news
    只是功能就增加很慢。不過前幾年回報一個 bug,沒多久就修正了。

    回覆刪除
  2. 感謝分享!
    輕輕試用了一下,
    覺得比Gliffy Diagrams更快,而且可調整的細節更全面。

    回覆刪除
  3. Have you tried our diagramming tool Creately ? It has far more templates and powerful usability features for faster diagramming. Would love if you can review our product too.

    回覆刪除
    回覆
    1. 似乎不能使用標楷體

      刪除
    2. 把字型點開,點選最下面那個,可以改成你想要的字體(標楷體),改了之後,那份圖檔的字型都有標楷體可以選擇

      刪除
  4. 刚试了 很棒 谢谢分享!

    回覆刪除
  5. 請問可以使用標楷體輸出圖檔嗎?謝謝~

    回覆刪除
    回覆
    1. "文字" -> "自訂..." -> 輸入"標楷體" -> 按"應用",這樣就可以用標楷體了喔

      刪除
    2. 覺得這個回答受用!!

      刪除
  6. 請問如何將頁面轉呈橫向

    回覆刪除
    回覆
    1. 您好~應該是說我做完圖表但是列印出來是直向的會被切掉,找不到地方橫向列印

      刪除
    2. 在 Download 下載檔案的選單裡,選擇[ Advanced ],可以手動調整長寬比的解析度

      刪除
  7. 離線使用,好像不能夠匯出成圖檔或PDF,功能上比線上版要少

    回覆刪除
  8. I would recommend also trying Lucidchart which is very easy, has a free plan, and is collaborative.

    回覆刪除
  9. 請問可以讀取visio 檔案嗎?

    回覆刪除
  10. 請問如何修改draw.io 更新儲存時間,一直儲存用起來會用卡卡的
    nick.cpu@gmail.com

    回覆刪除
  11. 請問如何轉成中文版的 抱歉一直找不到語言項目><

    回覆刪除
    回覆
    1. 點擊右上角的地球即可修改語言

      刪除
  12. 作者已經移除這則留言。

    回覆刪除
  13. 請問從外部上傳的圖片 可以剪裁大小形狀嗎? 找了半天找不到這個功能 如果有就更完美了><!

    回覆刪除
  14. 請問Draw.io完成後可以用google文件歸檔嗎?

    回覆刪除
  15. 針對DRAW.IO有新的模板可以下載嗎?

    回覆刪除
  16. 請問您知道為什麼我要匯出為PDF或JEPG等檔案時會一直跑出儲存檔案出錯的結果嗎?

    回覆刪除
  17. 我找不到切換語言的地方....雖然我還沒有到英文完完全全看不懂的程度,但是全英文還是使用的很痛苦~"~

    回覆刪除
    回覆
    1. 右上方地球按下去,會有選單可以選擇:D

      刪除
  18. 我在上面輸入 key 會自動被翻成金鑰,打英文會被跳成中文,請問怎麼調整設定讓它正常,謝謝

    回覆刪除
  19. 流程圖 原本字型是標楷體 導出為PDF後 字型就不是標楷體了 求解~謝謝

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Slack 完整教學與上手心得:找到正確的團隊溝通之道

Google NotebookLM 免費中文 AI 筆記實例教學,老師、學生、創作者利器

Miro 遠距工作開視覺會議的免費強大白板,專案圖解實例教學

Google 表單自動關閉回覆教學:時間人數到達就過期

畫張圖說得更清楚! Napkin 用 AI 幫你的簡報文章手繪視覺思考圖

少記筆記,減少整理,高效輸出:6 原則打造任務驅動型第二大腦

Google 表單的 10 個專業問卷調查設計秘密教學