Draw ASCII with Vim

其實要繪製 ASCII Art 有很多種辦法，包括現在還有在線繪製，只要動動鼠標就可以畫的很好。但對於我這個骨灰級 Vim 使用者來講，當然要找找怎麼樣才能在 Vim 裡輸出 ASCII 的方法。

Graph::Easy

這是一個 Perl 依賴模塊，使用方法簡單，可以輸出多種圖片格式，支持 Dot 語言以及 Graphviz。

語法：

graph {
    label: TCP Three-way Handshack
}

[ Client ] -- SYN = 1 Seq = X --> [ Server ] 
[ Server ] .. SYN = 1 ACK = X + 1 Seq = Y ..> [ Client ]
[ Client ] == ACK = Y + 1 Seq = Z ==> [ Server ]

上面的語句經過渲染後將會得到 TCP 三次握手的示意圖：

              TCP Three-way Handshake

           ACK = Y + 1 Seq = Z
  #=========================================#
  H                                         v
+--------+  SYN = 1 Seq = X               +--------+
| Client | -----------------------------> | Server |
+--------+                                +--------+
  ^        SYN = 1 ACK = X + 1 Seq = Y      :
  ...........................................

常用命令

    graph-easy [options] [inputfile [outputfile]]

            echo "[ Bonn ] - car -> [ Berlin ]" | graph-easy    // 渲染命令
            graph-easy --input=graph.dot --as_ascii     // 將 Dot 文件渲染為 ASCII 輸出
            graph-easy --html --output=mygraph.html graph.txt       // 輸出 HTML 文件
            graph-easy graph.txt graph.svg      // 輸出 SVG 文件
            graph-easy graph.txt --as_dot | dot -Tpng -o graph.png      // 將文件轉化為 Dot 格式後使用 Dot 渲染為 png 圖片
            graph-easy graph.txt --png      // 渲染為 png 格式
            graph-easy graph.vcg --dot      
            graph-easy graph.dot --gdl      
            graph-easy graph.dot --graphml

參數

• --input：指定輸入文件。eg. graph-easy --input=input.txt
• --output：指定輸出文件。eg. graph-easy --output=output.txt input.txt
• --as：指定輸出文件格式。
  eg. $ graph-easy --as=ascii input.txt
  或 $ graph-easy --ascii
• --from：指定輸入文件格式。
  eg. $ graph-easy --from=dot input output.txt 或 $ graph-easy --from_dot input output.txt

支持輸入格式

Graph::Easy 可以指定輸入文件格式，支持的格式有：

graphviz    the DOT language
                  txt         Graph::Easy text
                  vcg         VCG text
                  gdl         GDL (Graph Description Language) text

支持輸出格式

Graph::Easy 中輸出文件如不指定格式，則根據輸入文件的後綴確定，如無後綴，則默認輸出 ASCII 文件。

可以支持輸出的格式有：

    ascii       ASCII art rendering
    boxart      Unicode Boxart rendering
    html        HTML
    svg         Scalable Vector Graphics
    graphviz    the DOT language
    dot         alias for "graphviz"
    txt         Graph::Easy text
    vcg         VCG (Visualizing Compiler Graphs - a subset of GDL) text
     gdl         GDL (Graph Description Language) text
     graphml     GraphML

In addition, the following formats are understood and piped through the program specified with the --renderer option
              (default: dot):

    bmp         Windows bitmap
    gif         GIF 
    hpgl        HP-GL/2 vector graphic
    jpg         JPEG
    pcl         PCL printer language
    pdf         PDF
    png         PNG
    ps          Postscript 
    ps2         Postscript with PDF notations (see graphviz documentation)
                  tga         Targa bitmap
                  tif         TIFF bitmap

DrawIt

DrawIt 是一個 Vim 插件，可以直接在 Vim 中使用鍵盤操作進行繪製。

常用命令

以下所有命令必須在 Vim 命令模式下輸入。

\di         進入 DrawIt 模式
\ds         退出 DrawIt 模式

>           向右畫線
<           向左畫線
^           向上畫線
v           向下畫線

\v \> \^ \<     畫大箭頭

Ctrl + v        進入矩形選框狀態
\b              在選擇區域內畫矩形
\e              在選擇區域內畫橢圓
\f              填充區域

Space           擦除模式

OSI 模型

這是用 DrawIt 繪製的 OSI 模型。

            +--------------------------------+
            |       Application layer        |                                                                                         
            +--------------------------------+
            |       Presentation layer       |                                                                                          
            +--------------------------------+
            |         Session layer          |                                                                                       
            +--------------------------------+
            |        Transport layer         |                                                                                        
            +--------------------------------+
            |         Network layer          |                                                                                       
            +--------------------------------+
            |        Data Link layer         |                                                                                        
            +--------------------------------+
            |         Physical layer         |                                                                                        
            +--------------------------------+