Plantuml Process Diagram

PlantUML is a tool which allows us to draw diagram from a text based domain specific language. 1 2 3 @startuml Alice - Bob: test @enduml To test the command and generate diagram, we can use the online editor and refer to the online documentation.

• Process Diagram Free
• Plantuml Class Diagram

1. Class diagram 565632 de.homelabs.webapps.workbench.menu IMenuItem String getLink String getText String getTitle IMenu MenuItem getItems boolean addItem boolean addItems(List MenuItem) IMenuManager IMenu getMenu(MenuType menuType) boolean addMenu(MenuType menuType, IMenu menu) MenuType MAINMENU SUBMENU MainMenu MainMenuItem.
2. You can play around with such examples interactively, by using a live editor, for PlantUML (see here) or Mermaid. By the end of this article, you will learn that many such mark up languages exist, which let you define all kinds of diagrams, such as UML-like diagrams (class, state, activity, sequence, deployment, use-case, ), business process diagrams, GANTT charts, tree-like diagrams.

I love PlantUML. It has it's limitations but if the size and the complexity of the diagrams can be contained, then it offers great benefits. The fact that the format is in text is so powerful in software engineering because it can be attached to any process with change management over source control. Also, it is great for Confluence when the PlantUML Diagrams for Confluence add-on is enabled.

With this post I want to share some tips and tricks from my experience using it.

When using the component diagram, often the layout seems to have a mind of it's own. You can try to provide some guidelines to the rendering component by adding directions in the arrows (e.g. -l->) but when that doesn't work, I try to achieve an optimal layout by reorganizing the appearance of the components, especially when they are nested with e.g. package. It is a bit strange, but order in rendering seems to follow a reverse order of appearance in the script.

Sometimes, I want to have multiple flows within a component diagram. In this case and depending on the case, I use color coding with each arrow (e.g. A -> B #Green : text) and possibly add a legend at the end

Process Diagram Free

When sequence is important then I use a numbering scheme like this

• Flow 1
  • 1.1 action
  • 1.2 action
• Flow 2
  • 2.1 action
  • 2.2 action

One of the best features of sequence diagrams is the autonumber feature which will add a number before the text of each event as explained in the documentation

Autonumbers can be formatted. In the following example the number is 2-digit padded and highlighted.

I prefer the autonumber '[00]' the most because I've never had to exceed 99 events in a diagram. Besides, when my diagrams become big, they are usuall split by a deviders and seperators () and for each I restart the the numbering in the sequence.

In the above example, the lines can be brought closer together to make the diagram more dense with this skin parameter skinparam responseMessageBelowArrow true.

I like to group my participants in boxes and color code them because when the sequence is long, you can quickly identify the scope of the vertical you are looking at even when the participants are out of view. Problem is that every one of the Grouping message features (group,alt/else,opt,loop,par,break,critical and group) are rendered by default with a white solid background which hides the color of the box. This is annoying when the group overlaps many verticals and becomes one massive big white background. A solution for this is not easy. You could use the #Transparent but then the entire group's background becomes transparent and when big the context is lost.

Autonumbers can be formatted. In the following example the number is 2-digit padded and highlighted.

I prefer the autonumber '[00]' the most because I've never had to exceed 99 events in a diagram. Besides, when my diagrams become big, they are usuall split by a deviders and seperators () and for each I restart the the numbering in the sequence.

In the above example, the lines can be brought closer together to make the diagram more dense with this skin parameter skinparam responseMessageBelowArrow true.

I like to group my participants in boxes and color code them because when the sequence is long, you can quickly identify the scope of the vertical you are looking at even when the participants are out of view. Problem is that every one of the Grouping message features (group,alt/else,opt,loop,par,break,critical and group) are rendered by default with a white solid background which hides the color of the box. This is annoying when the group overlaps many verticals and becomes one massive big white background. A solution for this is not easy. You could use the #Transparent but then the entire group's background becomes transparent and when big the context is lost.