MVC Pattern Class Diagram: Model, View, Controller

Mermaid code

classDiagram
    class Model {
        -List~Task~ tasks
        +addTask(title) Task
        +completeTask(id) void
        +getTasks() List~Task~
    }
    class View {
        +render(tasks) void
        +bindAddTask(handler) void
    }
    class Controller {
        -Model model
        -View view
        +handleAdd(title) void
    }
    class Task {
        +String id
        +String title
        +Boolean done
    }
    Controller --> Model : updates
    Controller --> View : binds handlers
    Model ..> View : notifies
    Model "1" o-- "*" Task : holds

Paste this into any tool that renders Mermaid, or into the editor to change the theme and export PNG or SVG. Syntax reference: Class Diagram guide.

What this diagram shows

Four classes appear. Model keeps a List~Task~ (the tilde syntax renders as angle-bracket generics) and exposes addTask, completeTask, and getTasks. View only renders and binds handlers. Controller holds a reference to both and translates UI events into model calls. The arrows carry the meaning: a solid association from Controller to Model and View, a dashed dependency from Model to View labelled notifies, and an aggregation (o--) from Model to Task with 1 to * multiplicity.

How to adapt it

• Replace Task with your own domain entity and update the field list; keep visibility markers (+, -) so encapsulation is visible.
• Add <<interface>> stereotypes to View if your framework lets you swap rendering targets, then draw concrete views with <|.. realization arrows.
• Change o-- to *-- (composition) if tasks cannot exist without the model in your design.
• Add return types after the parentheses, for example +getTasks() List~Task~, so the diagram doubles as an API summary.

FAQ