我们非常兴奋地宣布 Visual Paradigm 正式推出VPasCode——Visual Paradigm 全新统一的图表即代码平台无论您是软件工程师、系统架构师还是业务分析师，VPasCode 都旨在通过秒级将文本转换为精美、专业的图表，从而简化您的工作流程。
告别在不同工具间频繁切换的困扰。VPasCode 将您喜爱的开源文本转图表语言整合到一个单一、无缝且强大的基于 Web 的环境中。
什么是 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。
- 文本描述：仅通过直观的代码即可创建复杂的图表。
- 实时预览：在输入时，即可在屏幕一侧实时查看图表的即时更新。
- 轻松共享：生成唯一 URL，即可轻松与团队成员或客户共享您的实时图表。
- 灵活导出：将您的成品导出为高质量PNG图像或可缩放的SVG矢量图形。
通过付费功能提升您的工作流效率：
- AI 代码错误修复：遇到语法错误卡住了？我们内置的 AI 将分析您的 PlantUML、Mermaid 或 Graphviz 代码，并自动修复错误。
- AI 翻译:只需单击，即可无缝将图表中的文本和标签翻译成多种语言。
如何访问 VPasCode 付费功能
如果您已经是 Visual Paradigm 用户，您可能已经可以访问我们的高级 AI 功能！
VPasCode 的付费功能包含在以下版本中：
- Visual Paradigm 在线组合版（或更高版本）。
- Visual Paradigm 桌面专业版（或更高版本）且拥有有效的维护合同。
桌面用户须知：拥有有效维护的 Visual Paradigm 专业版（或更高版本）用户将自动获得 VP 在线组合版 Web 应用的完全访问权限——这意味着您可以立即免费使用 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 现金取款交易中的交互过程，从插卡和密码验证到现金 dispensing 和账户更新。它突出了客户、ATM、银行系统和客户账户数据库之间的通信，同时模拟了无效密码尝试、资金不足以及可选的收据打印等替代流程。
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 : 提示输入密码
C -> ATM : 输入密码
ATM -> BS : 验证卡片和密码
BS -> DB : 检查凭证
DB --> BS : 验证结果
alt 密码无效
BS --> ATM : 密码无效
ATM -> C : 密码无效，请重试
note right: 3 次尝试失败后，n卡片被吞
else 密码有效
BS --> ATM : 密码有效
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 "管理员 Web 仪表板" 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 (多可用区 Aurora)" as Aurora
}
}
DNS --> ALB : 解析流量
ALB --> Pod1 : 轮询负载均衡
ALB --> Pod2
Pod1 --> Aurora : 连接池
Pod2 --> Aurora
@enduml
PlantUML ArchiMate 示例：互联网浏览器
该 ArchiMate 图说明了业务层、应用层和技术层如何交互，以通过互联网浏览器支持基于 Web 的业务功能。它展示了业务流程、动态生成的网页组件和数据、浏览器服务与插件，以及提供和支持应用体验的底层 Web 服务器基础设施之间的关系。
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, "某 Web 服务器")
}
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
实体 "Customer" 作为 customer {
* customer_id : UUID <>
--
* first_name : VARCHAR(50)
* last_name : VARCHAR(50)
* email : VARCHAR(100) <>
* phone : VARCHAR(20)
* loyalty_points : INT
* registration_date : TIMESTAMP
}
实体 "Movie" 作为 movie {
* movie_id : UUID <>
--
* title : VARCHAR(200)
* description : TEXT
* duration_minutes : INT
* genre : VARCHAR(50)
* release_date : DATE
* rating : VARCHAR(10)
}
实体 "Theater" 作为 theater {
* theater_id : UUID <>
--
* theater_name : VARCHAR(100)
* total_seats : INT
* seat_layout : JSON
}
实体 "Show" 作为 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)
}
实体 "Seat" 作为 seat {
* seat_id : UUID <>
--
* theater_id : UUID <>
* row_label : CHAR(2)
* seat_number : INT
* seat_type : VARCHAR(20)
* is_accessible : BOOLEAN
}
实体 "Booking" 作为 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)
}
实体 "BookingSeat" 作为 booking_seat {
* booking_id : UUID <<FK,PK>>
* seat_id : UUID <<FK,PK>>
--
* ticket_price : DECIMAL(10,2)
* discount_applied : DECIMAL(10,2)
}
实体 "Payment" 作为 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)
}
实体 "Review" 作为 review {
* review_id : UUID <>
--
* customer_id : UUID <>
* movie_id : UUID <>
* rating : INT
* comment : TEXT
* review_date : TIMESTAMP
}
' 关系
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 : 状态：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 都已为您准备就绪。
立即访问我们的平台：
试用实时编辑器，彻底改变您设计和构建软件及系统的方式！