4.1 Advanced Diagram Type

Class Diagrams

1. Explain UML basics.

2. Syntax: classDiagram.

3. Classes, relationships, inheritance.

---

1. Explain UML Basics

So far, you’ve learned how to use Mermaid for flowcharts and sequence diagrams, which describe processes and interactions. But when it comes to designing or explaining how software systems are structured, you’ll often hear about UML — especially UML class diagrams.

---

✅ What is UML?

UML stands for Unified Modeling Language. It’s a standard visual language that software architects, engineers, and developers use to describe, design, and document software systems.

Unlike flowcharts, which show steps, UML diagrams focus on structure and relationships — the blueprint of how your code or system components fit together.

---

✅ Why Use UML?

UML helps you:

• Visualize how parts of a system relate to each other.

• Document your design for teammates, stakeholders, or new developers.

• Plan how to organize classes, methods, and data in object-oriented programming (OOP).

For example:

• Which classes exist in your system?

• How do they inherit from each other?

• Which classes depend on or use others?

---

✅ Common UML Diagram Types

UML includes many diagram types. Here are three you’ll hear about most often:

Type	What It Shows
Class Diagram	The structure of classes, attributes, methods, and relationships in OOP.
Use Case Diagram	How users (actors) interact with the system — big-picture goals and features.
Sequence Diagram	How parts of the system interact over time (which you’ve already learned!).

In Mermaid, the most common UML diagram you’ll create is the class diagram.

---

✅ What is a Class Diagram?

A class diagram shows:

• Classes (like blueprints for objects in code)

• Attributes (variables or properties)

• Methods (functions or operations)

• Relationships between classes:

  • Inheritance (one class extends another)

  • Associations (one class uses or knows about another)

This helps you design, understand, and communicate how your code is structured — before you even write it.

---

✅ UML + Mermaid

Mermaid supports class diagrams with simple, text-based syntax. Instead of drawing boxes and lines by hand, you describe your classes in plain text — and Mermaid generates the diagram for you.

Example:

```mermaid
classDiagram
  class Animal {
    +String name
    +void makeSound()
  }

  class Dog {
    +String breed
    +void bark()
  }

  Animal <|-- Dog
```

This shows:

• Animal is a class with an attribute (name) and a method (makeSound()).

• Dog is another class that inherits from Animal.

• Dog has its own attribute and method.

---

In short:

📌 UML is the universal language for mapping out software structure. 📌 Class diagrams are one of its most practical tools — and Mermaid makes them easy to write and maintain in plain text.

---

2. Syntax: classDiagram

Once you understand the basics of UML, the next step is learning how to actually write a class diagram in Mermaid. Mermaid makes this easy with the classDiagram keyword. This tells Mermaid: “Render this section as a UML-style class diagram.”

---

✅ How to Start

Every class diagram begins with:

classDiagram

Below this line, you define:

• The classes

• Their attributes (properties or variables)

• Their methods (functions)

• The relationships between classes (like inheritance or association)

---

✅ Basic Class Definition

A simple class looks like this:

class ClassName {
  +PropertyType propertyName
  +ReturnType methodName()
}

• + means public (visible to other classes).

• - means private (hidden from other classes).

• # means protected (visible to subclasses).

• PropertyType and ReturnType describe the data type (like String or void).

---

Example:

```mermaid
classDiagram
  class Car {
    +String model
    +int year
    +startEngine()
  }
```

This diagram defines a Car class with:

• Two public attributes: model and year

• One public method: startEngine()

---

✅ Defining Relationships

Mermaid supports standard UML relationships:

• Inheritance: A class extends another

  ParentClass <|-- ChildClass

• Association: One class uses or has another

  ClassA --> ClassB

• Dependency: A weaker link (often for interfaces or injected services)

  ClassA ..> ClassB

• Aggregation (whole-part relationship):

  ClassA o-- ClassB

• Composition (stronger whole-part):

  ClassA *-- ClassB

---

Example with Relationships:

```mermaid
classDiagram
  class Animal {
    +String name
    +makeSound()
  }

  class Dog {
    +String breed
    +bark()
  }

  class Owner {
    +String name
  }

  Animal <|-- Dog
  Owner --> Dog
```

What this shows:

• Dog inherits from Animal.

• Owner is associated with Dog (owns a dog).

---

✅ Tips for Clean Syntax

✔️ Use camelCase or PascalCase for class names — just like real code. ✔️ Indent attributes and methods clearly inside { }. ✔️ Keep relationship arrows neat and point the right way — the symbol shows which class depends on which. ✔️ Use +, -, and # to mimic real access levels in object-oriented design.

---

In short:

📌 The classDiagram keyword switches Mermaid into UML mode, where you define classes, attributes, methods, and relationships in clean, readable text — giving you a professional blueprint for your code.

---

3. Classes, Relationships, Inheritance

With the classDiagram keyword and syntax in place, it’s time to understand how to combine classes, relationships, and inheritance to map out the structure of your code — just like you would in a real-world UML diagram.

---

✅ What is a Class?

A class is the fundamental building block of a class diagram — think of it as a blueprint for objects in your code.

A class defines:

• Attributes: the properties or data the class holds.

• Methods: the actions or behaviors the class can perform.

In object-oriented programming (OOP), you use classes to organize and reuse code.

Example:

class User {
  +String name
  +String email
  +login()
  +logout()
}

Here, User is a class with:

• Two attributes: name and email.

• Two methods: login() and logout().

---

✅ What is a Relationship?

Relationships describe how classes connect to each other. In UML, common relationships include:

• Association: One class uses or refers to another.

• Dependency: A looser link — one class depends on another temporarily.

• Aggregation: A whole-part relationship (e.g., a Library has Books).

• Composition: A stronger whole-part link (e.g., a House has Rooms that can’t exist independently).

Mermaid supports all of these with simple arrow syntax.

---

Example:

User --> Profile

This means User is associated with Profile — for example, a User has a Profile.

---

✅ What is Inheritance?

Inheritance shows when one class extends another — meaning it inherits attributes and methods from its parent.

In UML and Mermaid:

• The arrow <|-- means “inherits from.”

Example:

Animal <|-- Dog

This means Dog inherits from Animal. So Dog gets all of Animal’s properties and behaviors by default — and can add its own.

---

✅ Combining Them in a Diagram

Putting it all together:

```mermaid
classDiagram
  class Animal {
    +String name
    +makeSound()
  }

  class Dog {
    +String breed
    +bark()
  }

  class Owner {
    +String name
  }

  Animal <|-- Dog
  Owner --> Dog
```

What this shows:

• Animal is a base class.

• Dog inherits from Animal.

• Owner is associated with Dog.

This tiny diagram is like a mini-blueprint for a simple OOP system — easy to write, easy to read, and easy to maintain as your code grows.

---

✅ When to Use These Together

Use classes, relationships, and inheritance when you want to:

• Design a new feature before you code it.

• Explain how objects relate in your app.

• Document existing code for teammates or future you.

Mermaid’s classDiagram makes this painless — just write a few lines of text, and you have a clear, shareable system map.

---

In short:

📌 Use classes to define what your objects are. 📌 Use relationships to show how they interact. 📌 Use inheritance to keep your design reusable and clean.

---