tree
block
An indented file-tree diagram shape: one row per nested tree_node, with file-explorer connector guides.
tree renders an indented file-tree: one row per tree_node, indented by depth with the classic file-explorer connector guides drawn between a parent and its children. Each node carries a title (its positional label) plus an optional icon and color, and nodes nest arbitrarily, so it suits a directory layout, a config tree, or any hierarchy. A tree is a diagram shape, so it lives inside a diagram and is placed by x / y (or anchors).
iconset lucide {}
diagram { width = 360 height = 220
tree {
tree_node "src/" {
icon = "folder"
color = "#88c0d0"
tree_node "render/" {
icon = "folder"
tree_node "svg.rs" { icon = "file" }
tree_node "html.rs" { icon = "file" }
}
tree_node "lib.rs" { icon = "file" }
tree_node "tree.rs" { icon = "file" }
}
tree_node "Cargo.toml" { icon = "file" }
}
}
Icons resolve from any declared iconset; a node's color is any CSS colour and themes its label and icon. Give a node an id to make it an edge target — an edge then attaches to that node's row (west / east), exactly like connecting any other shape.
Related
- diagram