李皇谛>帮助页面>WaveDrom时序图编辑工具
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區域聲明的波形會因為字母大小寫的不同而呈現不同內容。- 可以用
{},換行。
但上面這些字母分別代表著什麼，這很讓人一頭霧水，因為官方教程沒有說明這些內容，還需要慢慢修改才能理解。
這可太麻煩了，相信還在讀中小學的學生還有正在工作的社畜都會叫苦連連。因為社會節奏的飛快，學習時間遭到大幅壓縮，因此學習成本呈現斷崖式增高態勢。
此時簡單明了的代碼對照表才是幫助學習的靈魂所在，話不多說，上對照表。
|
| ||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||