一、示例代碼

在企業管理系統開發中，清晰的權限視圖設計至關重要。本文將分享如何使用 Mermaid 繪制直觀的企業權限關系圖，復制以下代碼到mermaid中，將得到關系圖如圖1。

graph LR
ZJL[總經理]:::red
HW[海外銷售部]:::blue
GN[國內營銷部]:::blue
Zu[組領導]:::yellow
ZY[專員]:::purple
subgraph 關系圖
ZJL ==> HW & GN ==> Zu ==> ZY
endsubgraph 圖表種類需求
hwbmtj{{海外部門統計}}:::green
gnbmtj{{國內部門統計}}:::green
grxstj{{個人銷售統計}}:::pureBlue
zntj{{組內統計}}:::green
znxsrank{{組內銷售rank}}:::pureRed
hwbmxsrank{{海外部門銷售rank}}:::pureRed
gnbmxsrank{{國內部門銷售rank}}:::pureRed
ddzt{{訂單狀態}}
salesSummary{{銷售總結}}:::lightYellow
endsubgraph 實際圖表歸并
grddtj{{個人訂單統計}}:::lightBlue
grcpxstj{{個人產品銷售統計}}:::lightBlue
khphtj{{客戶貢獻排行}}:::lightBlue
rank{{銷售人員RANK}}:::lightRed
_ddzt{{訂單狀態}}
hnwbmtj{{海內外部門統計 + 組內統計}}:::lightGreen
salesFeedback{{銷售反饋}}:::lightYellowgrxstj --> grddtj & grcpxstj & khphtj
hwbmxsrank & gnbmxsrank & znxsrank --> rank
ddzt --> _ddzt
hwbmtj & gnbmtj & zntj --> hnwbmtj
salesSummary --> salesFeedbackendsubgraph 總經理可見內容
總經理:::red ---> hwbmtj & gnbmtj & salesSummary
endsubgraph 國外部門經理可見內容
國外部門經理:::blue ---> hwbmtj & grxstj & hwbmxsrank & ddzt
endsubgraph 國內部門經理可見內容
國內部門經理:::blue ---> gnbmtj & grxstj & gnbmxsrank & ddzt
endsubgraph 組領導可見內容
組:::yellow ---> zntj & grxstj & znxsrank & ddzt
endsubgraph 銷售專員可見內容
專員:::purple ---> grxstj & ddztendclassDef red fill:#eeaa9c,color:#fff;
classDef blue fill:#93b5cf,color:#fff;
classDef yellow fill:#fcd217,color:#fff;
classDef purple fill:#e0c8d1,color:#fff;
classDef green fill:#0f0;
classDef pureRed fill:#f00,color:#fff;
classDef pureBlue fill:#00f,color:#fff;
classDef lightBlue fill:#2e317c,color:#fff;
classDef lightGreen fill:#a4cab6,color:#fff;
classDef purple fill:#fef200,color:#fff;

二、基礎結構設計

2.1 組織架構樹

使用 graph LR 創建從左到右的組織關系圖，通過 subgraph 劃分邏輯模塊：

graph LR
ZJL[總經理]:::red
HW[海外銷售部]:::blue
GN[國內營銷部]:::blue
Zu[組領導]:::yellow
ZY[專員]:::purplesubgraph 組織架構
ZJL ==> HW & GN ==> Zu ==> ZY
endclassDef red fill:#eeaa9c,color:#fff;
classDef blue fill:#93b5cf,color:#fff;
classDef yellow fill:#fcd217,color:#fff;
classDef purple fill:#e0c8d1,color:#fff;

效果說明：

• 總經理（紅色）統領兩個部門
• 部門經理（藍色）管理組領導
• 組領導（黃色）直接管理專員
• 顏色編碼增強角色辨識度

2.2 權限視圖設計

通過嵌套 subgraph 實現三層視圖結構：

graph LR
subgraph 圖表種類需求
hwbmtj{{海外部門統計}}:::green
...
endsubgraph 實際圖表歸并
grddtj{{個人訂單統計}}:::lightBlue
...
endsubgraph 角色可見內容
總經理:::red ---> hwbmtj & gnbmtj
...
end

核心技巧：

1. 使用 {{ }} 表示可點擊圖表元素
2. ---> 單向箭頭表示權限范圍
3. 顏色區分視圖層級（需求/實現/權限）

三、銷售數據權限系統

graph LR
ZJL[總經理]:::red
HW[海外銷售部]:::blue
GN[國內營銷部]:::blue
Zu[組領導]:::yellow
ZY[專員]:::purplesubgraph 組織架構
ZJL ==> HW & GN ==> Zu ==> ZY
endsubgraph 圖表需求
hwbmtj{{海外部門統計}}:::green
gnbmtj{{國內部門統計}}:::green
grxstj{{個人銷售統計}}:::pureBlue
endsubgraph 圖表實現
grddtj{{個人訂單統計}}:::lightBlue
grcpxstj{{產品銷售統計}}:::lightBlue
grxstj --> grddtj & grcpxstj
endsubgraph 總經理權限
總經理:::red ---> hwbmtj & gnbmtj
endsubgraph 專員權限
專員:::purple ---> grddtj
endclassDef red fill:#eeaa9c,stroke:#d12727,stroke-width:2px;
classDef blue fill:#93b5cf,stroke:#2b6ca3;
classDef yellow fill:#fcd217,stroke:#d9a602;
classDef purple fill:#e0c8d1,stroke:#a87b8f;
classDef green fill:#a4cab6,stroke:#3a7d5e;
classDef pureBlue fill:#2e317c,color:#fff;
classDef lightBlue fill:#b6d7e8;

四、關鍵語法技巧匯總

這個表格簡要地展示了 Mermaid 圖中使用的語法和結構：

功能/語法	描述	示例
graph LR	定義圖表布局和方向，LR表示從左到右。	graph LR
subgraph	定義子圖，將節點和連接劃分為一個小組。	subgraph 關系圖
節點定義	用[節點名稱]定義節點。	ZJL[總經理]
連接節點	使用-->表示節點之間的連接。	ZJL ==> HW
雙箭頭	==>表示帶有關系的連接，通常用于流向的展示。	HW ==> Zu ==> ZY
classDef	用來定義節點的樣式（如背景色、字體顏色等）。	classDef red fill:#eeaa9c,color:#fff;
class	給節點指定樣式類。	ZJL[總經理]:::red
自定義顏色	在classDef中設置顏色、文本顏色等節點樣式。	classDef blue fill:#93b5cf,color:#fff;
嵌套結構/歸并圖表	用subgraph定義嵌套圖表，組織和歸類相關節點。	subgraph 總經理可見內容
節點間的關系	定義節點之間的連接與關系。	grxstj --> grddtj & grcpxstj & khphtj
嵌套子圖	通過子圖將多個圖表合并為一個結構，定義不同角色的權限可見內容。	subgraph 總經理可見內容
節點樣式	通過classDef定義節點的不同樣式，如背景顏色、文本顏色等。	classDef green fill:#0f0;