This plugin represents a first attempt at writing any plugin for b2Evolution blogging software. The WaveDrom plugin is copied from the Mermaid diagram plugin which was already quite close to what was required here, but simplified in order to avoid any interaction with Prism codeblocks.

• Syntax
• Example 1: "Step 2. Adding Clock"
• Example 2: "Step 5. The groups"
• Menu
• References

Syntax

You can edit and preview your waveform in the Wavedrom Editor and then paste between tags in the Markup editor (not WYSIWYG editor).

[wavedrom]
{}
[/wavedrom]

Here are two examples shamelessly copied from the WaveDrom Tutorial and rendered here.

Example 1: "Step 2. Adding Clock"

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

Example 2: "Step 5. The groups"

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

Menu

It turns out there is a right click menu associated with each rendering of a timing diagram allowing you to choose to save as a PNG (bitmap) or SVG (vector) graphic.

Next step is to work out how to submit the plugin back to b2Evolution for others to try.

References

1. WaveDrom
2. Wavedrom Editor