Chronogrammes et schémas logiques avec WaveDrom

Qu’est-ce que WaveDrom ?

WaveDrom est une bibliothèque JavaScript qui permet de créer des chronogrammes et des schémas de circuits logiques à partir de texte simple. Un guide est disponible pour apprendre à utiliser la syntaxe de WaveDrom et un editeur en ligne permet de créer et d’éditer facilement des diagrammes et schémas de circuits logiques. Il suffit ensuite de copier le code associé et de l’intégrer dans votre page.

Intégrer un chronogramme WaveDrom

Vous pouvez utiliser le shortcode wavedrom pour ajouter du contenu wavedrom. Par exemple:

{{<wavedrom>}}
  # Votre contenu wavedrom ici
{{</wavedrom>}}

Syntaxe

Le tableau ci dessous présente les différents caractères utilisés dans la syntaxe de WaveDrom pour décrire les formes d’ondes et les états des signaux.
Il sont utilisés dans la propriété wave de chaque signal pour définir son comportement dans le temps.

Exemples

Signaux

Code :

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

Editer en ligne

Résultat :

Horloges

Code :

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

Editer en ligne

Résultat :

Horloges + signaux

Code :

{{<wavedrom>}}
{ signal: [
  { name: "clk",  wave: "P......" },
  { name: "bus",  wave: "x.==.=x", data: ["head", "body", "tail", "data"] },
  { name: "wire", wave: "0.1..0." }
]}
{{</wavedrom>}}

Editer en ligne

Résultat :

Espacements et ellipses temporelles

Code :

{{<wavedrom>}}
{signal: [
  {name: 'clk', wave: 'P.....|...'},
  {name: 'dat', wave: 'x.345x|=.x', data: ['head', 'body', 'tail', 'data']},
  {name: 'req', wave: '0.1..0|1.0'},
  {},
  {name: 'ack', wave: '1.....|01.'}
]}
{{</wavedrom>}}

Editer en ligne

Résultat :

Groupes

Code :

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

Editer en ligne

Résultat :

Périodes et phases

Code :

{{<wavedrom>}}
{ signal: [
  { name: "CK",   wave: "P.......",                                              period: 2  },
  { name: "CMD",  wave: "x.3x=x4x=x=x=x=x", data: "RAS NOP CAS NOP NOP NOP NOP", phase: 0.5 },
  { name: "ADDR", wave: "x.=x..=x........", data: "ROW COL",                     phase: 0.5 },
  { name: "DQS",  wave: "z.......0.1010z." },
  { name: "DQ",   wave: "z.........5555z.", data: "D0 D1 D2 D3" }
]}
{{</wavedrom>}}

Editer en ligne

Résultat :

Échelle temporelle

Code :

{{<wavedrom>}}
{ signal: [
  { name: "clk",     wave: "p...." },
  { name: "Data",    wave: "x345x",  data: ["head", "body", "tail"] },
  { name: "Request", wave: "01..0" }
  ],
  config: { hscale: 1 }
}
{{</wavedrom>}}

Résultat :

• hscale = 1 Editer en ligne

• hscale = 2 Editer en ligne

• hscale = 3 Editer en ligne

head / foot

Code :

{{<wavedrom>}}
{signal: [
  {name:'clk',         wave: 'p....' },
  {name:'Data',        wave: 'x345x', data: 'a b c' },
  {name:'Request',     wave: '01..0' }
],
 head:{
   text:'WaveDrom example',
   tick:0,
   every:2
 },
 foot:{
   text:'Figure 100',
   tock:9
 },
}
{{</wavedrom>}}

Editer en ligne

Résultat :

tspan

{{<wavedrom>}}
{signal: [
  {name:'clk', wave: 'p.....PPPPp....' },
  {name:'dat', wave: 'x....2345x.....', data: 'a b c d' },
  {name:'req', wave: '0....1...0.....' }
],
head: {text:
  ['tspan',
    ['tspan', {class:'error h1'}, 'error '],
    ['tspan', {class:'warning h2'}, 'warning '],
    ['tspan', {class:'info h3'}, 'info '],
    ['tspan', {class:'success h4'}, 'success '],
    ['tspan', {class:'muted h5'}, 'muted '],
    ['tspan', {class:'h6'}, 'h6 '],
    'default ',
    ['tspan', {fill:'pink', 'font-weight':'bold', 'font-style':'italic'}, 'pink-bold-italic']
  ]
},
foot: {text:
  ['tspan', 'E=mc',
    ['tspan', {dy:'-5'}, '2'],
    ['tspan', {dy: '5'}, '. '],
    ['tspan', {'font-size':'25'}, 'B '],
    ['tspan', {'text-decoration':'overline'},'over '],
    ['tspan', {'text-decoration':'underline'},'under '],
    ['tspan', {'baseline-shift':'sub'}, 'sub '],
    ['tspan', {'baseline-shift':'super'}, 'super ']
  ],tock:-5
}
}
{{</wavedrom>}}

Editer en ligne

Résultat :

Flèches (arronndies)

{{<wavedrom>}}
{ signal: [
  { name: 'A', wave: '01........0....',  node: '.a........j' },
  { name: 'B', wave: '0.1.......0.1..',  node: '..b.......i' },
  { name: 'C', wave: '0..1....0...1..',  node: '...c....h..' },
  { name: 'D', wave: '0...1..0.....1.',  node: '....d..g...' },
  { name: 'E', wave: '0....10.......1',  node: '.....ef....' }
  ],
  edge: [
    'a~b t1', 'c-~a t2', 'c-~>d time 3', 'd~-e',
    'e~>f', 'f->g', 'g-~>h', 'h~>i some text', 'h~->j'
  ]
}
{{</wavedrom>}}

Editer en ligne

Résultat :

Flèches (droites)

{{<wavedrom>}}
{ signal: [
  { name: 'A', wave: '01..0..',  node: '.a..e..' },
  { name: 'B', wave: '0.1..0.',  node: '..b..d.', phase:0.5 },
  { name: 'C', wave: '0..1..0',  node: '...c..f' },
  {                              node: '...g..h' },
  {                              node: '...I..J',  phase:0.5 },
  { name: 'D', wave: '0..1..0',  phase:0.5 }
  ],
  edge: [
    'b-|a t1', 'a-|c t2', 'b-|-c t3', 'c-|->e t4', 'e-|>f more text',
    'e|->d t6', 'c-g', 'f-h', 'g<->h 3 ms', 'I+J 5 ms'
  ]
}
{{</wavedrom>}}

Editer en ligne

Résultat :

Fonctions

{{<wavedrom>}}
(function (bits, ticks) {
  var i, t, gray, state, data = [], arr = [];
  for (i = 0; i < bits; i++) {
    arr.push({name: i + '', wave: ''});
    state = 1;
    for (t = 0; t < ticks; t++) {
      data.push(t + '');
      gray = (((t >> 1) ^ t) >> i) & 1;
      arr[i].wave += (gray === state) ? '.' : gray + '';
      state = gray;
    }
  }
  arr.unshift('gray');
  return {signal: [
    {name: 'bin', wave: '='.repeat(ticks), data: data}, arr
  ]};
})(5, 16)
{{</wavedrom>}}

Editer en ligne

Résultat :

Intégrer un circuit logique WaveDrom

Wavedrom supporte également les circuits logiques. Vous pouvez les intégrer de la même manière que les signaux, en utilisant la syntaxe suivante :

{{<wavedrom>}}
  # Votre contenu wavedrom ici
{{</wavedrom>}}

Exemples

XOR

Code :

{{<wavedrom>}}
{ assign:[
  ["out",
    ["|",
      ["&", ["~", "a"], "b"],
      ["&", ["~", "b"], "a"]
    ]
  ]
]}
{{</wavedrom>}}

Editer en ligne

Résultat :

Binaire vers gray

Code :

{{<wavedrom>}}
{ assign:[
  ["g0", ["^", "b0", "b1"]],
  ["g1", ["^", "b1", "b2"]],
  ["g2", ["^", "b2", "b3"]],
  ["g3", ["=", "b3"]]
]}
{{</wavedrom>}}

Editer en ligne

Résultat :

Gray vers binaire

Code :

{{<wavedrom>}}
{ assign:[
  ["b3", "g3"],
  ["b2", ["^", "b3", "g2"]],
  ["b1", ["^", "b2", "g1"]],
  ["b0", ["^", "b1", "g0"]]
]}
{{</wavedrom>}}

Editer en ligne

Résultat :

74LS688

Code :

{{<wavedrom>}}
{ assign:[
  ["z", ["~&",
    ["~^", ["~", "p0"], ["~", "q0"]],
    ["~^", ["~", "p1"], ["~", "q1"]],
    ["~^", ["~", "p2"], ["~", "q2"]],
    "...",
    ["~^", ["~", "p7"], ["~", "q7"]],
    ["~","~en"]
  ]]
]}
{{</wavedrom>}}

Editer en ligne

Résultat :

Symboles IEC 60617

Code :

{{<wavedrom>}}
{ assign:[
  ["out",
    ["XNOR",
      ["NAND",
        ["INV", "a"],
        ["NOR", "b", ["BUF","c"]]
      ],
      ["AND",
        ["XOR", "d", "e", ["OR","f","g"]],
        "h"
      ]
    ]
  ]
]}
{{</wavedrom>}}

Editer en ligne

Résultat :