What is UML Diagram…
Published: 2023-07-16 08:17:51

---
title: What is UML Diagram…
published: true
date: 2019-10-15 09:35:22 UTC
tags: 
canonical_url: https://theuigirl.hashnode.dev/what-is-uml-diagram-bf9bf8f4a573
---

#### 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](http://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**](https://www.lucidchart.com) **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.

<iframe src="https://www.youtube.com/embed/UI6lqHOVHic" width="700" height="393"></iframe>

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688558612293/d5fc78a2-1a6f-4a23-ac40-dbc8b0d9e2ac.png)

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688558614232/9d8ea2a5-4d79-439b-899b-5745a22ce68a.png)

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_**

![](https://cdn-images-1.medium.com/max/800/1*fME6Jeg2rN7-_NgdAkyRfg.png)

Normal message flow

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

![](https://cdn-images-1.medium.com/max/800/1*_AWYUhzbV3YJUxP0VNR-8Q.png)

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.

![](https://cdn-images-1.medium.com/max/800/1*a-0YuHeerWkBp6vaf5RLPg.png)

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.

![](https://cdn-images-1.medium.com/max/800/1*E4vNQrGsx6jxDbzXGvBAUw.png)

For more information do check out this video

<iframe src="https://www.youtube.com/embed/pCK6prSq8aw?feature=oembed" width="700" height="393"></iframe>

UML Diagrams helped break down a complex system design to well-explained blocks. So do check out [Lucid Chart](https://www.lucidchart.com/) or [Plant UML](http://plantuml.com/) for better demonstration and documentation of your system.

> We can also use software like [Plant UML](http://plantuml.com/) for writing actual UML for creation of these diagrams which comes with a very interactive [GUI](http://plantuml.com/gui).

![](https://cdn-images-1.medium.com/max/800/1*TepvA1BnUJivSMK5i6P-5A.png)

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_](https://twitter.com/anishaswain) _or_ [_Linkedin_](https://www.linkedin.com/in/anisha1234) _or_ [_Instagram_](https://www.instagram.com/anisha_swain_/)