gitbook-plugin-wavedrom

WaveDrom Plugin for ~~GitBook~~ Honkit

This is a sample plugin for ~~GitBook~~ Honkit and is specially adapted for ~~GitBook~~ Honkit from WaveDrom. ~~Gitbook~~ Honkit WaveDrom plugin is used to select from WaveDrom and converting it into a picture.

WaveDrom is a JavaScript application. WaveJSON is a format that describes Digital Timing Diagrams. WaveDrom renders the diagrams directly inside the browser. Element "signal" is an array of WaveLanes. Each WaveLane has two mandatory fields: "name" and "wave".

Installation

npm install gitbook-plugin-wavedrom

Add this plugin into book.json.

{
  "plugins": ["wavedrom"]
}

Features

Support HTML, PDF, EPUB output(make sure your gitbook support SVG)
Support ```wavedrom code block quote
Multi code style support

Beautiful Waveform

Configuration

book.json add the wavedrom options

"pluginsConfig": {
  "wavedrom": {

  }
}

Usage

To include a wavedrom waveform, just wrap your definition in a "wavedrom" code block. For example:

```wavedrom
{ 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' },
]}
```

Also you can put in your book block as

{% wavedrom %}
{ 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' },
]}
{% endwavedrom %}

Set width and height parameter:

{% wavedrom width=800, height=800 %}
{ 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' },
]}
{% endwavedrom %}

Of course, you can also pass the parameters like this.

```wavedrom {width=600,height=1000}
{ 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' },
]}
```

If use both configure method, the code configure will overwrite the template configure.

Learn WaveDrom and more information

WaveDrom

Plugin	Description
gitbook-plugin-uml	A plug-in that use plantuml to draw beautiful pictures
gitbook-plugin-wavedrom	A plug-in that can draw waveforms and register tables
gitbook-plugin-sequence	A plug-in that can draw sequence diagrams
gitbook-plugin-flow	A plug-in that can draw flowchart.js diagrams
gitbook-plugin-echarts	A plug-in that can draw various charts such as bar/pie