HowTo - Create Diagrams in a UiPath Community Forum Post

jeevith · December 2, 2024, 9:17am

A picture is worth a thousand words

In this post, I will demonstrate how you can improve the content of your posts by including diagrams in the UiPath Community Forum.

The main use-case would be to supplement your posts with helpful visualizations. This is especially great if you like to write tutorials.

Background

Diagram written as code is an ideal way to document concepts once and use them many times. Unlike visualization tools such as Microsoft Visio or Draw.io which require a lot of formatting steps, diagram-as-code tools convert declarative static texts to visual renders. A list of these tools can be found in Kroki! (see Diagram Types section).

Mermaid is what I would strongly recommend to anyone wanting to adopt diagram-as-code in their development workflow. It is supported natively in Visual Studio Code and can be used in any markdown file. In short, it has a low barrier to entry and the syntax is easy to learn.

Discourse, on which this forum is built also supports for mermaid js. Thankfully, @loginerror has recently activated this plugin in the UiPath Community Forum.

Mermaid Diagram Syntax

The syntax is quite simple to start with and can get as complex as you want it to be
Below are the code snippets followed by their visual output.

Two nodes with one link

--> = Source to destination, <--> = Two ways <-- = Destination to source


```mermaid 
flowchart LR
    Orchestrator <--> Robot
```

flowchart LR
     Orchestrator <--> Robot

Changing orientation of nodes

TD=TopDown, LR=LeftRight, RL=RightLeft, BT=BottomTop


```mermaid 
flowchart TD
    Orchestrator <--> Robot
```

flowchart TD
     Orchestrator <--> Robot

Adding more nodes and links

The order of the node does not matter, the links will declare the relationships.


```mermaid 
flowchart LR
    Orchestrator <--> Robot
     Developer --> Orchestrator
```

flowchart LR
     Orchestrator <--> Robot
    Developer --> Orchestrator

Adding descriptions to the links

Long strings with spaces and new line characters are supported in link annotations. In the below example |https| is the link annotation.


```mermaid
flowchart LR
    Orchestrator <-->|https| Robot
```

flowchart LR
     Orchestrator <-->|https| Robot

Using different shapes to the nodes

```mermaid 
flowchart LR
     Orch1[\Orchestrator\] <-->|https| R1((Robot))
```

flowchart LR
     Orch1[\Orchestrator\] <-->|https| R1((Robot))


```mermaid height=255,auto
flowchart LR
Orch1{{Orchestrator}}<-->|https| R1{Robot}
```

flowchart LR
Orch1{{Orchestrator}}<-->|https| R1{Robot}

Coloring nodes and links

```mermaid
flowchart LR
    Developer1(((Developer))):::developerClass -->|Publish| Orch1
    Orch1[\Orchestrator\]:::orchClass <-->|https| Robot1((Robot))
    
    classDef orchClass fill:#f87,stroke:#f00
    classDef developerClass fill:#f00
    linkStyle 0 stroke:blue
    linkStyle 1 stroke:green
```

Here we use a multitude of features/syntax. Lets go through the syntax in detail.

flowchart: Is the type of the diagram

LR: Is the orientation of the nodes and their order

Developer1: ID of the node. This is used to reference this node later in the diagram. There can NOT be space between words in this string.

(((Developer1))): ((( ))) creates a two layered circle shape and the text on the node is set it Developer 1. There can be space between words in this string.

:::developerClass: This describes the theme class used for the node

|Publish|: This is the string annotation for the link and has to be surrounded by two pipe characters. There can be space between words in this string.

Orch1: This is a reference to an ID of another node in the diagram, in this case it is a trapezoid shape with Orchestrator as its string value.

classDef orchClass fill:#f87,stroke:#f00: This defines the styling for the orchClass. We can add more styles by separating style definition using ,.
For example, fill:#f87,stroke:#f00

linkStyle 0 stroke:blue: This defines the style used on the links. It is important to order the links correctly since this styling follows a strict order. The first link in the diagram in this case is link 0 and will have blue as its color.

flowchart LR
    Developer1(((Developer1))):::developerClass -->|Publish| Orch1
    Orch1[\Orchestrator\]:::orchClass <-->|https| Robot1((Robot))
    
    classDef orchClass fill:#f87,stroke:#f00
    classDef developerClass fill:#f00
    linkStyle 0 stroke:blue
    linkStyle 1 stroke:green

Building up layers

```mermaid
flowchart LR
    Developer1(((Developer1))):::developerClass -->|Publish| Orch1
    Developer2(((Developer2))):::developerClass -->|Publish| Orch1
    Orch1[\Orchestrator\]:::orchClass <-->|https| Robot1((Robot1))
    Orch1[\Orchestrator\]:::orchClass <-->|https| Robot2((Robot2))

    
    classDef orchClass fill:#f87,stroke:#f00
    classDef developerClass fill:#f00
    linkStyle 0 stroke:blue
    linkStyle 1 stroke:blue
    linkStyle 2 stroke:green
    linkStyle 3 stroke:green
```

flowchart LR
    Developer1(((Developer1))):::developerClass -->|Publish| Orch1
    Developer2(((Developer2))):::developerClass -->|Publish| Orch1
    Orch1[\Orchestrator\]:::orchClass <-->|https| Robot1((Robot1))
    Orch1[\Orchestrator\]:::orchClass <-->|https| Robot2((Robot2))

    
    classDef orchClass fill:#f87,stroke:#f00
    classDef developerClass fill:#f00
    linkStyle 0 stroke:blue
    linkStyle 1 stroke:blue
    linkStyle 2 stroke:green
    linkStyle 3 stroke:green

Grouping nodes and linking them

Grouping nodes by using subgraph is a great feature in Mermaid diagrams. This allows us to create modules and copy them across many diagrams.


```mermaid
---
title:  Grouping nodes
---
graph LR
      subgraph ServerA[Server A]
          Orchestrator((Orchestrator))
     
            subgraph MachineTemplate[Machine Template]
            direction LR
                Robot_Machine_1
                Robot_Machine_2
                Robot_Machine_3
            end

            subgraph Robots
            direction LR
                Robot_1
                Robot_2
            end

            subgraph Assets
            direction LR
                Asset_1
                Asset_2
            end

            subgraph Folders
            direction LR
                Folder_1

            end
        end
Orchestrator -.->Folder_1
Folder_1 -.-> MachineTemplate
Folder_1 -.-> Robots
Folder_1 -.-> Assets
```

---
title:  Grouping nodes
---
graph LR
      subgraph ServerA[Server A]
          Orchestrator((Orchestrator))
      
            subgraph MachineTemplate[Machine Template]
            direction LR
                Robot_Machine_1
                Robot_Machine_2
                Robot_Machine_3
            end

            subgraph Robots
            direction LR
                Robot_1
                Robot_2
            end

            subgraph Assets
            direction LR
                Asset_1
                Asset_2
            end

            subgraph Folders
            direction LR
                Folder_1

            end
        end
Orchestrator -.->Folder_1
Folder_1 -.-> MachineTemplate
Folder_1 -.-> Robots
Folder_1 -.-> Assets

Creating Complex Diagrams

Now that we have a good understanding of the basic mermaid syntax, its time to apply them in practice.

1. UiPath’s ReFramework Performer Visualized

Here I use the State Diagram from mermaid. The syntax is slightly different to a flowchart but still easily readable.

---
title: UiPath Reframework for Perfomer Process
---
stateDiagram-v2

classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
classDef goodEvent fill:green

    [*] --> Startup
    Startup --> Initialization
    Initialization --> [*]: Exit on error
    Initialization --> [*]: Exit if queue items < 1
    Initialization --> GetTransactions
    GetTransactions --> ProcessTransactions
    ProcessTransactions -->  Application_Exception: App Exception Count < n
    ProcessTransactions -->  [*]: App Exception Count > n
    Application_Exception:::badBadEvent  -->  Initialization: App Exception Count < n
    ProcessTransactions -->  Business_Exception
    Business_Exception:::badBadEvent  -->  GetTransactions: Get next queue item
    ProcessTransactions -->  Successful
    Successful:::goodEvent -->  GetTransactions: Get next queue item
    GetTransactions --> [*]:No queue items

---
title: UiPath Reframework for Perfomer Process
---

stateDiagram-v2

classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
classDef goodEvent fill:green

    [*] --> Startup
    Startup --> Initialization
    Initialization --> [*]: Exit on error
    Initialization --> [*]: Exit if queue items < 1
    Initialization --> GetTransactions
    GetTransactions --> ProcessTransactions
    ProcessTransactions -->  Application_Exception: App Exception Count < n
    ProcessTransactions -->  [*]: App Exception Count > n
    Application_Exception:::badBadEvent  -->  Initialization: App Exception Count < n
    ProcessTransactions -->  Business_Exception
    Business_Exception:::badBadEvent  -->  GetTransactions: Get next queue item
    ProcessTransactions -->  Successful
    Successful:::goodEvent -->  GetTransactions: Get next queue item
    GetTransactions --> [*]:No queue items

2. Architecture of an airgapped LLM implementation

Lets use all that we have learnt so far and create an architecture diagram. The code below shows the architecture of an airgapped LLM server Ollama and relevant clients.

The below figures also shows how we can include images and emojis in the Mermaid diagram. We can also define a theme for the entire diagram to overide the default theme used to render the diagram.

```mermaid
%%{
  init: {
    'theme': 'neutral',
    'themeVariables': {
      'primaryColor': '#BB2528',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#7C0000',
      'secondaryColor': '#006100',
      'tertiaryColor': '#fff'
    }
  }
}%%

flowchart RL
subgraph Local_LLM_Intranet
	direction RL
	subgraph Ollama
	direction RL
		subgraph OllamaServer
		OllamaNode("<img src='https://www.ollama.com/public/ollama.png'; width='30' />")
		end
	
		subgraph ServerExtensions
		direction LR
		AVX
		NVIDIA
		ROCOM
		end
	end
	
	subgraph OpenWebUI
		OpenWebuiNode("<img src='https://docs.openwebui.com/img/logo.png'; width='30' />")
		end

	subgraph AlternativeGUI
		UserGUI
		end
	
	subgraph User
		UserNode("👥")
		end
end


subgraph Models_from_Internett
direction LR
	subgraph OllamaRepository
	ollamaRepo(☁️)
	end
subgraph OtherSources
	AndreKilde(☁️)
	end
end

subgraph FIREWALL
	Firewall(🔥)
end

style Models_from_Internett fill:#FFBF78
style Local_LLM_Intranet fill:#ACE1AF
style FIREWALL fill:#EE4E4E

ServerExtensions -.-> OllamaServer
Ollama <--> |API |OpenWebUI
Ollama <--> |API |AlternativeGUI
OpenWebUI <-->|Interactions| User
AlternativeGUI <-->|Interactions| User
Models_from_Internett -.-> |Get model <br> and / or <br> update|FIREWALL
FIREWALL -.-> Ollama
```

%%{
  init: {
    'theme': 'neutral',
    'themeVariables': {
      'primaryColor': '#BB2528',
      'primaryTextColor': '#fff',
      'primaryBorderColor': '#7C0000',
      'secondaryColor': '#006100',
      'tertiaryColor': '#fff'
    }
  }
}%%

flowchart RL
subgraph Local_LLM_Intranet
	direction RL
	subgraph Ollama
	direction RL
		subgraph OllamaServer
		OllamaNode("<img src='https://www.ollama.com/public/ollama.png'; width='30' />")
		end
	
		subgraph ServerExtensions
		direction LR
		AVX
		NVIDIA
		ROCOM
		end
	end
	
	subgraph OpenWebUI
		OpenWebuiNode("<img src='https://docs.openwebui.com/img/logo.png'; width='30' />")
		end

	subgraph AlternativeGUI
		UserGUI
		end
	
	subgraph User
		UserNode("👥")
		end

end


subgraph Models_from_Internett
direction LR
	subgraph OllamaRepository
	ollamaRepo(☁️)
	end
subgraph OtherSources
	AndreKilde(☁️)
	end
	
end



subgraph FIREWALL
	Firewall(🔥)
    
end

style Models_from_Internett fill:#FFBF78
style Local_LLM_Intranet fill:#ACE1AF
style FIREWALL fill:#EE4E4E

ServerExtensions -.-> OllamaServer
Ollama <--> |API |OpenWebUI
Ollama <--> |API |AlternativeGUI
OpenWebUI <-->|Interactions| User
AlternativeGUI <-->|Interactions| User
Models_from_Internett -.-> |Get model <br> and / or <br> update|FIREWALL
FIREWALL -.-> Ollama

Time to try it yourself?

I hope you give mermaid diagrams a try in your next post / tutorial here in the forum.

References

https://kroki.io/

Questions

For questions on your specific usage, kindly open a new topic and get individual support.

Topic		Replies	Views
https://forum.uipath.com/t/howto-create-diagrams-in-a-uipath-community-forum-post/783229 Other activities blog-or-website-post	0	13	December 10, 2024
Become one of our product experts and share your knowledge! :) Getting Started with UiPath forum , faq	28	7838	January 10, 2023
Text-based coding of workflows Community considering , feedback , community	4	1715	November 23, 2021
Create workflow with code Academy Feedback	5	1810	October 28, 2019
Comments / annotations best practices? Help studio	5	19090	October 29, 2018