Stats
Actions
Tags
From circuits
Generate WaveJSON timing diagrams for digital signals and create HTML viewers to display them. Use when documenting signal timing, creating timing diagrams, analyzing protocol sequences, visualizing digital waveforms (clock, data, control signals), or displaying/rendering WaveDrom diagrams locally.
How this skill is triggered — by the user, by Claude, or both
Slash command
/circuits:wavejsonThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate WaveJSON format timing diagrams for WaveDrom rendering. Perfect for documenting hardware interfaces, signal timing, protocol sequences, and any digital signal visualization.
Generate WaveJSON format timing diagrams for WaveDrom rendering. Perfect for documenting hardware interfaces, signal timing, protocol sequences, and any digital signal visualization.
Format Reference: This skill uses the WaveJSON specification and WaveDrom rendering engine, both licensed under MIT.
Additional Resources:
reference.md - Quick reference card with wave characters, common patterns, detailed signal pattern examples, and validation checklistWaveJSON uses JSON to describe timing diagrams with these key components:
{
"signal": [
{ "name": "clk", "wave": "p......." },
{ "name": "data", "wave": "x.345x..", "data": ["head", "body", "tail"] },
{ "name": "req", "wave": "0.1...0." }
]
}
Clock waves:
p - positive edge clock (rising edge)n - negative edge clock (falling edge)P - positive edge with arrowN - negative edge with arrowLogic levels:
0 - low level1 - high level. - extends previous stateData values:
= - data value (color 2)2, 3, 4, 5 - data values with different colorsx - undefined/don't carez - high impedance (tri-state)u - pull-upd - pull-downSpecial:
| - extend cycle and add gapname - Signal label (string)wave - Timing pattern (string, one char per cycle)data - Array of labels for data values (corresponds to =, 2-5 in wave)period - Signal repetition period (number)phase - Phase shift, positive=future, negative=delay (number)node - Markers for arrows: . (none), A-Z (invisible), others (visible)Create hierarchical groups by using arrays with a label string:
{
"signal": [
["Control Signals",
{ "name": "LE", "wave": "01.0...." },
{ "name": "WR", "wave": "1..01.0." }
],
["Data Bus",
{ "name": "D[7:0]", "wave": "x.3.4..x", "data": ["CTRL", "DATA"] }
]
]
}
Add dependency arrows between signal markers:
{
"signal": [...],
"edge": [
"a~>b Setup time",
"c-~d Hold time",
"e~|~f Pulse width"
]
}
Edge syntax:
node property)> before last char: arrow head- (horizontal), | (vertical), ~ (curvy), / (diagonal)# marks label position{
"signal": [...],
"config": { "hscale": 2 }
}
hscale - Horizontal scale (≥1, default 1)Create local HTML files to render WaveJSON diagrams using the WaveDrom library.
Generate an HTML viewer when:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WaveDrom Timing Diagram</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/skins/default.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/wavedrom.min.js" type="text/javascript"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
h1, h2 {
color: #333;
}
.diagram-container {
background: white;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
</head>
<body onload="WaveDrom.ProcessAll()">
<h1>Timing Diagrams</h1>
<div class="diagram-container">
<h2>Diagram Title Here</h2>
<script type="WaveDrom">
{
"signal": [
{ "name": "clk", "wave": "p......." },
{ "name": "data", "wave": "x.345x..", "data": ["head", "body", "tail"] }
]
}
</script>
</div>
<!-- Add more diagrams by adding more diagram-container divs -->
</body>
</html>
For pages with multiple timing diagrams:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hardware Timing Reference</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/skins/default.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/wavedrom.min.js" type="text/javascript"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f5f5f5;
}
h1 { color: #333; }
h2 { color: #555; margin-top: 0; }
.diagram-container {
background: white;
padding: 20px;
margin: 20px 0;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.description {
color: #666;
margin: 10px 0;
font-size: 14px;
}
</style>
</head>
<body onload="WaveDrom.ProcessAll()">
<h1>Project Timing Diagrams</h1>
<div class="diagram-container">
<h2>Two-Phase Write Sequence</h2>
<p class="description">Shows the complete writeByte() operation with control latch and character write.</p>
<script type="WaveDrom">
{ /* First WaveJSON here */ }
</script>
</div>
<div class="diagram-container">
<h2>Control Word Timing</h2>
<p class="description">D7 clear bit requires 1.0µs delay per PD2437 datasheet.</p>
<script type="WaveDrom">
{ /* Second WaveJSON here */ }
</script>
</div>
</body>
</html>
When user requests HTML viewer:
<script type="WaveDrom"> tagsdocs/timing_diagrams.html)open command (macOS) or xdg-open (Linux)After creating the HTML file:
# macOS
open /path/to/timing_diagrams.html
# Linux
xdg-open /path/to/timing_diagrams.html
# Windows (Git Bash)
start /path/to/timing_diagrams.html
User request: "Create an HTML page showing the SPI transfer timing"
Claude should:
<script type="WaveDrom"> tagdocs/spi_transfer_timing.htmldocs/timing_[description].htmldocs/protocol_timing.htmldocs/[interface]_timing.htmldocs/hardware_timing.htmlWhen creating comprehensive timing documentation:
Before generating HTML:
onload="WaveDrom.ProcessAll()" is present in <body> tag<script type="WaveDrom"> tags are properly formedCurrent stable version: 3.1.0
If user reports rendering issues:
For detailed pattern examples (SPI, I2C, Bus Write Cycles, Chip Select Decoding, Clock Domain Crossing, Setup/Hold Timing), see the "Detailed Signal Pattern Examples" section in reference.md.
When asked to generate WaveJSON timing diagrams:
p/n) for clocks, logic levels (0/1) for control, data (=, 2-5) for bus valuesdata array to label bus values meaningfullyedge arrayhscale: 2 or higher for complex timing to make diagrams readablenode property) where arrows should connectWhen asked to "view", "display", "render", or "visualize" timing diagrams locally:
mkdir -p docsonload="WaveDrom.ProcessAll()" to body tag<script type="WaveDrom"> tagsdocs/ directoryopen, Linux: xdg-open, Windows: start)When in doubt, generate WaveJSON and ask: "Would you like me to create an HTML viewer to display this locally?"
To draw arrows between events:
node property to signals with timing markers. for cycles without markersa-z or A-Z for marker positionsExample:
{ "name": "CLK", "wave": "p....", "node": ".a.b." }
{ "name": "DATA", "wave": "x.2.x", "node": "..c..", "data": ["valid"] }
Then add edges:
"edge": [
"a~>c Setup",
"b~>c Hold"
]
Generate WaveJSON as properly formatted JSON that can be:
.json filesAlways validate JSON syntax and test logic before outputting.
When generating timing diagrams for hardware projects:
Reference datasheets, project documentation, and code for actual timing values.
User: "Generate a WaveJSON diagram showing an SPI byte transfer"
Claude should:
Before outputting WaveJSON:
data array matches number of data values in wavenpx claudepluginhub lumberbarons/lumber-mart --plugin circuitsGenerates professional circuit diagrams via schemdraw Python. Outputs SVG/PDF/PNG from natural language. Use when user requests schematics, needs publication-quality diagrams, or mentions schemdraw.
Create SVG-based technical diagrams inside HTML — flowcharts, sequence diagrams, state machines, data-flow diagrams, dependency graphs, request/response timelines. Use whenever the user wants to visualize, illustrate, diagram, or sketch a technical concept, system, or process. Strongly prefer SVG over ASCII art, mermaid blocks, or markdown text for anything spatial or relational. Reach for this whenever an explanation involves arrows, boxes, layers, or sequencing — even when the user doesn't say "diagram".
Renders GateFlow codebase maps as interactive terminal ASCII/Unicode diagrams: module hierarchies, FSM states, detail cards, and overview dashboard with stats/health. Use after /gf-map.