Schematex

組織圖

關於組織圖

組織圖（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.1 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.4 ms·4.1 KB SVG

2.2 節點種類

ID 前面可選的種類關鍵字改變節點的渲染方式：

關鍵字種類意義
（無）person一般人員
role、openrole空缺/未填補職位
draft、tbhdraft規劃中但尚未積極招募的職位
advisor、externaladvisor外部顧問、董事會成員或承包商
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.5 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 種類關鍵字
draft 或 tbh（裸旗標）將節點標記為草案；等同於 draft 種類關鍵字
external（裸旗標）將節點標記為外部；等同於 advisor 種類關鍵字

角色圖示 — role: 的值對應顯示圖示。可接受的關鍵字（不分大小寫）：

關鍵字圖示
ceoCEO
ctoCTO
cfoCFO
cooCOO
cmoCMO
cpoCPO
vpVP
engineer、engineering工程師
designer、design設計師
sales業務
hr人資
legal法務
ops、operations營運
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.6 ms·8.3 KB SVG

3. 層級關係

層級關係以縮排表示——最常用的模式。每個節點成為其上方縮排最少的那個節點的子節點。Tab 鍵視為兩個空格。

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·0.8 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.5 ms·5.4 KB SVG

5. 設定

config: 行調整版面和方向，每條各自獨立成行。

設定鍵可用值預設值效果
directionTD、LRTD由上而下或由左而右流向
layouttree、list、directory、compacttree視覺版面模式

版面備注：

  • 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.6 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·0.7 ms·8.4 KB SVG

6. 標籤與注解

  • 標題： orgchart "Acme Corp" — 僅第一行。
  • 姓名欄位： 冒號後面第一個以管道符分隔的欄位；可加引號（"Alice Zhang"）或不加（Alice）。
  • 職稱/部門欄位： 第二和第三個以管道符分隔的欄位。
  • 資訊行： 第四個以管道符分隔的欄位，或透過 note:、email:、phone:、location: 屬性設定。先出現的優先。
  • 注解： 以 # 開頭（在前置空白之後）的行。行尾的 // 也會被去除。

7. 保留字與跳脫字元

行首保留： orgchart（標頭）、config:、role、open、draft、tbh、advisor、external。

保留運算子符號 — 避免在 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 -> bob，但兩個節點都還沒宣告OrgchartParseError: Edge references unknown node先宣告節點，再在末尾寫邊線
config: direction = top-down未知值被忽略；方向維持 TD使用 TD 或 LR
config: layout = compact被接受——對應到 list 版面正確；compact、directory 和 list 都可用
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，但渲染器尚未繪製助理的折角連接器。
  • coloring 設定 — 基於部門的色彩主題（coloring: department）。
  • compact 大小層級 — 明確的卡片大小控制（size: small | medium | large）。
  • span: 節點寬度 — 在樹狀版面中讓節點跨越多個同層欄位。
  • 照片 / 頭像 URL — avatar: "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.

Star36

心智圖

Previous Page

文氏圖／歐拉圖（Venn / Euler diagram）

Next Page

On this page

關於組織圖1. 第一張組織圖2. 節點2.1 欄位（以管道符分隔）2.2 節點種類2.3 節點屬性3. 層級關係4. 邊線5. 設定6. 標籤與注解7. 保留字與跳脫字元8. 常見錯誤9. 語法（EBNF）10. 開發路線圖相關範例