WaveDrom时序图编辑工具
制图工具其它网页
制图工具其它网页
序言
WaveDrom是一个用于绘制时序图与逻辑门电路图的JavaScript便捷工具，可以直接运行在HTML网页上，亦或者通过GitHub下载源码与本地系统版，该工具免费、开源且商用不付费。
目前，李皇谛[更多]有将其收录至萌娘百科的计划，但完全没学习JavaScript。
| 🏠项目主页 | ✏️在线编辑器 | 🕮查看原始教程 |  访问GitHub |
基本语法
正常访问编辑器之后，根据教程，用户可直接以简易的文本语言进行绘图，最基本的时序图代码是这类格式：
{signal:
[
{ name: "Alfa",
wave: "01.zx=ud.23.456789"
}
]
}
编写完这类代码后，将会以下图形式呈现：
需要上传图片
仔细分析上述代码，可以发现name关键词跟随的是信号的名称，wave关键词跟随的是要呈现的时序图内容，至于signal则是向编译器说明里面的内容要在信号图（以下替换为“时序图”）区域呈现，这个区域声明作为一级关键词是不能省略的。
以下内容为基本编写格式，用< >框起来的内容为通配符，实际编写时要使用对应的英文单词写入才能实现对应效果。
{
<区域1声明>:
[
{<行1属性1>: '<行1内容1>', <行1属性2>:'<行1内容2>',<行1属性n>:'<行1内容n>'},
{<行2属性1>: '<行2内容1>', <行2属性2>:'<行2内容2>',<行2属性n>:'<行2内容n>'},
]
<区域2声明>:
[
{<行1属性1>: '<行1内容1>', <行1属性2>:'<行1内容2>',<行1属性n>:'<行1内容n>'},
{<行2属性1>: '<行2内容1>', <行2属性2>:'<行2内容2>',<行2属性n>:'<行2内容n>'},
]
}
- 跟HTML编译器相同的是，不论你加入了多少空格和换行符，都不会影响编译器呈现内容，只会让代码看起来更易于阅读而已，你也可以适当缩减空格与换行符减轻页面滚动压力。
- 如果不是用于直接呈现文本，只能使用🌙英文半角符号，记得检查你的输入法是否为☀️全角输入。
接下来看下面的多绘制区域代码。
{/*信号图注释*/
signal: [{name:'clk',wave:'p....'},{name:'Data',wave:'x345x',data:'abc'},{name:'Request', wave:'01..0'}],
head:{text:'WaveDrom example',tick:0,every:2},
foot:{text:'Figure 100',tock:9},
}
我们看到，这段代码还有与signal同级声明的head和foot，分别用于声明绘制区域为时序图的页眉和页脚。虽然它在官方教程里面放到后面介绍，但为了明确各级声明的重要性还是要提前说明，上述代码的呈现效果是这样的：
需要上传图片
只有严格按照格式与语法进行编写，才能让编译器生成你想要的时序图且内容准确无误。对编程语法有基本的了解之后，你就可以自由编写时序图了。
接下来的内容将按步骤帮助你编写多种类型的时序图。
字母与波形样式
上文介绍了绘制时序图的过程中需要遵循的基本语法，现在我们可以编写自己的时序图了。
接下来我们看一下这个实例：
{ 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' },
]}
呈现内容是这样的：
????
根据这个实例我们可以总结出三个特点：
- 每一个字母代表着一个时钟周期对应的波形。
wave区域声明的波形会因为字母大小写的不同而呈现不同内容。- 可以用
{},换行。
但上面这些字母分别代表着什么，这很让人一头雾水，因为官方教程没有说明这些内容，还需要慢慢修改才能理解。
这可太麻烦了，相信还在读中小学的学生还有正在工作的社畜都会叫苦连连。因为社会节奏的飞快，学习时间遭到大幅压缩，因此学习成本呈现断崖式增高态势。
此时简单明了的代码对照表才是帮助学习的灵魂所在，话不多说，上对照表。
|
| ||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||