MetroViz is a highly interactive, client-side web application for creating, editing, and sharing technology roadmaps, project plans, and migrations in the visual style of a Metro Map (Subway Map).
By representing workstreams or technologies as "Lines" and milestones as "Stations," MetroViz makes complex timelines and dependencies instantly understandable. It also features a dual-view approach, offering both the graphical map and a fully synchronized Markdown/Text version of the roadmap.
You can create and edit your own roadmaps right in the browser using the public instance hosted on GitHub Pages:
https://rstockm.github.io/Metroviz/
There is no need to clone the repository, run a local web server, or install any dependencies. Open the link, use the editor (visual or JSON tab), save to your browser’s local storage, export as JSON/Markdown/images, or share a compressed link—all client-side. Running MetroViz locally is optional and only needed if you want to hack on the source code or work fully offline.
Save keeps data in local storage on that device/browser only (nothing is uploaded). Share copies a URL that embeds your entire roadmap (compressed JSON), not just a link to the app; open it elsewhere to restore the same map. To use the same data on another computer, either Share the URL to yourself (email, notes, chat) or export JSON and import it there.
- Visual Metro Map Rendering: Automatically routes lines and avoids label collisions using D3.js.
- Dual Views: Switch seamlessly between the visual Metro Map and a structured Markdown (Text) View. Both views update in real-time.
- Interactive Editor: A split-screen UI that allows you to edit data via user-friendly forms or by directly editing the underlying raw JSON.
- Advanced Routing & Transfers:
- Define explicit Transfers to migrate from one technology/line to another (automatically establishes bidirectional links).
- Draw complex Relations like Depends On (arrows) and Synchronized With (dashed lines) across the map.
- Fade out obsolete lines (
tint), mark non-milestone stops (isStop), and flip labels to avoid overlaps.
- Export Capabilities:
- Images & Documents: High-res PNG, scalable SVG, and PDF exports.
- Data: JSON (for backups/imports) and Markdown (for documentation).
- Local Storage & Privacy First: All data is saved directly in your browser's
localStorage. No backend database is required. Saved files do not sync to other devices; use Share or JSON export for that. - Shareable URLs: Share puts the full roadmap payload (all JSON, compressed with LZ-String) into the URL, together with extras such as collapsed-zone state and language—not merely a shortcut to MetroViz. The URL can be long; treat it like sensitive data if your roadmap is confidential.
- Localization (i18n): Full support for multiple languages (currently German and English). Language state is preserved in the URL (
?lang=en).
| Action | What it does |
|---|---|
| Save | Stores the roadmap under a name in this browser’s local storage only. Other browsers, profiles, or computers do not see it automatically. |
| Share | Copies a single URL that contains your roadmap data (compressed). Paste it elsewhere or send it to yourself to open the same map on another device. The link also carries UI state (e.g. collapsed zones) and language when generated. |
| Export JSON | Downloads a normal .json file you can move manually and Import on another machine—useful when URLs are too long or you prefer a file workflow. |
MetroViz relies on a structured JSON data model. Here are the core concepts you will find in the editor:
- Meta & Timeline:
Define the title of your roadmap and the visible time span on the X-axis (e.g.,
2026-Q1to2027-Q4). - Global Events: Vertical lines spanning the entire map to indicate hard deadlines, fiscal year ends, or major milestones.
- Zones (Thematic Clusters): Horizontal bands (Y-axis) that group related lines together. Zones can be assigned background colors and can be collapsed to save space.
- Lines (Technologies / Workstreams): The actual "subway lines." Each line has a specific color and belongs to exactly one Zone.
- Stations (Milestones):
The nodes on a line. Stations must have a date and a Type:
- Existing: A standard point representing the status quo.
- Start: The beginning of a new initiative.
- Milestone: A standard measurable goal.
- Transfer: A point where a migration happens. Selecting a "Transfer To" target automatically connects two stations and bends the visual lines toward each other.
- Terminus: The end of a line (e.g., software deprecation).
- Station Properties:
- Tint Line: Fades out the line color after this station (useful for deprecation phases).
- Is Stop: Renders as a small tick mark instead of a full circle.
- Flip Label: Forces the text label to render on the opposite side of the line.
- Description: A Markdown-enabled text field that appears in tooltips and the Text/Markdown view.
- Relations: Establish logical links (
dependsOn/synchronizedWith) to any other station on the map.
MetroViz is built as a modern, lightweight, serverless Single Page Application (SPA). It uses vanilla ES6 modules and relies on external libraries loaded via CDN:
- Architecture: HTML5, CSS3, Vanilla JS (ES6 Modules)
- Reactivity & State: Alpine.js
- Visualization: D3.js (v7) for SVG rendering, math, and layout calculation.
- Localization: i18next (along with HttpBackend and BrowserLanguageDetector).
- URL Compression: lz-string for encoding JSON state into shareable links.
- Markdown & Security: marked.js for Markdown parsing and DOMPurify for rigorous XSS protection and SVG sanitization.
- PDF Export: jsPDF and svg2pdf.js.
Since MetroViz uses ES6 modules (type="module"), you cannot simply open the index.html file from your local filesystem using file://. You must serve it via a local web server.
- Clone this repository.
- Open your terminal and navigate to the project directory.
- Start a local server. For example, using Python:
python3 -m http.server 8000
- Open your browser and navigate to
http://localhost:8000.
MetroViz provides several ways to extract your data via the "Export" menu:
- SVG Map: Exports the exact visual state of the Metro Map as a scalable vector graphic. (Sanitized for security).
- PNG Map: Renders the SVG onto a high-resolution Canvas and exports a standard image file.
- PDF Map: Converts the SVG into a vector-based PDF document perfectly sized to the map's dimensions.
- JSON: Exports the raw JSON data model. This file can be imported back into MetroViz on another device.
- Markdown: Exports the currently active "Text Version" of the roadmap, cleanly formatted with Markdown headers, lists, links, and descriptions.
MetroViz supports internationalization (i18n). The UI, the Markdown export, and map labels (like "Today") adapt dynamically.
We welcome Pull Requests (PRs) for new languages! Here is how you can add one:
- Create the translation file:
Navigate to the
locales/folder. Duplicate theenfolder and rename it to your target language code (e.g.,frfor French,esfor Spanish).locales/ ├── de/ │ └── translation.json ├── en/ │ └── translation.json └── fr/ └── translation.json <-- Your new file - Translate the strings:
Open your new
translation.jsonand translate the values on the right side of the JSON key-value pairs. Do not change the keys on the left. - Update the UI Dropdown:
Open
index.html, find the language<select>element (around line 110), and add your language option:<select x-data ...> <option value="de">DE</option> <option value="en">EN</option> <option value="fr">FR</option> <!-- Your new option --> </select>
- Test locally & Submit a PR: Run the app locally to ensure your language loads correctly when selected. Once verified, commit your changes and open a Pull Request on GitHub.
MetroViz is released under the MIT License.
Copyright © 2026 Ralf Stockmann.
Built with ❤️ for digital independence and better technical planning.