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

文章目录

- 一、示例代码
- 二、基础结构设计
- - [2.1 组织架构树](#2.1 组织架构树)
  - [2.2 权限视图设计](#2.2 权限视图设计)
- 三、销售数据权限系统
- 四、关键语法技巧汇总

一、示例代码

在企业管理系统开发中，清晰的权限视图设计至关重要。本文将分享如何使用 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;

销售专员可见内容组领导可见内容国内部门经理可见内容国外部门经理可见内容总经理可见内容实际图表归并图表种类需求关系图专员组国内部门经理国外部门经理总经理个人订单统计个人产品销售统计客户贡献排行销售人员RANK 订单状态海内外部门统计 + 组内统计销售反馈海外部门统计国内部门统计个人销售统计组内统计组内销售rank 海外部门销售rank 国内部门销售rank 订单状态销售总结专员组领导海外销售部国内营销部总经理

二、基础结构设计

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

角色可见内容实际图表归并图表种类需求 gnbmtj 总经理个人订单统计海外部门统计 ...

核心技巧：

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

三、销售数据权限系统

复制代码

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

功能/语法	描述	示例
`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;`