#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;

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;