仓库源文站点原文

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

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

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

下面是几个具体的示例.

<table class="highlighttable"><th colspan="2" style="text-align:left">bash</th><tr><td><div class="linenodiv" style="background-color: #f0f0f0; padding-right: 10px"><pre style="line-height: 125%"> 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</pre></div></td><td class="code"><div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%">+---------+ | | +--------------+ | NFS |--+ | | | | | +-->| CacheFS | +---------+ | +----------+ | | /dev/hda5 | | | | | +--------------+ +---------+ +-->| | | | | | |--+ | AFS |----->| FS-Cache | | | | |--+ +---------+ +-->| | | | | | | +--------------+ +---------+ | +----------+ | | | | | | +-->| CacheFiles | | ISOFS |--+ | /var/cache | | | +--------------+ +---------+ +--------+ +-------+ +-------+ | | --+ ditaa +--> | | | Text | +-------+ |diagram| |Document| |!magic!| | | | <span style="color: #666666">{</span>d<span style="color: #666666">}</span>| | | | | +---+----+ +-------+ +-------+ : ^ | Lots of work | +-------------------------+ Color codes /----<span style="color: #BB6622; font-weight: bold">\ </span>/----<span style="color: #BB6622; font-weight: bold">\</span> |c33F| |cC02| | | | | <span style="color: #BB6622; font-weight: bold">\-</span>---/ <span style="color: #BB6622; font-weight: bold">\-</span>---/ /----<span style="color: #BB6622; font-weight: bold">\ </span>/----<span style="color: #BB6622; font-weight: bold">\</span> |c1FF| |c1AB| | | | | <span style="color: #BB6622; font-weight: bold">\-</span>---/ <span style="color: #BB6622; font-weight: bold">\-</span>---/ /-------------+-------------<span style="color: #BB6622; font-weight: bold">\</span> |cRED RED |cBLU BLU | +-------------+-------------+ |cGRE GRE |cPNK PNK | +-------------+-------------+ |cBLK BLK |cYEL YEL | <span style="color: #BB6622; font-weight: bold">\-</span>------------+-------------/ </pre></div> </td></tr></table> ![Fig. 1](https://jerkwin.github.io/pic/flc-1.png) 含中文的测试, 虽然网上提到方法使ditta支持中文, 但字体有点丑, 折腾Java也没有效果. <table class="highlighttable"><th colspan="2" style="text-align:left">bash</th><tr><td><div class="linenodiv" style="background-color: #f0f0f0; padding-right: 10px"><pre style="line-height: 125%"> 1 2 3 4 5 6 7 8 9 10</pre></div></td><td class="code"><div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%">开始 | v /-------<span style="color: #BB6622; font-weight: bold">\</span> | 中文 | | <span style="color: #666666">{</span>d<span style="color: #666666">}</span> | ---> Open <span style="color: #BB6622; font-weight: bold">\-</span>------/ | v 完成 -----------> </pre></div> </td></tr></table> <table class="highlighttable"><th colspan="2" style="text-align:left">bash</th><tr><td><div class="linenodiv" style="background-color: #f0f0f0; padding-right: 10px"><pre style="line-height: 125%"> 1 2 3 4 5 6 7 8 9 10</pre></div></td><td class="code"><div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%">开始 | v /--------<span style="color: #BB6622; font-weight: bold">\ </span> 否 | 条件 |------------> 继续 <span style="color: #BB6622; font-weight: bold">\-</span>-------/ | | 是 V 结束 </pre></div> </td></tr></table> ![Fig. 3](https://jerkwin.github.io/pic/flc-3.png) js的流程图 <table class="highlighttable"><th colspan="2" style="text-align:left">bash</th><tr><td><div class="linenodiv" style="background-color: #f0f0f0; padding-right: 10px"><pre style="line-height: 125%"> 1 2 3 4 5 6 7 8 9 10 11</pre></div></td><td class="code"><div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><span style="color: #B8860B">st</span><span style="color: #666666">=</span>>start: 开始:>http://www.google.com<span style="color: #666666">[</span>blank<span style="color: #666666">]</span> <span style="color: #B8860B">e</span><span style="color: #666666">=</span>>end: 结束:>http://www.google.com <span style="color: #B8860B">op1</span><span style="color: #666666">=</span>>operation: 操作 <span style="color: #B8860B">sub1</span><span style="color: #666666">=</span>>subroutine: 子程序 <span style="color: #B8860B">cond</span><span style="color: #666666">=</span>>condition: Yes or No?:>http://www.google.com <span style="color: #B8860B">io</span><span style="color: #666666">=</span>>inputoutput: 输入输出 st->op1->cond cond<span style="color: #666666">(</span>yes<span style="color: #666666">)</span>->io->e cond<span style="color: #666666">(</span>no<span style="color: #666666">)</span>->sub1<span style="color: #666666">(</span>right<span style="color: #666666">)</span>->op1 </pre></div> </td></tr></table><pre style="display:none"><textarea name="flc" id="flc-1"> 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 </textarea></pre><figure id="fig-flc-1"></br><figurecaption>Fig.1</figurecaption></figure> <table class="highlighttable"><th colspan="2" style="text-align:left">bash</th><tr><td><div class="linenodiv" style="background-color: #f0f0f0; padding-right: 10px"><pre style="line-height: 125%"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15</pre></div></td><td class="code"><div class="highlight" style="background: #f8f8f8"><pre style="line-height: 125%"><span style="color: #B8860B">st</span><span style="color: #666666">=</span>>start: 开始|past:>http://www.google.com<span style="color: #666666">[</span>blank<span style="color: #666666">]</span> <span style="color: #B8860B">e</span><span style="color: #666666">=</span>>end: 结束|future:>http://www.google.com <span style="color: #B8860B">op1</span><span style="color: #666666">=</span>>operation: 操作|past <span style="color: #B8860B">op2</span><span style="color: #666666">=</span>>operation: 操作|current <span style="color: #B8860B">sub1</span><span style="color: #666666">=</span>>subroutine: 子程序|invalid <span style="color: #B8860B">cond</span><span style="color: #666666">=</span>>condition: Yes or No?|approved:>http://www.google.com <span style="color: #B8860B">c2</span><span style="color: #666666">=</span>>condition: 好主意|rejected <span style="color: #B8860B">io</span><span style="color: #666666">=</span>>inputoutput: 输入输出|future st->op1<span style="color: #666666">(</span>right<span style="color: #666666">)</span>->cond cond<span style="color: #666666">(</span>yes, right<span style="color: #666666">)</span>->c2 cond<span style="color: #666666">(</span>no<span style="color: #666666">)</span>->sub1<span style="color: #666666">(</span>left<span style="color: #666666">)</span>->op1 c2<span style="color: #666666">(</span>yes<span style="color: #666666">)</span>->io->e c2<span style="color: #666666">(</span>no<span style="color: #666666">)</span>->op2->e </pre></div> </td></tr></table> <pre style="display:none"><textarea name="flc" id="flc-2"> 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 </textarea></pre> <figure id="fig-flc-5"><figurecaption>Fig.5</figurecaption></figure>

网络资料

评论