Informatik/Mathematik / Software Engineering

Ziel: Kennenlernen weiterer Diagrammarten der textbasierten Diagrammgenerierung mit AsciiDoc

Praktikumsaufgaben Teil 9 - Diagramme 2

In diesem Aufgabenteil schauen wir uns weiter Diagramme an, welche mit PlantUML in Asciidoctor-Dokumenten verwendet werden können.

Hinweise zum Praktikum in den Windows-Laboren

Aufgrund der nicht gespeicherten Nutzer-Profile in den Windows-Laboren, sind zu jedem Praktikumsbeginn folgende Schritte durchzuführen:

Schritte zur Vorbereitung des Praktikums
  1. Git-Konfiguration C:\Users\<username>\.gitconfig wiederherstellen oder anpassen:

    per Editor in der .gitconfig
    [user]
    	name = Vorname Nachname
    	email = s00000@htw-dresden.de
    [safe]
        directory = *
    [http]
    	proxy = http://www-cache.htw-dresden.de:3128
    oder per PowerShell und Git-Kommandos
    > git config --global user.name "Vorname Nachname"
    > git config --global user.email s00000@informatik.htw-dresden.de
    > git config --global --add safe.directory *
    > git config --global http.proxy http://www-cache.htw-dresden.de:3128
  2. Visual Studio Code: Anpassen der AsciiDoc-Einstellungen:

    • Asciidoc > Preview: Use Editor Style: (deaktiviert)

    • Asciidoc > Extensions: Enable Kroki: (aktiviert)

  3. GitHub Login mit gespeichertem oder neuem Personal Access Token über die PowerShell bekanntgeben:

    Repository vorhanden
    > U:
    > cd path/to/repository/<repo-name>/
    > git pull
    Authentifizierung ...
    Repository nicht vorhanden (Home-/SAMBA-Laufwerk)
    > U:
    > cd path/to/repository/
    > git clone https://github.com/.../<repo-name>
    Authentifizierung ...
    Repository nicht vorhanden (TEMP-Laufwerk)
    > T:
    > git clone https://github.com/.../<repo-name>
    Authentifizierung ...


PlantUML Notation

Aufgabe 1 - C4 Dynamic Diagramm

Für die Verwendung und Hinweise von C4-Modell Diagrammen siehe: Teil 5 - Diagramme 1 - C4 Model Diagramme.

Schauen Sie sich die Syntax auf C4-PlantUML - Supported Diagram Types und Dynamic Diagram Sample an und erstellen Sie, angelehnt an Ihr Projekt oder das Beispiel, ein C4 Dynamic Diagramm.

example_c4-dynamic-diagram.puml
@startuml example-c4-dynamic-diagram
' source: https://github.com/plantuml-stdlib/C4-PlantUML
' C4 Model
!include <c4/C4_Dynamic.puml>
'!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Dynamic.puml

' Diagram title
title \nDynamic diagram example\n

' Diagram syntax
ContainerDb(c4, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
Container(c1, "Single-Page Application", "JavaScript and Angular", "Provides all of the Internet banking functionality to customers via their web browser.")
Container_Boundary(b, "API Application") {
  Component(c3, "Security Component", "Spring Bean", "Provides functionality Related to signing in, changing passwords, etc.")
  Component(c2, "Sign In Controller", "Spring MVC Rest Controller", "Allows users to sign in to the Internet Banking System.")
}
Rel_R(c1, c2, "Submits credentials to", "JSON/HTTPS")
Rel(c2, c3, "Calls isAuthenticated() on")
Rel_R(c3, c4, "select * from users where username = ?", "JDBC")

' Use complete legend
'LAYOUT_WITH_LEGEND()
' calculated legend, only show used items
SHOW_LEGEND()
@enduml
C4 Dynamic Diagramm mit PlantUML
Abbildung 1. C4 Dynamic Diagramm mit PlantUML

Aufgabe 2 - C4 Deployment Diagramm

Für die Verwendung und Hinweise von C4-Modell Diagrammen siehe: Teil 5 - Diagramme 1 - C4 Model Diagramme.

Schauen Sie sich die Syntax auf C4-PlantUML - Supported Diagram Types und Deployment Diagram Sample an und erstellen Sie, angelehnt an Ihr Projekt oder das Beispiel, ein C4 Deployment Diagramm.

example_c4-deployment-diagram.puml
@startuml example-c4-dynamic-diagram
' source: https://github.com/plantuml-stdlib/C4-PlantUML
' C4 Model
!include <c4/C4_Deployment.puml>
' !include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

AddElementTag("fallback", $bgColor="#c0c0c0")
AddRelTag("fallback", $textColor="#c0c0c0", $lineColor="#438DD5")

title Deployment Diagram for Internet Banking System - Live

Deployment_Node(plc, "Big Bank plc", "Big Bank plc data center"){
    Deployment_Node(dn, "bigbank-api***\tx8", "Ubuntu 16.04 LTS"){
        Deployment_Node(apache, "Apache Tomcat", "Apache Tomcat 8.x"){
            Container(api, "API Application", "Java and Spring MVC", "Provides Internet Banking functionality via a JSON/HTTPS API.")
        }
    }
    Deployment_Node(bigbankdb01, "bigbank-db01", "Ubuntu 16.04 LTS"){
        Deployment_Node(oracle, "Oracle - Primary", "Oracle 12c"){
            ContainerDb(db, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.")
        }
    }
    Deployment_Node(bigbankdb02, "bigbank-db02", "Ubuntu 16.04 LTS", $tags="fallback") {
        Deployment_Node(oracle2, "Oracle - Secondary", "Oracle 12c", $tags="fallback") {
            ContainerDb(db2, "Database", "Relational Database Schema", "Stores user registration information, hashed authentication credentials, access logs, etc.", $tags="fallback")
        }
    }
    Deployment_Node(bb2, "bigbank-web***\tx4", "Ubuntu 16.04 LTS"){
        Deployment_Node(apache2, "Apache Tomcat", "Apache Tomcat 8.x"){
            Container(web, "Web Application", "Java and Spring MVC", "Delivers the static content and the Internet Banking single page application.")
        }
    }
}

Deployment_Node(mob, "Customer's mobile device", "Apple IOS or Android"){
    Container(mobile, "Mobile App", "Xamarin", "Provides a limited subset of the Internet Banking functionality to customers via their mobile device.")
}

Deployment_Node(comp, "Customer's computer", "Mircosoft Windows or Apple macOS"){
    Deployment_Node(browser, "Web Browser", "Google Chrome, Mozilla Firefox, Apple Safari or Microsoft Edge"){
        Container(spa, "Single Page Application", "JavaScript and Angular", "Provides all of the Internet Banking functionality to customers via their web browser.")
    }
}

Rel(mobile, api, "Makes API calls to", "json/HTTPS")
Rel(spa, api, "Makes API calls to", "json/HTTPS")
Rel_U(web, spa, "Delivers to the customer's web browser")
Rel(api, db, "Reads from and writes to", "JDBC")
Rel(api, db2, "Reads from and writes to", "JDBC", $tags="fallback")
Rel_R(db, db2, "Replicates data to")

' Use complete legend
'LAYOUT_WITH_LEGEND()
' calculated legend, only show used items
SHOW_LEGEND()
@enduml
C4 Deployment Diagramm mit PlantUML
Abbildung 2. C4 Deployment Diagramm mit PlantUML

Aufgabe 3 - Komponentendiagramm

Schauen Sie sich die Syntax für ein Komponentendiagramm an und erstellen Sie, angelehnt an Ihr Projekt, ein Komponentendiagramm.

Hinweise: Komponentendiagramm in PlantUML
Komponente
component Komponente1 (1)
[Komponente 2] as co2
1 Komponenten werden über das Schlüsselwort component definiert oder in eckigen Klammern […​] eingeschlossen.
Schnittstellen
interface Interface1 (1)
() Interface2
() "Special Interface 3" as if1
1 Interface werden über das Schlüsselwort interface oder mit () angegeben.
Beziehungen
[co2] ..> if1 : use (1)
1 gestrichelte use-Beziehung zwischen Komponente 2 und dem Interface 1
Notizen
note left of Komponente1 : Text of note (1)
note right of co2 (2)
  A note can also
  be on several lines
end note
1 Notizen können in Abhängigkeit der Richtung über note left|right|top|bottom of für Elemente vergeben werden.
2 Mehrzeilige Notizen sind ebenfalls möglich.
Gruppierung
cloud "Cloud" { (1)
  [Opal]
}
node "Webserver" { (2)
  database "Database" {
    [MySQL]
  }
  [Apache]
  [Web APP]
}
[Web APP] -> [Apache] (3)
[Opal] <- [Web APP]
1 Gruppierung der Komponente Opal als cloud. Andere Kontainer wären: package, node, folder, frame und database.
2 Verschachtelte Gruppierung
3 Angabe der Beziehung zwischen zwei Komponenten
example_component-diagram.puml
@startuml example-component-diagram
left to right direction

cloud "Cloud" {
  [Space]
}

node "Webserver" {
  database "Database" {
    [MySQL]
  }
  component [Web App] #fadbd8
  [Apache] -- HTTP
  [Web App] <-- [Apache]
  [Web App] -> [MySQL] : <<local>>
}

package "Client" {
  [Webbrowser] . [Javascript]
}

[Web App] -up-> [Space] : <<OAuth>>
[Webbrowser] -up-> HTTP : <<https>>
@enduml
Komponentendiagramm mit PlantUML
Abbildung 3. Komponentendiagramm mit PlantUML

Aufgabe 4 - Paketdiagramm

Schauen Sie sich die Syntax für ein Klassendiagramm (Abschnitt Package) an und erstellen Sie, angelehnt an Ihr Projekt, ein Paketdiagramm.

Hinweise: Paketdiagramm in PlantUML
Pakete
package Paket1 {} (1)
package Paket2 #ffc {} (2)
package Paket3 { (3)
  package Paket3.1 {}
  class Klasse1
}
1 Pakete werden mit dem Schlüsselwort package angelegt.
2 Mit einer hexadezimalen Angabe kann die Hintergrundfarbe des Pakete angegeben werden.
3 Pakete können Pakete und Klassen enthalten.
Beziehungen
Paket1 <- Paket2 : import (1)
Paket2 .. Paket3
1 Beziehungen zwischen Paketen oder den enthaltenen Klassen werden wie bisher angegeben.
example_package-diagram.puml
@startuml example-package-diagram
package Main #eafaf1 {
  class MyDialog
}

package BusinessService  #fdedec {
  class MyService
  package Interfaces #fadbd8 {
    interface MyRepository <<interface>>
  }
}

package LocalTestData #ebf5fb {
  class DictionaryRepository
  class TestData
}

package DbMsSqlServer #ebf5fb {
  class MsSqlRepository
}

'package Typen {
'  class Student
'  class SubjectMark
'}
' namespace with auto package variant
class Typen.Student
class Typen.SubjectMark


Main -> BusinessService : <<import>>
Main ..> LocalTestData : <<import>>
Main ..> DbMsSqlServer : <<import>>
'MyService --( MyRepository
DictionaryRepository --() MyRepository
MsSqlRepository --() MyRepository

'Typen <.. Main : <<import>>
'Typen <.. BusinessService : <<import>>
'Typen <.. LocalTestData : <<import>>
'Typen <.. DbMsSqlServer : <<import>>

note bottom of Typen: Data types for students, subjects and marks\nare required in all packages
@enduml
Paketdiagramm mit PlantUML
Abbildung 4. Paketdiagramm mit PlantUML

Aufgabe 5 - Sequenzdiagramm

Schauen Sie sich die Syntax für ein Sequenzdiagramm an und erstellen Sie, angelehnt an Ihr Projekt, ein Sequenzdiagramm.

Hinweise: Sequenzdiagramm in PlantUML
Teilnehmer (Participants)
  • participant (default), actor, boundary, control, entity, database, collections

actor User as actor1 #LightGray (1) (2)
participant "UI Class" as class1 (3)
1 Teilnehmer können direkt User -> class1 oder mit ihrem Alias actor1 -> class1 verwendet werden.
2 Mit #f00 oder #LightGray kann eine Hintergrundfarbe definiert werden.
3 Teilnehmernamen mit Leerzeichen werden in " eingefasst.
Beziehungen
ator1 -> class1: Request (1)
class1 -> class1: Do (2)
||| (3)
class2 --> actor1: Send
1 Beziehungen zwischen Teilnehmern werden mit -> (durchgezogen) oder --> (gestrichelt) angegeben. Die verschiedenen Pfeilarten entnehmen Sie bitte der offiziellen Dokumentation unter Pfeilarten.
2 Teilnehmer können Beziehungen auch auf sich selbst haben.
3 Extra Abstände können mit ||| oder mit einer Angabe in Pixeln ||45|| eingefügt werden.
example_sequence-diagram.puml
@startuml example-sequence-diagram

'skinparam responseMessageBelowArrow true
'autonumber

actor User as u01
participant "UI Class" as c01
participant "Controller Class" as c02
participant "Work Class" as c03 #LightSalmon
database "SQL Server" as db01 #LightGray

u01 -> c01: Do Work
activate c01
note left: user requests data

c01 -> c02: Create Request
activate c02

c02 -> c03: Do Work
activate c03 #LightSalmon

c03 -> db01: Request Data
'|||
db01 --> c03: Send Data

c03 -> c03: Work
note right
processes data
- calculate
- filter and sort
end note

c03 --> c02: Work Done
destroy c03

c02 --> c01: Request Created
deactivate c02

c01 --> u01: Done
deactivate c01

@enduml
Sequenzdiagramm mit PlantUML
Abbildung 5. Sequenzdiagramm mit PlantUML

Aufgabe 6 - Entity Relationship Diagramm (optional)

Schauen Sie sich die Syntax für ein ER-Diagramm an und erstellen Sie, angelehnt an Ihr Projekt, ein entsprechendes Entity-Relationship-Diagramm (ERD) bzw. Entity-Relationship-Modell (ERM).

PlantUML nutzt hierfür eine Erweiterung der Notation der Klassendiagramme.

Hinweise: Entity Relationship Diagramm in PlantUML
Entities
entity Entity1 (1)
entity Entity2 { (2)
  * **id** : char(5) (3)
  --
  * name : varchar(255)
  note : varchar(255)
}
1 Entities werden mit dem Schlüsselwort entity angelegt.
2 Entity mit Platz für Attribute
3 Attribute:
  • * …​ kennzeichnet verpflichtende Attribute (NOT NULL)

  • In ** eingefasster Text wird fett dargestellt. Geeignet, um Primär Schlüssel hervorzuheben bzw. ordnet man sie im oberen Bereich, getrennt durch --, an.

  • Dem Attributnamen folgt mit : der Datentyp.

Beziehungen mit Kardinalitäten
Entity1 ||--o{ Entity2 (1)
1 Beziehung zwischen zwei Entitäten mit zugehöriger Kardinalität. Anzeige erfolgt als Krähenfussnotation.

Tabelle 1. Notation Kardinalitäten

|o--

keins oder eins

0..1, c

||--

eins

1

}o--

keins, eins oder viele

0..*, cm

}|--

eins oder viele

1..*, m

Diagrammattribute (am Diagrammanfang)
hide circle (1)
skinparam linetype ortho (2)
1 Blendet das (E) im Entity-Kopf aus.
2 Verhindert schräge Linien, um eine unschöne Darstellungen der Krähenfuss-Notaion zu unterbinden.
example_erm-diagram_v1.puml
@startuml example-erm-diagram
' diagram direction
left to right direction
' hide the (E) in the entity name
hide circle
' avoid problems with angled crows feet
skinparam linetype ortho
' Remove shadows
skinparam shadowing false

entity Address {
  * <&key> **id** : char(5)
  --
  * street : varchar(255)
  * zipCode : char(5)
  * city : varchar(255)
  * country : varchar(255)
  ...
}

entity Student {
  * <&key> **id** : char(5)
  --
  * firstName : varchar(255)
  * lastName : varchar(255)
  ...
}

entity Subject {
  * <&key> **id** : char(2)
  --
  * name : varchar(255)
  ...
}

entity Mark {
  '* <&key> **studentId** : char(5) <<FK>>
  '* <&key> **subjectId** : char(2) <<FK>>
  --
  mark : float
  ...
}

Address ||--|{ Student
Student }o--o{ Subject
(Student, Subject) .. Mark

'note bottom of Mark : composite primary key,\nrefers to Student.id and Subject.id
@enduml
Entity Relationship Diagramm mit PlantUML (Chen-Notation)
Abbildung 6. Entity Relationship Diagramm mit PlantUML (Chen-Notation)
example_erm-diagram_v2.puml
@startuml example-erm-diagram
' diagram direction
left to right direction
' hide the (E) in the entity name
hide circle
' avoid problems with angled crows feet
skinparam linetype ortho
' Remove shadows
skinparam shadowing false

entity Address {
  * <&key> **id** : char(5)
  --
  * street : varchar(255)
  * zipCode : char(5)
  * city : varchar(255)
  * country : varchar(255)
  ...
}

entity Student {
  * <&key> **id** : char(5)
  --
  * firstName : varchar(255)
  * lastName : varchar(255)
  ...
}

entity Subject {
  * <&key> **id** : char(2)
  --
  * name : varchar(255)
  ...
}

entity Mark {
  --
  mark : float
  ...
}

diamond r1
diamond r2

' Notation: Funktionalität/Kardinalität und (min/max)

Address "**1** (1,*)" -- r1
r1 -- "**n** (1,1)" Student

Student "**n** (0,*)" -- r2
r2 -- "**m** (0,*)" Subject

r2 - Mark

@enduml
Entity Relationship Diagramm (ERD) mit PlantUML (Krähenfuss-Notaion)
Abbildung 7. Entity Relationship Diagramm (ERD) mit PlantUML (Krähenfuss-Notaion)
example_rm-diagram.puml
@startuml example-erm-diagram
' diagram direction
left to right direction
' hide the (E) in the entity name
hide circle
' avoid problems with angled crows feet
skinparam linetype ortho
' Remove shadows
skinparam shadowing false

entity Address {
  * <&key> **id** : char(5)
  --
  * street : varchar(255)
  * zipCode : char(5)
  * city : varchar(255)
  * country : varchar(255)
  ...
}

entity Student {
  * <&key> **id** : char(5)
  --
  * firstName : varchar(255)
  * lastName : varchar(255)
  * addressID : char(5) <<FK>>
  ...
}

entity Subject {
  * <&key> **id** : char(2)
  --
  * name : varchar(255)
  ...
}

entity Mark {
  * <&key> **studentId** : char(5) <<FK>>
  * <&key> **subjectId** : char(2) <<FK>>
  --
  mark : float
  ...
}

Address ||--|{ Student
Student ||--o{ Mark
Mark }o--|| Subject

@enduml
Relationenmodell Diagramm (RM) mit PlantUML (Krähenfuss-Notaion)
Abbildung 8. Relationenmodell Diagramm (RM) mit PlantUML (Krähenfuss-Notaion)

Seitenübersicht