Visualize your AWS CDK infrastructure instantly within VS Code.
CDK Stack Map turns your CloudFormation templates and CDK assemblies into interactive, force-directed graphs. It helps developers understand complex infrastructure relationships, debug connections, and generate documentation assets without leaving the editor.
Features
🚀 Interactive Visualization
Physics-Based Grouping: Resources are visually grouped inside their parent Stacks. The Stacks dynamically resize to fit their content.
Draggable Nodes: distinct "elastic" effect allows you to drag nodes to reorganize the view, with the parent Stack stretching to follow.
Force-Directed Layout: Watch your infrastructure "untangle" itself. Nodes naturally repel each other while connections pull related resources together.
🔍 Smart Filtering & Navigation
Category Filters: Toggle visibility for entire categories (Compute, Database, Security, etc.) to focus on specific subsystems.
Minimap: Navigate large infrastructures easily with a real-time minimap.
📸 Export & Share
Export to PNG: Generate high-resolution images of your architecture.
Export to SVG: Get scalable vector graphics for professional presentations or documentation.
How to Use
Open a folder containing an AWS CDK project.
Run cdk synth in your terminal to generate the CloudFormation assets (if you haven't already).
Launch the visualization:
Via Command: Open the Command Palette (Ctrl+Shift+P) and run CDK Stack Map: Visualize.
Via Sidebar: Click the extension icon in the Activity Bar and click the Visualize button (or the 📶 icon).
Interact with the graph:
Scroll to Zoom.
Click & Drag on the background to Pan.
Drag Nodes to rearrange them manually.
Use the UI Panel (top-left) to filter resources or download images.
Extension Settings
You can configure the behavior of the visualization via VS Code Settings (File > Preferences > Settings).
Setting
Default
Description
cdk-stackmap.graphAreaSize
M
Canvas Size. Choose from XS to XXL. Larger sizes give more space for massive stacks to untangle but may require more zooming.
cdk-stackmap.showMinimap
true
Show or hide the navigation minimap in the bottom-right corner.
cdk-stackmap.nodeColorMode
fill
Fill: Nodes are solid colored. Border: Nodes are dark with colored borders (high contrast).
Requirements
This extension parses the cdk.out directory or synthesized CloudFormation templates. You must have a valid CDK project and run cdk synth for the visualization to work.
Known Issues
Extremely large stacks (500+ resources) may take a few seconds to stabilize the physics simulation initially.
If you push a stack against the border it compresses, but will expand if you drag a node inside.
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request or open an issue on GitHub.
Release Notes
1.0.0
Initial release.
Enjoying CDK Stack Map?
Please leave a review or star the repository on GitHub!
