Create a PlantUML class diagram online, model classes and interfaces, preview relationships, and export the result as PNG or SVG.
Start with the Class Diagram template, edit the PlantUML source, and preview the result live.
Use this focused class diagram tool for quick previews and exports. Open the full editor for AI generation, syntax repair, sharing, and saved projects.
Model classes, interfaces, attributes, methods, inheritance, composition, aggregation, and associations in an editable PlantUML workspace with live preview and PNG or SVG export.
Start from valid PlantUML source designed for a practical class diagram.
See the rendered diagram update as you edit the PlantUML source.
Learn the syntax and modeling choices used for domain modeling, API design, codebase documentation, design reviews, and object-oriented architecture.
Download a shareable PNG or scalable SVG from the same source.
Create and preview PlantUML without installing Java, Graphviz, or an IDE extension.
Move to the full editor for AI generation, repair, sharing, and saved projects.
Use the built-in template to create a class diagram for domain modeling, API design, codebase documentation, design reviews, and object-oriented architecture.
Start with the built-in Class Diagram template.
Rename the sample classes and add attributes or methods.
Connect types with inheritance, composition, aggregation, or association arrows.
Preview the model and refine labels or cardinalities.
Export the finished class diagram as PNG or SVG.
Learn the core syntax and modeling decisions behind a useful class diagram, then apply them directly in the online editor above.
Declare a class with the class keyword and place attributes and methods inside braces. Use interface, abstract, enum, or annotation when the type has a more specific role. Visibility symbols such as +, -, #, and ~ keep the model close to familiar source-code conventions.
Use <|-- for inheritance and <|.. for interface realization. Put the more general type on the arrowhead side so the rendered hierarchy communicates which class extends or implements another type.
interface PaymentGateway
class StripeGateway
PaymentGateway <|.. StripeGatewayUse -- for a general association, o-- for aggregation, and *-- for composition. Add quoted cardinalities near each endpoint when the number of related instances matters to the design.
Customer "1" -- "0..*" Order
Order *-- "1..*" LineItemUse class diagrams when the static structure is the main question: what types exist, what data and behavior they own, and how those types depend on one another. Keep behavioral timelines in sequence diagrams and workflow decisions in activity diagrams.
The editable example demonstrates a practical class diagram. Change the source, check the live preview, and export the version you need.
@startuml
class User {
-id: string
-email: string
+login(password: string): Token
+logout(): void
}
class Order {
-orderId: string
-total: number
+calculateTotal(): number
}
class PaymentService {
+charge(amount: number): Receipt
}
User "1" --> "0..*" Order
Order --> PaymentService : uses
@endumlUse these related tools when you need a different export format or a full PlantUML editing workflow.
Browse the complete OnUML matrix of online PlantUML tools and converters.
View all PlantUML toolsUse the general editor when you want to switch freely between diagram types.
Open the general editorCreate and export a focused sequence diagram with a built-in template.
Create a sequence diagramPlantUML keeps class diagrams in reviewable text, making them easier to update, version, reuse, and export as the design changes.
Open directly into a Class Diagram template instead of adapting an unrelated example.
Store the diagram as readable text that works well in documentation and version control.
Check structure, labels, and relationships before exporting the rendered diagram.
It is a browser-based editor that starts with a Class Diagram template and lets you edit PlantUML source, preview the rendered diagram, and export PNG or SVG without local setup.
Use it to model classes, interfaces, attributes, methods, inheritance, composition, aggregation, and associations. Common uses include domain modeling, API design, codebase documentation, design reviews, and object-oriented architecture.
Place quoted cardinalities beside the relationship endpoints, for example Customer "1" -- "0..*" Order. The labels describe how many instances participate on each side.
Yes. Use interface and enum declarations alongside classes, then connect them with realization, inheritance, association, or dependency relationships.
Yes. Preview the diagram, then download PNG for slides and quick sharing or SVG for scalable documentation and web use.
No. The online tool uses a server-backed preview, so you can edit and render the diagram directly in the browser.
Open the full OnUML editor for AI generation, syntax repair, sharing, saved projects, and multi-format diagram workflows.