adamibs / vscode-terraform-live-graph

The Terraform Live Graph Extension for Visual Studio Code is a plugin that allows you to generate a live Terraform graph as you code.

Terraform Live Graph Extension for VSCode

The Terraform Graph Extension for Visual Studio Code is a plugin that allows you to generate a live Terraform graph as you code. This extension makes it easy to visualize your infrastructure and the relationships between resources, helping you to understand how your infrastructure is configured.

Installation

Prerequisites

1. Install terraform from: https://developer.hashicorp.com/terraform/downloads?product_intent=terraform
2. Install graphviz from: https://graphviz.org/download/
3. VS Code updated to at least v1.75.1 of above.

Extension Installation

1. Open Visual Studio Code.
2. Click on the Extensions icon on the left-hand side of the screen (Ctrl+Shift+X).
3. Search for "Terraform Live Graph" and click "Install".
4. Restart Visual Studio Code.

Usage

1. Open a Terraform file in Visual Studio Code
2. Activate the extension by selecting "Terraform Graph View" from the Command Palette (CMD+Shift+p/Ctrl+Shift+p or F1 opens the Command Palette).
3. A live graph of your Terraform code will appear on the right-hand side of the screen
4. As you write your Terraform code, the graph will update in real-time to reflect your changes

Requirements

• Terraform must be installed on your system and accessible from the command line (Download)
• The Terraform files must be in a valid format

Issues and Contributions

If you encounter any issues or have any suggestions for improvements, please open an issue on the GitHub repository.

If you would like to contribute to the development of this extension, please follow the instructions here.

License

This extension is licensed under the MIT License. See the LICENSE file for more information.

vscode-terraform-live-graph's Issues

[BUG]: The right pane for `Terraform Live Graph` has a single square white dot at the top.

Describe the bug
While using the extension, the graph view displays a small white box at the top of the view.
#1 (comment)

To Reproduce
Steps to reproduce the behavior:

1. Open an empty folder in VS Code.
2. Activate the extension.

Expected behavior

1. Some kind of relevant message.

Screenshots
Example from @crc8109

Versions (please complete the following information):

• OS: OSX 13.1
• VSCode Version: 1.76.2
• Terraform Live Graph Extension for VSCode Version 0.0.5
• Terraform Version: 1.4.0

[FEATURE]: Improve behavior while tf files aren't valid.

Is your feature request related to a problem? Please describe.
Currently, while working with the extension running, in cases where one of the .tf files aren't correctly formatted, an unhelpful message is displayed

Describe the solution you'd like
I would like a pretty placeholder screen in the graph view until reached valid .tf file format.

Additional context
TBD

TypeError: The "chunk" argument must be of type string or an instance of Buffer or Uint8Array

Graph view pane opens but is blank. Error in Extension Host log is below.

VS Code 1.76
Live Graph 0.01

Probably unrelated, but your keybinding of ctrl+shift+p didn't work because this is, by default, already bound to something else by VS code.

2023-03-12 12:09:52.246 [info] ExtensionService#_doActivateExtension adamiBs.terraform-live-graph, startup: false, activationEvent: 'onCommand:terraform-live-graph.generateGraphView' 2023-03-12 12:09:53.416 [error] TypeError: The "chunk" argument must be of type string or an instance of Buffer or Uint8Array. Received an instance of Error at new NodeError (node:internal/errors:371:5) at _write (node:internal/streams/writable:312:13) at Writable.write (node:internal/streams/writable:334:10) at Readable.ondata (node:internal/streams/readable:754:22) at Readable.emit (node:events:526:28) at Readable.read (node:internal/streams/readable:527:10) at flow (node:internal/streams/readable:1011:34) at resume_ (node:internal/streams/readable:992:3) at process.processTicksAndRejections (node:internal/process/task_queues:83:21)

Error: no reference origin found

I am not reporting this as a bug because I sense the issue may be due to a missing configuration on my side.

Although the README lists just two requirements and both of which I have fulfilled, I suppose users with non-trivial setup of their Terraform modules, input variables and/or .tfvars files may need to perform some additional steps.
Unfortunately, I have no idea what those steps would be:

All my Terraform files are well-formed and valid as I run number of checkers as pre-commit hooks.
The Hashicorp's Terraform extension is also happy to analyse my files and outline code structure:

Improve error logging

After the issues that @blckpythn faced in #1 here, it is clear that an improved error message is required.
The fix should be as simple as implementing something along the lines of this.

[Unexpected Error, Required plugins are not installed] Issue with plugins

When i try to generate the live graph i get an error about inconsistency between plugins installed on provider and packages on the dependency lock file.

Steps to reproduce the behavior:

1. CRTL+SHIFT+P
2. Look for Terraform Graph view and click it
3. See error

Expected behavior
Graph should be generated.

Screenshots

Versions (please complete the following information):

• OS: macOS Monterey 12.6.1
• VSCode Version: 1.76.2
• Terraform Live Graph Extension for VSCode Version: v0.0.5
• Terraform Version: 1.4.2

Additional context
I am using Linode provider. https://registry.terraform.io/providers/linode/linode/latest/docs. I was using latest version, but noticed the error always mentioned version 1.29.2, so i switched to that version to see if that fixed something, but still getting the error.

I deleted all .terraform* and terraform.tfstate* several times and run terraform init, but it didnt work.

It is very cool, but GraphViz sucks..

Extension give error in VSC - Command "dot" failed. MESSAGE:spawn dot ENOENT

I opened a .tf file, then Cmd-Shift-p and get the above error. I get a blank Terraform Live Graph pane on the right side of my .tf code in VSC.

I am using Terraform Live Graph v0.0.1

OSX 13.2.1
Macbook M2 Pro
Visual Code Studio:

Version: 1.76.1 (Universal)
Commit: 5e805b79fcb6ba4c2d23712967df89a089da575b
Date: 2023-03-08T16:32:09.831Z (3 days ago)
Electron: 19.1.11
Chromium: 102.0.5005.196
Node.js: 16.14.2
V8: 10.2.154.26-electron.0
OS: Darwin arm64 22.3.0
Sandboxed: No

Terraform v1.4.0 on darwin_arm64

[FEATURE]: Integrate with terraform-graph-beautifier

Is your feature request related to a problem? Please describe.
Native Terraform graphs are (very) hard to read for any non-trivial module.

Describe the solution you'd like
Pipe terraform graph to terraform-graph-beautifier instead of dot -Tsvg to make these graphs more usable.

Implementation proposal
terraform-graph-beautifier outputs an HTML file, so one can hope the integration is straightforward. If that sounds like a good idea to someone to implement this, please expose terraform-graph-beautifier flags in vscode-terraform-live-graph configuration.

[BUG]: Cannot install on VSCode 1.75.1

Describe the bug
Unable to install the extension

To Reproduce
Steps to reproduce the behavior:

1. Go to VSCode Extensions marketplace
2. Click on 'install'
3. See error

Expected behavior
The extension should install

Screenshots

Versions (please complete the following information):

• OS: macOS Big Sur 11.7.4
• VSCode Version: 1.75.1
• Terraform Live Graph Extension for VSCode Version 0.0.4
• Terraform Version: N/A

Additional context
Add any other context about the problem here.

[FEATURE]: Can the view be zoomed on OSX

Is your feature request related to a problem? Please describe.
Yes -- while I can get the graph, anything of reasonable complexity shows up too small.

Describe the solution you'd like
Would love a means of zooming and scrolling the view

Unexpected error: spawn terraform ENOENT

Get the above error.
terraform graph command is working

To Reproduce
every .tf file i try to visualize (code is working

Screenshots

Versions (please complete the following information):

VSC 1.78.2
Terraform v1.3.6 on windows_386

Additional context
Extensition log
2023-06-14 16:00:18.877 [info] ExtensionService#_doActivateExtension vscode.emmet, startup: false, activationEvent: 'onLanguage'
2023-06-14 16:00:18.886 [info] ExtensionService#_doActivateExtension ms-vscode.azure-account, startup: false, activationEvent: 'onLanguage:azure-pipelines', root cause: ms-azure-devops.azure-pipelines
2023-06-14 16:00:19.198 [info] ExtensionService#_doActivateExtension ms-azure-devops.azure-pipelines, startup: false, activationEvent: 'onLanguage:azure-pipelines'
2023-06-14 16:00:19.612 [info] ExtensionService#_doActivateExtension vscode.git-base, startup: false, activationEvent: 'api', root cause: ms-azure-devops.azure-pipelines
2023-06-14 16:00:19.621 [info] ExtensionService#_doActivateExtension vscode.git, startup: false, activationEvent: 'api', root cause: ms-azure-devops.azure-pipelines
2023-06-14 16:00:19.711 [info] ExtensionService#_doActivateExtension vscode.github-authentication, startup: false, activationEvent: 'onAuthenticationRequest:github'
2023-06-14 16:00:19.883 [info] ExtensionService#_doActivateExtension vscode.github, startup: true, activationEvent: ''
2023-06-14 16:00:19.888 [info] ExtensionService#_doActivateExtension vscode.microsoft-authentication, startup: false, activationEvent: 'onAuthenticationRequest:microsoft'
2023-06-14 16:00:20.106 [info] ExtensionService#_doActivateExtension hashicorp.terraform, startup: true, activationEvent: 'workspaceContains:**/.tf,**/*.tfvars'
2023-06-14 16:00:20.594 [info] Eager extensions activated
2023-06-14 16:00:20.600 [info] ExtensionService#_doActivateExtension vscode.debug-auto-launch, startup: false, activationEvent: 'onStartupFinished'
2023-06-14 16:00:20.604 [info] ExtensionService#_doActivateExtension vscode.merge-conflict, startup: false, activationEvent: 'onStartupFinished'
2023-06-14 16:00:20.612 [info] ExtensionService#_doActivateExtension ms-vscode-remote.remote-wsl-recommender, startup: false, activationEvent: 'onStartupFinished'
2023-06-14 16:00:36.186 [info] ExtensionService#_doActivateExtension adamiBs.terraform-live-graph, startup: false, activationEvent: 'onCommand:terraform-live-graph.generateGraphView'

[FEATURE]: Remove external dependency on graphviz

Describe the solution you'd like

• As an initial phase, reliance on graphviz was sufficient. The increased usage of the extension makes the improvement a relevant upgrade in usage experience.
• Implementation of dot language parsing within the extension instead of reliance on an installation of graphviz on the workstation.

Additional context
Add any other context or screenshots about the feature request here.

Implementation proposal

• Research existing libraries that might parse dot language in pure javascript.
• Compilation of graphviz to WASM (from C++) seems like a possible course of action from here.
• Dependance on an external web service instead of a local installation of graphviz