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.
|
Aufgrund der nicht gespeicherten Nutzer-Profile in den Windows-Laboren, sind zu jedem Praktikumsbeginn folgende Schritte durchzuführen:
Schritte zur Vorbereitung des Praktikums
-
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
-
Visual Studio Code: Anpassen der AsciiDoc-Einstellungen:
-
Asciidoc > Preview: Use Editor Style: (deaktiviert)
-
Asciidoc > Extensions: Enable Kroki: (aktiviert)
-
-
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
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
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
component Komponente1 (1) [Komponente 2] as co2
1 | Komponenten werden über das Schlüsselwort component definiert oder in eckigen Klammern […] eingeschlossen. |
interface Interface1 (1) () Interface2 () "Special Interface 3" as if1
1 | Interface werden über das Schlüsselwort interface oder mit () angegeben. |
[co2] ..> if1 : use (1)
1 | gestrichelte use-Beziehung zwischen Komponente 2 und dem Interface 1 |
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. |
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
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
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. |
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
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
-
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. |
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
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
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:
|
Entity1 ||--o{ Entity2 (1)
1 | Beziehung zwischen zwei Entitäten mit zugehöriger Kardinalität. Anzeige erfolgt als Krähenfussnotation.
|
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
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
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