generate_tree_chart
Visualize hierarchical data structures like organizational charts, family trees, or file directories with customizable layout, orientation, and theme options.
Instructions
Generate a tree chart to display hierarchical data structure, such as, organizational chart, family tree, or file directory structure.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| data | Yes | Tree data structure, such as, { name: 'Root', children: [{ name: 'Child 1' }, { name: 'Child 2' }] }. | |
| height | No | Set the height of the chart, default is 600px. | |
| layout | No | Tree layout type. Default is 'orthogonal'. | orthogonal |
| orient | No | Tree orientation. LR=left-to-right, RL=right-to-left, TB=top-to-bottom, BT=bottom-to-top. Default is 'LR'. | LR |
| outputType | No | The output type of the diagram. Can be 'png', 'svg' or 'option'. Default is 'png', 'png' will return the rendered PNG image, 'svg' will return the rendered SVG string, and 'option' will return the valid ECharts option. | png |
| theme | No | Set the theme for the chart, optional, default is 'default'. | default |
| title | No | Set the title of the chart. | |
| width | No | Set the width of the chart, default is 800px. |
Implementation Reference
- src/tools/tree.ts:57-170 (handler)The 'run' function implements the tool's core logic: it constructs an ECharts tree chart configuration from the input tree data and parameters, then generates the output image using the shared generateChartImage utility.run: async (params: { data: TreeDataType; height: number; layout?: "orthogonal" | "radial"; orient?: "LR" | "RL" | "TB" | "BT"; theme?: "default" | "dark"; title?: string; width: number; outputType?: "png" | "svg" | "option"; }) => { const { data, height, layout = "orthogonal", orient = "LR", theme, title, width, outputType, } = params; const series: Array<SeriesOption> = [ { type: "tree", data: [data], layout: layout, orient: orient, symbol: "emptyCircle", symbolSize: 7, initialTreeDepth: -1, itemStyle: { color: "#4154f3", borderWidth: 2, }, lineStyle: { color: "#ccc", width: 1.5, curveness: 0.5, }, label: { position: layout === "radial" ? "top" : orient === "LR" ? "right" : orient === "RL" ? "left" : orient === "TB" ? "bottom" : "top", verticalAlign: "middle", align: layout === "radial" ? "center" : orient === "LR" ? "left" : orient === "RL" ? "right" : "center", fontSize: 12, }, leaves: { label: { position: layout === "radial" ? "top" : orient === "LR" ? "right" : orient === "RL" ? "left" : orient === "TB" ? "bottom" : "top", verticalAlign: "middle", align: layout === "radial" ? "center" : orient === "LR" ? "left" : orient === "RL" ? "right" : "center", }, }, emphasis: { focus: "descendant", }, expandAndCollapse: true, animationDuration: 550, animationDurationUpdate: 750, }, ]; const echartsOption: EChartsOption = { series, title: { left: "center", text: title, }, tooltip: { trigger: "item", triggerOn: "mousemove", }, }; return await generateChartImage( echartsOption, width, height, theme, outputType, "generate_tree_chart", ); },
- src/tools/tree.ts:35-56 (schema)Zod input schema defining parameters for the tool, including recursive TreeNodeSchema for data, dimensions, layout options, and output type.inputSchema: z.object({ data: TreeNodeSchema.describe( "Tree data structure, such as, { name: 'Root', children: [{ name: 'Child 1' }, { name: 'Child 2' }] }.", ), height: HeightSchema, layout: z .enum(["orthogonal", "radial"]) .optional() .default("orthogonal") .describe("Tree layout type. Default is 'orthogonal'."), orient: z .enum(["LR", "RL", "TB", "BT"]) .optional() .default("LR") .describe( "Tree orientation. LR=left-to-right, RL=right-to-left, TB=top-to-bottom, BT=bottom-to-top. Default is 'LR'.", ), theme: ThemeSchema, title: TitleSchema, width: WidthSchema, outputType: OutputTypeSchema, }),
- src/tools/tree.ts:19-29 (schema)Recursive Zod schema definition for the tree node data structure used in the tool's input.// Define recursive schema for hierarchical data const TreeNodeSchema: z.ZodType<TreeDataType> = z.lazy(() => z.object({ name: z.string().describe("Node name, such as 'Root'."), value: z.number().optional().describe("Node value (optional)."), children: z .array(TreeNodeSchema) .optional() .describe("Child nodes for hierarchical structure."), }), );
- src/tools/index.ts:19-37 (registration)The generateTreeChartTool is registered (included) in the exported 'tools' array, which is likely used by the MCP server to expose all available tools.export const tools = [ generateEChartsTool, generateLineChartTool, generateBarChartTool, generatePieChartTool, generateRadarChartTool, generateScatterChartTool, generateSankeyChartTool, generateFunnelChartTool, generateGaugeChartTool, generateTreemapChartTool, generateSunburstChartTool, generateHeatmapChartTool, generateCandlestickChartTool, generateBoxplotChartTool, generateGraphChartTool, generateParallelChartTool, generateTreeChartTool, ];
- src/tools/index.ts:16-16 (registration)Import statement bringing the tool definition into the index file for registration.import { generateTreeChartTool } from "./tree";