Easy UML diagrams on GitLab
UML is the most common way to document designs, however creating UML diagrams often takes up a lot of time. This is both caused by the process of creating the diagrams in a photoshop like program, and also by having to export the image after every tiny change.
It doesn’t have to be like this though. UML diagrams can also be made in markdown files using PlantUML. These markdown files can automatically be turned into an image by either your IDE or the GitLab website. This way you can quickly create images by simply typing, and you never have to export any images, allowing you to have a single source of truth. You don’t even need to enable any setting in GitLab in order for this to work. Another big plus is that your designs are under source control.
The syntax is very simple. For example if you take a look at the following screenshot of this example (more examples can be found here) :
The code for this diagram is very simple:
```plantuml
@startuml
hide circlesclass People <<interface>>{}People <|-- AlicePeople <|-- Bob@enduml```
The @startuml and @enduml tags are not needed for rendering the images on the GitLab website, but they are handy if you have the plantuml extension for VS code. This extension is useful since it shows you the diagram everytime you save, so you don’t have to push your commit to GitLab in order to see your changes (which of course would result in very messy commits and a very slow workflow).
All things considered, I think this is a very nice solution to document software design, it is atleast the easiest way of documenting UML designs I have used so far. A similiar tool like this exists which is more well known I think, called Mermaid. My problem however, is that Mermaid is actually not UML compliant, since it tends to use arrows that are filled in when they shouldn’t be, or other small deviations like that. PlantUML is completely UML compliant however, and I have yet to discover any real big downsides to the tool.
