# Transform tab

Transform tab is used to transform Terraform code into diagrams that can be presented on interactive Canvas. Operation can also be reversed.

### Transform HCL to JSON

1. Select all Terraform files that you want to transform into graph
2. As an output, you need to select or create two new files.
3. Click on convert.

<figure><img src="https://2582686426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn7nTpq2xv8EGbzULdTCb%2Fuploads%2FKgBxWuZMBd5Dn1qGwzsn%2FTransform-Hcl2Json1.png?alt=media&#x26;token=a2359b1f-590d-4454-b0d8-2694250e6538" alt=""><figcaption><p>Select all Terraform files to convert. Type new or use existing file to store Graphviz JSON data.</p></figcaption></figure>

<figure><img src="https://2582686426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn7nTpq2xv8EGbzULdTCb%2Fuploads%2F0MWSZxeDSNtx7QtVz2q3%2FTransform-Hcl2Json2.png?alt=media&#x26;token=98be9f45-20e0-4245-8a16-115549d2f9ef" alt=""><figcaption><p>Type new or use existing file to store HCL JSON data. They store Terraform data about resources in JSON format.</p></figcaption></figure>

<figure><img src="https://2582686426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn7nTpq2xv8EGbzULdTCb%2Fuploads%2FaS1rHaqrRJl8oO6AGYI4%2FTransform-Hcl2Json3.png?alt=media&#x26;token=8f3e69f2-6d88-4b18-b3b8-1bc55a1934d2" alt=""><figcaption><p>Newly created JSON files that can be used to load into Canvas.</p></figcaption></figure>

### Transform JSON to HCL

Transform HCL JSON into Terraform code and style it with "terraform fmt" command.

1. Select JSON file to convert.
2. Select existing or create new file as an output for Terraform code.

<figure><img src="https://2582686426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn7nTpq2xv8EGbzULdTCb%2Fuploads%2FtzaxbVNpqVKLyMCtGpd7%2FTransform-Json2Hcl1.png?alt=media&#x26;token=9b3ac70f-6b97-448e-980e-ffd957c69074" alt=""><figcaption><p>Select JSON file to convert into Terraform code. Create new or select existing file as an output.</p></figcaption></figure>

<figure><img src="https://2582686426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn7nTpq2xv8EGbzULdTCb%2Fuploads%2FUdNxVSc3bjorwaBA8std%2FTransform-Json2Hcl2.png?alt=media&#x26;token=b7a2d557-5416-4fd6-b7c9-16b3196cf6f3" alt=""><figcaption><p>Verify transformation output in Execution logs. Reload workspace to check newly created files.</p></figcaption></figure>

<figure><img src="https://2582686426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn7nTpq2xv8EGbzULdTCb%2Fuploads%2FT2lwAK30UDm4vS4yex55%2FTransform-Json2Hcl3.png?alt=media&#x26;token=3604f99e-35c7-4820-9a23-5b0296a482dd" alt=""><figcaption><p>Example output of Terraform to JSON convertion. When Canvas changes are saved, they will be reflected in HCL JSON.</p></figcaption></figure>

<figure><img src="https://2582686426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn7nTpq2xv8EGbzULdTCb%2Fuploads%2F2zHc3RTLOlYmcyRo4QtD%2FTransform-Json2Hcl4.png?alt=media&#x26;token=a21fea3a-70cd-46b2-8448-4cfebefc8423" alt=""><figcaption><p>Example output of JSON to Terraform conversion.</p></figcaption></figure>

Load JSON to canvas.

Load Graphviz and HCL data into interactive diagram. To verify data display, switch view from Text to Canvas.

1. Convert Terraform files into HCL and Graphviz JSON data.
2. Select HCL JSON and Graphviz data to be loaded into Canvas.
3. Switch view from Text to Canvas
4. If you plan to change data on Canvas, you need to Save it back to JSON file.

<figure><img src="https://2582686426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn7nTpq2xv8EGbzULdTCb%2Fuploads%2FMogUXiy3Jve7nTXVMC7E%2FTransform-LoadJson.png?alt=media&#x26;token=05fe1763-8579-4651-9754-05e7f7f92956" alt=""><figcaption><p>Select files to be loaded into canvas.</p></figcaption></figure>

<figure><img src="https://2582686426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn7nTpq2xv8EGbzULdTCb%2Fuploads%2FxXjzAxw0lLySNIUUcnQx%2FTransform-LoadJson2.png?alt=media&#x26;token=fce843d7-aa2d-4a93-a2a7-0e904f16acbd" alt=""><figcaption><p>Change mode to Canvas.</p></figcaption></figure>

### Save canvas data to JSON&#x20;

If you plan to change data on diagram and transform it to Terraform code, follow steps below:

1. Make changes on diagram.
2. Click on "Save Canvas JSON to file"
3. Select existing or type new file name.
4. Verify that file was updated with new data.

<figure><img src="https://2582686426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn7nTpq2xv8EGbzULdTCb%2Fuploads%2FvnGeDxqMY60oNIJsXonC%2FTransform-SaveJson1.png?alt=media&#x26;token=d7c95d83-19ae-4bf8-b39d-a313c3489ee7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2582686426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn7nTpq2xv8EGbzULdTCb%2Fuploads%2FaLWVg4O7lBOrEDe5e3m7%2FTransform-SaveJson2.png?alt=media&#x26;token=2268392f-6850-420e-b42f-1e6a55f9908f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2582686426-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fn7nTpq2xv8EGbzULdTCb%2Fuploads%2F0RAb1cfJic2PE1EBpqdn%2FTransform-SaveJson3.png?alt=media&#x26;token=1ab6969b-4f79-450b-ac8c-9e6f7aa32a81" alt=""><figcaption></figcaption></figure>
