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

文章目录

• • 一、示例代码
  • 二、基础结构设计
  • • 2.1 组织架构树
    • 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;

二、基础结构设计

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

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