hub / github.com/wavedrom/wavedrom

github.com/wavedrom/wavedrom @v2.1.2 sqlite

repository ↗ · DeepWiki ↗ · release v2.1.2 ↗

269 symbols 574 edges 53 files 0 documented · 0%

README

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>/master/<PATH>/<FILENAME>.json5)

signal step4

reg vl

Web usage

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

alt text 4+ 10+ 5.1+ 12+ 11

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>:

<script src="http://wavedrom.com/skins/default.js" type="text/javascript"></script>
<script src="http://wavedrom.com/wavedrom.min.js" type="text/javascript"></script>

or from a CDN:

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

2) Set the onload event for the HTML body.

<body onload="WaveDrom.ProcessAll()">

3) 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

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

Linux

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

OS X

Download the latest wavedrom-editor-v2.1.2-osx-x64.zip release from here: releases
Unzip
Run

Community

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

Contributing

License

See LICENSE.

Core symbols most depended-on inside this repo

Shape

Function 269

Languages

TypeScript100%

Modules by API surface

wavedrom.unpkg.js68 symbols

wavedrom.js68 symbols

src/WaveDrom.js30 symbols

doc/LogiDrom.js16 symbols

wavedrom.min.js15 symbols

doc/RouteDrom.js13 symbols

src/JsonML.js9 symbols

lib/render-assign.js5 symbols

lib/render-marks.js3 symbols

lib/arcs.new.js3 symbols

lib/render-wave-lane.js2 symbols

lib/render-signal.js2 symbols

Used by 1 indexed graphs manifest dependencies, hub-wide

github.com/yuzutech/kroki

Dependencies from manifests, versioned

@drom/eslint-config0.10.0 · 1×

bit-field1.0.3 · 1×

browserify16.2.3 · 1×

chai4.2.0 · 1×

eslint5.16.0 · 1×

fs-extra8.0.1 · 1×

grunt1.0.4 · 1×

grunt-browserify5.0.0 · 1×

grunt-cli1.2.0 · 1×

grunt-contrib-clean2.0.0 · 1×

grunt-contrib-concat1.0.1 · 1×

grunt-contrib-uglify4.0.1 · 1×

For agents

$ claude mcp add wavedrom \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact