3

I am planning a new web application, therefore I want to create a component diagram which shows the architecture of the application. Now I am actually not a specialist in UML and wanted to know if the diagram I made is correct for UML standardization.

I already used google a lot for some examples but none of these could really helped me with showing the database, orm and webbrowser in it.

So here is my actual result, would be great if I could receive some feedback for what is wrong and how it should be made correctly.

image

bruno
  • 32,421
  • 7
  • 25
  • 37
MIstudent
  • 43
  • 2
  • 6
  • 1
    With a less formal diagram you would be much faster, and most likely even clearer. In the specific case 2 Lines of text would provide the same level of detail. (Yes that’s a UML rant, I think it’s social,acceptable to do that in 2019) – eckes May 05 '19 at 18:45
  • @eckes Maybe it's "acceptable" but still wrong, though. Those are the times. – qwerty_so May 06 '19 at 05:37
  • What's the meaning of the dashed arrows? Wouldn't it be an aggregation relationship rather? – Olle Härstedt Nov 09 '22 at 13:13

2 Answers2

2

Basically your diagram is fine (except for that filled arrow in the lower part). However, there's room for improvement.

enter image description here

You can show the required and provided interfaces on each port and delegate (see Edit below) functionality to the internal classes of the component. The above is very simplistic but it should make clear the use of delegate relations.

Also in a more coarse picture you could just leave away the inner part of Application and just show its ports/interfaces for an overview diagram:

enter image description here

Edit: One never stops learning. First, the arrow for required IF used to be the other way around in UML 2.1.1. But now (UML 2.5) they use just a straight line for delegation. No arrow nor keyword delegate.

qwerty_so
  • 35,448
  • 8
  • 62
  • 86
1

Inside a component element, you may display either its internal structure or its packaged elements. It seems you are mixing these two up. If you want to display both, you have to use two separate compartments. Here is a figure 11.48 from the UML 2.5 specification:

component

I suggest you choose to show the internal structure. In that case, the elements inside the component symbol should be 'Parts', with a colon in front of the class name. The dashed arrows inside the component should be replaced by solid lines.

For more information, see the answer to 'Component diagram dependency vs assembly'

www.admiraalit.nl
  • 5,768
  • 1
  • 17
  • 32
  • Thanks for your detailed explanation and hints. I think this is exactly the answer I was looking for. I just updatet my diagram hopefully it is correct now. Could you please check it again. Thanks. :) https://imgur.com/a/YShx85E – MIstudent May 05 '19 at 19:53
  • I still see the original diagram. – www.admiraalit.nl May 05 '19 at 19:59
  • Did you check the link from my comment ? – MIstudent May 05 '19 at 20:08
  • @www.admiraalit.nl Why do the classes inside `Order` have colons in front which make them look like instances? – qwerty_so May 06 '19 at 05:43
  • In UML types are listed after the colon, you could also add instance names before the colon in an internal structure compartment (but not in Class diagrams as you can see in the packaged elements compartment, for whatever reasons) – eckes May 06 '19 at 06:52
  • @ThomasKilian: They are 'parts'. These are almost like instances, e.g. you could have several parts of type User (``Superuser : User``, ``Normaluser : User [*]``). I can't explain UML composite structures in one comment. Have a look at Figure 11.5 of the UML spec. – www.admiraalit.nl May 06 '19 at 08:07
  • @MIstudent: Oh, sorry, now I see the new diagram. – www.admiraalit.nl May 06 '19 at 08:17
  • The part inside Application is now a valid internal structure. But outside of Application, you should not apply the rules of internal structures. Just draw that exactly like in your original diagram. The connection between the socket (required interface, half circle) of Webbrowser and the Port should be a dependency, i.e. a dashed arrow pointing from the socket to the port. The connection between the ball (provided interface, full circle) of Database and the Port should be a dependency pointing from the Port to the ball. – www.admiraalit.nl May 06 '19 at 08:29
  • Thanks again @www.admiraalit.nl I think it should be fine now. Your were a big help. – MIstudent May 06 '19 at 18:32