我們很榮幸地宣佈 Visual Paradigm 正式推出VPasCode，Visual Paradigm 嶄新且統一的圖表即程式碼平台無論您是軟體工程師、系統架構師或業務分析師，VPasCode 都旨在透過在數秒內將文字轉換為精美且專業的圖表，來簡化您的工作流程。
告別在不同工具間切換上下文的困擾。VPasCode 將您喜愛的開源文本轉圖表語言整合到單一、流暢且強大的網頁環境中。
什麼是 VPasCode？
VPasCode（Visual Paradigm as Code）是一個整合環境，結合了方便且免費的程式碼編輯器與高效能的圖表渲染器如果您喜愛以編寫程式碼方式建立圖表的速度與版本控制優勢，VPasCode 將為您提供最佳的沙盒環境，讓您能即時建立、預覽並分享圖表。
由於這是完全整合的環境，VPasCode 理論上支援所有全球最熱門圖表引擎的語法規則。在推出時，我們完全支援：
- PlantUML 編輯器與渲染器：建立穩健的企業與軟體架構圖表。
- Mermaid.js 編輯器與渲染器：在您的瀏覽器中原生渲染現代化、受 Markdown 啟發的圖表與時間軸。
- Graphviz 編輯器與渲染器：運用 DOT 語言的強大功能，處理複雜的網路與資料結構。
…這僅僅是開始！未來我們將持續新增更多文本轉圖表格式。
支援的圖表類型一覽
VPasCode 支援極其龐大的圖表類型庫。以下是您現在即可建立的圖表示例：
PlantUML 整合
- 序列圖、用例圖、類別圖與物件圖
- 活動圖、元件圖、部署圖與狀態圖
- ArchiMate 與 C4 模型
- 實體關係圖 (ERD) 與 Chen ERD
- 網路圖、WBS（工作分解結構）與時間圖
Mermaid.js 整合
- 流程圖、類別圖與序列圖
- 實體關係圖 (ERD) 與狀態圖
- 心智圖、時間軸與使用者旅程圖
- 甘特圖、Git 圖與看板板
- C4 模型、四象限圖與需求圖
Graphviz 整合
- 有向圖與無向圖
- 流程圖與資料流程圖
- 組織圖與叢集
功能與能力
我們希望 VPasCode 能讓所有人都能使用，因此我們在免費方案中提供了基本工具，同時為付費用戶提供創新的 AI 輔助功能。
免費功能（人人可用）：
- 多引擎支援：完整使用 PlantUML、Mermaid.js 與 Graphviz。
- 文字描述：僅透過直覺化的程式碼，即可建立複雜的圖表。
- 即時預覽：輸入時，即可在螢幕側邊即時看到圖表的更新。
- 輕鬆分享：產生唯一網址，即可輕鬆與團隊成員或客戶分享您的即時圖表。
- 彈性匯出：將您的完成作品匯出為高品質的 PNG影像或可縮放 SVG向量圖形。
透過付費功能強化您的工作流程：
- AI 程式碼錯誤修正：卡在語法錯誤嗎？我們內建的 AI 將分析您的 PlantUML、Mermaid 或 Graphviz 程式碼，並自動修正錯誤。
- AI 翻譯:一鍵將圖表中的文字與標籤無縫翻譯成多種語言。
如何存取 VPasCode 付費功能
如果您已經是 Visual Paradigm 的使用者，您可能已經可以存取我們的高級 AI 功能！
VPasCode 的付費功能包含於：
- Visual Paradigm Online 組合版（或更高版本）。
- Visual Paradigm Desktop 專業版（或更高版本）且擁有有效的維護合約。
桌面版使用者注意：擁有有效維護合約的 Visual Paradigm 專業版（或更高版本）使用者，將自動獲得 VP Online Combo Edition 網頁應用程式的完整存取權限——這表示您可以立即無額外費用使用 VPasCode 的高級 AI 工具！
VPasCode 中的 PlantUML 與 Mermaid – 圖表示範例
PlantUML 使用案例圖：電子商務系統
此使用案例圖說明電子商務結帳系統中的主要互動。顧客可以檢視購物車並進行結帳，其中身份驗證、優惠券套用與信用卡付款，均透過外部服務（如身份提供者與金流處理業者）整合完成。
PlantUML
Edit PlantUML in VPasCode
@startuml
left to right direction
actor "E-Commerce Customer" as customer
actor "Identity Provider" as authPool
actor "Payment Processor" as stripe
rectangle "Checkout System Boundary" {
usecase "Authenticate" as UC_Auth
usecase "View Cart" as UC_Cart
usecase "Checkout" as UC_Check
usecase "Apply Coupon" as UC_Promo
usecase "Pay via Credit Card" as UC_Pay
}
customer --> UC_Cart
customer --> UC_Check
UC_Check ..> UC_Auth : <>
UC_Check <.. UC_Promo : <>
UC_Check ..> UC_Pay : <>
UC_Auth --> authPool
UC_Pay --> stripe
@enduml
PlantUML 類別圖：圖書館管理系統
此類別圖模擬圖書館管理系統，顯示參與目錄管理、會員服務與借閱作業的關鍵實體。設計採用繼承來表示不同類型的圖書館資料（如書籍、雜誌與 DVD），而會員、館員、借閱紀錄與罰款之間的關聯，則說明物品在其生命週期中如何被借出、歸還與管理。
PlantUML
Edit PlantUML in VPasCode
@startuml
class Library {
- name: String
- address: String
- phone: String
+ addMember(member: Member): void
+ removeMember(memberId: String): void
+ addItem(item: LibraryItem): void
+ removeItem(itemId: String): void
+ lendItem(memberId: String, itemId: String): boolean
+ returnItem(itemId: String): boolean
}
class LibraryItem {
# itemId: String
# title: String
# publisher: String
# publicationYear: int
# isAvailable: boolean
+ getDetails(): String
+ setAvailability(status: boolean): void
}
abstract class Book {
- isbn: String
- author: String
- pageCount: int
+ getAuthor(): String
}
class EBook {
- fileSizeMB: double
- format: String
- downloadUrl: String
+ download(): void
}
class PrintedBook {
- shelfLocation: String
- condition: String
+ getShelfLocation(): String
}
class Magazine {
- issueNumber: int
- volumeNumber: int
- coverDate: Date
}
class DVD {
- durationMinutes: int
- director: String
- language: String
- subtitlesAvailable: boolean
}
class Member {
- memberId: String
- name: String
- email: String
- phone: String
- membershipDate: Date
+ borrowItem(item: LibraryItem): boolean
+ returnItem(item: LibraryItem): boolean
+ getBorrowedItems(): List
}
class BorrowingRecord {
- recordId: String
- borrowDate: Date
- dueDate: Date
- returnDate: Date
- isOverdue(): boolean
- calculateFine(): double
}
class Fine {
- fineId: String
- amount: double
- issueDate: Date
- isPaid: boolean
+ payFine(): void
}
class Librarian {
- staffId: String
- department: String
+ processBorrowing(member: Member, item: LibraryItem): void
+ processReturn(item: LibraryItem): void
+ generateReport(): void
+ manageInventory(): void
}
' 繼承關係
LibraryItem <|-- Book
LibraryItem <|-- Magazine
LibraryItem <|-- DVD
Book <|-- EBook
Book <|-- PrintedBook
' 組合與聚合
Library "1" -- "many" Member : 擁有 >
Library "1" -- "many" LibraryItem : 包含 >
Library "1" -- "many" Librarian : 僱用 >
Member "1" -- "many" BorrowingRecord : 擁有 >
BorrowingRecord "1" -- "1..*" LibraryItem : 引用 >
BorrowingRecord "1" -- "0..*" Fine : 產生 >
' 關聯
Librarian --> BorrowingRecord : 管理 >
Member --> BorrowingRecord : 建立 >
note top of Library : 管理會員、館藏與借閱的中央系統
note right of LibraryItem : 所有館藏資料的抽象基類
@enduml
PlantUML 序列圖：ATM 現金提領
此序列圖說明 ATM 現金提領交易中的互動，從插卡與 PIN 碼驗證，到現金出納與帳戶更新。它強調客戶、ATM、銀行系統與客戶帳戶資料庫之間的通訊，並同時模擬其他流程，例如無效 PIN 碼嘗試、資金不足以及可選的收據列印。
PlantUML
Edit PlantUML in VPasCode
@startuml
' 標題
title ATM 現金提領 - 序列圖
' 參與者與角色
actor Customer as C
participant "ATM" as ATM
participant "Banking System" as BS
database "Customer Account" as DB
' 序列
C -> ATM : 插入卡片
ATM -> ATM : 讀取卡片詳細資料
ATM -> C : 提示輸入 PIN
C -> ATM : 輸入 PIN
ATM -> BS : 驗證卡片與 PIN
BS -> DB : 檢查憑證
DB --> BS : 驗證結果
alt 無效 PIN
BS --> ATM : 無效 PIN
ATM -> C : 無效 PIN，請重試
note right: 3 次失敗嘗試後，n卡片被扣留
else 有效 PIN
BS --> ATM : 有效 PIN
ATM -> C : 顯示主選單
C -> ATM : 選擇提領
ATM -> C : 請求金額
C -> ATM : 輸入金額
ATM -> BS : 檢查餘額與限額
BS -> DB : 查詢餘額
DB --> BS : 目前餘額
alt 資金不足
BS --> ATM : 餘額不足
ATM -> C : 交易遭拒n(顯示餘額)
C -> ATM : 取消交易
ATM -> C : 退還卡片
else 資金充足
BS --> ATM : 核准
ATM -> ATM : 出納現金
ATM -> C : 出納現金
C -> ATM : 取走現金
ATM -> BS : 確認現金已出納
BS -> DB : 扣款並記錄交易
DB --> BS : 更新完成
BS --> ATM : 交易完成
ATM -> C : 列印收據
alt 要求收據
C -> ATM : 取收據
else 不收據
C -> ATM : 拒絕收據
end
ATM -> C : 退還卡片
C -> ATM : 取走卡片
end
end
ATM -> C : 謝謝 / 交易結束
@enduml
PlantUML 活動圖：保險理賠系統
此活動圖模擬保險理賠系統從理賠申請、驗證、調查到理賠結案的全流程。它捕捉關鍵決策點，例如保單資格、文件完整性、理賠有效性與理賠接受度，同時展示成功路徑與例外處理路徑，包括理賠拒賠與爭議解決。
PlantUML
Edit PlantUML in VPasCode
@startuml InsuranceClaimSystem
start
:保戶提交理賠申請;
:理賠申請登入系統;
if (保單是否有效且有效?) then (是)
:將理賠指派給理賠員;
:通知理賠員有新理賠;
else (否)
:發送拒賠通知給保戶;
:記錄原因：保單無效/已失效;
stop
endif
:理賠員審查提交的文件;
if (所有必要文件是否齊全?) then (是)
:理賠員啟動理賠驗證;
else (否)
:向保戶請求缺失文件;
:等待補充文件;
:重新檢查文件;
note right
系統等待
保戶回覆
end note
-> 回到「理賠員審查提交的文件」;
endif
:理賠員調查理賠;
:如有需要，聯繫證人或專家;
:估算損失/損害金額;
if (理賠是否符合保單條款?) then (是)
:計算核准金額;
:如適用，扣除免賠額;
else (否)
:發送附有原因的拒賠通知;
:在系統中記錄決定;
stop
endif
:生成理賠結案方案;
:將理賠結案方案發送給保戶;
:保戶審查方案;
if (保戶是否接受該方案?) then (是)
:處理付款;
:將理賠狀態更新為「已結案」;
:發送確認給保戶;
:記錄結案細節;
else (否)
:升級至爭議解決程序;
:協商理賠結案;
:更新方案;
-> 回到「將理賠結案方案發送給保戶」;
endif
stop
@enduml
PlantUML 狀態圖：煙霧偵測系統
此狀態圖說明煙霧偵測系統在各種運作狀態（如待機、監控、煙霧偵測、警報啟動與錯誤處理）之間轉換的行為。它展示系統如何回應電源變更、自我檢查結果、煙霧偵測、電池電量低以及使用者啟動的重設等事件，以確保可靠的火災監控與警報功能。
PlantUML
Edit PlantUML in VPasCode
@startuml SmokeDetectionSystem
title 狀態圖 - 煙霧偵測系統
[*] --> PowerOff
state PowerOff {
[*] --> NoPower
NoPower : 裝置已關閉
NoPower --> PowerOn : 按下電源按鈕
}
state PowerOn {
[*] --> Standby
Standby : 系統就緒
Standby --> SelfCheck : 定期自我測試（每 24 小時）
Standby --> Monitoring : 啟動監控（感測器啟動）
state SelfCheck {
[*] --> TestingSensors
TestingSensors --> TestPass : 所有感測器正常
TestingSensors --> TestFail : 偵測到感測器錯誤
TestPass --> Standby : 返回待機
TestFail --> ErrorState : 回報錯誤
}
state Monitoring {
[*] --> NoSmoke
NoSmoke : 正常運作
NoSmoke --> SmokeDetected : 煙霧濃度 > 閾值
NoSmoke --> LowBattery : 電池電量低（無線）
LowBattery --> NoSmoke : 更換電池
state SmokeDetected {
[*] --> InitialAlert
InitialAlert --> ConfirmedSmoke : 煙霧持續 > 5 秒
InitialAlert --> FalseAlarm : 煙霧消散 < 5 秒 FalseAlarm --> NoSmoke : 重設
ConfirmedSmoke --> AlarmActive
}
state AlarmActive {
[*] --> SoundAlarm : 啟動警報器與燈光
SoundAlarm --> SendNotification : 通知控制面板 / 應用程式
SendNotification --> WaitForReset
WaitForReset --> AlarmActive : 煙霧仍存在
WaitForReset --> ResetSystem : 按下重設按鈕
ResetSystem --> NoSmoke : 系統重設
}
}
}
state ErrorState {
[*] --> FaultIndicator : 閃爍錯誤 LED
FaultIndicator --> PowerOff : 需手動重啟電源
}
PowerOn --> ErrorState : 自我檢查失敗
ErrorState --> PowerOff : 電源循環
PowerOff --> [*] : 系統拔除插頭 / 移除電池
@enduml
PlantUML 元件圖：快遞系統
此元件圖展示了快遞管理系統的高階架構，說明客戶端應用程式、後端服務、訊息基礎設施、快取和資料庫如何互動以支援包裹遞送作業。它說明了訂單管理、調度、追蹤、付款、通知和使用者管理等服務之間的職責分離，同時強調同步 API 通訊與非同步事件驅動處理。
PlantUML
Edit PlantUML in VPasCode
@startuml CourierSystem
title 快遞系統 - 元件圖
' === 元件 ===
component "客戶端應用程式" as CustomerApp
component "快遞員行動應用程式" as CourierApp
component "管理員網頁儀表板" as AdminWeb
component "API 閘道" as ApiGateway
component "訂單服務" as OrderService
component "調度服務" as DispatchService
component "追蹤服務" as TrackingService
component "付款服務" as PaymentService
component "通知服務" as NotificationService
component "使用者服務" as UserService
component "訊息佇列n(RabbitMQ/Kafka)" as MessageQueue
component "Redis 快取" as RedisCache
database "PostgreSQL 資料庫" as SQLDB
database "MongoDBn(日誌/追蹤歷史)" as MongoLogs
' === 介面 / 連接埠 ===
CustomerApp --> ApiGateway : "REST / WebSocket"
CourierApp --> ApiGateway : "REST / WebSocket"
AdminWeb --> ApiGateway : "REST"
ApiGateway --> OrderService
ApiGateway --> TrackingService
ApiGateway --> PaymentService
ApiGateway --> UserService
' === 服務相依性 ===
OrderService --> DispatchService : "gRPC / REST"
OrderService --> PaymentService
OrderService --> NotificationService
OrderService --> SQLDB : "JDBC"
OrderService --> RedisCache : "快取"
DispatchService --> MessageQueue : "發布事件"
DispatchService --> CourierApp : "透過 API 閘道推播"
DispatchService --> SQLDB
TrackingService --> MessageQueue : "訂閱位置更新"
TrackingService --> MongoLogs : "寫入追蹤歷史"
TrackingService --> RedisCache : "目前位置快取"
PaymentService --> SQLDB
PaymentService --> NotificationService
NotificationService --> MessageQueue : "消費通知"
NotificationService --> CustomerApp : "透過 API 閘道推播"
UserService --> SQLDB
UserService --> RedisCache
' === 註解 ===
note right of OrderService
處理包裹建立、
定價與訂單狀態
end note
note right of DispatchService
將訂單與快遞員配對，
最佳化路線
end note
note bottom of MessageQueue
非同步事件：order_created、
location_updated、
delivery_status_changed
end note
@enduml
PlantUML 部署圖：範例架構
PlantUML
Edit PlantUML in VPasCode
@startuml
node "AWS Cloud Route53" as DNS
node "VPC (10.0.0.0/16)" {
node "公用子網路" {
artifact "NGINX 負載平衡器" as ALB
}
node "私有子網路叢集" {
node "EC2 執行個體 1" {
component "Node.js API [Pod 1]" as Pod1
}
node "EC2 執行個體 2" {
component "Node.js API [Pod 2]" as Pod2
}
}
node "資料庫子網路" {
database "Amazon RDS (Multi-AZ Aurora)" as Aurora
}
}
DNS --> ALB : 解析流量
ALB --> Pod1 : 輪詢平衡
ALB --> Pod2
Pod1 --> Aurora : 連線池
Pod2 --> Aurora
@enduml
PlantUML ArchiMate 範例：網際網路瀏覽器
此 ArchiMate 圖表說明了業務、應用程式和技術層如何互動，以透過網際網路瀏覽器支援基於網頁的業務功能。它展示了業務流程、動態產生的網頁元件與資料、瀏覽器服務與外掛程式，以及提供並支援應用程式體驗的基礎網頁伺服器基礎設施之間的關係。
PlantUML
Edit PlantUML in VPasCode
@startuml Internet Browser Sample
!include <archimate/Archimate>
title Archimate 範例 - 網際網路瀏覽器
'LAYOUT_AS_SKETCH()
'LAYOUT_LEFT_RIGHT()
'LAYOUT_TOP_DOWN()
Grouping(business, "業務"){
Business_Object(businessObject, "業務物件")
Business_Process(someBusinessProcess,"某業務流程")
Business_Service(itSupportService, "業務的 IT 支援 (應用程式服務)")
}
Grouping(application, "應用程式"){
Application_DataObject(dataObject, "網頁資料 n '即時產生'")
Application_Function(webpageBehaviour, "網頁行為")
Application_Component(ActivePartWebPage, "網頁的動態部分 n '即時產生'")
}
Grouping(technology, "技術"){
Technology_Artifact(inMemoryItem,"記憶體中 / '即時產生' html/javascript")
Technology_Service(internetBrowser, "網際網路瀏覽器通用功能與外掛程式")
Technology_Service(internetBrowserPlugin, "某網際網路瀏覽器外掛程式")
Technology_Service(webServer, "某網頁伺服器")
}
Rel_Flow_Left(someBusinessProcess, businessObject, "")
Rel_Serving_Up(itSupportService, someBusinessProcess, "")
Rel_Specialization_Up(webpageBehaviour, itSupportService, "")
Rel_Flow_Right(dataObject, webpageBehaviour, "")
Rel_Specialization_Up(dataObject, businessObject, "")
Rel_Assignment_Left(ActivePartWebPage, webpageBehaviour, "")
Rel_Specialization_Up(inMemoryItem, dataObject, "")
Rel_Realization_Up(inMemoryItem, ActivePartWebPage, "")
Rel_Specialization_Right(inMemoryItem,internetBrowser, "")
Rel_Serving_Up(internetBrowser, webpageBehaviour, "")
Rel_Serving_Up(internetBrowserPlugin, webpageBehaviour, "")
Rel_Aggregation_Right(internetBrowser, internetBrowserPlugin, "")
Rel_Access_Up(webServer, inMemoryItem, "")
Rel_Serving_Up(webServer, internetBrowser, "")
@enduml
PlantUML 實體關聯圖 (ERD) 範例：電影票系統
PlantUML
Edit PlantUML in VPasCode
@startuml
entity "Customer" as customer {
* customer_id : UUID <>
--
* first_name : VARCHAR(50)
* last_name : VARCHAR(50)
* email : VARCHAR(100) <>
* phone : VARCHAR(20)
* loyalty_points : INT
* registration_date : TIMESTAMP
}
entity "Movie" as movie {
* movie_id : UUID <>
--
* title : VARCHAR(200)
* description : TEXT
* duration_minutes : INT
* genre : VARCHAR(50)
* release_date : DATE
* rating : VARCHAR(10)
}
entity "Theater" as theater {
* theater_id : UUID <>
--
* theater_name : VARCHAR(100)
* total_seats : INT
* seat_layout : JSON
}
entity "Show" as show {
* show_id : UUID <>
--
* movie_id : UUID <>
* theater_id : UUID <>
* show_time : TIMESTAMP
* end_time : TIMESTAMP
* language : VARCHAR(50)
* subtitle : BOOLEAN
* price_regular : DECIMAL(10,2)
* price_vip : DECIMAL(10,2)
}
entity "Seat" as seat {
* seat_id : UUID <>
--
* theater_id : UUID <>
* row_label : CHAR(2)
* seat_number : INT
* seat_type : VARCHAR(20)
* is_accessible : BOOLEAN
}
entity "Booking" as booking {
* booking_id : UUID <>
--
* customer_id : UUID <>
* show_id : UUID <>
* booking_time : TIMESTAMP
* total_amount : DECIMAL(10,2)
* status : VARCHAR(20)
* payment_method : VARCHAR(30)
* transaction_id : VARCHAR(100)
}
entity "BookingSeat" as booking_seat {
* booking_id : UUID <<FK,PK>>
* seat_id : UUID <<FK,PK>>
--
* ticket_price : DECIMAL(10,2)
* discount_applied : DECIMAL(10,2)
}
entity "Payment" as payment {
* payment_id : UUID <>
--
* booking_id : UUID <>
* amount : DECIMAL(10,2)
* payment_date : TIMESTAMP
* payment_status : VARCHAR(20)
* payment_gateway : VARCHAR(30)
* gateway_reference : VARCHAR(200)
}
entity "Review" as review {
* review_id : UUID <>
--
* customer_id : UUID <>
* movie_id : UUID <>
* rating : INT
* comment : TEXT
* review_date : TIMESTAMP
}
' Relationships
customer ||--o{ booking : "places"
movie ||--o{ show : "scheduled as"
theater ||--o{ show : "hosts"
show ||--o{ booking : "has"
booking ||--|{ booking_seat : "contains"
seat ||--o{ booking_seat : "assigned to"
booking ||--|| payment : "has"
customer ||--o{ review : "writes"
movie ||--o{ review : "receives"
note right of booking : Status: PENDING, CONFIRMED, CANCELLED, EXPIRED
note left of seat : seat_type: REGULAR, VIP, COUPLES
note right of payment : payment_status: PENDING, SUCCESS, FAILED, REFUNDED
@enduml
Mermaid 流程圖：就醫
此流程圖說明了一個典型的醫療決策過程，引導患者從症狀的初步識別，經過診斷、檢查、治療到康復。它強調了關鍵決策點，包括緊急評估、診斷評估和治療效果，同時展示了未解決的症狀如何需要額外的醫療諮詢和重新評估。
Mermaid
Edit Mermaid in VPasCode
flowchart TD
A[感覺不適或需要醫療建議] --> B{這是緊急情況嗎？}
B -->|是| C[撥打急救電話或前往急診室]
B -->|否| D[預約醫生門診]
D --> E[出席預約]
E --> F[醫生評估]
F --> G{已做出診斷嗎？}
G -->|是| H[治療計劃]
G -->|否| I[開立檢查單]
I --> J[接收檢查結果]
J --> F
H --> K[遵循治療]
K --> L{症狀改善了嗎？}
L -->|是| M[康復 / 常規追蹤]
L -->|否| N[返回醫生處]
N --> F
Graphviz 圖形
此圖表代表一個簡化的資料中心網路拓撲，說明主機如何透過互連交換機的骨幹進行連接。它強調了網路裝置之間的主要通訊路徑，包括交換機之間的匯流排鏈結，以及提供冗餘和韌性的次要故障轉移連線，以應對網路中斷的情況。
Graphviz
Edit Graphviz in VPasCode
graph UndirectedSpanningTree {
fontname="Helvetica,Arial,sans-serif"
label="資料中心網狀網路拓撲骨幹基礎設施"
labelloc="b"
fontsize=14
node [fontname="Helvetica,Arial,sans-serif", shape=circle, style=filled, color="#475569", fillcolor="#f1f5f9", width=0.8, fixedsize=true]
edge [color="#94a3b8", penwidth=2.5]
SwitchAlpha [label="SW_A", fillcolor="#cbd5e1"]
SwitchBeta [label="SW_B", fillcolor="#cbd5e1"]
Node1 [label="Host_01"]
Node2 [label="Host_02"]
Node3 [label="Host_03"]
Node4 [label="Host_04"]
SwitchAlpha -- SwitchBeta [label=" 匯流排鏈結", weight=5]
SwitchAlpha -- Node1
SwitchAlpha -- Node2
SwitchBeta -- Node3
SwitchBeta -- Node4
Node1 -- Node2 [style=dashed, color="#cbd5e1", label=" 故障轉移互連"]
}
今日開始使用
準備好體驗圖形即程式碼的速度了嗎？無論您需要一個可靠的PlantUML 編輯器、一個快速的Mermaid 編輯器，或一個強大的 Graphviz 編譯器，VPasCode 已為您準備就緒。
立即前往我們的平台：
試用即時編輯器，徹底革新您設計軟體與系統的方式！