正文之前
逛博客的時(shí)候發(fā)現(xiàn)一個(gè)工具Graphviz,因?yàn)榭吹轿闹凶髡咛岬搅擞肎raphviz畫(huà)一個(gè)圖，對(duì)此忽然聯(lián)想到我們程序員開(kāi)發(fā)之前畫(huà)圖大概會(huì)有幾種方法。為此本文為此做出一些探討。
正文
我們先羅列下我們需要用到各種各樣圖的場(chǎng)景
1.UML的各種圖
2.程序流程圖
3.數(shù)據(jù)展示圖
4.思維導(dǎo)圖
畫(huà)圖目的是為了更直觀的展示，在描述復(fù)雜的系統(tǒng)/需求/對(duì)象關(guān)系/思路的時(shí)候，有時(shí)候一圖勝過(guò)千言萬(wàn)語(yǔ)，比如我本人就常常用思維導(dǎo)圖來(lái)整理一些點(diǎn)子，一些項(xiàng)目結(jié)構(gòu)，一些讀書(shū)筆記。但是畫(huà)其它的圖思維導(dǎo)圖就不是很適合了。 下面我們來(lái)一一尋找適合以上需求的軟件。
Graphviz
下載
先去官網(wǎng)下載適合自己系統(tǒng)版本的，這里我down了mac版。
使用方式
這里我們主要研究生成層級(jí)圖的dot。 官網(wǎng)文檔在這里?一般是執(zhí)行dot命令來(lái)執(zhí)行.dot文檔來(lái)生成圖，但這樣太慢了。 因此更好的方法直接把.dot文檔拖到Graphviz程序上，但有時(shí)候這樣也覺(jué)得太慢。 這時(shí)候你可以考慮用sublime的插件GraphvizPreview?只要你全選你的代碼就能然后按快捷鍵就能快速顯示圖。如圖:?
graphviz 有兩種圖，一種是無(wú)向圖graph，邊用–連接，一種是有向圖digraph，邊用->連接。當(dāng)然你可以通過(guò)代碼設(shè)置將邊框設(shè)置為你想要的，還有虛線，子圖等等功能，下面我們看網(wǎng)上摘抄的一段代碼
digraph G{
size = "4, 4";//圖片大小
main[shape=box];/*形狀*/
main->parse;
parse->execute;
main->init[style = dotted];//虛線
main->cleanup;
execute->{make_string; printf}//連接兩個(gè)
init->make_string;
edge[color = red]; // 連接線的顏色
main->printf[style=bold, label="100 times"];//線的 label
make_string[label = "make a\nstring"]// \n, 這個(gè)node的label，注意和上一行的區(qū)別
node[shape = box, style = filled, color = ".7.3 1.0"];//一個(gè)node的屬性
execute->compare;
}
喜歡更深入學(xué)習(xí)的童鞋可以戳這里?這篇博文是我搜到一篇講解比較詳細(xì)的。
OmniGraffle && Sketch && Keynote
OmniGraffle
Omini家族的軟件都是非常有特色，產(chǎn)品概念性非常完整，上節(jié)我們用Graphviz來(lái)用腳本生成圖片，但是習(xí)慣了拖來(lái)拖去生成圖片的我們?nèi)绻脒吽伎歼吚L制原型或者流程圖，那么OmniGraffle就是非常好的選擇。
完全隨心所欲的畫(huà)圖，而且根據(jù)繪制的類(lèi)型不同可以自己調(diào)整風(fēng)格。更方便的是你還可以去下載它的模板stencil，來(lái)達(dá)到快速畫(huà)圖的目的。?
這里提供一些stencil的網(wǎng)站
1.https://stenciltown.omnigroup.com
2.https://www.graffletopia.com/ （收費(fèi)）
OmniGraffle1的優(yōu)勢(shì)我覺(jué)得是對(duì)于不怎么會(huì)畫(huà)圖的程序員，如果看到一些比較好的風(fēng)格，可以通過(guò)直接編輯屬性達(dá)到快速模仿的目的。
sketch
同樣的軟件還有設(shè)計(jì)師神器sketch,但是個(gè)人覺(jué)得畫(huà)程序圖不怎么好使，雖然也能畫(huà)，但是更偏向于設(shè)計(jì)向。
當(dāng)然sketch的模板更加的多，主要是設(shè)計(jì)師們比較給力。而且還有很多豐富的插件，具體可以點(diǎn)這里
keynote
在還沒(méi)有OmniGraffle的時(shí)候，如果遇到需要簡(jiǎn)便畫(huà)圖的情況下，大多數(shù)人可能會(huì)選擇畫(huà)圖工具或者Ps?但是我當(dāng)時(shí)選擇了keynote?感覺(jué)在沒(méi)有工具的情況下，效果還行。
同理，可以替代的是PPT和WPS。
echarts
現(xiàn)在數(shù)據(jù)表示最強(qiáng)大的圖表制作軟件之一就是echarts,直接去官網(wǎng)?
這個(gè)文檔這里就不給出了，直接官網(wǎng)查詢(xún)并使用。 對(duì)于數(shù)據(jù)展示我現(xiàn)階段還沒(méi)很深入的學(xué)習(xí)因此這里就不展開(kāi)說(shuō)明。
D3.JS
前端數(shù)據(jù)圖形化展示鼻祖D3.js?對(duì)于這個(gè)我只能說(shuō)只有你想不到，沒(méi)有它做不到~ 有興趣的可以深入去學(xué)習(xí)。
思維導(dǎo)圖
關(guān)于思維導(dǎo)圖我推薦兩個(gè)，一個(gè)是ithoughtsX?，我一直用它來(lái)復(fù)習(xí)學(xué)習(xí)以及制作讀書(shū)筆記。?
?win下也有類(lèi)似的軟件需要大家自己尋找。
一個(gè)是在線版的百度腦圖。?
總結(jié)
就我個(gè)人而言，我還是更加推薦OmniGraffle，當(dāng)然大家看各自喜好選擇。我覺(jué)得在開(kāi)發(fā)之前，先畫(huà)圖梳理一下思路，然后再配合詳細(xì)的文檔說(shuō)明，在開(kāi)發(fā)中把百分50的時(shí)間用在設(shè)計(jì)思考上，我們?cè)诰幋a的時(shí)候才會(huì)事半功倍。
以上一些資料我放到了Github上的瞎折騰
