今天,我在考虑要怎么绘制一个稍微能看点的时序图,就是元器件数据手册里常见的那种。我最开始的想到是微软巨制 Visio,毕竟它实在很贵,应该有为它的用户准备好这些。但也许是我没有交钱买 Pro 的原因,我发现 Visio 里甚至并没有有点类似的图形。尽管我们可以用直线来搭,但……这确实太反人类了,于是我开始另谋他法。于是找到了 WaveDrom

元器件大厂都有自己的工具来给员工画时序图,或者他们写文档人都是用苦逼用“画图”搞的?这确实不得而知,但 WaveDrom 确实非常棒,简直是一针良药。也许是我知道的太晚了,不过让我们来看看一个样例:

最终效果图

已经绝对算是相当不错的效果,而它的工作方式也非常程序员:你写一个 JSON 文件,而软件将其翻译成图。而且这个工具还采用了时下流行到爆炸的 HTML+JavaScript,简直就像是机器人加深度学习还有那么点大数据那么火爆。甚至你还可以将 .js 嵌入到你的网页里,简直就是 Fashion 这个词本身。上面那幅图对应的代码是:

{signal: [
  {name: 'clk', wave: 'p.....|...'},
  {name: 'dat', wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data']},
  {name: 'req', wave: '0.1..0|1.0'},
  {},
  {name: 'ack', wave: '1.....|01.'}
]}

我们知道有些工具可以让你用 Markup 语言来画图表,但是鉴于图表确实比较复杂。特别是需要反复修改显示效果的时候,我觉得还是 Visio 来得方便。但用 Code 来定义序图确实是一个非常棒的主意,毕竟时序图就是那么回事儿了。