程式員必備的畫圖工具彙總

文章目錄

• 1、簡介
• 2、draw.io
• 3、Excalidraw
• 4、Xmind
• 5、語雀
• 6、Database

• 6.1 dbdiagram.io
• 6.2 sqldbm
• 6.3 QuickDBD

• 7、UML

• 7.1 plantuml
• 7.2 Graphviz

• 結語

1、簡介

優秀的作圖工具有許多，例如文本繪圖工具 PlantUML，流程圖設計工具 Draw.io，還有專業繪圖工具 Sketch 和 Figma 等。

2、draw.io

官網位址：

​​​https://www.draw.io/index.html​​​​https://www.diagrams.net/​​​​ https://www.iodraw.com/diagram/​​ https://www.iodraw.com/mind

diagrams.net (formerly draw.io) is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPMN online, as a circuit diagram maker, and more. draw.io can import .vsdx, Gliffy™ and Lucidchart™ files .

​​http://Draw.io是一款免費開源的電腦端跨平台繪圖軟體，該軟體可以繪制各種各樣的流程圖、結構圖、工程圖、設計圖以及思維導圖等，比Visio更靈活更便捷，能顯著提升工作效率。​​

draw.io 提供了豐富的模版，支援商務、圖表、cloud、工程、流程圖、布局、地圖、網絡、軟體、表格、UML、Venn等。還可以自定義模闆。

draw.io有網頁版，直接打開就可以使用。也有PC版本。可以到它的github去下載下傳對應的版本。

線上使用網頁位址：https://app.diagrams.net/

下載下傳位址：https://github.com/jgraph/drawio/releases

官網位址：https://www.diagrams.net/

List of diagrams.net pluginsh：ttps://desk.draw.io/support/solutions/articles/16000056430

3、Excalidraw

Excalidraw - 免費的手繪風格白闆應用，能夠畫各種流程圖、示意圖、架構圖。

官網位址：

​​https://excalidraw.com/​​​​https://www.npmjs.com/package/@excalidraw/excalidraw​​

​​https://blog.excalidraw.com/rethinking-virtual-whiteboard/​​

Excalidraw是一款非常輕量的線上白闆工具，可以直接在浏覽器打開，輕松繪制具有手繪風格的圖形。

Excalidraw 是一款輕量的手繪風格電子白闆線上應用，無論是 Windows / macOS / linux，甚至是手機，打開浏覽器就能使用，能簡單地畫出美觀漂亮的流程圖、示意圖和開發架構圖等常用圖檔，也可以作為會議畫闆使用，不僅是一款優秀的畫圖應用，也是一款自由便捷的電子白闆應用。

Excalidraw 是手繪風格的畫圖應用，打開速度很快，提供了自由畫筆、圓形、方形和箭頭直線等常用圖形工具，能夠非常直覺的作圖，表達内容，支援導出 png / svg 兩種圖像格式，可以用在各種文章、PPT 彙報、論文和 html 網頁中，甚至還能繪制資料圖表。如果使用過腦圖類軟體，幾乎不需要學習就能上手。

Excalidraw 是一款使用完全免費的輕量級電子白闆應用，不需要下載下傳安裝，打開網址就能使用，開發團隊甚至開放了源碼，基于 MIT 開源協定托管在 Github，開發者可以自由部署。

• 界面簡潔，互動細緻，上手簡單，操作習慣和大部分制圖軟體相似
• 免注冊，支援中文界面，打開浏覽器就能開始畫圖
• 支援衆多鍵盤快捷鍵操作，配合滑鼠能快速畫圖
• 内容安全受保護，Excalidraw 采用端到端加密，繪圖内容不會上傳到伺服器
• 支援通過網頁連結共享協作

• Excalidraw通過浏覽器直接打開，無需安裝；可以在任何裝置上使用，比如電腦端、手機、平闆電腦，隻要在浏覽器打開上述連結即可使用。支援多人協作：可以分享連結給其他小夥伴，一起共享同一個白闆進行創作。
• Excalidraw支援最常用的圖形元素：方框、圓、菱形、連接配接線，可以友善的使用這些元素繪制簡潔的圖形。圖形内容也可以導出檔案，并在其他裝置上可以導入編輯，比如電腦上的圖形導入到手機上進行編輯或者檢視。

它最初的名字還不叫 Excalidraw，而是叫 Excalibur。Excalibur（傳說中的聖劍）是傳說中不列颠國王 亞瑟王 從湖之仙女那得到的聖劍。此劍是精靈在 阿瓦隆 （Avalon）所打造，劍锷由黃金所鑄、劍柄上鑲有 寶石 ，并因其鋒刃削鐵如泥。

4、Xmind

​​https://xmind.cn/​​​​https://xmind.app/download/​​

Xmind是一款 全功能 的思維導圖和頭腦風暴軟體。像大腦的瑞士軍刀一般，助你理清思路，捕捉創意。

• 聯系

  使用聯系将兩個相關的想法聯系起來。你可以使用不同的形狀，顔色來表達特定的意思，或者直接在聯系線上添加文字描述。

• 概要

  概要用于為選中的一組主題添加總結或概要資訊。像其它主題一樣，概要主題可以更改樣式或添加子主題。

• 外框

  外框是圍繞主題的封閉區域。當你想強調某些内容或告訴讀者某些特殊概念時，外框可以将這些主題框在一起。我們也為外框提供多種樣式。

• 标記

  通過添加優先級，項目進度，風險等标記來做日程規劃、項目管理和标記需要掌控時間節點。在圖例中可以顯示全部标記和自定義标記名稱。

• 筆記

  為了思維導圖的簡潔，你可以将額外的文本資訊或連結放入可擴充的筆記中作為注釋，并在需要時随時檢視。

• 标簽

  标簽是附加在主題上的文本注釋，通常用于簡單的标注和分類。在導航面闆中可以查找和篩選帶有标簽的主題。

XMind 是一個跨平台的思維導圖軟體，具有多種結構樣式，除了普通的思維導圖，還包括樹形圖、邏輯圖、魚骨圖、時間軸、樹狀表格等等，不同的結構樣式可以自由組合混用，同時支援一鍵更換結構樣式。

Xmind 提供了很多類型的思維導圖，并支援設定多種主題風格：

下載下傳位址：https://xmind.app/download/

5、語雀

​​https://www.yuque.com/​​​ 常用模闆：https://www.yuque.com/danchun-eekrs/pbxiht

線上位址：https://www.yuque.com/

語雀是一款面向未來的文檔和知識協同工具，可以用來記筆記，也可以用來畫圖。語雀畫闆支援基礎圖形、流程圖、UML圖、ER圖、思維導圖等。

語雀自研編輯器，支援 文檔、資料表、繪圖 三大文稿類型，具備 Markdown、代碼塊、LaTeX 公式、PlantUML 等專業編輯能力，同時支援本地視訊、Office 檔案、PDF 檔案等内容的上傳與線上預覽，可滿足多種專業崗位需求，讓創作更高效。語雀畫闆還支援直接從 icofont 搜尋、添加圖示。支援團隊協作繪圖；儲存版本，恢複曆史版本。

「語」字來源于「言語」，泛指人類溝通交流的方式，代表「語雀」的核心是在于通過承載交流過程中需要用到的以文本、圖畫、表格等為典型載體的知識，讓人與人之間的交流更高效。「雀」字來源于「雲雀」，也即《從百草園到三味書屋》中的叫天子，是一種輕靈活潑的杭州本土小鳥，在詩人雪萊的傑作《緻雲雀》中象征“歡樂、光明、美麗”，代表「語雀」的産品風格為「輕靈美觀」。

語雀特色的目錄及大綱功能，讓多篇文檔結構化，形成一本本像書一樣清晰易讀的知識庫，友善知識 創作及沉澱。

語雀文檔是一個給個人和團隊提供的寫好文檔的工具，我們希望每個人都可以快速、舒适的記錄自己的所思所想，為此，語雀的文檔編輯器提供了強大的能力。

6、Database

6.1 dbdiagram.io

​​https://dbdiagram.io/home/​​

dbdiagram.io is a free, simple tool to draw database diagrams (ERDs) by typing DSL code. dbdiagram uses the popular DBML (Database Markup Language).

dbdiagram.io是一個快速上手的資料庫設計器，可幫助您使用其自己的特定于域的語言（DSL：Domain-specific language）繪制資料庫圖。

它們的定義語言非常簡單，使用鍵盤即可輕松進行編輯/複制

專注于繪制資料庫關系圖

線上儲存和共享圖表

專為開發人員，DBA，資料分析師而設計

UI簡潔，并包含有漂亮的圖表。

6.2 sqldbm

​​https://sqldbm.com/Home/​​

SqlDBM是最流行的基于網絡的資料模組化工具之一。SqlDBM支援SQL Server、MySQL、PostgreSQL、Snowflake和Amazon Redshift。它為資料模組化和視圖模式選項提供了一個直覺的界面，使你能夠專注于模型的某個特定部分。

SqlDBM提供了許多功能，如ALTER腳本、團隊協作、DB和DW轉換、自動布局以及許多導出選項，包括SQL和文檔導出能力。SqlDBM有一個項目的免費版本。

6.3 QuickDBD

​​https://www.quickdatabasediagrams.com/​​

It’s free and registration is not required.

7、UML

7.1 plantuml

​​https://plantuml.com/zh/​​

PlantUML是一個可以讓你快速編寫UML圖的元件。

PlantUML支援順序圖，用例圖，類圖，對象圖，活動圖 (舊文法)，元件圖，部署圖，狀态圖，時序圖。

PlantUML也支援以下非UML圖。JSON資料，YAML資料，網絡圖(nwdiag)，線框圖形界面或UI模拟（Salt），架構圖，規範和描述語言（SDL），Ditaa圖，甘特圖，思維導圖圖示，工作分解結構圖（WBS），用AsciiMath或JLaTeXMath符号進行數學計算，實體關系圖(IE/ER)。

• 例子1：

PlantUML -> UML圖: 你好，愛看書的小沐！      

• 例子2：

@startuml
!define Junction_Or circle #black
!define Junction_And circle #whitesmoke

Junction_And JunctionAnd
Junction_Or JunctionOr

archimate #Technology "My Server" as vpnServerA <<technology-device>>

rectangle GO #lightgreen
rectangle STOP #red
rectangle WAIT #orange
GO -up-> JunctionOr
STOP -up-> JunctionOr
STOP -down-> JunctionAnd
WAIT -down-> JunctionAnd
@enduml      

7.2 Graphviz

​​https://graphviz.org/​​ Graphviz是開源的圖形可視化軟體。圖形可視化是一種将結構資訊表示為抽象圖形和網絡圖的方法。它在網絡，生物資訊學，軟體工程，資料庫和網頁設計，機器學習以及其他技術領域的可視化界面中具有重要的應用。

• 例子1：

graph Color_wheel {
  graph [
    layout = neato
    label = "Color wheel, 33 colors.\nNeato layout"
    labelloc = b
    fontname = "Helvetica,Arial,sans-serif"
    start = regular
    normalize = 0
  ]
  node [
    shape = circle
    style = filled
    color = "#00000088"
    fontname = "Helvetica,Arial,sans-serif"
  ]
  edge [
    len = 2.7
    color = "#00000088"
    fontname = "Helvetica,Arial,sans-serif"
  ]
  subgraph Dark {
    node [fontcolor = white width = 1.4]
    center [width = 1 style = invis shape = point]
    center -- darkred [label = "0°/360°"]
    darkred [fillcolor = darkred]
    brown [fillcolor = brown]
    brown -- center [label = "30°"]
    olive [fillcolor = olive]
    olive -- center [label = "60°"]
    darkolivegreen [fillcolor = darkolivegreen fontsize = 10]
    darkolivegreen -- center [label = "90°"]
    darkgreen [fillcolor = darkgreen]
    darkgreen -- center [label = "120°"]
    "dark hue 0.416" [color = ".416 1 .6" fontcolor = white]
    "dark hue 0.416" -- center [label = "150°"]
    darkcyan [fillcolor = darkcyan]
    darkcyan -- center [label = "180°"]
    "dark hue 0.583" [color = ".583 1 .6" fontcolor = white]
    "dark hue 0.583" -- center [label = "210°"]
    darkblue [fillcolor = darkblue]
    darkblue -- center [label = "240°"]
    "dark hue 0.750" [color = ".750 1 .6"]
    "dark hue 0.750" -- center [label = "270°"]
    darkmagenta [fillcolor = darkmagenta]
    darkmagenta -- center [label = "300°"]
    "dark hue 0.916" [color = ".916 1 .6"]
    "dark hue 0.916" -- center [label = "330°"]
  }
  subgraph Tue {
    node [width = 1.3]
    "hue 0.083" -- brown
    "hue 0.083" [color = ".083 1 1"]
    "hue 0.125" [color = ".125 1 1"]
    "hue 0.166" -- olive
    "hue 0.166" [color = ".166 1 1"]
    "hue 0.208" [color = ".208 1 1"]
    "hue 0.250" -- darkolivegreen
    "hue 0.250" [color = ".250 1 1"]
    "hue 0.291" [color = ".291 1 1"]
    "hue 0.333" -- darkgreen
    "hue 0.333" [color = ".333 1 1"]
    "hue 0.375" [color = ".375 1 1"]
    "hue 0.416" -- "dark hue 0.416"
    "hue 0.416" [color = ".416 1 1"]
    "hue 0.458" [color = ".458 1 1"]
    "hue 0.500" -- darkcyan
    "hue 0.500" [color = ".500 1 1"]
    "hue 0.541" [color = ".541 1 1"]
    node [fontcolor = white]
    "hue 0.000" [color = ".000 1 1"]
    "hue 0.000" -- darkred
    "hue 0.041" [color = ".041 1 1"]
    "hue 0.583" -- "dark hue 0.583"
    "hue 0.583" [color = ".583 1 1"]
    "hue 0.625" [color = ".625 1 1"]
    "hue 0.666" -- darkblue
    "hue 0.666" [color = ".666 1 1"]
    "hue 0.708" [color = ".708 1 1"]
    "hue 0.750" -- "dark hue 0.750"
    "hue 0.750" [color = ".750 1 1"]
    "hue 0.791" [color = ".791 1 1"]
    "hue 0.833" -- darkmagenta
    "hue 0.833" [color = ".833 1 1"]
    "hue 0.875" [color = ".875 1 1"]
    "hue 0.916" -- "dark hue 0.916"
    "hue 0.916" [color = ".916 1 1"]
    "hue 0.958" [color = ".958 1 1"]
    edge [len = 1]
    "hue 0.000" -- "hue 0.041" -- "hue 0.083" -- "hue 0.125" -- "hue 0.166" -- "hue 0.208"
    "hue 0.208" -- "hue 0.250" -- "hue 0.291" -- "hue 0.333" -- "hue 0.375" -- "hue 0.416"
    "hue 0.416" -- "hue 0.458" -- "hue 0.500" --"hue 0.541" -- "hue 0.583" -- "hue 0.625"
    "hue 0.625" -- "hue 0.666" -- "hue 0.708" -- "hue 0.750" -- "hue 0.791" -- "hue 0.833"
    "hue 0.833" -- "hue 0.875" -- "hue 0.916" -- "hue 0.958" -- "hue 0.000"
  }
  subgraph Main_colors {
    node [width = 2 fontsize = 20]
    red [fillcolor = red fontcolor = white]
    orangered [fillcolor = orangered]
    orange [fillcolor = orange]
    gold [fillcolor = gold]
    yellow [fillcolor = yellow]
    yellowgreen [fillcolor = yellowgreen]
    deeppink [fillcolor = deeppink fontcolor = white]
    fuchsia [label = "fuchsia\nmagenta" fillcolor = fuchsia fontcolor = white]
    purple [fillcolor = purple fontcolor = white]
    blue [fillcolor = blue fontcolor = white]
    cornflowerblue [fillcolor = cornflowerblue]
    deepskyblue [fillcolor = deepskyblue]
    aqua [fillcolor = aqua label = "aqua\ncyan"]
    springgreen [fillcolor = springgreen]
    green [fillcolor = green]
    purple -- fuchsia -- deeppink -- red
    cornflowerblue -- blue -- purple
    cornflowerblue -- deepskyblue -- aqua [len = 1.7]
    aqua -- springgreen -- green -- yellowgreen -- yellow
    yellow -- gold -- orange -- orangered -- red [len = 1.6]
    orange -- "hue 0.083"
    deeppink -- "hue 0.916"
    deeppink -- "hue 0.875"
    red -- "hue 0.000"
    yellowgreen -- "hue 0.250"
    blue -- "hue 0.666"
    yellow -- "hue 0.166"
    gold -- "hue 0.125"
    green -- "hue 0.333"
    springgreen -- "hue 0.416"
    aqua -- "hue 0.500"
    cornflowerblue -- "hue 0.583"
    deepskyblue -- "hue 0.541"
    purple -- "hue 0.791"
    purple -- "hue 0.750"
    fuchsia -- "hue 0.833"
  }
  subgraph Light_colors {
    node [width = 2 fontsize = 20]
    node [shape = circle width = 1.8]
    edge [len = 2.1]
    pink [fillcolor = pink]
    pink -- red
    lightyellow [fillcolor = lightyellow]
    lightyellow -- yellow
    mediumpurple [fillcolor = mediumpurple]
    mediumpurple -- purple
    violet [fillcolor = violet]
    violet -- fuchsia
    hotpink [fillcolor = hotpink]
    hotpink -- deeppink
    "light hue 0.250" [color = ".250 .2 1"]
    "light hue 0.250" -- yellowgreen
    lightcyan [fillcolor = lightcyan]
    lightcyan -- aqua
    lightslateblue [fillcolor = lightslateblue]
    lightslateblue -- blue
    lightgreen [fillcolor = lightgreen]
    lightgreen -- green
    lightskyblue [fillcolor = lightskyblue]
    lightskyblue -- deepskyblue
    peachpuff [fillcolor = peachpuff]
    peachpuff -- orange
    "light hue 0.416" [color = ".416 .2 1"]
    "light hue 0.416" -- springgreen
  }
  subgraph Tints {
    node [width = 1]
    edge [len = 2.4]
    "hue 0 tint" -- pink
    "hue 0 tint" [color = "0 .1 1"]
    "hue 0.041 tint" [color = ".041 .1 1"]
    "hue 0.083 tint" -- peachpuff
    "hue 0.083 tint" [color = ".083 .1 1"]
    "hue 0.125 tint" [color = ".125 .1 1"]
    "hue 0.166 tint" -- lightyellow
    "hue 0.166 tint" [color = ".166 .1 1"]
    "hue 0.208 tint" [color = ".208 .1 1"]
    "hue 0.250 tint" -- "light hue 0.250"
    "hue 0.250 tint" [color = ".250 .1 1"]
    "hue 0.291 tint" [color = ".291 .1 1"]
    "hue 0.333 tint" -- lightgreen
    "hue 0.333 tint" [color = ".333 .1 1"]
    "hue 0.375 tint" [color = ".375 .1 1"]
    "hue 0.416 tint" -- "light hue 0.416"
    "hue 0.416 tint" [color = ".416 .1 1"]
    "hue 0.458 tint" [color = ".458 .1 1"]
    "hue 0.5 tint" -- lightcyan
    "hue 0.5 tint" [color = ".5 .1 1"]
    "hue 0.541 tint" -- lightskyblue
    "hue 0.541 tint" [color = ".541 .1 1"]
    "hue 0.583 tint" [color = ".583 .1 1"]
    "hue 0.625 tint" [color = ".625 .1 1"]
    "hue 0.666 tint" -- lightslateblue
    "hue 0.666 tint" [color = ".666 .1 1"]
    "hue 0.708 tint" [color = ".708 .1 1"]
    "hue 0.750 tint" -- mediumpurple
    "hue 0.750 tint" [color = ".750 .1 1"]
    "hue 0.791 tint" [color = ".791 .1 1"]
    "hue 0.833 tint" -- violet
    "hue 0.833 tint" [color = ".833 .1 1"]
    "hue 0.875 tint" [color = ".875 .1 1"]
    "hue 0.916 tint" -- hotpink
    "hue 0.916 tint" [color = ".916 .1 1"]
    "hue 0.958 tint" [color = ".958 .1 1"]
    edge [len = 2]
    "hue 0 tint" -- "hue 0.041 tint" -- "hue 0.083 tint" -- "hue 0.125 tint" -- "hue 0.166 tint" -- "hue 0.208 tint"
    "hue 0.208 tint" -- "hue 0.250 tint" -- "hue 0.291 tint" -- "hue 0.333 tint" -- "hue 0.375 tint" -- "hue 0.416 tint"
    "hue 0.416 tint" -- "hue 0.458 tint" -- "hue 0.5 tint" --"hue 0.541 tint" -- "hue 0.583 tint" -- "hue 0.625 tint"
    "hue 0.625 tint" -- "hue 0.666 tint" -- "hue 0.708 tint" -- "hue 0.750 tint" -- "hue 0.791 tint" -- "hue 0.833 tint"
    "hue 0.833 tint" -- "hue 0.875 tint" -- "hue 0.916 tint" -- "hue 0.958 tint" -- "hue 0 tint"
  }
  // © 2022 Costa Shulyupin, licensed under EPL
}      

• 例子2：

digraph G {
  fnotallow="Helvetica,Arial,sans-serif"
  node [fnotallow="Helvetica,Arial,sans-serif"]
  edge [fnotallow="Helvetica,Arial,sans-serif"]

  subgraph cluster_0 {
    style=filled;
    color=lightgrey;
    node [style=filled,color=white];
    a0 -> a1 -> a2 -> a3;
    label = "process #1";
  }

  subgraph cluster_1 {
    node [style=filled];
    b0 -> b1 -> b2 -> b3;
    label = "process #2";
    color=blue
  }
  start -> a0;
  start -> b0;
  a1 -> b3;
  b2 -> a3;
  a3 -> a0;
  a3 -> end;
  b3 -> end;

  start [shape=Mdiamond];
  end [shape=Msquare];
}      

結語