layout: post title: 让Markdown支持ASCII流程图和JavaScript流程图 categories:
计算机领域中一直存在两种不同的理念并彼此竞争, 可视化与可控化, 或称为所见即所得与所愿即所得. 前者是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>  含中文的测试, 虽然网上提到方法使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>  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>2015-01-22 13:23:45 豪情512 赞。
2015-01-23 08:09:48 Jerkwin 谢谢.