# 组织架构图生成器

把层级 JSON 数据渲染成带姓名与职位的垂直组织架构图

> 标准页面: https://elysiatools.com/zh/tools/org-chart-maker

- **分类:** Data Visualization

- **关键词:** 组织架构图, 层级, 团队, 职位, 汇报关系

## 概述

解析 JSON 层级结构（每个节点含 name、可选 title 和可选 children），用整洁树算法自上而下布局，并绘制 SVG 组织架构图：按层级着色的圆角方框，管理者与下属之间用正交连接线相连。

## 输入项

- **组织数据** (textarea): JSON hierarchy: each node has a name, optional title, and optional children array
- **图表标题** (text): Enter chart title...
- **配色方案** (select)
- **显示职位** (checkbox)
- **方框样式** (select)

## 适用场景

- 需要将公司或团队的层级汇报关系（如 JSON 数据）快速转化为直观的视觉图表时。
- 在制作企业汇报 PPT、团队介绍网页或内部维基文档，需要插入高清矢量组织架构图时。
- 调整团队架构或规划新部门，需要动态调整层级数据并实时预览组织关系变化时。

## 工作原理

- 在输入框中粘贴或编写符合层级结构的 JSON 数据，定义每个节点的姓名（name）、职位（title）及下属（children）。
- 配置图表标题、配色方案（如默认、暖色、冷色或柔和）、是否显示职位以及方框样式（实心或描边）。
- 工具通过整洁树算法自上而下计算布局，自动绘制并输出包含正交连接线和层级着色方框的 SVG 组织架构图。

## 使用案例

- 企业人力资源规划：HR 导入员工花名册的层级数据，一键生成全公司或特定部门的汇报关系图。
- 项目团队架构展示：项目经理在项目启动时，绘制跨部门项目组的成员分工与汇报路径。
- 初创公司组织设计：创始人通过调整 JSON 结构，快速模拟和评估不同组织架构方案的扁平度。

## 常见问题

### 组织数据 JSON 的基本格式是怎样的？

JSON 数据需为树状层级结构，根节点和子节点应包含 name（姓名）字段，可选填 title（职位）和 children（子节点数组）。

### 如何在架构图中隐藏成员的职位信息？

您只需在配置项中取消勾选“显示职位”选项，图表将仅展示成员姓名。

### 支持哪些配色方案？

工具提供“默认”、“暖色”、“冷色”和“柔和”四种配色方案，系统会根据节点所处的层级自动应用相应的颜色。

### 生成的组织架构图是什么格式？

生成的结果为 HTML 格式，其中嵌入了高质量的 SVG 矢量图，支持无损缩放。

### 节点之间的连接线样式可以修改吗？

系统默认使用标准的正交连接线连接管理者与下属，以确保整体布局的整洁与专业。

## 相关工具

- [树状图生成器](https://elysiatools.com/zh/tools/tree-diagram-generator): 从层级数据生成交互式树状图，支持自定义样式
- [韦恩图生成器](https://elysiatools.com/zh/tools/venn-diagram-maker): 为 2 到 4 个集合绘制韦恩图，标注各区域的大小与交集
- [环形图生成器](https://elysiatools.com/zh/tools/donut-chart-generator): 从数据生成可自定义的环形图（甜甜圈图），具有中央空间，非常适合显示比例数据
- [象形图生成器](https://elysiatools.com/zh/tools/pictograph-generator): 使用图标/符号创建象形图来表示数量，支持自定义图标、颜色和布局
- [范围图生成器](https://elysiatools.com/zh/tools/range-chart-generator): 创建范围图来可视化最小值-最大值范围，支持中位数标记和异常值检测
- [瀑布图生成器](https://elysiatools.com/zh/tools/waterfall-chart-generator): 创建瀑布图来可视化累积变化，支持正负值区分和汇总显示
- [颜色 Token 级联生成器](https://elysiatools.com/zh/tools/color-token-cascade-generator): 输入一个主色 Hex，自动生成主色、辅助色、中性色和语义化设计 token，并输出 CSS 变量与 Style Dictionary JSON
- [图片调色板转设计令牌](https://elysiatools.com/zh/tools/image-to-design-tokens): 从图片中用 k-means 聚类提取主色，导出为 CSS 变量 / SCSS 变量 / Tailwind 配置 / JSON 设计令牌，并自动为每个颜色生成命名色阶

## 示例

- [Grafana 高级应用示例](https://elysiatools.com/zh/samples/grafana-samples): 全面的 Grafana 示例，涵盖高级仪表板设计、告警配置、数据源集成和插件开发
- [二维码示例](https://elysiatools.com/zh/samples/qrcode-samples): 用于测试二维码读取和生成工具的示例二维码图像
- [JWT 示例](https://elysiatools.com/zh/samples/jwt-samples): 从基础令牌结构到高级安全实现的全面JWT示例
- [D3.js 数据可视化示例](https://elysiatools.com/zh/samples/d3js-data-visualization): 全面的D3.js数据可视化示例，包括图表、地图、动画和交互式可视化

## 相关内容

- [结构与逻辑图生成器](https://elysiatools.com/zh/hubs/structural-and-logic-diagram-generators): 从文本、JSON 或日志生成流程图、思维导图、组织架构图、树状图、韦恩图、ASCII 目录树与时序图——用于规划、文档与工程评审。
- [JSON 交换与格式翻译工具](https://elysiatools.com/zh/hubs/json-convert): 在一个专题里比较 JSON 与 CSV、YAML、TOML、GraphQL、XML、Markdown、Excel、BSON、EDN 等结构化格式之间的转换工具。
- [JSON 检查、对比与转换工具](https://elysiatools.com/zh/hubs/json-utility): 把 JSON 格式化、差异对比、路径检查、Schema 校验、合并、转换和导出工具集中到一个专题中，适合 API 与数据处理流程。
- [JSON Schema、Mock 数据与 API 夹具生成工具](https://elysiatools.com/zh/hubs/json-generate): 围绕JSON Schema 生成、Mock 负载构建与 API 夹具准备整理的一组工具。