摘要：WaveDrom是一个免费开源的在线数字时序图渲染引擎。它可以使用JavaScript, HTML5和SVG来将时序图的WaveJSON描述转成SVG矢量图形，从而进行显示。WaveDrom可以嵌入到任何网页中。WaveDrom编辑器可在浏览器中运行，也可以安装在系统上，渲染引擎可以嵌入到任何网页中。

一、WaveDrom功能

绘制数字时序图、绘制寄存器图、绘制逻辑电路图

二、WaveDrom的使用

在线编辑器 https://wavedrom.com/editor.html
官网 https://wavedrom.com/

WaveDrom可以在线编辑也可以下载安装，可以在官网首页找到这两个入口。在线编辑方式，版本较新，但需要联网。下载安装方式，版本较官网旧一些，无需联网即可使用。

在编辑器中输入WaveJSON 格式的数字时序图描述，即可实时渲染出相应的数字时序图。aveJSON 格式是十分简单的，主要需要记忆的是各个符号所对应的波形。

三、绘制时序图

下面的代码将创建名为“Alfa”的1位信号，该信号随时间改变其状态。

{ "signal" : [{ "name": "Alfa", "wave": "01.zx=ud.23.456789" }] }

“wave”字符串中的每个字符都代表一个时间段。符号“将以前的状态再延长一段时间。下面是它的外观：

加时钟：数字时钟是一种特殊类型的信号。它在每个时间段内变化两次，可以有正负极性。它还可以在工作边缘上有一个可选标记。时钟块可以与其他信号状态混合，以产生时钟选通效应。代码如下：

{ signal: [{ name: "pclk", wave: 'p.......' },{ name: "Pclk", wave: 'P.......' },{ name: "nclk", wave: 'n.......' },{ name: "Nclk", wave: 'N.......' },{},{ name: 'clk0', wave: 'phnlPHNL' },{ name: 'clk1', wave: 'xhlhLHl.' },{ name: 'clk2', wave: 'hpHplnLn' },{ name: 'clk3', wave: 'nhNhplPl' },{ name: 'clk4', wave: 'xlh.L.Hx' },
]}

以及呈现的图表：

WaveLanes 可以统一在以数组形式表示的命名组中。['组名'， {...}， {...}， ...]数组的第一个条目是组的名称，这些组可以嵌套。

{signal: [{    name: 'clk',   wave: 'p..Pp..P'},['Master',['ctrl',{name: 'write', wave: '01.0....'},{name: 'read',  wave: '0...1..0'}],{  name: 'addr',  wave: 'x3.x4..x', data: 'A1 A2'},{  name: 'wdata', wave: 'x3.x....', data: 'D1'   },],{},['Slave',['ctrl',{name: 'ack',   wave: 'x01x0.1x'},],{  name: 'rdata', wave: 'x.....4x', data: 'Q2'},]
]}

四、时序图教程

网址：https://wavedrom.com/tutorial.html

里面包含多个示例，可以很好地对WaveDrom进行学习。

五、逻辑电路图教程

网址：https://wavedrom.com/tutorial2.html

里面讲解了逻辑电路图的绘制示例。

六、Github主页

WaveDrom Github https://github.com/wavedrom/wavedrom

七、VScode中使用Waveform

在VScode应用商店中搜索Waveform Render，这个就相当于WaveDrom

左边键入代码，右边会自动生成时序图，非常好用：

画出属于你的最漂亮的数字时序图—WaveDrom相关推荐

太酷炫了，我用python画出了北上广深的地铁路线动态图
今天教大家用python制作北上广深--地铁线路动态图,这可能是全网最全最详细的教程了. 坐标点的采集小五之前做过类似的地理可视化,不过都是使用网络上收集到的json数据.但很多数据其实是过时的,甚 ...
太酷炫了，我用 Python 画出了北上广深的地铁路线动态图
今天教大家用python制作北上广深--地铁线路动态图,这可能是全网最全最详细的教程了. 坐标点的采集小五之前做过类似的地理可视化,不过都是使用网络上收集到的json数据.但很多数据其实是过时的,甚 ...
使用Origin画出复杂网络博弈中合作率时间演化图(学术论文)
此图知识背景是囚徒困境下,取固定的背叛引诱值b,然后观察10万步的合作率演化图以下是图的说明: Fig. 4. (Color online) Fraction of cooperators ( ρC ...
labelme画出的标注json转换成二值标签图，并解决label全黑问题
1.打开anaconda,进入labelme,进入存放json文件的文件夹 2.在anaconda输入: labelme_json_to_dataset <文件名>.json 3.自动完成 ...
分享几个 Pyecharts 技巧，助你画出更直观/炫酷的图表
作者 | 俊欣来源 | 关于数据分析与可视化想必大家应该也已经看到很多关于数据分析的内容了,今天小编就为大家来分享一下国产可视化库pyecharts在绘制图表时一些的技巧,帮助读者画出更加酷炫以及 ...
画出微型计算机结构图,中级工792、画出计算机环形网络模式图.doc
中级工792.画出计算机环形网络模式图中级工792.画出计算机环形网络模式图. 画出计算机总线网络模式图. 画出计算机星形网络模式图. 画出单工通信方式图. 画出半双工通信方式图. 画出全双工通信方 ...
《思维导图应用实战》画出你的思维
<思维导图应用实战>画出你的思维文章目录 <思维导图应用实战>画出你的思维第一章画出思维导图第二章实现目标第三章做出正确的决策第四章指导日常生活第五章高效 ...
机械动作时序图怎么画_快速学习时序图:时序图简介、画法及实例
原标题:快速学习时序图:时序图简介.画法及实例时序图作为常用的UML交互图,可以直观的传达系统内外之间的交互过程,经常用在详细设计文档中.下面本文综合参考了多篇时序图的教程,根据作者的思路将时序图做 ...
如何在科研论文中画出漂亮的插图？（附代码）
来源:机器学习实验室本文约3300字,建议阅读5分钟. 本文给大家推荐几种在论文中画出漂亮的插图的方法. 方法一强烈推荐 Python 的绘图模块 matplotlib: python plott ...
用python绘制漂亮的图形-python如何画出漂亮的地图？
Python地图可视化库有大家熟知的pyecharts.plotly.folium,其他回答都有介绍,还有稍低调的bokeh.basemap.geopandas,也是地图可视化的利器. 首先介绍下bo ...

画出属于你的最漂亮的数字时序图—WaveDrom