我們使用純文本寫(xiě)代碼，有了Markdown又可以使用純文本寫(xiě)文檔，那么對(duì)于更直觀的信息表達(dá)方式——圖片，能不能使用純文本描述呢？
另外，你是否見(jiàn)到過(guò)這樣的注釋：
沒(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)題等等繁瑣的格式，可以專注于創(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è)圖專門(mén)去學(xué)習(xí)perl;
這個(gè)軟件包的強(qiáng)大之處在于: 它定義了一套非常簡(jiǎ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用戶可以brew install graphviz；其他linux發(fā)行版參考官網(wǎng)。 - 安裝
perl；mac和linux用戶可以略過(guò)；一般系統(tǒng)自帶，沒(méi)有的話和windows一起去perl官網(wǎng)查詢?nèi)绾伟惭b; 據(jù)說(shuō)windows下有傻瓜包activeperl；請(qǐng)自行搜索。 - 安裝
cpan; 這個(gè)是perl的軟件包管理，類似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)容類似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/
