Metro Whiteboard

(Formerly File Metro)

A metro map of this project's own source code — built with Metro Whiteboard itself.

Metro Whiteboard applied to note-taking. During the learning phase, connections aren't required — simply cluster related ideas together and assign them a shared color. Once you've absorbed enough to form a mental framework, link your notes directly from the canvas. This spatial, top-down perspective reveals relationships that are impossible to see when linking from inside individual notes.

Metro Whiteboard is an infinite canvas for your code. It visualizes your workspace as a metro map, allowing you to see connections, plan architecture, and think spatially.

Beyond Code: Note-Taking

Metro Whiteboard works equally well as a spatial thinking tool for notes. The workflow has two natural phases:

1. Collect — Drop related notes onto the canvas and group them by color. No connections needed yet; spatial proximity is enough to reveal clusters.
2. Structure — Once you've absorbed enough to see the bigger picture, draw links between notes directly on the canvas. This bird's-eye view surfaces relationships that are invisible when linking from inside individual files.

A ready-to-explore demo is included under demo/zettelkasten/. Open that folder as a VS Code workspace to see a Zettelkasten knowledge map — scattered raw captures on the left, an organized processing pipeline on the right.

Vision: The Infinite Code Canvas

I built Metro Code Board based on a simple belief: links should be intentional.

But as I used it, I realized that a simple map isn't enough. We need a spatial workspace—an infinite canvas where code, thoughts, and diagrams live side-by-side.

My goal is to evolve this tool into a Whiteboard for your Codebase. It won't just be for navigating files; it will be for thinking about them.

Roadmap

I am actively working on transforming this extension into a full-featured infinite canvas. Here is the plan:

• [ ] Whiteboard Tools: Add text boxes, shapes (rectangles, circles), and sticky notes to the canvas.
• [ ] Groups: Ability to group nodes together and navigate to them via a sidebar list.
• [ ] Rich Connections: Add labels and direction arrows to connections to describe relationships (e.g., "imports", "depends on").
• [ ] Multimedia: Support for images and markdown snippets directly on the canvas.
• [ ] Refactoring: Rename the project to reflect this new direction (e.g., "Code Canvas" or "Metro Board").

Features

• Local Metro View: A dedicated sidebar view that syncs with your active file.
• Visual Map: Drag & drop files to create stations.
• Connections: Hold Alt + Drag between stations to link them.
• Station Search: Search by station name and jump directly to the matching node.
• Organization: Color code stations and add status marks (Check, Star).
• Batch Actions: Multi-select (Shift + Click) to color, mark, or delete groups.
• Theme Aware: Adapts to Light and Dark modes.
• Portable Layouts: Map layouts use workspace-relative paths and work after moving or cloning a workspace.

Usage

1. Open Command Palette (Cmd+Shift+P).
2. Run "Metro: Open Metro View".
3. Drag files from Explorer to the map.
4. Use the search field in the map's upper-left corner to locate a station by name.

Shortcuts

Recommended Configuration

It is recommended to exclude .Note files from the File Explorer's auto-reveal feature. This ensures that the Explorer remains focused on your code structure while you use the Metro Map to navigate your notes.

Add this to your VS Code settings.json:

"explorer.autoRevealExclude": {
    "**/.Note/**": true
}

Contributing

See CONTRIBUTING.md.

Acknowledgements

• Icons: Lucide Icons (ISC License)