← All diagram types
MERMAID DIAGRAM GUIDE

Mermaid class diagram online editor

Design domain objects, properties, methods, inheritance, and relationships. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the Class editor See an example

WHAT IT IS FOR

Make the important relationships clear

Model domain objects, properties, methods, inheritance, and relationships before implementation or refactoring.

  • Design domain models
  • Explain object-oriented code
  • Review relationships before building a feature
Why use Mermaid Studio?
  • Write the source as versionable Mermaid code.
  • Preview changes immediately in the browser.
  • Export the finished diagram as SVG or PNG.
  • Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

classDiagram
  class Project {
    +String id
    +String title
    +save()
    +share()
  }
  class Revision {
    +String code
    +Date createdAt
  }
  Project "1" --> "*" Revision

HOW TO START

Create your diagram in four steps

  1. 1List the core classes in the domain.
  2. 2Add only the properties and methods that clarify the model.
  3. 3Connect classes with inheritance or relationship lines.
  4. 4Review whether each class has a clear responsibility.

WRITING TIPS

Keep the diagram useful

Keep classes focused on one responsibility.

Add relationship cardinality when it clarifies the model.

FAQ

Frequently asked questions

What does a Mermaid class diagram show?+

It shows classes and the relationships between them, including properties, methods, inheritance, and cardinality.

Can I use a class diagram for database design?+

Class diagrams can explain object models, but an ER diagram is usually a better choice for database entities and keys.

TEMPLATES

Start from a related template

Project domain model

Model projects, revisions, comments, and collaborators as domain objects.

Open template

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Read the guide

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Read the guide

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Read the guide

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Read the guide

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Read the guide

Mermaid Gantt chart

Plan projects with tasks, milestones, dependencies, and dates.

Read the guide

Ready to make a Class?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio