Mermaid 绘图--以企业权限视图为例

一、示例代码

在企业管理系统开发中，清晰的权限视图设计至关重要。本文将分享如何使用 Mermaid 绘制直观的企业权限关系图，复制以下代码到mermaid中，将得到关系图如图1。

graph LR
ZJL[总经理]:::red
HW[海外销售部]:::blue
GN[国内营销部]:::blue
Zu[组领导]:::yellow
ZY[专员]:::purple
subgraph 关系图
ZJL ==> HW & GN ==> Zu ==> ZY
end
 
subgraph 图表种类需求
hwbmtj{{海外部门统计}}:::green
gnbmtj{{国内部门统计}}:::green
grxstj{{个人销售统计}}:::pureBlue
zntj{{组内统计}}:::green
znxsrank{{组内销售rank}}:::pureRed
hwbmxsrank{{海外部门销售rank}}:::pureRed
gnbmxsrank{{国内部门销售rank}}:::pureRed
ddzt{{订单状态}}
salesSummary{{销售总结}}:::lightYellow
end
 
subgraph 实际图表归并
grddtj{{个人订单统计}}:::lightBlue
grcpxstj{{个人产品销售统计}}:::lightBlue
khphtj{{客户贡献排行}}:::lightBlue
rank{{销售人员RANK}}:::lightRed
_ddzt{{订单状态}}
hnwbmtj{{海内外部门统计 + 组内统计}}:::lightGreen
salesFeedback{{销售反馈}}:::lightYellow
 
grxstj --> grddtj & grcpxstj & khphtj
hwbmxsrank & gnbmxsrank & znxsrank --> rank
ddzt --> _ddzt
hwbmtj & gnbmtj & zntj --> hnwbmtj
salesSummary --> salesFeedback
 
end
 
 
subgraph 总经理可见内容
总经理:::red ---> hwbmtj & gnbmtj & salesSummary
end
 
subgraph 国外部门经理可见内容
国外部门经理:::blue ---> hwbmtj & grxstj & hwbmxsrank & ddzt
end
 
subgraph 国内部门经理可见内容
国内部门经理:::blue ---> gnbmtj & grxstj & gnbmxsrank & ddzt
end
 
subgraph 组领导可见内容
组:::yellow ---> zntj & grxstj & znxsrank & ddzt
end
 
 
subgraph 销售专员可见内容
专员:::purple ---> grxstj & ddzt
 
end
 
classDef 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[专员]:::purple

subgraph 组织架构
ZJL ==> HW & GN ==> Zu ==> ZY
end

classDef 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
...
end

subgraph 实际图表归并
grddtj{{个人订单统计}}:::lightBlue
...
end

subgraph 角色可见内容
总经理:::red ---> hwbmtj & gnbmtj
...
end

核心技巧：

1. 使用 {{ }} 表示可点击图表元素
2. ---> 单向箭头表示权限范围
3. 颜色区分视图层级（需求/实现/权限）

三、销售数据权限系统

graph LR
ZJL[总经理]:::red
HW[海外销售部]:::blue
GN[国内营销部]:::blue
Zu[组领导]:::yellow
ZY[专员]:::purple

subgraph 组织架构
ZJL ==> HW & GN ==> Zu ==> ZY
end

subgraph 图表需求
hwbmtj{{海外部门统计}}:::green
gnbmtj{{国内部门统计}}:::green
grxstj{{个人销售统计}}:::pureBlue
end

subgraph 图表实现
grddtj{{个人订单统计}}:::lightBlue
grcpxstj{{产品销售统计}}:::lightBlue
grxstj --> grddtj & grcpxstj
end

subgraph 总经理权限
总经理:::red ---> hwbmtj & gnbmtj
end

subgraph 专员权限
专员:::purple ---> grddtj
end

classDef 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 图中使用的语法和结构：