FAQ

• 1. Tools

• 2. Relationship in UML

• 3. How to integrate UML diagrams into GitLab or GitHub

  • 3.1. Option 1: Using mermaid

  • 3.2. Option 2: Using PlantUML Proxy Server

1. Tools

• PlantUML Web Server (Live Editor)

• Mermaid Live Editor

2. Relationship in UML

Source:

@startuml
classA ..|> protocol_B : Realization
classC --|> classD : Inheritance
classE ..> classF : Dependency
classG --> classH : Association
classI .. classJ : Link(Dashed)
classK -- classL : Link(Solid)
classM --* classN : Composition
classO --o classP : Aggregation
@enduml

Preview by using mermaid:

classDiagram
  classA ..|> protocol_B : Realization
  classC --|> classD : Inheritance
  classE ..> classF : Dependency
  classG --> classH : Association
  classI .. classJ : Link(Dashed)
  classK -- classL : Link(Solid)
  classM --* classN : Composition
  classO --o classP : Aggregation

3. How to integrate UML diagrams into GitLab or GitHub

Reference: stackoverflow

3.1. Option 1: Using mermaid

Note: This tool works in both GitHub and VS Code, but doesn't work in GitBook.

Source:

sequenceDiagram
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob:Another authentication Response
Bob --> Alice: Another authentication Response

Preview by using mermaid:

sequenceDiagram
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob:Another authentication Response
Bob --> Alice: Another authentication Response

3.2. Option 2: Using PlantUML Proxy Server

Documentation: PlantUML Server

Source:

![alternative text](http://www.plantuml.com/plantuml/proxy?cache=no&src=https://raw.github.com/plantuml/plantuml-server/master/src/main/webapp/resource/test2diagrams.txt)

Preview by using PlantUML server:

alternative text