Tree Visualization

iCraft supports rendering structural relationships using custom tree-structured data, making tree data intuitively visualizable.

---

Syntax

Tree is a data format for describing tree structures, which uses JSON syntax. The main syntax rules are as follows:

• name: The name of the node, which must be unique within the tree.

• type: Defines the element type of the node, which determines how the node will be rendered visually.

  • If a node contains children, its type must be "area".

  • If the type value does not match any built-in graphic, a cube will be rendered instead.

• children: Optional, used to define an array of child nodes.

• targets: Optional, used to define connection targets (an array of target nodes' name values). Connections can be made to any node, not limited to sibling or parent-child relationships.

---

Example

Tree Codes

{
  "name": "Terraform Project",
  "type": "area",
  "children": [
    {
      "name": "us-west-2",
      "type": "area",
      "children": [
        {
          "name": "aws_vpc",
          "type": "area",
          "children": [
            {
              "name": "aws_subnet.public",
              "type": "area",
              "children": [
                {
                  "name": "app_server",
                  "type": "Web Server",
                  "targets": ["aws_security_group"]
                }
              ]
            },
            {
              "name": "aws_internet_gateway",
              "type": "gateway"
            },
            {
              "name": "aws_route_table",
              "type": "area",
              "targets": ["aws_internet_gateway"]
            },
            {
              "name": "aws_security_group",
              "type": "area"
            }
          ]
        },
        {
          "name": "aws_route_table_association",
          "type": "Route53",
          "targets": ["aws_subnet.public", "aws_route_table"]
        }
      ]
    }
  ]
}

Visualization in iCraft