# Tree diagram

> Create a top-down hierarchy tree diagram.

Source: https://mockflow.com/developers/reference/item-types/tree-diagram

Send `"type": "tree_diagram"`.

Create a top-down hierarchy tree diagram. Four categories: "sitemap" (website page hierarchy), "orgchart" (reporting structure of people/teams), "tree" (generic hierarchy: taxonomy, family tree, folder structure), "wbs" (project work breakdown structure).

Also available as the MCP tool `render_treediagram`. The same payload works through either surface.

### Fields

- `title` (string): A short title for the diagram, shown as the frame header (e.g. "Online Bookstore Sitemap").
- `category` (enum<string>): Diagram flavor: sitemap (website pages), orgchart (reporting structure), tree (generic hierarchy), wbs (work breakdown). One of `sitemap`, `orgchart`, `tree` or `wbs`. Defaults to `sitemap`.
- `nodeData` (object, required): Root node with id, name, root=true, category-specific fields, and children array
    - `id` (string)
  - `name` (string)
  - `url` (string): sitemap only: relative page path like "/about"; root page is "/"
  - `role` (string): orgchart only: job title
  - `department` (string): orgchart only: organizational unit
  - `note` (string): tree only: short note line
  - `owner` (string): wbs only: responsible team or role; a person's name only when the user provides it
  - `root` (boolean)
  - `blocks` (object[]): sitemap only: page content sections
  - `children` (object[])

## Example

```json
{
  "type": "tree_diagram",
  "data": {
    "title": "Q4 Launch Planning",
    "category": "sitemap",
    "nodeData": {
      "id": "string",
      "name": "Q4 Launch Planning",
      "url": "string",
      "role": "string",
      "department": "string",
      "note": "string"
    }
  }
}
```