Other than a class diagram is there another way (with or without UML) to model an MVC web application design?

Question

I'm building a rails application and I'm having trouble working out how create diagrams for the application architecture.

I've created UML class diagrams in the past, so consequently that's where I headed. I've found the railroady gem that generates UML class diagrams via a rake task, however it separates the models from the controllers - which feels fragmented to me.

What I want to know is whether there is another (preferably better) way to model an MVC (rails) web application.

I'm not necessarily looking for a gem to generate the diagram for me, I'm happy to create it manually in visio, I just don't know what type of diagram I should be using.

Answer 1

Have you ever come across a Use Case Diagram before? It's not strictly a diagram to outline a systems architecture, but it does provide a good visual representation of communication with other parts of the system/ external actors, during a given "use case" (or process).

For example: User(Actor) --> Update Status(Use Case)--includes-->(Log in)

Here we have a user wanting to update their status. In order to do this, they need to be logged into the site (an included use case). Thinking about this in MVC mode, we know that "Update Status" and "Log in" would both be controller methods, which would both communicate with the attracted website database (also an actor), thus demonstrating the communication path within a system.

Actors of a system can be anything that communicates with the actual system during a process, usually externally, so users, browsers, database, clients etc. In terms of modelling the MVC architecture, this is done best by the Class diagram, but a Use Case diagram would also aid in the visual representation.

I always draw up a Use Case and Class Diagram together before I start coding, as a way of extracting the system requirements and laying them out in a working design. UML diagrams are design tools after all- there's not really much point in creating one after you've written the system code!

Just something to think about anyway- hope this helps! brief overview of basic use-case diagrams

Answer 2

You may want to try the Robustness diagram, also sometimes called MVC diagram. See for example here and there.

It is not really a UML diagram, but most UML tools manage it through stereotypes and custom icons. The tool I use, Magicdraw UML, uses a class diagram, but I think I heard of tools that use communication diagrams (not sure, though).

However, it may or may not meet your expectations, as it is a very global diagram.

Answer 3

There exist a metodology named UWA (Ubiquitous Web Application) that allows you to describe not only the data structure, but also the navigation, presentation and transaction models.

The UWA methodology has a user-centered approach, which improves the requirement and design definitions. Since this metodology was developed specifically for modelling web applications, it allows a clear separation of content, navigation, transaction, publishing and operational elements.

UWA begins with a goal-oriented requirements engineering that naturally arise to later design stages, revealing key features that should be implemented. This leads to reasoning about some requirements that might have not been identified beforehand, or may have been underrated.

You may find additional information about UWA here.

Even if you decide not to apply this methodology, it may provide you with some tips about adapting UML diagrams to web applications.