我們使用純文本寫(xiě)代碼，有了Markdown又可以使用純文本寫(xiě)文檔立帖，那么對(duì)于更直觀的信息表達(dá)方式——圖片芬探，能不能使用純文本描述呢？
另外厘惦，你是否見(jiàn)到過(guò)這樣的注釋?zhuān)?/p>
沒(méi)錯(cuò)，這種逼格極高的ASCII圖片注釋方式就是我們要討論的話題哩簿。
使用純ASCII文本表達(dá)圖像的方式有什么好處呢宵蕉？大致有下面幾點(diǎn)：
- 裝B；沒(méi)啥好解釋的节榜。
- 可以在代碼注釋里面用圖像充分表達(dá)信息羡玛；沒(méi)圖say個(gè)jb？一圖勝千言宗苍。迄今為止好像沒(méi)有什么IDE可以支持直接在代碼編輯里面放圖片的稼稿，在另外一些純文本的場(chǎng)合也是如此。比如RFC的文檔都是txt讳窟，里面很多圖都是純ASCII表達(dá)让歼。
- 你以為僅僅是一個(gè)純文本圖片這么簡(jiǎn)單？它可以轉(zhuǎn)換為普通的諸如png格式的真正的圖片丽啡，還支持SVG矢量圖谋右！
好了，也許有人說(shuō)markdown的一些拓展格式不也是支持流程圖的嗎补箍？它使用的flowchart.js 確實(shí)可以很好滴完成一些漂亮的流程圖改执，還有 plantuml和圖片DSL語(yǔ)言 dot及它的軟件包graphviz等；沒(méi)錯(cuò)坑雅，它們可以使用純文本表達(dá)圖像辈挂，但它們不是真正的圖像；無(wú)法嵌入文本代碼中裹粤，只有在經(jīng)過(guò)渲染之后才能直觀地看到圖终蒂。
又有人說(shuō)，我知道 asciiflow 這個(gè)網(wǎng)站遥诉，可以繪制這種流程圖后豫，完美解決我的需求。但是突那，你在手動(dòng)繪制的時(shí)候挫酿，是不是要考慮圖像的各種細(xì)節(jié)？大小愕难，放置位置早龟，對(duì)齊方式惫霸？我們關(guān)注的應(yīng)該是圖像本身，而不是如何繪制這個(gè)圖葱弟。markdown為什么這么易用壹店？就是因?yàn)槲覀儾挥藐P(guān)心文檔的格式，不用考慮什么字體芝加，幾級(jí)標(biāo)題等等繁瑣的格式硅卢，可以專(zhuān)注于創(chuàng)作本身。
姑且你已經(jīng)認(rèn)同了這種使用ASCII表達(dá)圖像方式的優(yōu)點(diǎn)藏杖，但是...這種圖難道要使用手一個(gè)個(gè)字符地敲出來(lái)嗎将塑？？如果真的這么做蝌麸，簡(jiǎn)直不要太麻煩点寥！光在前面添加一個(gè)空格，后面的所有行都需要改来吩；我們需要一個(gè)自動(dòng)化工具敢辩。
Graph::Easy
Graph::Easy 就是今天要介紹的主角；它是 perl的一個(gè)軟件包弟疆，可以使用perl代碼直接描述圖像戚长；當(dāng)然，我們肯定不會(huì)為了畫(huà)個(gè)圖專(zhuān)門(mén)去學(xué)習(xí)perl;
這個(gè)軟件包的強(qiáng)大之處在于: 它定義了一套非常簡(jiǎn)單易用的專(zhuān)門(mén)用來(lái)描述圖像的DSL（領(lǐng)域?qū)Ｓ谜Z(yǔ)言）,我們可以像寫(xiě)代碼一樣表達(dá)我們需要描述的圖像（放心怠苔，這個(gè)語(yǔ)法非常簡(jiǎn)單）历葛；不用關(guān)心圖像里面如何布局；這種語(yǔ)言經(jīng)過(guò)處理可以得到ASCII圖像嘀略，直接放在代碼注釋中恤溶；如果需要還可以轉(zhuǎn)換成png或者矢量圖等格式。
先舉個(gè)簡(jiǎn)單的例子帜羊，感受一下:
[ Bonn ] --> [ Koblenz ] --> [ Frankfurt ] --> [ Dresden ]
[ Koblenz ] --> [ Trier ] { origin: Koblenz; offset: 2, 2; }
--> [ Frankfurt ]
這種DSL經(jīng)過(guò)渲染之后得到的ASCII圖是這樣的：
+------+ +---------+ +-----------+ +---------+
| Bonn | --> | Koblenz | ----------------> | Frankfurt | --> | Dresden |
+------+ +---------+ +-----------+ +---------+
| ^
| |
| |
| +-------+ |
+-----------> | Trier | ------+
+-------+
安裝
- 首先需要安裝
graphviz軟件包咒程，可以在graphviz官網(wǎng)下載；mac用戶(hù)可以brew install graphviz讼育；其他linux發(fā)行版參考官網(wǎng)陌兑。 - 安裝
perl惨远；mac和linux用戶(hù)可以略過(guò)薄翅；一般系統(tǒng)自帶伙狐，沒(méi)有的話和windows一起去perl官網(wǎng)查詢(xún)?nèi)绾伟惭b; 據(jù)說(shuō)windows下有傻瓜包activeperl；請(qǐng)自行搜索痹籍。 - 安裝
cpan; 這個(gè)是perl的軟件包管理呢铆，類(lèi)似npm,pip,apt-get; mac下直接在命令行輸入cpan命令，一路next即可蹲缠。其他系統(tǒng)參考cpan官網(wǎng) - 安裝
Graph::Easy;這一步就很容易了棺克；在命令行輸入cpan進(jìn)入cpan shell悠垛；然后輸入install Graph::Easy即可。
使用
使用分為兩步
- 使用Graph::Easy DSL的語(yǔ)法描述圖像娜谊，存為文本文件确买，比如
simple.txt - 使用
graph-easy命令處理這個(gè)文件：graph-easy simple.txt
最簡(jiǎn)單的使用方式就是這樣；當(dāng)然纱皆，Graph::Easy 不僅僅支持自己的DSL語(yǔ)法湾趾，它還支持諸如dot 這種較為通用的圖像描述語(yǔ)言；可以直接讀取dot 格式的輸入派草，產(chǎn)生其他的諸如 ascii搀缠，png，svg格式的圖像澳眷。
語(yǔ)法
注釋
注釋用 # 表達(dá)；注意 # 之后蛉艾，一定需要加空格钳踊；由于歷史原因；Graph::Easy的顏色也使用了 # 勿侯，不加空格會(huì)解析失敗拓瞪。
##############################################################
# 合法的注釋
##############################################################
#有問(wèn)題的注釋
node { label: \#5; } # 注意轉(zhuǎn)義！
edge { color: #aabbcc; } # 可以使用顏色值
空格
空格通常沒(méi)有什么影響助琐，多個(gè)空字符會(huì)合并成一個(gè)祭埂，換行的空字符會(huì)忽略；下面的表述是等價(jià)的兵钮。
[A]->[B][C]->[D]
[ A ] -> [ B ]
[ C ] -> [ D ]
節(jié)點(diǎn)(Node)
用中括號(hào)括起來(lái)的就是節(jié)點(diǎn)蛆橡，我們簡(jiǎn)單可以理解為一些形狀；比如流程圖里面的矩形掘譬，圓等泰演；
[ Single node ]
[ Node A ] --> [ Node B ]
可以用逗號(hào)分割多個(gè)節(jié)點(diǎn)：
[ A ], [ B ], [ C ] --> [ D ]
上面的代碼圖像如下：
+---+ +---+ +---+
| A | --> | D | <-- | C |
+---+ +---+ +---+
^
|
|
+---+
| B |
+---+
邊(Edges)
將節(jié)點(diǎn)連接起來(lái)的就是邊；Graph::Easy 的DSL支持這幾種風(fēng)格的邊：
-> 實(shí)線
=> 雙實(shí)線
.> 點(diǎn)線
~> 波浪線
- > 虛線
.-> 點(diǎn)虛線
..-> dot-dot-dash
= > double-dash
可以給邊加標(biāo)簽葱轩，如下：
[ client ] - request -> [ server ]
結(jié)果如下：
+--------+ request +--------+
| client | ---------> | server |
+--------+ +--------+
屬性(Attributes)
可以給節(jié)點(diǎn)和邊添加屬性睦焕；比如標(biāo)簽，方向等靴拱；使用大括號(hào) {}表示垃喊，里面的內(nèi)容類(lèi)似css，attribute: value袜炕。
[ "Monitor Size" ] --> { label: 21"; } [ Big ] { label: "Huge"; }
上面的DSL輸入如下：
+----------------+ 21" +------+
| "Monitor Size" | -----> | Huge |
+----------------+ +------+
Graph::Easy提供了非常多的屬性; 另外本谜，Graph::Easy的文檔非常詳細(xì)，建議通讀一遍偎窘；了解其中的原理和細(xì)節(jié)耕突，對(duì)于繪圖和布局有巨大幫助笤成。有時(shí)間的話我就翻譯一下。
實(shí)例
語(yǔ)法是不是非常簡(jiǎn)單眷茁？有了這些知識(shí)炕泳，我們就可以建立自己的流程圖了；Have a try上祈！來(lái)個(gè)MVP模式的示意圖試試～
- 新建文件培遵，
vi mvp.txt; 輸入以下代碼：
[ View ] {rows:3} - Parse calls to -> [ Presenter ] {flow: south; rows: 3} - Manipulates -> [ Model ]
[ Presenter ] - Updates -> [ View ]
- 保存然后退出；命令行執(zhí)行
graph-easy mvp.txt, 輸入效果如下：
+------+ Parse calls to +--------------+
| | ----------------> | |
| View | | Presenter |
| | Updates | |
| | <---------------- | |
+------+ +--------------+
|
| Manipulates
v
+--------------+
| Model |
+--------------+
兩行代碼就搞定了登刺！自動(dòng)對(duì)齊籽腕，調(diào)整位置，箭頭纸俭，標(biāo)簽等等皇耗；我們完全不用管具體圖形應(yīng)該如何繪制，注意力集中在描述圖像本身揍很；還在等什么郎楼！趕緊試一試吧！窒悔！
原文：http://weishu.me/2016/01/03/use-pure-ascii-present-graph/
