［ 生活需要仪式感 ］

0%

使用Graph Easy来做炫酷的Ascii字符图

发表于 更新于 分类于 阅读次数： Valine： 
1
2
3
4
5
6
7
8
9
10
11
➜ graph-easy foo.txt

+--------+     +----------+     +------+
| 看电影  | <-- | 写完论文  | --> | 吃饭  |
+--------+     +----------+     +------+
                 |
                 |
                 v
               +----------+
               | 守望先锋  |
               +----------+

使用Graph Easy能帮助你绘出geek风满满的Ascii字符流程图。

入门实例

上面看到的一个简单流程图，用的代码仅仅是下面一行：

1
[写完论文] --> [守望先锋],[吃饭],[看电影]

使用ASCII字符图的好处很多：

  • 在项目说明README中避免了图例不能插入到文档中
  • 有效减少文档的大小
  • 便于进行版本控制
  • 效果很炫目很骚(´▽｀)

如何使用Graph::Easy生成ASCII字符图

Graph Easy 的安装流程有些许繁杂，放在后面叙述。[不行,我要马上跳转去看！]

使用

直接把代码写在一个txt文件中，然后用终端graph-easy foo.txt调用即可。

基本语法

基本款图

代码：[a] -> [b] -> [c] -> [a]
效果如下：

1
2
3
4
5
  +-------------------+
  v                   |
+---+     +---+     +---+
| a | --> | b | --> | c |
+---+     +---+     +---+

带注释的基本款图

代码：[a] - text -> [b] - Or2.in -> [c]
效果如下：

1
2
3
+---+  text   +---+  Or2.in   +---+
| a | ------> | b | --------> | c |
+---+         +---+           +---+

注意要有空格噢！

各种样式的边

graph-easy支持这几种风格：

1
2
3
4
5
6
7
8
->    实线
=>    双实线
.>    点线
~>    波浪线
- >   虚线
.->   点虚线
..->  点点虚线[手动微笑]
= >   有空格的实线

高阶语法

高阶语法的关键在于引入了属性这个概念，从而进一步个性化显示。
属性在代码中用键值对{attribut:value}来表示，面将介绍几个我认为比较常用的属性设置。

设置边的流向

方法是{flow:south}，方向可以是north/south/east/west(北/南/东/西)，也可以是left/right/up/down（左/右/上/下），任君选择～
代码是[a]{flow:south}->[b]->[c]
效果如下：

1
2
3
4
5
6
7
8
9
+---+
| a |
+---+
  |
  |
  v
+---+     +---+
| b | --> | c |
+---+     +---+

边流向可以设置针对某一个框图发出的边做设置，也可以设置全局边流向，代码是在文件第一行输入graph{flow:south;}

设置款图的“宽度”

方法是{rows:3}
代码是[a]{rows:3}->[b]->[c]->[a]
效果如下：

1
2
3
4
5
6
+---+     +---+     +---+
|   | --> | b | --> | c |
| a |     +---+     +---+
|   |                 |
|   | <---------------+
+---+

如果被设定的款图实际上用不到这么多的宽度，他就不会如愿变成你想要的大小噢，你可以自己动手尝试[a]{rows:3}->[b]->[c]

设置用于分组的环绕线框图

方法是(backend: [a]->[b])
代码是

1
2
(backend: [a]->[b])
[b]->[c]

效果图如下：

1
2
3
4
5
6
7
8
+ - - - - - - - - - - -+
' backend:             '
'                      '
' +--------+     +---+ '     +---+
' |   a    | --> | b | ' --> | c |
' +--------+     +---+ '     +---+
'                      '
+ - - - - - - - - - - -+

设置无边框的框图

方法是{border:none}
代码是[a]{border:none}->[b]->[c]{border:none}
效果如下：

1
2
3
       +---+
a  --> | b | -->  c
       +---+

设置虚线框图

方法是{border:1px dotted black}
代码是[a]->[b]{border:1px dotted black}->[c]
效果如下：

1
2
3
+---+     .....     +---+
| a | --> : b : --> | c |
+---+     :...:     +---+

注意点

  1. 属性中flow与rows不能同时使用，不然会失效
  2. 兼容的使用多属性，每个属性需要用;隔开，如[a]{rows:3;border:1px dotted black}
  3. Graph::Easy的语法其实有点类似HTML，会忽略空格。所以高阶方法3与后面这段代码等效=>(backend: [a]->[b])[b]->[c]
  4. 一对多的情况下，多方的每一方排列顺序,用户无法决定，他是按照多方中每一方的首字母顺序来排列，所以这是下面实例多方的每一方前头加数字的原因（本人能力有限，似乎没有找到更好的解决方法)

来一个高阶实例

描述一下OAuth2.0的授权认证流程图。
代码如下：

1
2
3
4
5
6
7
8
[ Client ]{rows:8;} -- (A) Authorizatoin Request --> [ 1.Resource Owner ]{rows:2;}
[ 1.Resource Owner ] -- (B) Authorizatoin Grant --> [ Client ]

[ Client ] -- (C) Authorizatoin Request --> [ 2.Authorizatoin Server ]{rows:2;}
[ 2.Authorizatoin Server ] -- (D) Access Token --> [ Client ]

[ Client ] -- (E) Access Token --> [ 3.Resource Server ]{rows:2;}
[ 3.Resource Server ] -- (F) Protected Resource --> [ Client ]

效果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
+--------+  (A) Authorizatoin Request   +------------------------+
|        | ---------------------------> |                        |
|        |                              |    1.Resource Owner    |
|        |  (B) Authorizatoin Grant     |                        |
|        | <--------------------------- |                        |
|        |                              +------------------------+
|        |  (C) Authorizatoin Request   +------------------------+
|        | ---------------------------> |                        |
| Client |                              | 2.Authorizatoin Server |
|        |  (D) Access Token            |                        |
|        | <--------------------------- |                        |
|        |                              +------------------------+
|        |  (E) Access Token            +------------------------+
|        | ---------------------------> |                        |
|        |                              |   3.Resource Server    |
|        |  (F) Protected Resource      |                        |
|        | <--------------------------- |                        |
+--------+                              +------------------------+

Graph::Easy输出中文格式有误解决方案

有大神道出了输出中文格式有误的原因：

UTF8 中，汉字是 3 字节，而对于显示来说，等宽字体的汉字是 2 倍普通字母宽。这样在排版时，你必须知道一个字符串在视觉上是多宽，才可能用 ascii 字符拼接出正确的方框和连线。
——云风

具体方法是在编译前修改@app/lib/Graph/Easy.pm&&@app/lib/Graph/Easy/Node.pm这2个文件给它打上补丁。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
diff --git a/lib/Graph/Easy.pm b/lib/Graph/Easy.pm
index 0ae40fd..b67bacc 100644
--- a/lib/Graph/Easy.pm
+++ b/lib/Graph/Easy.pm
@@ -1570,7 +1570,9 @@ sub as_ascii
   # select 'ascii' characters
   $self->{_ascii_style} = 0;

-  $self->_as_ascii(@_);
+  my $asc = $self->_as_ascii(@_);
+  $asc =~ s/(\x{FFFF})//g;
+  $asc;
   }

 sub _as_ascii
diff --git a/lib/Graph/Easy/Node.pm b/lib/Graph/Easy/Node.pm
index b58f538..6d7d7c7 100644
--- a/lib/Graph/Easy/Node.pm
+++ b/lib/Graph/Easy/Node.pm
@@ -1503,6 +1503,9 @@ sub label

   $label = $self->_un_escape($label) if !$_[0] && $label =~ /\\[EGHNT]/;

+  # placeholder for han chars
+  $label =~ s/([\x{4E00}-\x{9FFF}])/$1\x{FFFF}/g;
+
   $label;
   }

要了解更多，请直接围观云风博客相关文章。

Graph::Easy安装方法

主要介绍在MacOS系统上安装方法，本文模拟安装Graph::Easy版本为0.76。

  1. 首先在Graph::Easy的官方镜像点CPAN下载下载安装包Graph-Easy-0.76.tar.gz。
  2. 解压安装包=>tar -xzf Graph-Easy-0.76.tar.gz。
  3. 进入到解压的目录中cd Graph-Easy-0.76。
  4. 如果要解决中文输出问题，请把上面提到的patch文件更新到包中的指定文件中。
  5. 运行perl Makefile.PL来创建make文件，同时执行make test来运行测试套件。
  6. 如果所有的测试都PASS通过了，以超管理员权限执行编译：sudo make install。
  7. 完成安装了。可以创建一个写好的foo.txt并使用命令graph-easy foo.txt来测试效果。

[回头了解Graph::Easy更多有趣用法？]

还有没有傻瓜一点的方法？

有的有的，你可以使用一个可视化的ASCII字符图制作网站，这个网站也是个厉害得飞起的神奇。

asciiflow

我在了解这款Graph::Easy之前就是一直使用asciiflow来制作字符图的，可以说相当容易上手和保存。

但是不得不说，用过了Graph::Easy之后就对它爱不释手了，原因不仅仅因为熟悉语法后制图速度更快，最讨我欢喜的是Graph::Easy能够帮我自动排版布局，个性化设置也符合程序员思维，让我更加专注在内容的编辑上。希望你也会喜欢哈哈哈

参考