What is UML Diagram…

THE BASIC GUIDE

It is useful to sketch the workflow of each component of a system to understand its timeline better.

A re you looking of a solution to sketch out the detailed workflow of your designed system? Do you feel its hectic to put it across pen and paper? Then you are at the right place. Grab a cup of coffee and enjoy learning about basics of programming languages with each sip.

Drawing is vision on paper. - Andrew Loomis

UML, which stands for Unified Modeling Language, is a standard language for creating an integrated set of diagrams which help developers like me to specify, visualize, demonstrate and document the entire artefacts of the system to be developed.

The UML represents a collection of best engineering practices that have proven successful in the modeling of large and complex systems. The UML is a very important part of developing object oriented software and the software development process.www.visual-paradigm.com

The current UML standards call for 13 different types of diagrams: class, activity, object, use case, sequence, package, state, component, communication, composite structure, interaction overview, timing, and deployment. These diagrams are organized into two distinct groups: structural diagrams and behavioural or interaction diagrams.

Structural UML diagrams

• Class diagram
• Package diagram
• Object diagram
• Component diagram
• Composite structure diagram
• Deployment diagram

Behavioural UML diagrams

• Activity diagram
• Sequence diagram
• Use case diagram
• State diagram
• Communication diagram
• Interaction overview diagram
• Timing diagram

According to the software and its use cases, the perfect UML Diagram type is decided.

So here I am going to create UML diagrams (Class/Use Case/Sequence)of a system which is a web app receiving data from an Engineer who saves it in Postgres Database. The App frontend consists of React, Redux, Jest, etc. It is connected to Postgres Database with GraphQL for fulfilling queries of existing data as well as Prisma working as GraphQL API layer for the database by taking defined schemas and generating an API.

Basic functioning:

1. Receives data from the Engineer.
2. Fill out a form according to data entered by the Engineer.
3. Save the form data to Postgres via GraphQL API Server.
4. Extract data from Postgres by GraphQL query

Complicated??? Better showing examples than just talking.

Note: we will use Lucid Chart diagraming software for all our examples

UML CLASS DIAGRAM

When we want to describe different objects present in a system altogether, we group them as classes in the UML Class Diagram. Every object inside the class is called an instance and we identify each instance with attributes(also called fields, variables, properties) which is a significant piece of data containing values that describe each instance of the class. Then comes methods which are also known as functions or operations allows us to specify any behavioral feature of the class. For more details do check out this video.

Let's make a UML class diagram for Saving the form data to Postgres which is a part of our example system.

This is a UML Class diagram has a class named Form Data, which is having instances Form-1 and Form-2. The form submitted have attributes like configuration(JSON type), description(String type), CreatedAt(Date type). The attributes have different methods to create, delete, update or check for the Record. Here Form-1 and Form-2 are subclasses of the class Form Data and are submitted to the DataBase.

UML USE CASE DIAGRAM

UML use case diagram consists of Systems, Actors, Use Cases and Relationships. First, it shows a system or app or website and then it comes to the people or organization or any other system interacting with it leading to a basic flow of working of the system.

System:

A system can be any software application or component(typically a website or Android/IOS apps or any other software ). It is represented with a rectangle with the name of the system at the top. The rectangle represents the boundaries of the system.

Actor:

The actor is the person, system, organization or any extra device interacting with the system for some specific task and represented with a stick figure. Here the actor might be the engineer trying to save the form data to Postgres via GraphQL API Server or the developer creating the whole system or the engineers who are trying to extract the saved data. Actors are external to the system and often categorized in a class instead of individual names. We can not write Anisha in the place of the developer here.

1. Primary Actor: Primary actor is the one starting the interaction with the system. In our case, it is the engineer entering the data to form is the primary actor.
2. Secondary Actor: Secondary actor is the actor reciprocating to the primary actor. Here, the engineer trying to access the saved data from Postgres is the secondary actor.

The primary actor is kept to the left side of the system and the secondary actor is kept to the right side of the system

Use Case

A use case is a representation of a system which

UML SEQUENCE DIAGRAM

When we want to know how the objects in a system coordinate or communicate with each other, there comes the sequence diagram. We place the objects from left to right according to the message flow among the objects. This diagram shows the sequence of the events.

Basic Terminology:

1. Actor : Actor is the person who initiates the message flow and interacts with the objects of the system. In our case, the Actor is the engineer using the App. The actor is always out of the scope of the system. Actors are represented as stick figures.
2. Objects : The items which are part of the software system are the objects. For example, Web Server, ElasticSearch, GraphQL, Prisma, Postgres are the objects of our system. This is represented as rectangular boxes
3. Lifeline : It shows the existence of the objects in time. Moving down the line indicates more lapsing time. It is represented as dashed lines
4. Message: Messages are the interaction between the objects and indicated by arrow sign. But the reply back messages are represented as dashed arrow sign

Normal message flow

In the above example, the actor sends form data to Postgres Database and receives confirmation in return.

However, in some cases, the message flow might encounter conditional flows. For example, in this case, if the schema of form data is incorrect, then the Prisma server would return an error message.

For these scenarios, we use Alternative Box and use if-else conditions.

In the end, we use Activation Box for the indication of the active and idle states of the objects. This active state is represented by vertical rectangles.

For more information do check out this video

UML Diagrams helped break down a complex system design to well-explained blocks. So do check out Lucid Chart or Plant UML for better demonstration and documentation of your system.

We can also use software like Plant UML for writing actual UML for creation of these diagrams which comes with a very interactive GUI.

src: plantuml.com

SO thats all about UML

Let us know your thoughts in the comment section below and if you want to connect with me, here I am -> Twitter or Linkedin or Instagram