Newtonian Physics Mockumentary
    Wondering what’s next for npm?Check out our public roadmap! »

    wavedrom

    2.6.9 • Public • Published

    Linux MacOS Windows Dependency Status NPM version Analytics PayPal donate button Coverage Status

    EDITOR | TUTORIAL

    Introduction

    WaveDrom is a Free and Open Source online digital timing diagram (waveform) rendering engine that uses javascript, HTML5 and SVG to convert a WaveJSON input text description into SVG vector graphics.

    WaveJSON is an application of the JSON format. The purpose of WaveJSON is to provide a compact exchange format for digital timing diagrams utilized by digital HW / IC engineers.

    The engine is using WaveDromSkin skin mechanism to render a complete picture.

    Server

    svg.wavedrom.com

    ![Alt](https://svg.wavedrom.com/github/<USER>/<REPO>/trunk/<PATH>/<FILENAME>.json5)
    
    ![signal step4](https://svg.wavedrom.com/github/wavedrom/wavedrom/trunk/test/signal-step4.json5)

    signal step4

    ![reg vl](https://svg.wavedrom.com/github/wavedrom/wavedrom/trunk/test/reg-vl.json5)

    reg vl

    <img src="https://svg.wavedrom.com/{WAVEDROM SOURCE}/>
    
    <img src="https://svg.wavedrom.com/{signal:[{name:'clk',wave:'p......'},{name:'bus',wave:'x.34.5x',data:'head body tail'},{name:'wire',wave:'0.1..0.'}]}"/>

    Web usage

    WaveDrom timing diagrams can be embedded into the web pages, blogs, and wikis to be rendered by the most of modern browsers.

    HTML pages

    There are three steps to insert WaveDrom diagrams directly into your page:

    1. Put the following line into your HTML page <header> or <body>:

    From a CDN:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/2.6.8/skins/default.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/2.6.8/wavedrom.min.js" type="text/javascript"></script>
    1. Set the onload event for the HTML body.
    <body onload="WaveDrom.ProcessAll()">
    1. Insert WaveJSON source inside HTML <body> wrapped with the <script> tag:
    <script type="WaveDrom">
    { signal : [
      { name: "clk",  wave: "p......" },
      { name: "bus",  wave: "x.34.5x",   data: "head body tail" },
      { name: "wire", wave: "0.1..0." },
    ]}
    </script>

    The script will find all <script type="WaveDrom"> instances and insert a timing diagram at that point.

    impress.js

    (http://wavedrom.com/impress.html)

    Blogs & Wikis

    ObservableHQ examples: (https://observablehq.com/collection/@drom/wavedrom)

    Blogger integration: (http://wavedrom.blogspot.com/2011/08/wavedrom-digital-timing-diagram-in-your.html)

    MediaWiki integration: (https://github.com/Martoni/mediawiki_wavedrom)

    Editor

    WaveDromEditor is an online real-time editor of digital timing diagrams based on the WaveDrom engine and WaveJSON format.

    Standalone WaveDromEditor

    Windows

    1. Download latest wavedrom-editor-v2.4.2-win-{ia32|x64}.zip release from here: releases
    2. Unzip it into a working directory.
    3. Run the editor: wavedrom-editor.exe

    Linux

    1. Download the latest wavedrom-editor-v2.4.2-linux-{ia32|x64}.tar.gz release from here: releases
    2. unzip-untar the package: tar -xvzf wavedrom-editor-v2.3.2-linux-x64.tar.gz
    3. Run the editor: ./WaveDromEditor/linux64/wavedrom-editor

    OS X

    1. Download the latest wavedrom-editor-v2.4.2-osx-x64.zip release from here: releases
    2. Unzip
    3. Run

    Community

    Please use the WaveDrom user group for discussions, questions, ideas, or whatever.

    Contributing

    Contributing

    License

    See LICENSE.

    Install

    npm i wavedrom

    DownloadsWeekly Downloads

    485

    Version

    2.6.9

    License

    MIT

    Unpacked Size

    578 kB

    Total Files

    50

    Homepage

    wavedrom.com

    Last publish

    Collaborators

    • avatar