Integrating Draw.io and PlantUML with GitLab

As we are migrating away from Lucidchart to draw.io, a security-first diagramming for teams, I will be documenting the steps to integrate draw.io with GitLab.

Configure Diagrams.net Server

Referencing the official Diagrams.net documentation, I run the diagrams.net container in Docker, using the following command:

docker run --rm --name="draw" -p 8888:8080 -p 8443:8443 jgraph/drawio

To make this setup permanent, place the above command into a script named launch.sh and set up cron job:

# Makes the script exectable
chmod +x launch.sh

# Installs cron
sudo apt install cron
crontab -e

Add the following to the cron file and save it:

@reboot /home/pi/launch.sh

Enable Diagrams.net Integration

Diagrams.net will be available via http://bee:8888 (where bee is the hostname of my GitLab server):

After signing into GitLab as administrator, navigate to Admin Area. Go to Settings > General, scroll down to Diagrams.net, and enter the URL:

Create Diagrams with Diagrams.net

From the project’s wiki page, create a new Wiki and click on the Add or Insert Diagram icon as shown below:

After completing the design, click on the Save & Exit button in the top right corner.

Edit Diagrams with Diagrams.net

To edit a diagram from the Wiki page, click on the Edit button in the top right corner.

Select the SVG drawing, click on the Add or Insert Diagram icon to edit the diagram:

Configure PlantUML

Following the PlantUML official guide, let’s run the PlantUML container in Docker using this command:

docker run -d --name plantuml -p 8005:8080 plantuml/plantuml-server:tomcat

To check the status or remove the PlantUML container, you may run:

# Check status
docker inspect -f '{{.State.Status}}' plantuml

# Stop container
docker stop plantuml

# Remove image
docker rm plantuml

You can create the Personas design by accessing the web interface at http://bee:8005 with the following:

@startuml
actor Traveler
participant "Web/Mobile UI" as UI
participant "Search Service" as Search
participant "Order Service" as Order
participant "Payment Service" as Payment

Traveler -> UI: Search for flights/hotels
UI -> Search: Search request
Search -> Order: Check availability
Order -> Search: Available options
Search -> UI: Display search results
Traveler -> UI: Proceed to payment
UI -> Payment: Request payment details
Payment -> UI: Provide payment information
@enduml

To integrate PlantUML to GitLab, navigate to Admin Area. Go to Settings > General, scroll down to PlantUML, and enter the URL:

Update the design Wiki as shown:

That’s it! We have successfully integrated Diagrams.net and PlantUML with GitLab. Happy Diagramming!

High Level Architecture Design

This is the updated Microservice Design:

For each of the different personas: