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後 字型就不是標楷體了 求解~謝謝

    回覆刪除
  20. 感謝這篇全面的分享!Draw.io(現稱 diagrams.net)真的是繪製流程圖、UML、網路圖等的跨平台利器:免註冊、速度飛快、節省空間,又支持離線使用,功能非常完整

    除了創建之外,很多團隊也需要無縫檢視 Visio(VSDX)格式文件,例如分享流程圖給同事時。如果只想快速打開檔案,不想安裝軟體或上傳雲端,上我開發的 Visio.best 就很適合:瀏覽器即開即看、100% 客戶端處理,不需註冊

    回覆刪除

張貼留言

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

這個網誌中的熱門文章

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

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

Facebook Groups新版社團功能,和一小群朋友建立臉書秘密空間

Acer Chromebook 台灣開箱 Google Chrome OS 心得

Fences 1.0 正式版推出!管理桌面圖示從此井然有序,美化優化桌面的收納盒

如何在 Rainlendar 2.6 桌面行事曆添加RSS、天氣預報、倒數計時面板?

LINE App PC電腦版下載設定教學,手機電腦彈性即時通

Comodo Internet Security 4.0 免費防毒防駭防火牆新版心得

Rainlendar 2.2 桌面行事曆基本安裝設定完全攻略

Comodo Firewall + AntiVirus:全中文免費防火牆+防毒軟體上手教學