GitLab/Repo: Enable/Add sequence diagram

The steps are:

  • Enable PlantUml in GitLab: 
    • Login to GitLab -> Admin Area -> Settings -> Scroll down to PlantUML
    • Enable PlantUML
    • In PlantUML URL: type “” and save changes

GitLab - Admin Area - Settings

  • Use Planttext as the online PlantUML editor to build/test your diagram
  • Use as reference for example code and documentation
  • Go to your repository
  • Add “” file and click edit
  • Add the code below:
skinparam backgroundColor #EEEBDC 
skinparam ParticipantPadding 50 

Title: Application overview actor user order 10 
participant "Front end - Angular" order 20 
participant "Back end - .Net Core API" order 30 
database db order 40 

user-->"Front end - Angular": Login to site  
"Front end - Angular"-[#red]->"Back end - .Net Core API": Request message 
activate "Back end - .Net Core API" 
"Back end - .Net Core API"-[#blue]->db: Data fetch\n from db 
activate db 
db-[#blue]->"Back end - .Net Core API": Data fetch\n from db 
deactivate db 
"Back end - .Net Core API"-[#red]->"Front end - Angular": Response message 
deactivate "Back end - .Net Core API" 
"Front end - Angular"-->user: Done 

Edit:Edited plant uml text






Preview plantuml

Leave a reply