Seminar Graphenlayoutalgorithmen, Christian M. Meyer, 24. Juni und 1. Juli 2006 Seminar Graphenlayoutalgorithmen Folie 1 von 58 Visualisierung von UML-Diagrammen

Seminar „Graphenlayoutalgorithmen“, Christian M. Meyer, 24. Juni und 1. Juli 2006 Folie 1 von 58

Seminar „Graphenlayoutalgorithmen“

Visualisierung von UML-Diagrammen

Christian M. [email protected]


„A New Approach for Visualizing UML Class Diagrams“

Einleitung

Vorstellung des GoVisual-AlgorithmusArtikel von Gutwenger, Jünger, Klein, Kupke, Leipert und Mutzel:

Visualisierung von UML-Diagrammen » Einleitung


EinleitungGrundlagenMotivationZieleGoVisual AlgorithmusZusammenfassungSoftware und Links

Visualisierung von UML-Diagrammen » Agenda

Agenda




Agenda


Graph

Graph G = (V, E) mitV KnotenmengeE Kantenmenge

Visualisierung von UML-Diagrammen » Grundlagen » Graphen

gerichteter Graph ungerichteter Graph


Einbettung, Planarität

Einbettung: Darstellung eines Graphen in der Ebene

Knoten sind PunkteKanten sind Verbindungslinien

Planar: Der Graph kann ohne Kreuzungen in der Ebene eingebettet werden

Visualisierung von UML-Diagrammen » Grundlagen » Graphen


UML = Unified Modeling LanguageModellierungssprache für SoftwareStandardisiert von der OMG (Object Management Group)

Visualisierung von UML-Diagrammen » Grundlagen » UML

UML



1991

1994

1995

1996

1997

2003

Booch: OOAD

Rumbaugh: OMT

Unified Method 0.8

Jacobsen: OOSE

Coad/Yourdan: OOA/OOD

Hewlett Packard

MicrosoftOracle

Unified Modeling Language 0.9

Unified Modeling Language 2.0

Unified Modeling Language 1.0 und 1.1(von der OMG zum Standard erklärt)

Entwicklung der UML


Abstrakter als ProgrammierspracheEinheitliche Beschreibungen im ProjektSprachenunabhängigVerschiedene Sichten: statisch, dynamischVerständigung zwischen Entwicklern, Architekten, Designer, Auftraggeber,…Dokumentation


Warum UML?


Graphische Interpretation der Modelle:


Use-Case-Diagramm Klassendiagramm Interaktionsdiagramm Zustandsdiagramm

Sequenzdiagramm DeploymentdiagrammKomponentendiagramm Timingdiagramm

Diagramme


Beliebtestes DiagrammStatische Struktur der SoftwareKlassenBeziehungen


Klassendiagramm


DatentypAttribute und Methoden


ClassName

– privateOperation()

# protectedOperation()

+ publicOperation()

– attribute1: Type

– attribute2: Type

Klassenname

Attribute

Methoden

Modifier

– private# protected+ public

Klassen


GeneralisierungAttribute und Methoden werden „geerbt“


SuperClass

SubClass

Oberklasse

Subklasse,Kindklasse

Generalisierung,

Vererbung

Beziehungen (1)


AssoziationBeziehung zwischen 2 oder mehr TypenNavigierbarkeit, Multiplizität

Einfache Assoziation:

Aggregation:

Komposition:


Class1 Class2

Class1 Class2

Class1 Class3

Beziehungen (2)


Klassendiagramm als Graph

Generalisierungen sind gerichtetAssoziationsrichtung für automatische Layoutalgorithmen unwichtigDaher: semi-gerichteter GraphG = (V, A, E) mit

V KlassenmengeA Gerichtete GeneralisierungskantenE Ungerichtete Assoziationskanten





Agenda


UML-Diagramme sind großLayout von Hand ist aufwändigAutomatisches Layout für MDA notwendigViele Tools für automatisches GraphenlayoutAnbindung an führende Case-Tools:

Rational RoseTogetherMicrosoft Visio

Visualisierung von UML-Diagrammen » Motivation

Motivation (1)


Aber: Tools haben viele NachteileHierarchische Vererbungsstrukturen werden nicht behandeltÜbersicht ist oft unzureichendÄsthetische Mängel

Spezielle Algorithmen für UML-Diagramme sinnvoll

Visualisierung von UML-Diagrammen » Motivation

Motivation (2)


Visualisierung von UML-Diagrammen » Probleme

Viele Kreuzungen

Unnötige Knicke

Nicht orthogonal

Einzelne Vererbungspfeile

Überlappung Assoziation-Klasse

Probleme (1)



Richtung der Vererbungspfeile

Fehlende Hierarchie

Probleme (2)



Verschachtelte Hierarchien

Probleme (3)


Kriterien für ästhetische UML-Diagramme:Minimale KreuzungenMinimale KnickeEinheitliche Richtung in HierarchienKeine verschachtelten HierarchienBeziehungen je nach Semantik betrachtenOrthogonales LayoutKombinierte VererbungspfeileGut lesbare Kantenbeschriftungen

Visualisierung von UML-Diagrammen » Ziele

Ziele


Visualisierung von UML-Diagrammen » Ziele

Beispiel




Agenda


Visualisierung von UML-Diagrammen » Algorithmus » Übersicht

Algorithmus


Generalisierungen sollen verbunden werdenDadurch ergeben sich u.U. neue KreuzungenBleiben bei Planarisierung unerkannt

Visualisierung von UML-Diagrammen » Algorithmus » Vorberechnung

Vorberechnung (1)

v

w1 w2 w3

v

w1 w2 w3


Lösung: Zwischenknoten einfügen


Vorberechnung (2)

v

w1 w2 w3

v

w1 w2 w3

dv



Vorberechnung (3)

v

w1 w2 w3

dv

O(|V|)



Algorithmus


Generalisierungen bilden Hierarchien

Zusammenhängende Subgraphen von (V, A)

Tiefensuche, O(|V|+|A|)

Visualisierung von UML-Diagrammen » Algorithmus » Hierarchien

Hierarchie



Algorithmus


Visualisierung von UML-Diagrammen » Algorithmus » Gleichrichten und Planarisieren

Gleichgerichtete Graphen

Alle Kanten zeigen in die gleiche Richtung

SuperClass1

SuperClass2Class1

SubClass

Class2

Class3



Gleichgerichtete Graphen

Alle Kanten zeigen in die gleiche RichtungSuperClass

1

SuperClass2Class1

SubClass

Class2

Class3

SuperClass1

SuperClass2

Class2Class3 Class1

SubClass



Hierarchien gleichrichten

Hierarchien werden gleichgerichtet bessere ÜbersichtHierarchien sofort erkennbar



Planarisieren

Planare gleichgerichtete Einbettung findenAber: Nicht immer möglich

Planar, aber nicht gleichgerichtet

planar



Algorithmen

G ist gleichgerichtet planar und G hat genau eine Senke:

Algorithmus von Bertolazzi (1998)O(|VH|), Algorithmus gibt Einbettung zurück

Mehrere Senken: Supersenke verwenden

sonst: NP-schwer, Kreuzungen durch Dummy-Knoten ersetzen, Algorithmen von Sugiyama oder Eades/Kelly,…



Algorithmus


Quelle: Knoten s, nur ausgehende Kanten

Senke: Knoten t, nur eingehende Kanten

ST-Graph: Graph mit genau einer Quelle s, einer Senke t und einer Kante (s, t)

Visualisierung von UML-Diagrammen » Algorithmus » ST-Graph

ST-Graph (1)

s

t


Graph mit mehreren Quellen/Senken kann in ST-Graph umgewandelt werden:


ST-Graph (2)

SuperClass1

SuperClass2

Class

SubClass1 SubClass2

Class

SubClass1 SubClass2

Sink

SuperClass1

SuperClass2

Source



ST-Graph (3)

Class

SubClass1 SubClass2

Sink

SuperClass1

SuperClass2

Source

O(|V|)



Algorithmus


Assoziationen innerhalb der Hierarchie H einfügen, Beispiel Composite-Pattern:

Kantenmenge: {(u, v) E | u VH v VH}

Algorithmen von Battista oder Gutwenger

Visualisierung von UML-Diagrammen » Algorithmus » Assoziationen einfügen

Assoziationen einfügen

Leaf Composite

Component

Source

Leaf Composite

Component

Source



Algorithmus


Cluster-Graph: C = (G, T) mit G = (V, E) Graph und T = (VT, ET) gerichteter Baum

Cluster: C(v) = (G(v), T(v)) T definiert Inklusionsrelation auf G

Visualisierung von UML-Diagrammen » Algorithmus » Cluster-Graph erstellen

Cluster-Graph

v1

v2

v3

v4

v5

v6 v1 v2 v3 v6v5

v4

c4

c3c2

c1 TG


Jede Vererbungshierarchie H bildet ClusterGleichgerichtet planare Einbettungin PH vorhanden

Gesucht: Planare Einbettung des gesamten Graphen, Cluster sollen beachtet werden


Clusterhierarchien


Facette: Flächen, die von Kanten eingeschlossen werden


Facetten

v1

v4

v2

v3

v7v6

v5

äußere Facette

innere Facette


Wheel-Graph: Äußere Knoten bilden einen Kreis, Zentrum c ist mit allen äußeren Knoten verbunden.


Wheel-Graph

v1

v4

v2

v3

cv5


Knoten der äußeren Facette von PH bilden den Kreis des Wheel-Graphen


Wheel-Graph bilden

v1

v4

v2

v3

cv5c2

c1

v3

v4

v5

v2

v1


Assoziationen zu anderen Wheel-GraphenPlanare Einbettung eines Subgraphen finden

Außenknoten des Wheel-Graphen verändert


Planarisierung

v1

v4

v2

v3

c1

v5u1

u2u3

c2

v1

v4

v2

v3

c1

v5u2

u1u3

c2


Wheel-Graph gibt Eingangsreihenfolge vor:


Cluster-Eingänge

v1

v4

v2

v3

cv5

v1

v4

v2

v5

cv3

v1

v3

v4

v2

v5

v1

v3

v4

v2

v5


Alle Wheel-Graphen durch die berechnete planare Einbettung der Hierarchien ersetzenFehlende Kanten zwischen den Hierarchien einfügen (Battista)Dummy-Kanten und -Knoten entfernen


Cluster-Graph erstellen

v1

v4

v2

v3

c1

v5u2

u1u3

c2

c2

c1

v3

v4

v5

v2

v1



Algorithmus


Knoten vom Grad ≥ 4 durch Cage ersetzen

Knickminimierung nach TamassiaVerschiedene Nebenbedingungenlinearer Zeitaufwand

Fläche minimierenConstructive flow-based compactionnach Klau, Klein und Mutzel

Visualisierung von UML-Diagrammen » Algorithmus » Orthogonalisieren

Orthogonalisieren




Agenda


Visualisierung von UML-Diagrammen » Zusammenfassung

Zusammenfassung

Vorberechnung Hierarchien finden Gleichrichten und planarisieren

ST-Graph erstellen

Assoziationen einfügen Wheel-Graph bilden

OrthogonalisierenPlanare Einbettung finden Wheel-Graphen ersetzen


Visualisierung von UML-Diagrammen » Zusammenfassung

Resultate

Microsoft Visio Oreas GDE


GoVisual wird von oreas entwickeltDiagramm Editor frei erhältlichBibliotheken & Plug-Insfür Case-Tools werden kommerziell vertrieben

Visualisierung von UML-Diagrammen » Software und Links

Software und Links

http://www.oreas.com


Seminar „Graphenlayoutalgorithmen“

Vielen Dank für die Aufmerksamkeit

Fragen zum Vortrag?

Folien zum Download:http://uni.christian-meyer.org

Documents

Seminar Graphenlayoutalgorithmen, Christian M. Meyer, 24. Juni und 1. Juli 2006 Seminar Graphenlayoutalgorithmen Folie 1 von 58 Visualisierung von UML-Diagrammen