產品經理，設計師，前端工程師必備的繪圖工具（原型圖，思維導圖，UML，流程圖，架構圖）

文章目錄

1 傳達意圖的圖

2 原型圖工具（Axure，墨刀，摹客....）

3 思維導圖與UML工具

3.1 專業工具（Visio， Edraw，OmniGraffle，XMind，MindMaster）

3.2 在線工具（drawio，ProcessOn，百度腦圖，語雀）

3.3 代碼工具（PlantUML，Mermaid）

4 參考資料

1 傳達意圖的圖

原型圖：做一些自用的生產力平臺時需要寫需求文檔

思維導圖：用于整理思路或編寫大綱。

UML（用例圖、流程圖、時序圖、架構圖）：用于編寫系統文檔。

2 原型圖工具（Axure，墨刀，摹客…）

Axure RP

Axure RP是一款專業設計師不容錯過的免費原型設計工具，設計師可以用它快速創建應用軟件或Web線框圖、流程圖、原型和規格說明文檔。

作為一款專業的設計工具，它能快速、高效的創建原型

網站地址：https://www.axure.com/

墨刀

墨刀致力于簡化產品制作和設計流程，采用簡便的拖拽連線操作，作為一款在線原型設計軟件，墨刀支持云端保存，實時預覽，一鍵分享，及多人協作功能，讓產品團隊快速高效地完成產品原型和交互設計。

使用墨刀，用戶可以快速制作出可直接在手機運行的接近真實 app 交互的高保真原型，使創意得到更直觀的呈現。

網站地址：https://modao.cc/

摹客

Mockplus是一款更快更簡單的免費原型設計工具，產品設計師5分鐘即可創建交互原型。

快速原型設計、精細團隊管理、高效協作設計、輕松多終端演示，是原型設計的不二之選。

網站地址：https://www.mockplus.cn/?home=1

xiaopiu

xiaopiu是一個在線原型設計平臺(同時也有Windows、Mac客戶端)，可以隨時隨地創作原型，實時保存，實時和他人協同，一鍵分享，并且提供多款各行業項目模板以及豐富的組件庫和頁面庫來幫助用戶快速構建自己的原型。該軟件能夠幫助你快速實現一些簡單的頁面交互時間，相對上面的Axure來講，UI效果更好。

網站地址：https://www.xiaopiu.com/

Proto.io

一款專注于移動端原型開發的軟件，可以建立全交互式的移動App原型。設計師可以直接在真實的移動設備上對原型設計進行測試。

并且可以使用iOS或Android上的瀏覽器以全屏模式運行原型。不過這是款在線設計工具，設計師在進行原型設計時需要保持經常在線。

網站地址：https://proto.io/

3 思維導圖與UML工具

Visio

Office Visio 是office軟件系列中的負責繪制流程圖和示意圖的軟件，具有專業外觀的圖表。

Visio更適合繪制復雜項目的流程圖和線框，更復雜的模板，更豐富的共享組件、布局，學習成本增加，軟件也是重量級的。

Edraw

億圖圖示是國產軟件，操作方便， 最好用的是有許多模板可用，在圖示繪制領域都是非常專業的軟件。

兼容Windows、Mac、Linux三大系統，并且可以在網頁端在線打開。在云服務上，最新版的億圖圖示很好的支持云同步功能，繪制的圖示文件可以快速的同步到億圖的賬戶中，億圖還支持導入visio的文件進行編輯。

但是不花錢就變小。

官網地址：https://www.edrawsoft.cn/

OmniGraffle

Mac Only，付費、略貴，Mac 上最貴最好用的繪圖工具，大部分的圖都可以很容易畫出來。

官網地址：https://www.omnigroup.com/omnigraffle

XMind（思維導圖）

XMind 是世界上最受歡迎的思維導圖軟件，作為開源的商業軟件，XMind 簡單易用，穩定高效，支持多平臺、多語言、多格式導出，不僅能繪制思維導圖，還能繪制魚骨圖、二維圖、樹狀圖、邏輯圖以及組織架構圖等。

官網地址：https://www.xmind.cn/

MindMaster（思維導圖）

MindMaster在2017年上線，同樣支持多類思維導圖的高效繪制。而且僅用了1年時間，其產品下載量就破百萬次，其研發公司億圖軟件也于2019年被上市公司萬興科技超6倍估值并購。

官網地址：https://www.edrawsoft.cn/mindmaster/

draw.io

開源免費，能滿足工作上寫文檔時的多數畫圖需求

官網地址：

https://github.com/jgraph/drawio

https://www.diagrams.net/

ProcessOn

ProcessOn是一個在線作圖工具的聚合平臺，它可以在線畫流程圖、思維導圖、UI原型圖、UML、網絡拓撲圖、組織結構圖等等

圖標類型和長相都還不錯，但存在的問題主要是收費及安全問題，畢竟企業內部的一些流程圖和架構圖，不適合放公網服務。

官網地址：https://processon.com/

百度腦圖（思維導圖）

百度腦圖官方版是款由百度為用戶創造的思維導圖制作工具。百度腦圖可以以樹狀圖、邏輯圖以及流程圖的形式將自己的想法直觀的展現出來，讓工作項目更加有效、有序的進行。

“好用的完全不像是百度的產品”。各種格式的導入導出非常強大，免費。

移動端速度慢，無法閱讀分享

官網地址：https://naotu.baidu.com/

語雀（思維導圖）

語雀，是螞蟻集團旗下的在線文檔編輯與協同工具。語雀使用了“結構化知識庫管理”，形式上類似書籍的目錄。

支持思維導圖+流程圖+繪圖。 易用、美觀，高效、協作：在線多人協作，自由畫板，比起 XMind 會更舒服，可以任意組合。編輯能力比起 OmniGraffle 還有不少差距，內置模板和組件還太不夠豐富。

官網地址：https://www.yuque.com/yuque/blog/ygdcs3

PlantUML

PlantUML 是一個開源工具，能讓你通過純文本的方式來生成 UML 圖。除了 UML 圖外，PlantUML 也支持思維導圖、甘特圖。

語法簡單明了，但需要裝java，用plantuml.jar包。設幾個環境變量，可移植性不高，支持png, svg圖片導出。

官網地址：https://plantuml.com/zh/

https://github.com/plantuml/plantuml/releases/tag/v1.2022.4

Mermaid（美人魚圖）

Mermaid是一種基于Javascript的繪圖工具，使用類似于Markdown的語法。

餅狀圖：使用pie關鍵字

流程圖：使用graph關鍵字

序列圖：使用sequenceDiagram關鍵字

甘特圖：使用gantt關鍵字

類圖：使用classDiagram關鍵字

狀態圖：使用stateDiagram關鍵字

用戶旅程圖：使用journey關鍵字

官網地址：

https://github.com/mermaid-js/mermaid

4 參考資料

https://www.zhihu.com/question/20177573

https://www.jianshu.com/p/2d9b16f37976

https://www.zhihu.com/question/20144020

UML web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。