OnUML LogoOnUML
Examples

UML Diagram Examples

Explore professional UML diagram examples to quickly start your system design

Mermaid Examples

Practical Mermaid cases for common UML and system design scenarios.

User Registration Flowchart

Flowchart
Registration
Process

A flowchart showing the step-by-step process of user registration including validation and email verification.

User Registration Flowchart
Try This Example

Payment Processing Sequence Diagram

Sequence
Payment
Integration

Shows the interaction between Customer, Payment Gateway, Bank, and System during payment processing.

Payment Processing Sequence Diagram
Try This Example

Software Development Gantt Chart

Gantt
Project
Timeline

Timeline visualization of a software development project phases and tasks.

Software Development Gantt Chart
Try This Example

Library Management Class Diagram

Class
UML
System Design

Shows the structure of classes, their attributes, methods, and relationships in a library system.

Library Management Class Diagram
Try This Example

Vending Machine State Diagram

State
Behavior
Machine

Illustrates different states and transitions of a vending machine during operation.

Vending Machine State Diagram
Try This Example

Online Learning Platform ERD

ERD
Database
Education

Shows the relationships between entities in an online learning system database.

Online Learning Platform ERD
Try This Example

E-commerce User Journey

User Journey
E-commerce
UX

Maps out the complete journey of a user using an e-commerce mobile application.

E-commerce User Journey
Try This Example

Project Planning Mind Map

Mind Map
Planning
Organization

Visual organization of project planning elements and their relationships.

Project Planning Mind Map
Try This Example

Simple Git Branch Workflow

Git
Version Control
Workflow

A basic Git branching example showing how to create and merge a feature branch.

Simple Git Branch Workflow
Try This Example

Company Organization Tree

Organization
Hierarchy
Structure

A hierarchical visualization of a company's organizational structure from executives to departments.

Company Organization Tree
Try This Example
Create Your Own Diagram

From example to working diagram

Choose an example by the question you need to answer

Start with the smallest diagram that communicates the decision, interaction, or structure you are documenting. The examples above are reusable patterns: adapt their source, validate the result with a teammate, and keep the diagram beside the documentation it supports.

Flowcharts

Explain decisions, approvals, onboarding paths, and operational processes from start to finish.

Read the flowchart guide

Class and architecture diagrams

Document domain models, dependencies, boundaries, and the structure of a software system.

Compare class diagram tools

A lightweight diagram workflow

  1. 1. Define the audience. Decide what the reader should understand or decide after viewing the diagram.
  2. 2. Select a close pattern. Pick an example with the same type of relationships, then remove anything that does not serve the story.
  3. 3. Edit and verify. Use the OnUML editor to preview the source and confirm names, order, and edge cases with the system owner.

Frequently asked questions

Can I edit an example instead of starting from scratch?

Yes. Open the editor, reuse the prompt or source from an example, and replace the participants, steps, or entities with details from your own system.

Should I choose Mermaid or PlantUML?

Mermaid is a practical default for concise diagrams in Markdown-heavy workflows. PlantUML is useful when you need broader UML notation or more detailed styling controls.

What makes a diagram useful in documentation?

Keep one clear purpose, use names that match the system, show only relevant branches, and review the source whenever the underlying workflow changes.