成员与可见性
使用公共、私有、受保护或包级可见性标记，记录需要评审的属性和操作。
软件结构建模
Mermaid 类图在线编辑器
在线创建 Mermaid 类图，建模类、属性、方法、继承、接口和结构关系。实时预览模型，并导出 SVG 或 PNG。
在线创建 Mermaid 类图
从一个小型订单领域开始，修改类、成员、多重性和继承关系，并同步评审软件结构。
在代码成为唯一文档之前评审软件结构
Mermaid 类图让类型、职责和关系清晰可见，同时使用可随设计演进的文本保存模型。
明确关系类型
表达继承、实现、关联、聚合、组合、依赖关系以及多重性。
实时 Mermaid 预览
源码修改后自动更新图表，并在编辑器旁直接显示语法错误。
导出 SVG 和 PNG
下载适合技术文档的矢量 SVG，或适合演示文稿和分享的高清 PNG。
无需本地安装
直接在浏览器中使用，无需安装 Mermaid CLI、桌面应用或编辑器插件。
继续使用 OnUML
将当前源码带入完整编辑器，继续使用 AI 生成、语法修复、分享和项目管理。
如何创建 Mermaid 类图
先建模一次设计讨论需要的概念和关系，只有在成员能够说明职责或契约时才将其加入图表。
- 01
识别图表需要解释的领域概念、服务、接口或值对象。
- 02
使用稳定名称声明每个类，只添加与当前评审相关的属性和操作。
- 03
使用符合设计含义的关系连接类，例如继承、组合、聚合或依赖。
- 04
当基数约束无法从类名直接理解时，添加多重性和关系标签。
- 05
确认每个类和成员都服务于图表目标，然后导出或进入完整编辑器。
Mermaid 类图语法与建模方法
如果类图试图复制所有实现细节，就会很难维护。应保持一致的抽象层级，只记录当前设计决策真正关心的关系。
声明与目标相关的类成员
在 class 块中声明属性和方法。可见性标记用于表达契约，但类图不应取代源码级 API 文档。
class Invoice["发票"] {
+String id
-Decimal balance
+pay() Receipt
}有意识地选择关系
继承表达“是一种”关系，组合表达所有权和共同生命周期，聚合表示较弱的所有权，关联表示一般结构连接，依赖表示一个类型使用另一个类型。
class PaymentMethod["支付方式"]
class CardPayment["银行卡支付"]
class Order["订单"]
class LineItem["订单项"]
class CheckoutService["结算服务"]
PaymentMethod <|.. CardPayment
Order *-- LineItem
CheckoutService ..> PaymentMethod只在影响含义时添加多重性
多重性可表达“唯一所有者”或“一个及以上元素”等约束。只为基数确实重要的关系添加它。
class Customer["客户"]
class Order["订单"]
class LineItem["订单项"]
Customer "1" --> "0..*" Order : 创建
Order "1" *-- "1..*" LineItem : 包含类图与 ER 图的区别
软件类型、行为、继承和接口是重点时使用类图；持久化实体、主键和数据库基数是重点时使用 ER 图。
Mermaid 类图示例
默认示例展示订单由多个订单项组成，并包含一种数字订单项子类，覆盖成员、组合、多重性和继承。
classDiagram
class Order["订单"] {
+String id
+OrderStatus status
+total() Decimal
}
class LineItem["订单项"] {
+String sku
+int quantity
+subtotal() Decimal
}
class DigitalLineItem["数字订单项"] {
+String downloadUrl
}
Order "1" *-- "1..*" LineItem : 包含
LineItem <|-- DigitalLineItem相关 Mermaid 工具
继续使用通用编辑器，浏览本批工具目录，或用相关建模视角对照当前图表。
常见问题
什么是 Mermaid 类图在线编辑器？
它是一款用于编写 Mermaid classDiagram 语法、预览软件结构并导出 SVG 或 PNG 的浏览器工具。
Mermaid 类图可以表示属性和方法吗？
可以。在 class 块中声明成员，并用括号表示操作。+、-、# 和 ~ 可分别表示公共、私有、受保护和包级访问。
可以表示继承和接口吗？
可以。Mermaid 类图支持继承和实现关系，也支持关联、聚合、组合和依赖。
如何表示一对多关系？
在关系两端用引号声明多重性，例如 Customer "1" --> "0..*" Order。
可以把类图导出为 SVG 或 PNG 吗？
可以。SVG 适合可缩放的技术文档，PNG 适合演示文稿、工单和其他基于图片的工作流。
类图需要包含所有字段和方法吗？
通常不需要。只保留用于解释职责、契约或设计决策的成员，较小且目标明确的图表更容易评审和维护。