What type of UML diagram should I use to model the parts of a web app?

Question

What type of UML diagram should I use to model the parts of a web app?

For instance, lets say my parts are as followed:

• Server
• Database
• Web App
• Multiple APIs

The web app interacts with all the other parts in some way. From my research, the best options seem to be either component, deployment, or sequence.

Here's a general idea that I'm going for with my diagram, but I do not know which UML diagram this would best be represented in.

If you know the diagram I should use, I would like to know how each part is represented in the diagram. For example, in a deployment diagram, I know that a server/database would be nodes. And, APIs would possible be artifacts?

Answer 1

This depends a lot on what you're wanting to model and communicate. All of the diagram types you mention would be useful ways to describe a web app. Each focuses on a different aspect of the web app -- component models are about software component structure (database, web app, apis), deployment models show how instances of these components are deployed into deployment nodes (servers, devices etc). Like Thomas says, this is a very broad question -- in essence you are asking how should you describe your web app's solution architecture which is not a trivial exercise. Is there something more specific I can help with -- can you narrow down what it is you want to show about your app?

Answer 2

For designing a web app (or any other type of software application), following a best practice Model-View-Controller (MVC) codebase architecture, you first need to make an information design model, typically in the form of a UML class diagram, defining the model classes, or the "model", of your app. The "view" (or user interface) of your app is based on the model.

Your diagram attempts to model the deployment architecture of your app. But this question comes after choosing a codebase architecture and an information architecture.

You can find more explanations about the architecting process, and the code of several example web apps, in my book Web Applications with JavaScript or Java, which is also available as an open access online book.

Answer 3

Your start with the component diagrams is fine. Generally your question is too broad to be answered here, but a few bread crumbs anyway:

In a next step you can describe the single components which are hosted inside the single nodes. You can make the nodes navigable (means you have a composite diagram showing their guts) so you can place component instances showing their interfaces. The latter can be shown with either lollipops or as stereotyped classes which the single components implement. Following that you can break down components in a similar fashion showing how the components are implemented with various classes and how these realize the single interfaces. It's possible to show the interfaces outside the components and <<delegate>> them inside the specific classes.

The story goes on, but it's too big to be told here.