Product Roadmap Visualizer (VS Code Extension)

Open roadmap YAML files as interactive dependency diagrams directly in VS Code.

Quick Start

1. Open one of these files:

• *.roadmap.yaml (recommended)
• *.roadmap.yml (recommended)
• roadmap.yaml
• roadmap.yml

2. Open the diagram with either:

• Editor title action: Open Roadmap Diagram
• Explorer context menu: Open Roadmap Diagram
• Command Palette: Open Roadmap Diagram

What You Get

• Directed roadmap graph rendered with React Flow.
• Automatic ELK layout (left to right by default).
• Layout control: switch left-right <-> top-down from the canvas controls.
• Compact nodes with ID, tag dots, effort/prio.
• Side panel details on click.
• Optional rationale section (between Description and Acceptance Criteria).
• Tag legend.
• Theme control: Auto, Light, or Dark in the canvas controls.
• Theme-aware styling in Auto mode (follows VS Code light/dark theme).
• Reveal in YAML action from selected node.

File Discovery Order

If you run the command without passing a file directly, the extension looks for:

1. Currently active file if it matches supported names.
2. <workspace>/roadmap/roadmap.roadmap.yaml (or .yml).
3. <workspace>/roadmap/roadmap.yaml (or .yml).
4. First matching roadmap file in workspace (prioritizing *.roadmap.yaml).

YAML Schema (State)

Each state supports:

• id (required)
• description (optional)
• rationale (optional)
• acceptanceCriteria (optional string array)
• effort / prio (optional numbers)
• tags (optional tag-id array)
• depends_on (optional state-id array)

Commands

• Open Roadmap Diagram (roadmapVisualizer.open)
• Roadmap Visualizer: Refresh (roadmapVisualizer.refresh)

Package (.vsix)

Build a local installable extension package:

npm run package:vsix

Local Test Workflow (Before Publish)

Use this loop to test safely in your other VS Code instance:

1. Build/package:

npm run package:vsix

2. Install into the target VS Code instance:

code --install-extension roadmap-visualizer-vscode-<version>.vsix --force

If that instance is VS Code Insiders:

code-insiders --install-extension roadmap-visualizer-vscode-<version>.vsix --force

3. Reload that window:

• Cmd+Shift+P -> Developer: Reload Window

4. Reopen a supported roadmap file and click Open Roadmap Diagram.

Development

1. Install dependencies:

npm install

2. Build extension host + webview bundle:

npm run build

3. In VS Code, press F5 to launch an Extension Development Host.

Publish

1. Make sure publisher in package.json is your Marketplace publisher ID.
2. Load your PAT environment (if you store it in .zshrc):

source ~/.zshrc

3. Login once (if not already logged in):

npx vsce login <your-publisher-id>

4. Publish:

npm run publish:marketplace

Optional Web Mode

The previous Next.js web app is still available:

npm run dev:web