Movatterモバイル変換

wavedrom/wavedromPublic

NotificationsYou must be signed in to change notification settings
Fork401
Star3.4k

🌊 Digital timing diagram rendering engine

wavedrom.com

License

MIT license

3.4k stars 401 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 674 Commits
.github		.github
bin		bin
lib		lib
skins		skins
test		test
unpacked		unpacked
vue		vue
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
package.json		package.json

Repository files navigation

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 aWaveJSON input text description into SVG vector graphics.

WaveJSON is an application of theJSON 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 usingWaveDromSkin skin mechanism to render a complete picture.

Server

svg.wavedrom.com

![Alt](https://svg.wavedrom.com/github/<USER>/<REPO>/<BRANCH>/<PATH>/<FILENAME>.json5)

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

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

<img src="https://svg.wavedrom.com/{WAVEDROM SOURCE}/>

<imgsrc="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 insertWaveDrom diagrams directly into your page:

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

From a CDN:

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/skins/default.js"type="text/javascript"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/wavedrom.min.js"type="text/javascript"></script>

Set theonload event for the HTML body.

<bodyonload="WaveDrom.ProcessAll()">

InsertWaveJSON source inside HTML<body> wrapped with the<script> tag:

<scripttype="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

WaveDromEditoris an online real-time editor of digital timing diagrams based on theWaveDrom engine andWaveJSON format.

Standalone WaveDromEditor

Windows

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

Linux

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