UML State Charts

March 9th, 2009


Here is an interesting way of approaching state changes using UML notation, and more specifically state charting. Perhaps the learning curve of documenting such technical interactions is not the lowest. However, once the team agrees on using such an advanced notation system, the represented interactions and state changes can be explored with greater accuracy and detail. Some interesting symbols include: loops which imply refreshes; brackets which suggest conditionals; forward slashes which suggest system actions; and larger rounded area containers representing nested states which are always accessible.

Yohan also sent me two interesting UML references. One simpler PDF reference explains very well the notation used in the above example, and a second extended reference explains additional UML diagramming notations.

Credits: Yohan Creemers

Need UI Inspiration?

Hi I'm Jakub and I wanted to share with you some of my better UI sketches to inspire your line of work. I've been sketching user interfaces with paper/electronically for over a decade. Subscribe today, and I'll share 5 of my better sketches with you over the next 5 days. How is that? :)

I will send you 5 pieces of inspiration over the next 5 days. You can unubscribe whenever you like. Powered by ConvertKit

3 Responses to “UML State Charts”

  1. Derek Says:

    Wow, a throw back to my Comp-Sci classes! As web software has evolved, documentation like definitely has its place

  2. Thomas Bachmann Says:

    Hi, i wonder if the shown diagram is really a pure state diagram. In my opinion "Intro Movie" or "Introduction to gameworld" are not really states. It seems like it is a mixture of a state and activity diagram.

  3. Jakub Linowski Says:

    HI Thomas. I think so too. I think that state and activity diagrams have much in common and could very easily coexist in the same visual representation.