推薦一個製作「ASCII 流程圖」工具——Graph Easy

coding01發表於2019-03-03
ASCII流程圖

我不止一次看到類似「知乎」網站那種 Console 上直接輸出這種「ASCII 文字」。

上一次我在借鑑一篇高大上的文章《Serverless實戰：打造個人閱讀追蹤系統》 insights.thoughtworks.cn/serverless-… 時，
裡面就有個流程圖：

當時就想自己能不能也畫一個「ASCII 文字流程圖」，並且可以直接放到程式碼裡，作為程式碼註釋，提升下「逼格」呢？

上網一搜，還真有這種通過程式碼或者命令列就能實現的工具，並且還可以直接複製貼上使用，完全符合我等程式猿的裝逼需求 —— Graph Easy

Graph Easy

Graph::Easy 是一個處理圖形DSL的Perl模組，它有如下功能：

  1. 提供了一種易懂，可讀性很強的圖形描述語言
  2. 一種支援 ASCII Art 的基於網格的佈局器
  3. 可以匯出為 Graphviz, VCG (Visualizing Compiler Graphs), GDL (Graph Description LAnguages) 和 GraphML 格式。
  4. 可以從 Graphviz, VCG 和 GDL 匯入影象。

摘自：www.gitbook.com/book/weishu…

總之，Graph Easy 是一個很 geek 的一個繪圖工具。它基於 Command Line，可以輕鬆的繪製 ASCII 字元圖，同時還能匯出成 HTML，SVG 等多種格式。

安裝 Graph Easy

自用 Mac 筆記本，所以安裝起來簡單，只需要三條命令：

// 1. 
brew install graphviz

// 2. 安裝 cpan，一路「回車」
cpan

// 3. 安裝 Graph Easy
sudo cpan Graph:Easy複製程式碼

使用 Graph Easy

1. 來點簡單的：

$ graph-easy <<< '[a]->[b]'複製程式碼

輸出：

+---+ +---+
| a | --> | b |
+---+ +---+

2. 來點長鏈：

% graph-easy <<< '[a]->[b]->[c]->[d]->[e]'複製程式碼

輸出：

3. 來個分支：

% graph-easy <<< '[a]->[b]->[c][b]->[d]->[e]'複製程式碼

輸出：

4. 來個閉環：

% graph-easy <<< '[a]->[b]->[c]->[b]->[d]->[e]'複製程式碼

輸出：

5. 來個合流：

% graph-easy <<< '[a]->[b]->[c][d]->[e]->[b]'複製程式碼

輸出：

6. 流程之間需要文字說明的

% graph-easy <<< '[a]->[b]->{label:"true";}[c]->[d]->{label:"FeedBack";}[a]'複製程式碼

輸出：

如：結點 b 到結點 c 需要加個條件說明等。

7. 當然，我們有時候需要從上至下的畫流程圖

% graph-easy <<< 'graph{flow:south;}[上]->[中]->[下]'複製程式碼

輸出：

8. 如果流程圖複雜點的時候，我們可以將內容存於檔案中，然後讀檔案畫流程圖

% graph-easy ../test.txt複製程式碼

我們看看「test.txt」的內容：

9. 最後讓我們實現下上文的流程圖

test.txt 內如：

[Instapaper] {size: 2,7;}
[RSS(Feedly)] -> [Instapaper]{ origin: RSS(Feedly); offset: 2,0;}
[WeChat] -> [Instapaper]{ origin: WeChat; offset: 2,-6;}
[Website] -> [Instapaper]
[IFTTT]{size: 1,7;}
[Instapaper] -> [Diigo]{ origin: Instapaper; offset: 2,-2;}
[Instapaper] -> [IFTTT]{ origin: Instapaper; offset: 2,0;}
[Instapaper] -> [Evernote]{ origin: Instapaper; offset: 2,2;}
[Webtask(Serverless)]{size: 2,7;}
[IFTTT] -> [Webtask(Serverless)]{ origin: IFTTT; offset: 2,0;}
[Webtask(Serverless)] -> [Github]{ origin: Webtask(Serverless); offset: 2,-2;}
[Webtask(Serverless)] -> [ZenHub]{ origin: Webtask(Serverless); offset: 2,2}複製程式碼

總結

因為時間關係，沒能很好的調整每個節點的相對位置和大小，並沒有完全和上文一致的效果；但至少可以畫出「ASCII 流程圖」了，

試著複製到程式碼編輯器中，看看註釋效果：

感覺還不錯，你也可以試試哦~~~

「完」

coding01 期待您繼續關注

qrcode
qrcode

也很感謝您能看到這了

qrcode
qrcode

相關文章