Mermaid 绘图--以企业权限视图为例
一、示例代码
在企业管理系统开发中，清晰的权限视图设计至关重要。本文将分享如何使用 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
核心技巧：
- 使用
{{ }}表示可点击图表元素 --->单向箭头表示权限范围- 颜色区分视图层级（需求/实现/权限）
三、销售数据权限系统
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; |