> For the complete documentation index, see [llms.txt](https://heronyang.gitbook.io/clean-up-your-spaghetti/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://heronyang.gitbook.io/clean-up-your-spaghetti/1_dont_code_now/uml.md).

# UML

Unified Modeling Language (UML) is a standard way to visualize the design of a system.

The previous page was about the design/look from the user perspective, and now we are talking about the design of the implementation (the code).

## Tool

You may need a simple tool to help on drawing the graphs. (Of course you can use pen and paper if you don't want to co-work the graph online with others.)

* [draw.io](https://www.draw.io/) (this works with Google Drive)
* [gliffy.com](https://www.gliffy.com)

## Domain Diagram

![](https://3086426873-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4CT8WYORuS-KboTDGB%2F-M4CT8x9OG0AAsbaoOFE%2F-M4CTFsC0cZlXiBmFXvT%2Fdomain_model.png?generation=1586142733275942\&alt=media)

*"Domain model" by Kishorekumar 62 - Own work. Licensed under CC BY-SA 3.0 via Commons -* <https://commons.wikimedia.org/wiki/File:Domain_model.png#/media/File:Domain_model.png>

* No detail of implementation
* Domains (players) who involve your project

## System Sequence Diagram

![](https://3086426873-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4CT8WYORuS-KboTDGB%2F-M4CT8x9OG0AAsbaoOFE%2F-M4CTFsEorm-xUjPeXMr%2Fsystem_sequence.png?generation=1586142732271941\&alt=media)

This is an important diagram. Most of time, we "talk" about the flow we want, but drawing it down became helpful in making it happen. Also, as we "see" the flow, more ideas can be inspired, and bugs can be found easily.

## Object Model Diagram

![](https://3086426873-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M4CT8WYORuS-KboTDGB%2F-M4CT8x9OG0AAsbaoOFE%2F-M4CTFsGpQ9KZ0WB7HVm%2Fobject.jpg?generation=1586142731351202\&alt=media)

It's pretty close to the real code. In Object Model Diagram, we can see all the attributes and functions of objects.
