Inhalt

Diagramm-Bibliotheken im Vergleich

Ziel dieses Dokuments

In diesem Dokument steht der Vergleich unterschiedlicher Diagramm-Bibliotheken im Vordergrund.

Das fachliche Beispiel (MVC + verkettete Liste) dient nur als gemeinsamer Testfall, damit Unterschiede bei Layout, Syntax und Interaktivität sichtbar werden.

Verglichen werden insbesondere:

Demo-Szenario (inhaltlich bewusst einfach)

--- title: MVC-Framework --- flowchart TD User([User]) Controller[Controller] Model[Model] View[View] User -- "Request" --> Controller Controller -- "Request Data" --> Model Model -- "Response Data" --> Controller Controller -- "Send Data" --> View View -- "Response" --> User %% Styling to better match the visual positions in the image linkStyle 0 stroke-width:1px,fill:none,stroke:black; linkStyle 1 stroke-width:1px,fill:none,stroke:black; linkStyle 2 stroke-width:1px,fill:none,stroke:black; linkStyle 3 stroke-width:1px,fill:none,stroke:black; linkStyle 4 stroke-width:1px,fill:none,stroke:black;

MVC steht für Model, View, Controller und ist hier nur das gemeinsame Beispielszenario für die Bibliotheksvergleiche.

Die inhaltliche Tiefe ist absichtlich reduziert, damit der Fokus auf der Visualisierung bleibt.

Demo-Kontext kurz erklärt

Model

Das Model enthält die Fachlogik der Anwendung, z. B.:

Wichtig: Das Model kennt keine Benutzeroberfläche. Es arbeitet daten- und regelorientiert.

View

Die View zeigt Informationen an und sorgt für eine verständliche Ausgabe:

Die View sollte möglichst wenig Logik enthalten. Fachregeln gehören ins Model.

Controller

Der Controller ist die Schnittstelle zwischen Benutzeranfrage und Anwendung:

Der Controller trifft Ablaufentscheidungen, speichert aber keine Fachlogik dauerhaft.

Erklärung zum Flowchart (Strukturdiagramm)

--- Title: MVC-Framework --- flowchart TD U([🖥️ User / Browser]) -->|1. HTTP Request| C(Controller) C -->|Validiert Input & steuert Ablauf| M(Model) M -->|Lädt/Speichert Daten| D[(Datenbank)] D --> M M -->|Business-Daten| C C -->|Wählt View + übergibt Daten| V(View) V -->|HTML/JSON Response| U classDef userClass fill:#5499C7,stroke:none; class U userClass; classDef dbClass fill:#f0f0f0,stroke:#999999; class D dbClass;
flowchart TD U([User / Browser]) -->| 1. | C(Controller) C -->| 2. | M(Model) M -->| 3. | D[(Datenbank)] D -->| 4. | M M -->| 5. | C C -->| 6. | V(View) V -->| 7. | U classDef userClass fill:#5499C7,stroke:none; class U userClass;

Das Flowchart zeigt die statische Sicht auf MVC:

  1. Der User/Browser sendet eine Anfrage an den Controller.
  2. Der Controller verwendet das Model, um Daten zu lesen oder zu ändern.
  3. Das Model kommuniziert mit der Datenbank.
  4. Das Ergebnis geht zurück zum Controller.
  5. Der Controller übergibt Daten an die View.
  6. Die View erzeugt die Antwort für den Browser.

Merksatz: Controller steuert, Model rechnet, View zeigt.

Erklärung zum Sequence Diagram (Ablaufdiagramm)

sequenceDiagram autonumber actor U as User/Browser participant C as Controller participant M as Model participant D as Datenbank participant V as View U->>C: HTTP Request C->>M: Eingaben validieren / Aktion auslösen M->>D: Daten lesen/schreiben D-->>M: Ergebnisdaten M-->>C: Business-Daten C->>V: View + Daten rendern V-->>U: HTTP Response (HTML/JSON)

Das Sequence Diagram zeigt die dynamische Sicht, also die zeitliche Reihenfolge derselben Schritte.

Für Schüler:innen wichtig: Dieses Diagramm hilft beim Debuggen, weil man genau sieht, wer wann mit wem kommuniziert.

Warum ein gemeinsames Demo-Szenario sinnvoll ist

Typische Fehler beim Bibliothekenvergleich

Praxisregel: Gleicher Use Case, gleiche Daten, gleiche Zielgröße ergibt den fairsten Vergleich.

Hinweis zum inhaltlichen Scope

Die folgenden Inhalte sind keine vollständige MVC-Lerneinheit, sondern technische Beispielvisualisierungen für den Vergleich der Bibliotheken.

Zusätzliches Diagramm: Knoten in eine verkettete Liste einfügen

flowchart TB subgraph Ausgang A1[A] --> B1[B] B1 --> C1[C] C1 --> N1[NULL] end subgraph TB Schritt_2 A2[A] --> B2[B] B2 -.next.-> X2[X] X2 -.next.-> C2[C] C2 --> N2[NULL] end subgraph Nachher A3[A] --> B3[B] B3 --> X3[X] X3 --> C3[C] C3 --> N3[NULL] end

Kurz erklärt:

  1. Neuer Knoten X wird erstellt.
  2. X.next zeigt auf den bisherigen Nachfolger von B (also C).
  3. B.next wird auf X umgebogen.

Wichtig: Genau diese Reihenfolge verhindert, dass der Rest der Liste verloren geht.

Zusätzliches Diagramm: ER-Modell fuer einen einfachen Webshop

erDiagram KUNDE ||--o{ BESTELLUNG : gibt_auf KUNDE ||--o{ ADRESSE : hat BESTELLUNG ||--|{ BESTELLPOSITION : enthaelt PRODUKT ||--o{ BESTELLPOSITION : wird_bestellt KATEGORIE ||--o{ PRODUKT : gruppiert BESTELLUNG ||--o| ZAHLUNG : wird_bezahlt_durch KUNDE { int kunde_id PK string vorname string nachname string email datetime erstellt_am } ADRESSE { int adresse_id PK int kunde_id FK string strasse string plz string ort string land } BESTELLUNG { int bestellung_id PK int kunde_id FK datetime bestelldatum string status decimal gesamtbetrag } BESTELLPOSITION { int positions_id PK int bestellung_id FK int produkt_id FK int menge decimal einzelpreis } PRODUKT { int produkt_id PK int kategorie_id FK string name decimal preis int lagerbestand } KATEGORIE { int kategorie_id PK string name string beschreibung } ZAHLUNG { int zahlung_id PK int bestellung_id FK string zahlart decimal betrag datetime bezahlt_am }

Das ER-Diagramm bildet den Kern eines einfachen Shop-Backends ab:

Interaktive Grafik mit Plotly.js

Neben Mermaid kann auch Plotly.js eingebunden werden. Hier erfolgt die Beschreibung des Diagramms als JSON.

Alternative mit Vega-Lite (JSON)

Vega-Lite ist deklarativ: Das Diagramm wird vollständig als JSON-Spec beschrieben.

Alternative mit mehr Layout-Kontrolle: Cytoscape.js

Bei Cytoscape.js kannst du Positionen, Knotenstile und Kanten sehr gezielt steuern.

Vergleich: Cytoscape.js mit Auto-Layout

Hier wird dieselbe Struktur mit automatischem Layout (breadthfirst) erzeugt.

Alternative mit AntV G6

AntV G6 eignet sich gut, wenn du Nodes, Kanten, Labels und Interaktion sehr fein steuern willst.

Alternative mit ECharts

ECharts ist stark für interaktive Datenvisualisierung und unterstützt auch Graph-Diagramme.

Diagramm-Bibliotheken