Roadmap Studio

Visualize and edit project roadmaps directly in VS Code.

Features

• Timeline View — See all milestones on a visual timeline with progress indicators
• Milestone Cards — Detailed cards showing tasks, progress bars, and dependencies
• Tree View Sidebar — Browse milestones and tasks in the VS Code explorer
• Live Reload — Automatically updates when you edit your roadmap file
• Stats Dashboard — Overall progress, completed milestones, total tasks at a glance

Roadmap Format

Add YAML frontmatter to any ROADMAP.md or *.roadmap.md file:

---
roadmap:
  title: "My Project"
  updated: "2026-04-02"
  description: "Optional description"
  milestones:
    - id: M1
      name: "Core Foundation"
      status: done          # done | in-progress | blocked | planned
      progress: 100         # 0-100 (auto-calculated from tasks if omitted)
      tasks:
        - name: "Setup project"
          status: done
        - name: "Database schema"
          status: done

    - id: M2
      name: "API Layer"
      status: in-progress
      depends_on: [M1]      # dependency tracking
      due: "2026-05-01"     # optional due date
      tasks:
        - name: "REST endpoints"
          status: done
        - name: "Auth middleware"
          status: in-progress
        - name: "Rate limiting"
          status: planned
---

# Your markdown content below...

Status Values

Status	Description
done	Completed
in-progress	Currently being worked on
blocked	Waiting on something
planned	Not yet started

Auto-calculation

If you omit progress, it's automatically calculated from task statuses. If you omit status but provide tasks, it's derived from progress (0% = planned, 1-99% = in-progress, 100% = done).

Usage

1. Install the extension
2. Create a ROADMAP.md with YAML frontmatter (see format above)
3. Open the Roadmap panel in the activity bar (sidebar)
4. Run "Roadmap: Open Roadmap Visualization" from the command palette for the full dashboard

Commands

Command	Description
Roadmap: Open Roadmap Visualization	Open the visual dashboard
Roadmap: Refresh Roadmap	Reload the roadmap file

Development

git clone https://github.com/easyxstudios/vscode-roadmap.git
cd vscode-roadmap
npm install
npm run compile
# Press F5 in VS Code to launch Extension Development Host

License

MIT