Model-View-Controller (MVC): an editable mindmap

Model-View-Controller (MVC): an editable mindmap

The interactive MindMap canvas for this explanation — every lane, row and arrow above is a real QueryChart diagram you can open and edit.

How to read this mindmap

• Begin at “Model-View-Controller (MVC)” in the centre, then explore any branch that answers your question. The branch colors keep each group of ideas together.
• Curved lines show relationships; arrowheads appear only where one idea leads to another. Select any idea in the editor to change its text, position, or connections.

User input

This branch brings together “User interacts with the interface”.

Controller

This branch brings together “The controller is the traffic cop: it reads the user's action, decides what it means and tells the model what to change. It holds no state itself.”, “Controller updates the model”.

Model

This branch brings together “The model is the single source of truth — data and the rules that govern it. Both the controller and the view read from it, which is why they never fight over state.”, “Model notifies observers of the change”.

View

This branch brings together “The view is a projection of the model: it never changes data directly, it only asks the model and displays what it returns.”, “User sees the updated interface”.

Connections across the map

The controller handles input; the model owns state; the view renders: three responsibilities, three lanes.

Neither the view nor the controller writes data; all changes flow through the model.

The model notifies observers rather than commanding the view, so one model can drive many views.

The separation makes each part testable alone: the pattern's original payoff.

MVC is the ancestor of many modern patterns (MVVM, MVP, Redux-style stores), all preserving the same separation.

Key relationships and takeaways

• The controller handles input; the model owns state; the view renders: three responsibilities, three lanes.
• Neither the view nor the controller writes data; all changes flow through the model.
• The model notifies observers rather than commanding the view, so one model can drive many views.
• The separation makes each part testable alone: the pattern's original payoff.
• MVC is the ancestor of many modern patterns (MVVM, MVP, Redux-style stores), all preserving the same separation.

When to use this visual

• Introducing the pattern to a developer before they read a framework's docs: the triangle is the map every framework implements.
• Explaining why a codebase is hard to change: state handled in the view is an MVC violation, and it is visible on the canvas.
• Comparing MVC with the layered architectures in the clean architecture visual.

How it works

1. Start at the central topic

   Rename “Model-View-Controller (MVC)” if you want to adapt this map to a specific project or lesson.

2. Develop the branches

   Edit the supporting ideas, then add examples and notes where a branch needs more detail.

3. Connect related ideas

   Draw curved connections across branches; use an arrow only when the relationship has a direction.

Frequently asked questions

What is MVC?

MVC (Model-View-Controller) is a software pattern that separates an application into three parts: the controller handles input, the model owns the data and business rules, and the view renders the model. The separation's benefit is that each part can be developed and tested independently, and the same model can be shown by many views. It is the pattern most web frameworks are built on.

Why is the model the centre of MVC?

Because the model is the single source of truth. If both the controller and the view could write data, they would drift and fight over state. Keeping all changes in the model means there is exactly one place where data rules live, and the view is always a projection of a consistent model. The visual places both model boxes in their own lane for this reason.

What happens if I put logic in the view?

You get an anti-pattern sometimes called the "fat view": display code mixed with business rules, which cannot be tested without rendering, and which drifts from the model. The same criticism applies to a controller that holds business logic instead of delegating. MVC's discipline is that each lane stays in its lane: the visual's three separate rows are the rule made visible.

How does MVC relate to modern frameworks?

Most modern frameworks preserve the triangle with new names: MVVM adds a view-model layer, MVP gives the view a presenter, and state-management libraries like Redux are essentially the model with a stricter notification rule. The canvas's core loop (input changes state, state drives output) is the invariant every one of them keeps.

Edit this mindmap in QueryChart

Open this mindmap as your own editable free canvas. Move ideas, add branches, and draw new connections.

Edit this mindmap in QueryChart