正文之前
逛博客的時候發(fā)現(xiàn)一個工具Graphviz,因?yàn)榭吹轿闹凶髡咛岬搅擞肎raphviz畫一個圖，對此忽然聯(lián)想到我們程序員開發(fā)之前畫圖大概會有幾種方法谁榜。為此本文為此做出一些探討兄旬。
正文
我們先羅列下我們需要用到各種各樣圖的場景
1.UML的各種圖
2.程序流程圖
3.數(shù)據(jù)展示圖
4.思維導(dǎo)圖
畫圖目的是為了更直觀的展示狼犯，在描述復(fù)雜的系統(tǒng)/需求/對象關(guān)系/思路的時候余寥，有時候一圖勝過千言萬語，比如我本人就常常用思維導(dǎo)圖來整理一些點(diǎn)子悯森，一些項(xiàng)目結(jié)構(gòu)宋舷，一些讀書筆記。但是畫其它的圖思維導(dǎo)圖就不是很適合了瓢姻。 下面我們來一一尋找適合以上需求的軟件祝蝠。
Graphviz
下載
先去官網(wǎng)下載適合自己系統(tǒng)版本的，這里我down了mac版幻碱。
使用方式
這里我們主要研究生成層級圖的dot绎狭。 官網(wǎng)文檔在這里?一般是執(zhí)行dot命令來執(zhí)行.dot文檔來生成圖，但這樣太慢了褥傍。 因此更好的方法直接把.dot文檔拖到Graphviz程序上儡嘶，但有時候這樣也覺得太慢。 這時候你可以考慮用sublime的插件GraphvizPreview?只要你全選你的代碼就能然后按快捷鍵就能快速顯示圖恍风。如圖:?
graphviz 有兩種圖蹦狂，一種是無向圖graph，邊用–連接邻耕，一種是有向圖digraph鸥咖，邊用->連接。當(dāng)然你可以通過代碼設(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}//連接兩個
init->make_string;
edge[color = red]; // 連接線的顏色
main->printf[style=bold, label="100 times"];//線的 label
make_string[label = "make a\nstring"]// \n, 這個node的label御滩，注意和上一行的區(qū)別
node[shape = box, style = filled, color = ".7.3 1.0"];//一個node的屬性
execute->compare;
}
喜歡更深入學(xué)習(xí)的童鞋可以戳這里?這篇博文是我搜到一篇講解比較詳細(xì)的鸥拧。
OmniGraffle && Sketch && Keynote
OmniGraffle
Omini家族的軟件都是非常有特色，產(chǎn)品概念性非常完整削解，上節(jié)我們用Graphviz來用腳本生成圖片富弦，但是習(xí)慣了拖來拖去生成圖片的我們?nèi)绻脒吽伎歼吚L制原型或者流程圖，那么OmniGraffle就是非常好的選擇氛驮。
完全隨心所欲的畫圖腕柜，而且根據(jù)繪制的類型不同可以自己調(diào)整風(fēng)格。更方便的是你還可以去下載它的模板stencil矫废，來達(dá)到快速畫圖的目的盏缤。?
這里提供一些stencil的網(wǎng)站
1.https://stenciltown.omnigroup.com
2.https://www.graffletopia.com/ （收費(fèi)）
OmniGraffle1的優(yōu)勢我覺得是對于不怎么會畫圖的程序員，如果看到一些比較好的風(fēng)格蓖扑，可以通過直接編輯屬性達(dá)到快速模仿的目的唉铜。
sketch
同樣的軟件還有設(shè)計師神器sketch,但是個人覺得畫程序圖不怎么好使，雖然也能畫律杠，但是更偏向于設(shè)計向潭流。
當(dāng)然sketch的模板更加的多竞惋，主要是設(shè)計師們比較給力。而且還有很多豐富的插件灰嫉，具體可以點(diǎn)這里
keynote
在還沒有OmniGraffle的時候拆宛，如果遇到需要簡便畫圖的情況下，大多數(shù)人可能會選擇畫圖工具或者Ps?但是我當(dāng)時選擇了keynote?感覺在沒有工具的情況下熬甫，效果還行胰挑。
同理，可以替代的是PPT和WPS椿肩。
echarts
現(xiàn)在數(shù)據(jù)表示最強(qiáng)大的圖表制作軟件之一就是echarts,直接去官網(wǎng)?
這個文檔這里就不給出了瞻颂，直接官網(wǎng)查詢并使用。 對于數(shù)據(jù)展示我現(xiàn)階段還沒很深入的學(xué)習(xí)因此這里就不展開說明郑象。
D3.JS
前端數(shù)據(jù)圖形化展示鼻祖D3.js?對于這個我只能說只有你想不到贡这，沒有它做不到~ 有興趣的可以深入去學(xué)習(xí)。
思維導(dǎo)圖
關(guān)于思維導(dǎo)圖我推薦兩個厂榛，一個是ithoughtsX?盖矫，我一直用它來復(fù)習(xí)學(xué)習(xí)以及制作讀書筆記。?
?win下也有類似的軟件需要大家自己尋找击奶。
一個是在線版的百度腦圖辈双。?
總結(jié)
就我個人而言，我還是更加推薦OmniGraffle柜砾，當(dāng)然大家看各自喜好選擇湃望。我覺得在開發(fā)之前，先畫圖梳理一下思路痰驱，然后再配合詳細(xì)的文檔說明证芭，在開發(fā)中把百分50的時間用在設(shè)計思考上，我們在編碼的時候才會事半功倍担映。
以上一些資料我放到了Github上的瞎折騰
