Members and visibility
Document selected attributes and operations with public, private, protected, or package visibility markers.
Software structure modeling
Mermaid Class Diagram Online Editor
Create a Mermaid class diagram online to model classes, attributes, methods, inheritance, interfaces, and relationships. Preview and export SVG or PNG.
Build a Mermaid class diagram online
Start with a small order domain, then change classes, members, multiplicities, and inheritance while reviewing the structure visually.
Build a Mermaid class diagram online
Changes render automatically in the preview.
class-diagram.mmd16 lines
Live previewWaiting
Review software structure before code becomes the documentation
A Mermaid class diagram makes types, responsibilities, and relationships visible while keeping the model in text that can evolve with the design.
Typed relationships
Express inheritance, implementation, association, aggregation, composition, dependency, and multiplicity.
Live Mermaid preview
See the rendered diagram update after each source change and keep syntax errors beside the editor.
SVG and PNG export
Download scalable SVG for documentation or a high-resolution PNG for slides and sharing.
No local setup
Work in the browser without installing Mermaid CLI, a desktop application, or an editor extension.
Continue in OnUML
Move the current source into the full editor for AI generation, repair, sharing, and saved projects.
How to create a Mermaid class diagram
Model the concepts and relationships needed for one design discussion, then add members only when they clarify responsibility or contracts.
- 01
Identify the domain concepts, services, interfaces, or value objects that the diagram needs to explain.
- 02
Declare each class with a stable name and add only the attributes or operations relevant to the current review.
- 03
Connect classes with the relationship that matches the design, such as inheritance, composition, aggregation, or dependency.
- 04
Add multiplicities and relationship labels where they communicate constraints that are not obvious from class names.
- 05
Check whether every class and member supports the diagram’s purpose, then export or continue in the full editor.
Mermaid class diagram syntax and modeling choices
Class diagrams become difficult to maintain when they mirror every implementation detail. Keep one consistent abstraction level and record the relationships that matter to the decision being reviewed.
Declare focused class members
Put attributes and methods inside a class block. Visibility markers communicate the intended contract, but the diagram should not replace source-level API documentation.
class Invoice {
+String id
-Decimal balance
+pay() Receipt
}Choose the relationship deliberately
Inheritance expresses an is-a relationship. Composition expresses ownership and shared lifecycle. Aggregation is weaker ownership, association is a general structural link, and dependency records that one type uses another.
PaymentMethod <|.. CardPayment
Order *-- LineItem
CheckoutService ..> PaymentMethodAdd multiplicity where it changes meaning
Multiplicity explains constraints such as exactly one owner or one or more items. Add it to relationships whose cardinality matters, rather than decorating every line with redundant numbers.
Customer "1" --> "0..*" Order : places
Order "1" *-- "1..*" LineItem : containsClass diagram vs ER diagram
Use a class diagram for software types, behavior, inheritance, and interfaces. Use an ER diagram when persisted entities, keys, and database cardinality are the main subject.
Mermaid class diagram example
The editable example shows an order composed of line items and a specialized digital line item. It demonstrates members, composition, multiplicity, and inheritance.
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 : contains
LineItem <|-- DigitalLineItemRelated Mermaid tools
Continue with the general editor, browse this release’s tool directory, or compare the diagram with a related modeling view.
Mermaid Online Editor
Write Mermaid source, preview the result, and export SVG or PNG.
Open tool →Mermaid Tools
Choose a focused Mermaid editor for the diagram you need to create.
Open tool →Mermaid Sequence Diagram Online Editor
Document messages between users, services, APIs, and databases over time.
Open tool →Frequently asked questions
What is a Mermaid class diagram online editor?
It is a browser-based tool for writing Mermaid classDiagram syntax, previewing software structure, and exporting the diagram as SVG or PNG.
Can Mermaid class diagrams show attributes and methods?
Yes. Declare members inside a class block and use parentheses for operations. Visibility markers such as +, -, #, and ~ can document public, private, protected, and package access.
Can I show inheritance and interfaces?
Yes. Mermaid class diagrams support inheritance and realization relationships, along with association, aggregation, composition, and dependency.
How do I show one-to-many relationships?
Place multiplicities in quotes beside the relationship endpoints, for example Customer "1" --> "0..*" Order.
Can I export the class diagram as SVG or PNG?
Yes. Export SVG for scalable technical documentation or PNG for presentations, tickets, and other image-based workflows.
Should a class diagram include every field and method?
Usually no. Include the members needed to explain responsibilities, contracts, or a design decision. A smaller focused diagram is easier to review and maintain.