Amanda Chou
Monday, January 1, 1 | 2 minutes
Infra Diagram Tool
Infra Diagram Tool
Drawio
系統架構圖
Infrastructure Diagram
高可用設計
安全 / Network / Trust Boundary
跨團隊、跨角色溝通
✅服務 icon 支援多元
❌可版控但 diff 不易閱讀 (xml)
❌無法整合 README.md (只能匯出 png/svg)
Mermaid
- Service 關係示意
- Request flow
- CI/CD pipeline
- 小型單機或單服務結構
- ✅方便 diff 版控
- ❌不支援服務 icon 顯示
- ❌無法精準控制位置/大小
%%{init: {
"theme": "base",
"themeVariables": {
"background": "#fdecef"
}
}}%%
graph LR
%% ====== Global Style ======
classDef default fill:#fdecef,stroke:#efb752,stroke-width:1px,color:#000;
linkStyle default stroke:#333,stroke-width:1.5px;
%% ====== Custom Styles ======
classDef serverStyle fill:#99d9ea,stroke:#6c9aa5,stroke-width:1px,color:#000;
classDef vmStyle fill:#f7cb9f,stroke:#f79c67,stroke-width:1px,color:#000;
classDef dockerSwarmStyle fill:#81e1f7,stroke:#4a90e2,stroke-width:1px,color:#000;
classDef containerEngStyle fill:#97f7df,stroke:#2fa4a9,stroke-width:1px,color:#000;
classDef idle fill:#ffb3c3,stroke:#ff5a78,stroke-width:1px,color:#000;
red[["(1) netplan 192.168.168.n
(2) red represent idle for manual stand by"]]:::idle client((client)) client --> Nginx subgraph Server100["Server 100 windows"] nfsc100["nfs client
client conn 101"] mssql[("MSSQL 1436")] subgraph Server101["VM 101 ubuntu"] nfss["nfs server"] subgraph containerEng["101 Container Engine"] Nginx("Nginx
dependent main proxy") redis("redis") seq("seq") subgraph dockerSwarm["Docker Swarm"] direction TB StoreWeb("store web") --> StoreApp("store api") CustomerWeb("customer web") --> CustomerApp("customer api") CRMBackend("CRMBackend") end end Nginx --> StoreWeb Nginx --> CustomerWeb Nginx --> CRMBackend end StoreApp --> mssql CustomerApp --> mssql CRMBackend --> mssql end subgraph Server200["Server 200 windows"] nfsc200["nfs client
client conn 101"] mssql200[("MSSQL 1436")]:::idle subgraph Server201["VM 201 ubuntu"] nfss201["nfs server"]:::idle nfsc201["nfs client
client conn 101"] subgraph containerEng201["201 Container Engine"] Nginx201("Nginx
dependent main proxy"):::idle redis201("redis"):::idle seq201("seq"):::idle subgraph dockerSwarm201["Docker Swarm"] StoreWeb201("store web") --> CustomerWeb201("customer web") StoreApp201("store api") --> CustomerApp201("customer api") CRMBackend201("CRMBackend") end end Nginx --> StoreWeb201 Nginx --> CustomerWeb201 end StoreApp201 --> mssql CustomerApp201 --> mssql end %% ====== Apply Styles ====== class Server101,Server201 vmStyle class dockerSwarm,dockerSwarm201 dockerSwarmStyle class containerEng,containerEng201 containerEngStyle class Server100,Server200 serverStyle
(2) red represent idle for manual stand by"]]:::idle client((client)) client --> Nginx subgraph Server100["Server 100 windows"] nfsc100["nfs client
client conn 101"] mssql[("MSSQL 1436")] subgraph Server101["VM 101 ubuntu"] nfss["nfs server"] subgraph containerEng["101 Container Engine"] Nginx("Nginx
dependent main proxy") redis("redis") seq("seq") subgraph dockerSwarm["Docker Swarm"] direction TB StoreWeb("store web") --> StoreApp("store api") CustomerWeb("customer web") --> CustomerApp("customer api") CRMBackend("CRMBackend") end end Nginx --> StoreWeb Nginx --> CustomerWeb Nginx --> CRMBackend end StoreApp --> mssql CustomerApp --> mssql CRMBackend --> mssql end subgraph Server200["Server 200 windows"] nfsc200["nfs client
client conn 101"] mssql200[("MSSQL 1436")]:::idle subgraph Server201["VM 201 ubuntu"] nfss201["nfs server"]:::idle nfsc201["nfs client
client conn 101"] subgraph containerEng201["201 Container Engine"] Nginx201("Nginx
dependent main proxy"):::idle redis201("redis"):::idle seq201("seq"):::idle subgraph dockerSwarm201["Docker Swarm"] StoreWeb201("store web") --> CustomerWeb201("customer web") StoreApp201("store api") --> CustomerApp201("customer api") CRMBackend201("CRMBackend") end end Nginx --> StoreWeb201 Nginx --> CustomerWeb201 end StoreApp201 --> mssql CustomerApp201 --> mssql end %% ====== Apply Styles ====== class Server101,Server201 vmStyle class dockerSwarm,dockerSwarm201 dockerSwarmStyle class containerEng,containerEng201 containerEngStyle class Server100,Server200 serverStyle