What relationship types does Mermaid support in class diagrams?

Mermaid supports six relationship types: ` ` for association, `..>` for dependency, and `..|>` for interface implementation (realization). Each arrow type visually distinguishes the strength and nature of the relationship between classes.

How do I mark methods and attributes as public, private, or protected?

Use visibility prefixes before the name: `+` for public, `-` for private, `#` for protected, and `~` for package/internal. Example: `+String name` declares a public string attribute, `-validate() bool` declares a private method returning bool. These modifiers render as the standard UML visibility symbols in the diagram.

Can I add multiplicity (cardinality) to relationships?

Yes. Add quoted multiplicity labels on both ends of the relationship line: `Customer "1" --> "0..*" Order`. Valid values include `1`, `0..*`, `1..*`, `0..1`, and `n`. Cardinality labels are essential for communicating business rules like 'a customer can have zero or many orders'.

How do I define an interface or abstract class in Mermaid?

Add a stereotype annotation after the class declaration: `class PaymentGateway { > }` or `class BaseRepository { > }`. You can also add ` >` for enums or any custom stereotype. These annotations render as labels inside the class box, following standard UML notation.

Mermaid Class Diagram Viewer

Render Mermaid class diagrams instantly in your browser. Preview inheritance, interfaces, and relationships. Export to SVG or PNG.

Mermaid Code

Preview

Enter Mermaid code to preview your diagram

Class diagrams are a cornerstone of object-oriented software design, visualizing the structure of a codebase by showing classes, their attributes and methods, and the relationships between them — inheritance, composition, aggregation, and dependency. Mermaid's `classDiagram` syntax makes it possible to write these diagrams as text, version-control them alongside code, and render them anywhere Markdown is supported. AI tools frequently produce Mermaid class diagrams when asked to design a data model, explain a design pattern, or document an existing system. A developer reviewing a class diagram from Claude or ChatGPT can paste the code into Zolkit and immediately see whether the inheritance hierarchy makes sense or whether the relationships are correctly expressed. Beyond code documentation, class diagrams are used in database schema design, API contract documentation, and teaching object-oriented concepts. Zolkit's viewer supports all Mermaid class diagram notation including visibility modifiers, abstract classes, interfaces, generic types, and all six relationship types.

Related Diagrams

← Mermaid Diagram Viewer Mermaid ER Diagram Viewer Mermaid Sequence Diagram Viewer Mermaid Flowchart Viewer

Free Online Mermaid Diagram Viewer and Exporter

Zolkit's Mermaid Diagram Viewer lets you paste any Mermaid code and see a rendered diagram instantly — no installation, no sign-up, no server uploads. Everything runs in your browser, making it the fastest way to verify AI-generated diagrams from Claude, ChatGPT, or Gemini. Supports all major Mermaid diagram types: flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, state diagrams, mind maps, Git graphs, pie charts, and timelines.

Instant Live Preview

Diagrams render automatically as you type, with a 300ms debounce so it never feels sluggish.

100% Private

All rendering happens in your browser using mermaid.js. Your code is never sent to any server.

Export SVG & PNG

Download your diagram as a crisp vector SVG or a high-resolution 2× PNG ready for docs and slides.

All Mermaid Diagram Types

Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, mind maps, Git graphs, and more.

AI Diagram Ready

Built for the AI era — directly preview diagrams generated by Claude, ChatGPT, Gemini, or any LLM.

Always Free

No account needed, no usage limits, no watermarks. Zolkit's Mermaid viewer is completely free forever.

How to Preview a Mermaid Diagram

1
Paste your Mermaid code into the editor on the left — you can copy it from an AI assistant or write it manually.
2
The diagram renders instantly in the preview panel on the right. If there's a syntax error, a message explains the issue.
3
Click 'Export SVG' or 'Export PNG' to download your diagram as a file ready for documentation, slides, or sharing.