让Markdown支持ASCII流程图和JavaScript流程图|Jerkwin

2014-12-25 12:08:34

计算机领域中一直存在两种不同的理念并彼此竞争, 可视化与可控化, 或称为所见即所得与所愿即所得. 前者是Windows的典型做法, 而后者是Linux的典型理念. 我却觉得, 若以中国人”惟精惟一, 允执厥中”的观念, 二者皆不可偏废, 取其中间, 所见近所得, 所愿亦可得. 也就是, 尽量直观, 同时提供方便的控制手段. 既考虑直接可读性, 也考虑易处理性, 直接可读性优先, 处理后更美观, 不处理也不很影响可读性.

以markdown为代表的书写格式正是走了这种处于Word与LaTex之间的道路. 对于简单的流程图, ASCIIArt就是所见近所得的, 而pic之类的更易控制. 有了ASCII格式的图后, 可以利用ditta这个Java小工具将其转化为图片, 这样更美观.

虽然网络上也有一些在线的ASCII流程图作图工具, 像我以前推荐过的ASCIIFlow, 但有时候作起复杂的图来还是很不方便, 这时候就可以使用那些更易控制的工具了. 基于JavaScript的流程图工具有不少, 用得较多的是flowchart.js, 详细的请参考网络上的资料吧.

下面是几个具体的示例.

bash
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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46	+---------+ \| \| +--------------+ \| NFS \|--+ \| \| \| \| \| +-->\| CacheFS \| +---------+ \| +----------+ \| \| /dev/hda5 \| \| \| \| \| +--------------+ +---------+ +-->\| \| \| \| \| \| \|--+ \| AFS \|----->\| FS-Cache \| \| \| \| \|--+ +---------+ +-->\| \| \| \| \| \| \| +--------------+ +---------+ \| +----------+ \| \| \| \| \| \| +-->\| CacheFiles \| \| ISOFS \|--+ \| /var/cache \| \| \| +--------------+ +---------+ +--------+ +-------+ +-------+ \| \| --+ ditaa +--> \| \| \| Text \| +-------+ \|diagram\| \|Document\| \|!magic!\| \| \| \| {d}\| \| \| \| \| +---+----+ +-------+ +-------+ : ^ \| Lots of work \| +-------------------------+ Color codes /----\ /----\ \|c33F\| \|cC02\| \| \| \| \| \----/ \----/ /----\ /----\ \|c1FF\| \|c1AB\| \| \| \| \| \----/ \----/ /-------------+-------------\ \|cRED RED \|cBLU BLU \| +-------------+-------------+ \|cGRE GRE \|cPNK PNK \| +-------------+-------------+ \|cBLK BLK \|cYEL YEL \| \-------------+-------------/

bash

+---------+
|         |                        +--------------+
|   NFS   |--+                     |              |
|         |  |                 +-->|   CacheFS    |
+---------+  |   +----------+  |   |  /dev/hda5   |
             |   |          |  |   +--------------+
+---------+  +-->|          |  |
|         |      |          |--+
|   AFS   |----->| FS-Cache |
|         |      |          |--+
+---------+  +-->|          |  |
             |   |          |  |   +--------------+
+---------+  |   +----------+  |   |              |
|         |  |                 +-->|  CacheFiles  |
|  ISOFS  |--+                     |  /var/cache  |
|         |                        +--------------+
+---------+

+--------+   +-------+    +-------+
|        | --+ ditaa +--> |       |
|  Text  |   +-------+    |diagram|
|Document|   |!magic!|    |       |
|     {d}|   |       |    |       |
+---+----+   +-------+    +-------+
    :                         ^
    |       Lots of work      |
    +-------------------------+

Color codes

/----\ /----\
|c33F| |cC02|
|    | |    |
\----/ \----/
/----\ /----\
|c1FF| |c1AB|
|    | |    |
\----/ \----/

/-------------+-------------\
|cRED RED     |cBLU BLU     |
+-------------+-------------+
|cGRE GRE     |cPNK PNK     |
+-------------+-------------+
|cBLK BLK     |cYEL YEL     |
\-------------+-------------/

Fig. 1

含中文的测试, 虽然网上提到方法使ditta支持中文, 但字体有点丑, 折腾Java也没有效果.

bash
1 2 3 4 5 6 7 8 9 10	开始 \| v /-------\ \| 中文 \| \| {d} \| ---> Open \-------/ \| v 完成 ----------->

bash
1 2 3 4 5 6 7 8 9 10	开始 \| v /--------\ 否 \| 条件 \|------------> 继续 \--------/ \| \| 是 V 结束

Fig. 3

js的流程图

bash
1 2 3 4 5 6 7 8 9 10 11	st=>start: 开始:>http://www.google.com[blank] e=>end: 结束:>http://www.google.com op1=>operation: 操作 sub1=>subroutine: 子程序 cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: 输入输出 st->op1->cond cond(yes)->io->e cond(no)->sub1(right)->op1

bash

st=>start: 开始:>http://www.google.com[blank]
e=>end:    结束:>http://www.google.com
op1=>operation: 操作
sub1=>subroutine: 子程序
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: 输入输出

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

st=>start: 开始:>http://www.google.com[blank]
e=>end:    结束:>http://www.google.com
op1=>operation: 操作
sub1=>subroutine: 子程序
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: 输入输出

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

</br>Fig.1

bash
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15	st=>start: 开始\|past:>http://www.google.com[blank] e=>end: 结束\|future:>http://www.google.com op1=>operation: 操作\|past op2=>operation: 操作\|current sub1=>subroutine: 子程序\|invalid cond=>condition: Yes or No?\|approved:>http://www.google.com c2=>condition: 好主意\|rejected io=>inputoutput: 输入输出\|future st->op1(right)->cond cond(yes, right)->c2 cond(no)->sub1(left)->op1 c2(yes)->io->e c2(no)->op2->e

bash

st=>start: 开始|past:>http://www.google.com[blank]
e=>end: 结束|future:>http://www.google.com
op1=>operation: 操作|past
op2=>operation: 操作|current
sub1=>subroutine: 子程序|invalid
cond=>condition: Yes
or No?|approved:>http://www.google.com
c2=>condition: 好主意|rejected
io=>inputoutput: 输入输出|future

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

st=>start: 开始|past:>http://www.google.com[blank]
e=>end: 结束|future:>http://www.google.com
op1=>operation: 操作|past
op2=>operation: 操作|current
sub1=>subroutine: 子程序|invalid
cond=>condition: Yes 
or No?|approved:>http://www.google.com
c2=>condition: 好主意|rejected
io=>inputoutput: 输入输出|future

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

Fig.5

网络资料

2015-01-22 13:23:45 豪情512 赞。
2015-01-23 08:09:48 Jerkwin 谢谢.

让Markdown支持ASCII流程图和JavaScript流程图

网络资料

评论