组织架构图

关于组织架构图

组织架构图(org chart)绘制组织的正式汇报结构——谁管理谁、哪些团队隶属于哪位负责人、空缺职位和外部顾问在哪里。人力资源团队在人员规划时使用它;创始人在董事会会议前使用它;运营主管在重组时传阅它。与通用流程图不同,组织架构图以人员(和职位)作为主要实体,以缩进或明确的连线编码层级关系。

Schematex 遵循通用的组织架构图惯例,并扩展支持空缺/未填补职位、矩阵(虚线)汇报关系和助理关系。组织架构图没有单一的 ISO 标准;这里实现的惯例来自人力资源实践和软件行业规范。学术背景请参考 Fayol(1916)维基百科组织架构图条目

orgchart·§
↘ preview
100%
Acme Corp — Q3 2025 Organizational chart with 15 people and 12 relationships Acme Corp — Q3 2025 Jamie Torres CEO Raj Patel CTO Priya Nair Engineering Lead Alex Kim Senior Engineer Jordan Lee Engineer NEW open "TBH" Frontend Engineer Omar Hassan Engineering Lead Yuki Tanaka Staff Engineer draft "TBH" Senior Engineer $ Maria Santos CFO Nour Ahmed Finance Manager Ellen Wu CPO Tyler Brooks Product Lead Suki Ito Product Lead Dr. Alan Ford Board Advisor
UTF-8 · LF · 18 lines · 878 chars✓ parsed·1.3 ms·14.8 KB SVG

1. 第一张组织架构图

最小可用的组织架构图:三层层级,含一个空缺职位。

orgchart·§
↘ preview
100%
Engineering Team Organizational chart with 4 people and 2 relationships Engineering Team Wei Zhang CTO Sam Obi Engineering Lead Ana Rossi Engineer open "TBH" Engineer
UTF-8 · LF · 5 lines · 209 chars✓ parsed·0.5 ms·6.1 KB SVG

四条规则涵盖了 80% 的使用场景:

  1. 以关键字 orgchart 开头,后面可选择性加上引号标题。
  2. 每个人是一个节点id: "姓名" | "职称" | "部门" [属性]| 分隔姓名、职称和部门字段。
  3. 缩进决定层级 — 每多两个(或更多)空格,节点就在其上方最近一个缩进较少的节点下深入一层。
  4. open id:draft id: 声明空缺职位,用 advisor id: 声明外部顾问。

注释必须以 # 开头并独立成行(行尾的 // 也会被去除)。


2. 节点

节点行的格式为 [kind] id: fields [props]id 必须符合 [A-Za-z][A-Za-z0-9_-]*

2.1 字段(以管道符分隔)

: 后面到可选的 [props] 块之前的部分,以 | 分割:

alice: "Alice Zhang"                                # name only
alice: "Alice Zhang" | "VP Engineering"             # name + title
alice: "Alice Zhang" | "VP Eng" | "Platform"        # name + title + department
alice: "Alice Zhang" | "VP Eng" | "Platform" | "x@co.com"  # + info line
位置内容备注
第 1 个姓名可加引号或不加引号
第 2 个职称 / 职级可选
第 3 个部门可选
第 4 个信息行可选;也可通过 note:email:phone:location: 属性设置
orgchart·§
↘ preview
100%
Field count demo Organizational chart with 4 people and 2 relationships Field count demo AL Alice BO Bob "CTO" CA Carol "Engineer" DA Dave "VP Sales" "dave@co.com"
UTF-8 · LF · 5 lines · 161 chars✓ parsed·0.5 ms·4.1 KB SVG

2.2 节点类型

id 前面可选的类型关键字会改变节点的渲染方式:

关键字类型含义
(无)person普通人员
roleopenrole空缺/未填补职位
drafttbhdraft计划中的职位,尚未积极招聘
advisorexternaladvisor外部顾问、董事会成员或承包商
orgchart·§
↘ preview
100%
Node kinds Organizational chart with 5 people and 2 relationships Node kinds Jordan Kim CEO Priya Nair Engineering Lead TBH Senior Engineer HIRING TBH Staff Engineer Dr. Lee Board Advisor
UTF-8 · LF · 6 lines · 289 chars✓ parsed·0.6 ms·6.4 KB SVG

2.3 节点属性

属性写在节点行末尾的 [key: value, …] 中。

属性效果
role:见下表在头像中显示角色图标
icon:role:role: 的别名
department:文本覆盖部门字段
status:new | leaving | on-leave卡片上的状态标签
avatar-color:十六进制颜色(如 "#7B1FA2"头像背景颜色
gender:male | female头像轮廓(未设置角色图标时使用)
note:文本信息行(以第一个为准)
email:文本信息行
phone:文本信息行
location:文本信息行
assistant-of:节点 id将此节点渲染为指定节点的助理
matrix:空格或逗号分隔的节点 id从这些节点到本节点添加虚线矩阵连线
reports:节点 id明确指定父节点(代替缩进)
open(裸标志)将节点标记为空缺;等同于使用 role 类型关键字
drafttbh(裸标志)将节点标记为草稿;等同于 draft 类型关键字
external(裸标志)将节点标记为外部;等同于 advisor 类型关键字

角色图标role: 的值对应显示图标。接受的关键字(不区分大小写):

关键字图标
ceoCEO
ctoCTO
cfoCFO
cooCOO
cmoCMO
cpoCPO
vpVP
engineerengineering工程师
designerdesign设计师
sales销售
hrHR
legal法务
opsoperations运营
marketing市场
product产品
data数据
advisor顾问
intern实习生
vacant空缺
orgchart·§
↘ preview
100%
People directory Organizational chart with 8 people and 3 relationships People directory Jamie Torres CEO Raj Patel CTO Priya Nair Staff Engineer NEW Jordan Lee Senior Engineer $ Maria Santos CFO Nour Ahmed Finance Manager ON LEAVE Dr. Alan Ford Board Advisor TBH General Counsel
UTF-8 · LF · 9 lines · 470 chars✓ parsed·0.8 ms·8.3 KB SVG

3. 层级关系

层级关系通过缩进来表达——这是最常用的方式。每个节点成为其上方缩进最小的节点的子节点。制表符被视为两个空格。

ceo: "CEO"
  cto: "CTO"           # child of ceo (indent 2)
    eng: "Engineer"    # child of cto (indent 4)
  cfo: "CFO"           # child of ceo (indent 2, same level as cto)

也可以使用 reports: 属性明确指定父节点,不受缩进影响:

orgchart "Flat file"
ceo: "CEO"
cto: "CTO" [reports: ceo]
eng: "Engineer" [reports: cto]
orgchart·§
↘ preview
100%
Series A Startup Organizational chart with 12 people and 8 relationships Series A Startup Lena Brandt CEO James Osei CTO Platform Lead Engineering Fatima Al-Rashid Backend Engineer Marco Ricci Backend Engineer Frontend Lead Engineering Yumi Tanaka Frontend Engineer NEW open "TBH" Frontend Engineer Diana Russo CPO Chris Obi Product Manager Kai Nakamura CMO draft "TBH" Growth Marketer
UTF-8 · LF · 13 lines · 647 chars✓ parsed·2.1 ms·12.4 KB SVG

4. 连线

连线分两种。大多数汇报线由缩进层级自动生成。你也可以明确写出,或者添加矩阵(虚线)连线。

运算符连线类型含义
from -> toreport实线汇报线
from -.-> tomatrix虚线矩阵(间接)汇报线

明确连线要求两个节点 id 均已声明。如果缩进层级已隐含了同样的关系,明确写出的 report 连线不会重复出现。

连线支持标签:

pm1 -.-> design [label: "product partnership"]
orgchart·§
↘ preview
100%
Matrix org Organizational chart with 5 people and 3 relationships Matrix org design partner Ellen Wu CPO Core PM Product Manager Growth PM Product Manager Suki Ito Design Lead Ben Park Data Lead
UTF-8 · LF · 10 lines · 378 chars✓ parsed·0.6 ms·5.4 KB SVG

5. 配置

config: 行调整布局和方向,每行一条。

配置键默认值效果
directionTDLRTD从上到下或从左到右
layouttreelistdirectorycompacttree视觉布局模式

布局说明:

  • tree — 带分支连接器的标准层级树。适合大多数组织架构图。
  • list / directory / compact — 紧凑型缩进目录视图。适合人员较多时树状分支过于复杂的情况。

树形布局(默认)——带分支连接器和部门颜色编码的头像卡片。适合 30 人以内的团队。

orgchart·§
↘ preview
100%
Acme Engineering — tree Organizational chart with 8 people and 5 relationships Acme Engineering — tree Wei Zhang CTO Platform Lead Engineering Amara Diallo Staff Engineer Ben Novak Senior Engineer draft "TBH" Engineer Growth Lead Engineering NEW Fatima Al-Rashid Senior Engineer Marco Ricci Engineer
UTF-8 · LF · 9 lines · 454 chars✓ parsed·0.7 ms·10.4 KB SVG

列表布局 — 带缩进引导线的紧凑目录行。适合树状分支过于复杂的大型团队。

orgchart·§
↘ preview
100%
Engineering Directory — list Organizational directory with 8 people and 5 reporting relationships Engineering Directory — list · Wei Zhang CTO PT Platform Team 3 reports · Amara Diallo Staff Eng · Ben Novak Senior Eng · draft "TBH" Engineer GT Growth Team 2 reports · Fatima Al-Rashid Senior Eng · Marco Ricci Engineer
UTF-8 · LF · 10 lines · 421 chars✓ parsed·1.0 ms·8.4 KB SVG

6. 标签与注释

  • 标题: orgchart "Acme Corp" — 仅第一行。
  • 姓名字段: 冒号后的第一个管道分隔字段;可加引号("Alice Zhang")或不加引号(Alice)。
  • 职称/部门字段: 第二和第三个管道分隔字段。
  • 信息行: 第四个管道分隔字段,或通过 note:email:phone:location: 属性设置。以第一个遇到的为准。
  • 注释: 行首(前导空白后)的 #。行内 // 也会被去除。

7. 保留字与转义

行首保留字: orgchart(头部)、config:roleopendrafttbhadvisorexternal

保留运算符标记 — 在 id 中避免使用这些序列:->-.->

ID 规则: 必须符合 [A-Za-z][A-Za-z0-9_-]*。含空格的名称放在带引号的名称字段中,不能放在 id 里。

属性值中含空格的字符串(如 department: "Platform Eng")必须用双引号括起来。


8. 常见错误

你写了解析器报错修复方法
alice: Alice Zhang(不带引号的含空格名称)Alice 解析为姓名,Zhang 丢失或读错给名称加引号:alice: "Alice Zhang"
open1 open: "TBH"id 后面的 open 不是类型关键字;id 正则匹配失败类型关键字在前:open open1: "TBH"
在节点声明之前写 alice -> bobOrgchartParseError: Edge references unknown node先声明节点,再在末尾写连线
config: direction = top-down未知值被忽略;方向保持 TD使用 TDLR
config: layout = compact接受——映射到 list 布局正确;compactdirectorylist 均可用
alice [matrix: bob charlie]matrix: 中的空格分隔 id——两个均被添加也可用逗号:matrix: "bob, charlie"
id 含空格:fe lead解析器取 fe 作为 id;lead 失败使用下划线:fe_lead
重复 idOrgchartParseError: Duplicate node id每个节点需要唯一 id

9. 语法(EBNF)

document       = header (blank | comment | config | edge | node)*

header         = "orgchart" ( WS quoted-string )? NEWLINE
quoted-string  = '"' any-char-but-quote* '"'

config         = "config" WS ":" WS key WS "=" WS value NEWLINE
key            = "direction" | "layout"

node           = INDENT* kind? id ":" WS fields ( "[" node-attrs "]" )? NEWLINE
kind           = "role" | "open" | "draft" | "tbh" | "advisor" | "external" | "person"
fields         = field ( "|" field )*
field          = quoted-string | unquoted-text
node-attrs     = node-attr ("," node-attr)*
node-attr      = "role:" role-keyword
               | "icon:" role-keyword
               | "department:" text
               | "status:" ( "new" | "leaving" | "on-leave" )
               | "avatar-color:" quoted-hex
               | "gender:" ( "male" | "female" )
               | "note:" text
               | "email:" text
               | "phone:" text
               | "location:" text
               | "assistant-of:" id
               | "matrix:" id-list
               | "reports:" id
               | bare-flag

bare-flag      = "open" | "draft" | "tbh" | "external"

edge           = id WS edge-op WS id ( "[" edge-attrs "]" )? NEWLINE
edge-op        = "->" | ".->"  // -.-> for matrix
edge-attrs     = "label:" quoted-string

id             = [A-Za-z] [A-Za-z0-9_-]*
comment        = ( "#" | "//" ) any NEWLINE

权威来源:src/diagrams/orgchart/parser.ts。如果与解析器有出入,以解析器为准——请提交 issue。


10. 路线图

计划中——暂不可解析。 请勿在生成的 DSL 中使用这些内容;解析器会拒绝或忽略它们。

  • assistant-of: 视觉渲染 — 该属性已被解析并存储在 AST 中,但渲染器尚未绘制助理肘形连接器。
  • Config coloring — 基于部门的颜色主题(coloring: department)。
  • Config compact 尺寸等级 — 明确的卡片尺寸控制(size: small | medium | large)。
  • span: 节点宽度 — 在树形布局中让节点跨越多个同级列。
  • 照片 / 头像 URLavatar: "https://…" 显示真实照片。
  • 导出为 HRIS 格式 — SVG 之外的 JSON/CSV 结构化输出。

如果你迫切需要以上任何功能,请在 GitHub issues 中跟踪。


相关示例

来自示例库的即用场景:

orgchart·§ HR convention
Acme — Series A Team Organizational chart with 15 people and 13 relationships Acme — Series A Team Jamie Torres CEO Raj Patel CTO Priya Nair Eng Lead Alex Kim Senior Engineer Jordan Lee Engineer NEW open "TBH" Frontend Engineer Omar Hassan Eng Lead Yuki Tanaka Staff Engineer draft "TBH" Senior Engineer Ellen Wu CPO Tyler Brooks Product Lead Suki Ito Product Lead Maria Santos COO Nour Ahmed Finance Manager Dr. Alan Ford Board Advisor
Series-A tech startup org
Three-level org chart for a ~30-person Series-A startup — CEO with engineering, product, and ops directs, showing open roles and a board advisor.
saas
orgchart·§ HR convention
Scaleup — Matrixed Product Lines Organizational chart with 14 people and 17 relationships Scaleup — Matrixed Product Lines Jamie Torres CEO Raj Patel CTO Priya Nair Eng Lead Alex Kim Senior Engineer Jordan Lee Engineer Omar Hassan Eng Lead Yuki Tanaka Staff Engineer Maya Patel Engineer Ellen Wu CPO Tyler Brooks PM Suki Ito PM Liu Wei CDO Ana Rossi Designer Kai Park Designer
Scale-up with matrix reporting
Org chart for a 60-person scale-up with two product lines — solid-line functional reporting plus dotted-line product-manager reporting into each engineering lead.
saas

Found this useful?

Schematex is free, fully open source, and zero-dependency. A star helps other developers discover it.