Welcome to CapabilityMap.app. This guide will help you understand how to use the application effectively.
A capability map is a visual representation of what a business or product does to achieve its objectives. It shows the abilities and capabilities that an organization or product needs to deliver value to its customers.
Click the Add Capability button in the top bar to create a new capability row. Each capability acts as a swim lane in the grid.
Click on a capability name in the grid to edit it. To delete a capability, use the delete button — you'll be offered the option to download the capability's cards as YAML before deletion.
Click the + button within any grid cell (capability row × quarter column) to add a new card. Each card has:
When adding or editing a card, use the dependency search to find and link other cards. Dependencies form a directed graph that can be visualized in the DAG view. In the grid view, click the "deps" badge on a card to highlight its dependency chain — the source card turns green and its dependencies turn red.
The main view is a 2D matrix grid where rows are capabilities (domains) and columns are quarters. Cards are placed at the intersection of their capability and quarter. Row headers are sticky so they remain visible as you scroll horizontally.
You can move cards between cells by dragging them. Drag a card from one cell and drop it onto another to change its capability, quarter, or both. The target cell highlights with an indigo ring when you hover over it during a drag.
Use the Column Width setting in the sidebar to switch between Small, Medium, and Large column widths. Your preference is saved across sessions.
The sidebar can be toggled open or closed using the hamburger menu button in the top-left corner. Its state is persisted across sessions.
Click the Roadmap button in the top bar to open the roadmap timeline view, a D3-based swimlane visualization.
Cards are plotted by quarter on the horizontal axis and grouped into color-coded capability swim lanes vertically. Within each lane, cards are positioned by their dependency depth to show progression.
Curved arrows connect cards to their dependencies. Arrows are routed through gutter areas below each lane to prevent overlap and keep the diagram readable.
Click on any card in the roadmap to open a slide-out edit drawer on the right side. You can edit the card's details directly and save without leaving the roadmap view.
A color-coded legend at the bottom maps each color to a capability name.
Click the Visualize DAG button in the top bar to see a directed acyclic graph of all card dependencies.
Cards are arranged using a topological sort — cards with no dependencies appear on the left, and dependent cards flow to the right. Nodes are color-coded by capability.
The DAG view automatically detects circular dependencies and displays a warning in the status bar with up to three example cycles. When no cycles are found, it shows the total node and edge count.
Click on any node to open the card editor and make changes directly.
Quarters define the columns of the grid view. They are managed through the dimension system.
Click the Manage Quarters button in the filter bar to open the quarter manager. From here you can:
The default quarters range from 2025 Q3 through 2026 Q4. Changes to quarters are saved automatically.
Tags help organize and filter your cards.
When creating or editing a card, you can add comma-separated tags. As you type, the system suggests existing tags for consistency. Tags appear as removable chips below the input field.
Use the filter dropdown in the filter bar to select one or more tags. Active tag filters appear as blue chips that can be individually removed.
Use the search box in the filter bar to search across card headings and descriptions. The search is case-insensitive and matches substrings in real time.
Click the filter dropdown to select from three categories:
Multiple filters can be active simultaneously. Active filters are displayed as color-coded chips in the filter bar. Click the × on any chip to remove it, or use Clear filters to remove them all at once.
Click the Export YAML button in the sidebar to download your capability map as a YAML file. The export includes all capabilities, cards, dimensions, and view configuration.
Click the Import YAML button in the sidebar to upload a previously exported capability map. The app preserves both dimensions and per-card dims assignments.
From the Roadmap Timeline view, click Export SVG to download the roadmap visualization as an SVG file.
From the DAG Dependency Graph view, click Export Mermaid to download the dependency graph as a Mermaid markdown file. This can be used in tools like GitHub, Notion, or any Mermaid-compatible renderer.
Click Load Sample Data in the sidebar to load a banking capability map with 6 capabilities and 30+ cards with dependencies. This is useful for exploring the app's features.
Click Delete All Data in the sidebar to clear all capabilities, cards, and settings. You will be asked to confirm before data is removed.