Transform complex Terraform plan files into intuitive, interactive visual graphs. Understand your infrastructure changes at a glance with a beautiful node-based visualization.
Made with ❤️ by joachimdalen
If this project helped you, please consider giving it a ⭐️! It's the only way I will be able to see the usage of this tool and how much time should be spent improving it.
- 🎨 Interactive Graph Visualization - Explore your infrastructure with an intuitive node-based interface
- 📦 Resource & Module Support - Visualize resources, data sources, and modules with distinct node types
- 🔄 Change Detection - Instantly identify which resources will be created, updated, or destroyed
- 🔗 Relationship Mapping - Understand dependencies and connections between resources
- 💾 Export Options - Download your infrastructure graph as PNG og SVG for documentation and presentations
- 🎯 Interactive Node Details - Click any node to show its path or double click any node to view detailed information about the resource or change
- 📋 JSON Plan File Support - Load standard Terraform JSON plan files directly
- Node.js 20.x or higher
- npm or yarn package manager
- Terraform CLI (to generate plan files)
-
Clone the repository
git clone https://github.com/joachimdalen/terraform-plan-visualizer.git cd terraform-plan-visualizer -
Install dependencies
npm install # or yarn install -
Start the development server
npm run dev # or yarn dev -
Open your browser
Navigate to
http://localhost:5173(or the URL shown in your terminal)
To visualize your infrastructure, you first need to generate a Terraform plan in JSON format:
-
Create a Terraform plan
terraform plan -out=tfplan.binary
-
Convert the binary plan to JSON
terraform show -json tfplan.binary > plan.json -
Load the file
Click the "Load plan" button in the application and paste the contents of your
plan.jsonfile.
Once the application is running:
- Click "Load plan" button
- Enter your plan file in JSON format
- Explore the graph - zoom, pan, and click nodes for details
- Use "Reformat" to reorganize the layout
- Use "Fit view" to center and scale the entire graph
- Export your visualization using the download button
The visualizer displays your Terraform infrastructure using three types of nodes:
Represent managed resources that Terraform will create, update, or destroy. Examples: aws_instance, azurerm_virtual_machine, google_compute_instance
Represent data sources that Terraform reads from. Examples: aws_ami, azurerm_resource_group
Represent reusable modules that contain multiple resources
Each node displays an icon indicating the planned action:
- ➕ Create - Resource will be created
- 🔄 Update - Resource will be modified in-place
- ❌ Delete - Resource will be destroyed
- 🔁 Replace - Resource will be deleted and recreated
- 📖 Read - Data source will be read
- ✓ No Change - Resource exists but no changes planned
Click the settings icon to configure:
- Layout algorithm preferences
- Node spacing and arrangement
- Display options
- React - UI framework
- TypeScript - Type-safe JavaScript
- Vite - Build tool and dev server
- ReactFlow - Graph visualization library
- Mantine - Component library
- ELK.js - Automatic graph layout
- html-to-image - Export to image
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.