Digital Works

Appearance

Spec: Timing Diagram Export ​

Overview ​

Enable exporting simulation signal history as standardized timing diagrams in multiple formats (SVG, PNG, WaveDrom JSON, VCD) for use in documentation, reports, and external analysis tools.

Motivation ​

The existing Logic History and Oscilloscope views are great for interactive analysis, but users need to include timing diagrams in reports, presentations, and documentation. Standard export formats also allow interoperability with professional waveform viewers (GTKWave, WaveDrom).

Requirements ​

Functional Requirements ​

  1. SVG Export: Vector timing diagram suitable for documentation and web embedding.
  2. PNG Export: Raster timing diagram at configurable resolution/DPI.
  3. WaveDrom JSON Export: Standard WaveDrom format for interactive web rendering.
  4. VCD Export: Value Change Dump format compatible with GTKWave and ModelSim.
  5. Signal Selection: Choose which signals to include in the export.
  6. Time Range: Export full simulation or a selected time window.
  7. Signal Ordering: Drag to reorder signals in the export.
  8. Signal Grouping: Group related signals with separators/labels.
  9. Annotation Support: Add markers, labels, and measurement cursors to the exported diagram.
  10. Bus Signal Rendering: Multi-bit buses shown as hex/decimal values between transitions.
  11. Clock Pattern Recognition: Automatically render clock signals with the standard zigzag pattern.
  12. Customizable Appearance: Colors, line widths, font sizes, background (white/transparent).
  13. Batch Export: Export timing diagrams for multiple test cases at once.

Non-Functional Requirements ​

  • SVG export produces clean, editable SVG (compatible with Inkscape/Illustrator).
  • PNG export supports up to 4K resolution (3840px width).
  • VCD files are compatible with GTKWave 3.x+.
  • Export completes in under 2 seconds for 100 signals × 10000 time steps.

Design ​

Export Pipeline ​

LogicHistoryRecorder Data
    → Signal Selection & Filtering
    → Time Range Clipping
    → Format-Specific Renderer
        → SVG: Vector drawing primitives
        → PNG: Rasterize SVG or draw directly
        → WaveDrom: JSON structure generation
        → VCD: Text-based value change format
    → File Output

WaveDrom Output Example ​

json
{
  "signal": [
    { "name": "CLK", "wave": "p........" },
    { "name": "DATA", "wave": "x.345x.=.", "data": ["A", "B", "C", "D"] },
    { "name": "EN", "wave": "01.....0." },
    { "name": "OUT", "wave": "x..345x.." }
  ],
  "head": { "text": "Memory Read Cycle" },
  "config": { "hscale": 2 }
}

VCD Output Example ​

$timescale 1ns $end
$scope module circuit $end
$var wire 1 ! CLK $end
$var wire 1 " DATA $end
$var wire 1 # EN $end
$upscope $end
$enddefinitions $end
#0
0!
x"
0#
#10
1!
#20
0!
1"
1#

SVG Rendering ​

  • Each signal gets a horizontal track with name label on the left.
  • Digital signals: rectangular waveforms with rise/fall transitions.
  • Bus signals: hex value labels between transition points.
  • Time axis at bottom with tick marks.
  • Grid lines (optional, configurable).

Export Dialog ​

┌───────────────────────────────────────┐
│ Export Timing Diagram                  │
├───────────────────────────────────────┤
│ Format: ○ SVG  ○ PNG  ○ WaveDrom  ○ VCD │
│                                       │
│ Signals: [✓] CLK                      │
│          [✓] DATA[7:0]               │
│          [ ] ADDR[15:0]              │
│          [✓] WR_EN                    │
│                                       │
│ Time Range: [0ns] to [500ns]         │
│ Resolution: [1920px] width (PNG)     │
│                                       │
│ [Preview]        [Export] [Cancel]    │
└───────────────────────────────────────┘

Implementation Tasks ​

  1. Create DigitalWorks.Core/Export/TimingDiagram/ namespace.
  2. Implement signal data extraction from LogicHistoryRecorder.
  3. Implement SVG timing diagram renderer.
  4. Implement PNG renderer (rasterize from SVG or direct Win2D render).
  5. Implement WaveDrom JSON generator.
  6. Implement VCD file format writer.
  7. Add bus signal value formatting (binary/hex/decimal).
  8. Create export dialog with signal selection and preview.
  9. Implement time range selection and zoom.
  10. Add annotation/marker support in exported diagrams.
  11. Integrate with menu (File → Export → Timing Diagram).

Risks & Open Questions ​

  • Should the timing diagram viewer be a standalone window (like oscilloscope) or a panel?
  • How to handle very long simulations — downsampling or pagination?
  • Should export support animation (GIF/APNG) for presentations?
  • LaTeX/TikZ-timing export for academic papers?

Priority ​

Medium — High documentation value, enables professional-quality outputs.