2014-12-25 12:08:34

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

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

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

下面是几个具体的示例.

# Language: ASc+---------+||+--------------+|   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     |-------------+-------------/

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

# Language: aSC             开始|               v/-------| 中文  ||{d}|---> Open             -------/|               v              完成 ----------->

# Language: ASc              开始|               v/--------     否|  条件  |------------> 继续           --------/|| 是               V              结束

js的流程图

开始操作Yes or No?输入输出结束子程序yesnoFig.4开始操作Yes or No?好主意输入输出结束操作子程序APPROVEDn/an/aREJECTEDFig.5
网络资料

• ditta主页

• 利用Awk使ditaa支持日本语

• ditta的日本语化

• Creating diagrams in ASCII

• 那些年，我追过的绘图工具

• 使用jsPlumb制作流程图设计器

• MetaPost: 强大的图形语言

• 使用 EMACS ORG-MODE 画图

• 使用 Graphviz 生成自动化系统图

• DOT + graphviz 轻松画图神器

• Java5/6中的字体自定义设置与美化（Linux/Windows）

◆图片表格公式代码完整版请参看让Markdown支持ASCII流程图和JavaScript流程图◆

转载本文请联系原作者获取授权，同时请注明本文来自李继存科学网博客。
链接地址：https://wap.sciencenet.cn/blog-548663-853899.html

上一篇：石墨烯在线创建工具
下一篇：硅油滴落与弹簧下落