在上一篇《全棧工程師的百寶箱：黑魔法之文檔篇》我們介紹了一些文檔工具，今天讓我來(lái)分享一下躁锁，我常用的一些圖形工具，主要有兩類：
- 流程圖
- 數(shù)據(jù)可視化
流程圖：Graphviz
說(shuō)到流程圖還是再次提及一下，我們之前說(shuō)到的Graphviz 串塑。
Graphviz （英文：Graph Visualization Software的縮寫(xiě)）是一個(gè)由AT&T實(shí)驗(yàn)室啟動(dòng)的開(kāi)源工具包，用于繪制DOT語(yǔ)言腳本描述的圖形北苟。它也提供了供其它軟件使用的庫(kù)桩匪。
它的主要特點(diǎn)是代碼生成圖像，并且足夠的簡(jiǎn)單友鼻。
在我的那個(gè)“Web Developer 成長(zhǎng)路線圖”(GitHub: https://github.com/phodal/developer)里傻昙，就是用這個(gè)工具生成下面這個(gè)復(fù)雜的圖形。
而其代碼特別簡(jiǎn)單——和我們平時(shí)表達(dá)的手法是一樣的彩扔，即：
"包管理" -> "包發(fā)布" -> "自動(dòng)部署"
"CLI" -> "部署"
"腳本語(yǔ)言(Bash,Perl,Ruby,Python etc)" -> "部署"
"腳本語(yǔ)言(Bash,Perl,Ruby,Python etc)" -> "構(gòu)建"
"*nix" -> "軟件編譯" -> "部署"
"構(gòu)建" -> "軟件編譯"
Graphviz有一個(gè)大的優(yōu)點(diǎn)和弱點(diǎn)是：自動(dòng)生成妆档，導(dǎo)致畫(huà)線的時(shí)候很出現(xiàn)出問(wèn)題。接著虫碉，我們就來(lái)看看手動(dòng)畫(huà)線的例子贾惦。
流程圖： Visio vs Dia vs OmnIGraffle
在Windows世界里，在這一類的工具里面最常見(jiàn)的算是Visio:
遺憾的是敦捧，它并不支持在Mac OS上使用须板。而且，它并不在我購(gòu)買的Office 365套裝里绞惦。
在Mac世界里逼纸，最好的工具算是OmniGraffle，就是很貴——我們平時(shí)使用的是公司的Mac電腦济蝉，使用盜版軟件是有法律風(fēng)險(xiǎn)的杰刽。
在GNU/Linux世界里，我們使用Dia王滤。
Dia 是開(kāi)放源代碼的流程圖軟件贺嫂，是GNU計(jì)劃的一部分，程序創(chuàng)立者是Alexander Larsson雁乡。Dia使用單一文件界面模式第喳，類似于GIMP與Inkscape。 Dia將多種需求以模塊化來(lái)設(shè)計(jì)踱稍，如流程圖曲饱、網(wǎng)絡(luò)圖悠抹、電路圖等。各模塊之間的符號(hào)仍是可以通用的扩淀，并沒(méi)有限制楔敌。
順便安利一下，我最喜歡的操作系統(tǒng)OpenSuSE——簡(jiǎn)潔驻谆、尾長(zhǎng)卵凑、綠色。
OpenSuSE在KDE桌面下效果最贊了——因?yàn)镵DE和OpenSuSE都是德國(guó)制造胜臊∩茁總的來(lái)說(shuō)，會(huì)比Debian系的Debian和Ubunt象对，及RetHat系的CentOS及Fedora穩(wěn)定黑忱、漂亮。
令人遺憾的是這三個(gè)工具勒魔，我都用不了杨何。Mac對(duì)X Windows的支持不是一般的差，于是我就需要?jiǎng)e的替代工具沥邻。
在線流程圖：Processon
這個(gè)工具還是相當(dāng)好用，至少是在GxFxW內(nèi)比較快——我之前使用過(guò)Creately羊娃、draw.io唐全、Gliffy等等的一些工具，只是隨著版圖的擴(kuò)展蕊玷，很多地區(qū)都已經(jīng)“xx”了邮利。
不過(guò)遺憾的是：他們沒(méi)有給我廣告費(fèi)。
ProcessOn是一個(gè)在線協(xié)作繪圖平臺(tái)垃帅，為用戶提供最強(qiáng)大延届、易用的作圖工具！支持在線創(chuàng)作流程圖贸诚、BPMN方庭、UML圖、UI界面原型設(shè)計(jì)酱固、iOS界面原型設(shè)計(jì)等械念。
同樣的，在我的那個(gè)“Developer進(jìn)階書(shū)單”（GitHub: https://github.com/phodal/booktree)中运悲，就是用這個(gè)工具畫(huà)出規(guī)規(guī)矩矩的線龄减。
并且，它還是跨平臺(tái)的班眯。
各種圖： Word和Excel
由于翻譯和寫(xiě)書(shū)的需要希停，我成了一個(gè)Office 365訂閱用戶烁巫。于是發(fā)現(xiàn)在Word等一系列的Office工具中，自帶了一個(gè)SmartArt的工具：
可以畫(huà)出很多很有意思的圖形宠能，比如：
又或者是：
分分鐘就能畫(huà)一個(gè)的節(jié)奏亚隙。
腦圖： XMind
我想這個(gè)一般人都是知道的。
XMind思維導(dǎo)圖軟件被著名互聯(lián)網(wǎng)媒體Lifehacker評(píng)選為“最佳頭腦風(fēng)暴和思維導(dǎo)圖工具”及”最受歡迎的思維導(dǎo)圖軟件”棍潘。
它有一個(gè)很大的優(yōu)點(diǎn)是使用了全球最先進(jìn)的Eclipse RCP 軟件架構(gòu)恃鞋，支持跨平臺(tái)使用。它有一個(gè)很大的缺點(diǎn)是使用了全球最先進(jìn)的Eclipse RCP 軟件架構(gòu)亦歉，導(dǎo)致了有點(diǎn)卡恤浪。
相比于流程圖什么的，它只適合做腦圖肴楷。
如果你還在使用Eclipse水由，那么你應(yīng)該試試Intellij IDEA了。
各種圖：D3.js
D3.js（D3或Data-Driven Documents）是一個(gè)用動(dòng)態(tài)圖形顯示數(shù)據(jù)的JavaScript庫(kù)赛蔫，一個(gè)數(shù)據(jù)可視化的工具砂客。
與上面的工具相比，這個(gè)工具可能沒(méi)有那么方便呵恢。但是鞠值，作為一個(gè)數(shù)據(jù)可視化工具，它不僅僅可以做出各種炫酷的圖形渗钉。
還可以做出一個(gè)技能樹(shù)：
這個(gè)項(xiàng)目的GitHub見(jiàn)：https://github.com/phodal/sherlock
地圖：Leaflet
Leaflet 是一個(gè)為建設(shè)移動(dòng)設(shè)備友好的互動(dòng)地圖彤恶，而開(kāi)發(fā)的現(xiàn)代的、開(kāi)源的JavaScript 庫(kù)鳄橘。
雖然它與上面的圖形沒(méi)有啥關(guān)系声离，但是它帶了一個(gè)圖字啊。與Google Map原生的API瘫怜，或者OpenStreet相比术徊，它最大的優(yōu)點(diǎn)是對(duì)移動(dòng)設(shè)備支持好。
并且鲸湃，它也是一個(gè)可以根據(jù)數(shù)據(jù)（GEOJSON赠涮，地理數(shù)據(jù)）生成圖形的工具。
