分类

← View All Tools

树状图生成器

从层级数据生成交互式树状图，支持自定义样式

关键信息

分类: Data Visualization
输入类型: textarea, text, select, color, number, checkbox
输出类型: html
样本覆盖: 4
支持 API: Yes

概览

树状图生成器是一款高效的数据可视化工具，能够将复杂的层级数据快速转换为清晰、美观的交互式树状图，支持自定义节点形状、颜色及布局样式，适用于展示组织架构、逻辑结构或分类体系。

适用场景

•需要将复杂的层级数据或分类关系进行可视化展示时。
•在制作组织架构图、决策树或产品分类目录时。
•需要通过自定义样式调整图表外观以适配演示文档或报告时。

工作原理

•在输入框中粘贴 JSON 格式的层级数据或父子关系文本。
•根据需求调整节点形状、颜色、连线宽度及字体大小等样式参数。
•点击生成按钮，即可实时预览并获取交互式的树状图结果。

使用场景

企业组织架构图的快速构建与展示。

产品分类体系或网站导航结构的逻辑梳理。

项目任务分解（WBS）及层级关系的可视化呈现。

用户案例

1. 公司部门架构图

人力资源专员

背景原因: 需要向管理层展示公司最新的部门架构，包含各部门的层级关系。
解决问题: 手动绘图效率低且难以维护，需要一种快速生成清晰架构图的方法。
如何使用: 输入部门层级 JSON 数据，选择“矩形”节点形状，并设置统一的蓝色主题色。
示例配置: nodeShape: rectangle, nodeColor: #3b82f6, showValues: false
效果: 生成了一张结构严谨、布局清晰的部门架构图，直接用于内部汇报。

2. 产品功能分类树

产品经理

背景原因: 正在梳理复杂的产品功能模块，需要向开发团队展示功能间的从属关系。
解决问题: 功能点繁多，文字描述不够直观，需要通过可视化图表辅助沟通。
如何使用: 使用父子关系文本格式输入功能模块数据，调整节点颜色以区分不同优先级。
示例配置: nodeShape: circle, nodeSize: 50, showLabels: true
效果: 通过树状图直观展示了功能模块的层级，有效提升了团队对产品结构的理解。

用 Samples 测试

json, text

2026-02-01 到 2026-02-10 工具生成的PDF示例

preferred input family json

ELK Stack 日志分析示例

全面的 ELK Stack（Elasticsearch、Logstash、Kibana）示例，用于分布式系统中的日志聚合、处理和可视化

preferred input family json

十六进制/Unicode转换样本

十六进制和Unicode转义序列转换的测试样本

preferred input family json

从基础令牌结构到高级安全实现的全面JWT示例

preferred input family json

相关专题

JsonConvert工具专题

探索 100 个围绕 json 的 convert 工作流工具，快速找到相近能力。

TextConvert工具专题

探索 80 个围绕 text 的 convert 工作流工具，快速找到相近能力。

Json 工具专题

探索 43 个围绕 json 的 utility 工作流工具，快速找到相近能力。

Text 工具专题

探索 33 个围绕 text 的 utility 工作流工具，快速找到相近能力。

常见问题

支持哪些格式的数据输入？

支持标准的 JSON 对象格式，也支持简单的“父节点:子节点:数值”文本格式。

生成的树状图可以导出吗？

该工具生成的是交互式 HTML 图表，您可以直接在页面查看或通过截图保存。

可以自定义节点的形状吗？

可以，支持圆形、矩形、圆角矩形和菱形四种节点形状。

如何调整图表的大小？

您可以在配置项中修改“图表高度”和“节点大小”参数来适配不同的展示空间。

是否可以隐藏节点上的数值？

可以，通过取消勾选“显示节点数值”选项即可隐藏数值信息。

API 文档

请求端点

POST /zh/api/tools/tree-diagram-generator

请求参数

参数名	类型	必填	描述
treeData	textarea	是	树的层级数据。支持JSON对象或父子关系文本格式
chartTitle	text	否	显示在图表上方的标题
nodeShape	select	否	-
nodeColor	color	否	树节点的颜色
nodeTextColor	color	否	节点文字的颜色
lineColor	color	否	连接线的颜色
backgroundColor	color	否	图表容器的背景颜色
nodeSize	number	否	节点的像素大小
fontSize	number	否	节点文字的字体大小
lineWidth	number	否	连接线的宽度
chartHeight	number	否	图表的像素高度
showLabels	checkbox	否	在节点上显示文字标签
showValues	checkbox	否	在节点上显示数值

响应格式

{
  "result": "Processed HTML content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}

HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中：

{
  "mcpServers": {
    "elysiatools-tree-diagram-generator": {
      "name": "tree-diagram-generator",
      "description": "从层级数据生成交互式树状图，支持自定义样式",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=tree-diagram-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]