#Markdown 如何绘制 mermaid 复杂 graph

语法文档地址

https://mermaid-js.github.io/mermaid/#/./flowchart?id=flowcharts-basic-syntax

绘图示例

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{{订单状态}}
end

subgraph 实际图表归并
grddtj{{个人订单统计}}:::lightBlue
grcpxstj{{个人产品销售统计}}:::lightBlue
khphtj{{客户贡献排行}}:::lightBlue
rank{{销售人员RANK}}:::lightRed
_ddzt{{订单状态}}
hnwbmtj{{海内外部门统计 + 组内统计}}:::lightGreen

grxstj --> grddtj & grcpxstj & khphtj
hwbmxsrank & gnbmxsrank & znxsrank --> rank
ddzt --> _ddzt
hwbmtj & gnbmtj & zntj --> hnwbmtj

end


subgraph 总经理可见内容
总经理:::red --->  hwbmtj & gnbmtj
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;