SDD Visualizer

A VS Code extension that brings interactive visualization and management to Spec-Driven Development. Auto-discovers spec files from any SDD tool, builds a unified data model with traceability links, and presents rich views so you can navigate and manage specifications without reading raw markdown.

Features

• Auto-Discovery — Detects spec files from Kiro, Claude Code, Cursor, AntiGravity, or any custom folder structure. Multi-root workspace support included.
• Format-Agnostic Parser Registry — Built-in parsers for common formats, plus a public API for third-party parsers. Highest-priority parser wins.
• Traceability Matrix — Three-column webview (Requirements → Design Decisions → Tasks) with coverage gap detection, confidence-level filtering, and a health score.
• Kanban Board — Drag-and-drop task management grouped by spec folder. Status changes write back to source files via WorkspaceEdit with conflict detection.
• Tree Explorer — Activity Bar sidebar showing specs as a navigable hierarchy with maturity badges and traceability status icons.
• CodeLens Annotations — Inline links on requirements and tasks showing linked artifacts and coverage gaps.
• Diagnostics — Coverage gaps and orphaned requirements surfaced in the VS Code Problems panel.
• Status Bar — At-a-glance completion percentage and gap count with color-coded health.

Screenshots

Screenshots will be added after UI polish. Run the extension with F5 to see it in action.

Installation

From the VS Code Marketplace

1. Open VS Code.
2. Go to the Extensions view (Ctrl+Shift+X / Cmd+Shift+X).
3. Search for SDD Visualizer.
4. Click Install.

From a VSIX file

code --install-extension sdd-visualizer-<version>.vsix

Usage

How specs are discovered

The extension activates when it detects a workspace containing spec folders (e.g. .kiro/specs/). It scans for known SDD directory structures and any paths you configure via sddVisualizer.customSpecPaths. File watchers keep the model up to date as you edit.

Tree Explorer

Open the SDD Visualizer panel in the Activity Bar. Specs appear as a hierarchy:

📁 Spec Folder [maturity badge]
  📋 Requirements
    📄 Requirement 1 [linked ✓]
    📄 Requirement 2 [gap ⚠]
  🎨 Design Decisions
    📄 Decision 1 [linked ✓]
  ✅ Tasks
    📄 Task 1 [completed ✓]

Click any artifact to jump to its source file. Right-click a spec folder to open it in the Traceability Matrix or Kanban Board.

Kanban Board

Run SDD Visualizer: Open Kanban Board from the Command Palette (Ctrl+Shift+P).

Tasks are displayed as cards in three columns: Not Started, In Progress, and Completed. Drag a card between columns to update its status — the change is written back to the source markdown file. Cards are grouped by spec folder with progress indicators.

Traceability Matrix

Run SDD Visualizer: Open Traceability Matrix from the Command Palette.

A three-column grid maps Requirements → Design Decisions → Tasks. Filter by spec folder, traceability status, link confidence, or free-text search. A coverage health score is displayed in the header.

Commands

Configuration

Add these settings to your VS Code settings.json:

{
  // Additional glob patterns for spec folder discovery
  "sddVisualizer.customSpecPaths": [
    "docs/specs/**",
    "my-project/.specs/**"
  ],

  // Glob patterns to exclude from discovery
  "sddVisualizer.excludePaths": [
    "**/node_modules/**",
    "**/dist/**"
  ],

  // Default visualization opened from the status bar click
  // Options: "traceabilityMatrix" | "kanbanBoard"
  "sddVisualizer.defaultView": "traceabilityMatrix"
}

Setting changes take effect immediately — no window reload required.

Extending

SDD Visualizer exposes a public parser API so third-party extensions can add support for custom spec formats. Implement the SpecParser interface, register it via the parser registry, and your format will be auto-discovered alongside built-in formats.

See examples/sample-parser/ for a complete example.

Contributing

Contributions are welcome! Please read CONTRIBUTING.md for development setup, architecture overview, coding conventions, and PR guidelines.

License

MIT © SDD Visualizer Contributors