Gitlab Sequence Diagram

1. Gitlab Sequence Diagram Template
2. Gitlab Architecture
3. Gitlab Sequence Diagram Maker

Effective diagramming is crucial for the communication of ideas in softwareengineering. This exercise explores some of the different ways in whichyou can draw diagrams for the work you do in COMP5911M.

The following are reference architecture diagrams for various deployment methods of GitLab. Cloud Providers. AWS; GCP; On-prem; Cloud Providers AWS. See High Availability on AWS. See GitLab Architecture Overview.

Preparation

Thanks also to the js-sequence-diagram project for usage of the grammar for the sequence diagrams. Thanks to Jessica Peter for inspiration and starting point for gantt rendering. Mermaid was created by Knut Sveidqvist for easier documentation. The sequence - is used to draw a message between two participants. Participants do not have to be explicitly declared. To have a dotted arrow, you use - It is also possible to use sequence diagrams, rules are different for the other. GitLab Community Edition. PROG10042021group28 Project overview Project overview Details Activity. Added additional scripts to render flowcharts, sequence digrams and latex properly from assets lib as.

1. You should already have a clone of your GitLab repository, created inthe first exercise. Download exercise2.zip intothe top-level directory of the repository and unzip the archive. Thiswill give you a subdirectory named exercise2, containing three Javaclasses. Remove the Zip archive and then commit the newly added files:

2. The three classes come from an imaginary car rental application thatgenerates a statement of the rental fees owed by a customer. Readexercise2/README.md for more details of this application. Thenexamine the three classes, to learn their structure and relationships.

Hand-Drawn Diagrams

Agile software development processes encourage the use of lightweightmodelling techniques, in which diagrams are often sketched on paper or awhiteboard, or created using Post-it Notes. Important diagrams can becaptured as digital photos which are then shared via a wiki.

1. Sketch on paper a simple UML class diagram that represents therelationship between Customer, Rental and Car.

   Your diagram should show the relationships between the classes as clearly and accurately as possible, and it should feature only the fields and methods that are most relevant to generating a statement of rental fees. (This means you do NOT need to show getters, setters or constructors, for example.)

2. Scan the diagram, or photograph it using your phone. Transfer theresulting image to your PC or a SoC Linux machine and use image editingsoftware to adjust brightness, contrast, sharpness as necessary. Yourgoal should be to make the diagram as clear as possible. In addition,make sure you scale the image to a reasonable size: large enough thatdetail is legible, but not too large to display comfortably on a web page.

3. Log in to gitlab.com and go to your project's wiki. Create a new wikipage with the title ‘Exercise 2'. Add the heading ‘Hand-Drawn' to thepage, then click on the ‘Attach a file' link to add your hand-drawndiagram.

Gitlab Sequence Diagram Template

GitLab Wiki Support for Diagrams

It is possible to generate diagrams directly inside GitLab wiki pages usingMermaid or PlantUML. These tools provide a text-based syntaxfor diagram specification. You will use PlantUML here.

Below is an example of how you specify a simple class diagram using PlantUMLand the GitLab wiki's Markdown syntax. The code is ‘fenced' using triplebackticks, rather than PlantUML's @startuml and @enduml markers.

Here is the corresponding diagram:

1. Consult the PlantUML docs for class diagrams or the PDF Guide tolearn more about the syntax for class diagrams. Then edit the ‘Exercise 2'wiki page created earlier and add the heading ‘PlantUML', followed by aPlantUML class diagram for the car rental application. Use thePreview tab to see how the diagram will appear. When you are happywith the result, click the Save changes button.

2. Consult the docs for sequence diagrams or the PDF Guide to learnabout the syntax for sequence diagrams. Then edit the ‘Exercise 2'page again and add a PlantUML sequence diagram showing the sequence ofmethod calls that take place when an actor named RentalAgent invokesthe statement() method on a Customer object and the fee for a singlerental is calculated.

diagrams.net

diagrams.net is a free drawing tool than can produce many differenttypes of diagram, including UML diagrams. It can be used online in a webbrowser but also provides a desktop app that can be used offline.

Gitlab Architecture

1. Run the application. Use the Change storage link to choose ‘Device'as the preferred storage medium for diagrams. (This means it willdownload diagram files to the machine you are using, rather than storingthem in the cloud.) Then click the Create New Diagram button.

2. The next dialog allows you to start from a blank diagram or from one ofa number of different templates, of which several are for UML.

   In this case, just select ‘Blank Diagram' and then click the Createbutton. When prompted for a save location, select the exercise2directory in your repository, enter rental.drawio as the filename andclick Save.

3. Choose Help → Quick Start Video… from the menubar to watch ashort (1m35s) video on how to draw diagrams. You can also use the Helpmenu to view keyboard shortcuts or search for help on a topic.

4. Open the UML symbol library from the list of symbol libraries on theleft of the screen:

   Use these symbols to help you draw another version of the class diagramfor the car rental application.

5. Choose File → Save to save the diagram file. Make sure the savedfile is in the exercise2 subdirectory of your repository. Use Gitcommands in the top-level directory of your repository to add, commit andpush the changes:

6. Back in diagrams.net, use File → Export as → PNG… tocreate an image of your diagram¹. Click Export and choose ‘Device'as the destination for the image. Specify rental-classes.png as thefilename, but do not put the image in your repository. (The imagedoesn't need to be under version control, because the source file isalready in the repository, and we can regenerate the image from thatsource file whenever we want.)

   Edit the ‘Exercise 2' GitLab wiki page. Add a new heading, ‘diagrams.net',then add rental-classes.png to the page under this heading.

7. Optional: Click on the ‘+' button at the bottom-left of the screen toadd a new blank page to your diagram. Use this to experiment with drawinga sequence diagram equivalent to the one you created earlier usingPlantUML. When you are happy with the result, save the document to thesame file that you used before (rental.drawio, in the exercise2directory of your repository). Use Git to add, commit and push thechanges to this file.

   Export the diagram to a PNG image named rental-sequence.png, outsideyour repository. Then add this image to the ‘Exercise 2' wiki page.

Other Tools

There are many other diagramming tools available. If you have theinclination, investigate one or more of the ones listed below.

• Visual Paradigm is a commercial tool very similar to but morepowerful than diagrams.net. It has both free and premium tiers. (Notethat the free version will watermark any exported diagrams.)

• yUML allows you to create small UML diagrams in a similar way toPlantUML. Text specifying a diagram can be input to the form provided onthe yUML web site or can be embedded in a URL. When a browser makes a GETrequest with that URL, the diagram is generated dynamically and returnedas a image. For example,

  produces

  If you don't like the idea of depending on an external web service fordiagram generation, there are offline tools available that use yUMLsyntax – e.g., Jaime Olivares' yUML diagrammer.

□

Below is an example of how you specify a simple class diagram using PlantUMLand the GitLab wiki's Markdown syntax. The code is ‘fenced' using triplebackticks, rather than PlantUML's @startuml and @enduml markers.

Here is the corresponding diagram:

1. Consult the PlantUML docs for class diagrams or the PDF Guide tolearn more about the syntax for class diagrams. Then edit the ‘Exercise 2'wiki page created earlier and add the heading ‘PlantUML', followed by aPlantUML class diagram for the car rental application. Use thePreview tab to see how the diagram will appear. When you are happywith the result, click the Save changes button.

2. Consult the docs for sequence diagrams or the PDF Guide to learnabout the syntax for sequence diagrams. Then edit the ‘Exercise 2'page again and add a PlantUML sequence diagram showing the sequence ofmethod calls that take place when an actor named RentalAgent invokesthe statement() method on a Customer object and the fee for a singlerental is calculated.

diagrams.net

diagrams.net is a free drawing tool than can produce many differenttypes of diagram, including UML diagrams. It can be used online in a webbrowser but also provides a desktop app that can be used offline.

Gitlab Architecture

1. Run the application. Use the Change storage link to choose ‘Device'as the preferred storage medium for diagrams. (This means it willdownload diagram files to the machine you are using, rather than storingthem in the cloud.) Then click the Create New Diagram button.

2. The next dialog allows you to start from a blank diagram or from one ofa number of different templates, of which several are for UML.

   In this case, just select ‘Blank Diagram' and then click the Createbutton. When prompted for a save location, select the exercise2directory in your repository, enter rental.drawio as the filename andclick Save.

3. Choose Help → Quick Start Video… from the menubar to watch ashort (1m35s) video on how to draw diagrams. You can also use the Helpmenu to view keyboard shortcuts or search for help on a topic.

4. Open the UML symbol library from the list of symbol libraries on theleft of the screen:

   Use these symbols to help you draw another version of the class diagramfor the car rental application.

5. Choose File → Save to save the diagram file. Make sure the savedfile is in the exercise2 subdirectory of your repository. Use Gitcommands in the top-level directory of your repository to add, commit andpush the changes:

6. Back in diagrams.net, use File → Export as → PNG… tocreate an image of your diagram¹. Click Export and choose ‘Device'as the destination for the image. Specify rental-classes.png as thefilename, but do not put the image in your repository. (The imagedoesn't need to be under version control, because the source file isalready in the repository, and we can regenerate the image from thatsource file whenever we want.)

   Edit the ‘Exercise 2' GitLab wiki page. Add a new heading, ‘diagrams.net',then add rental-classes.png to the page under this heading.

7. Optional: Click on the ‘+' button at the bottom-left of the screen toadd a new blank page to your diagram. Use this to experiment with drawinga sequence diagram equivalent to the one you created earlier usingPlantUML. When you are happy with the result, save the document to thesame file that you used before (rental.drawio, in the exercise2directory of your repository). Use Git to add, commit and push thechanges to this file.

   Export the diagram to a PNG image named rental-sequence.png, outsideyour repository. Then add this image to the ‘Exercise 2' wiki page.

Other Tools

There are many other diagramming tools available. If you have theinclination, investigate one or more of the ones listed below.

• Visual Paradigm is a commercial tool very similar to but morepowerful than diagrams.net. It has both free and premium tiers. (Notethat the free version will watermark any exported diagrams.)

• yUML allows you to create small UML diagrams in a similar way toPlantUML. Text specifying a diagram can be input to the form provided onthe yUML web site or can be embedded in a URL. When a browser makes a GETrequest with that URL, the diagram is generated dynamically and returnedas a image. For example,

  produces

  If you don't like the idea of depending on an external web service fordiagram generation, there are offline tools available that use yUMLsyntax – e.g., Jaime Olivares' yUML diagrammer.

□

1. You may need to specify a larger Zoom factor (e.g., 200%) to ensurethat the exported image has sufficient resolution to be fully legible. ↩︎

Gitlab Sequence Diagram Maker

Intro

A simple javascript library to turn text into vector UML sequence diagrams. Heavily inspired by websequencediagrams.com, who offer a serverside solution. We use Jison to parse the text, and Snap.svg to draw the image.

Examples

Syntax

Usage

js-sequence-diagrams depends on Snap.svg and Underscore.js (or lodash). You can download all these files manually, or use 'bower install bramp/js-sequence-diagrams'.

Then include the following HTML: and now you have two options. You can manually parse the text:or use jQuery to do all the work:

More documentation is in the official README.md