Inhalt

• Mermaid – Diagrammbeispiele
  • Flowchart
  • Sequence Diagram
  • ER-Modelle
  • Klassendiagramm
• Plotly: Data Apps for Production
  • Linienchart
  • Kreisdiagramm
• Weitere Bibliotheken (nur Links)

Charts & Graphics – Mermaid und Plotly

Dieses Dokument zeigt Beispiele mit Mermaid und Plotly.

Mermaid – Diagrammbeispiele

Dokumentation und Beispiele unter mermaid.ai.

Flowchart

MCV Framework Simple

--- title: MVC-Framework Simple --- 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

_{MVC Flowchart}

MCV Framework

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

_{MVC Flowchart mit Bezeichnungen}

Sequence Diagram

MVC-Ablaufdiagramm

sequenceDiagram autonumber actor U as User participant C as Controller participant M as Model participant D as DB participant V as View U->>C: Request C->>M: Aktion auslösen M->>D: Daten lesen/schreiben D-->>M: Ergebnis M-->>C: Daten C->>V: Rendern V-->>U: Response

_{MVC-Ablaufdiagramm}

ER-Modelle

ER-Modell für 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 }

Klassendiagramm

Klassendiagramm Bankkonto

classDiagram class BankAccount{ +String owner +BigDecimal balance +deposit(amount) bool +withdrawal(amount) int }

Klassendiagramm Vererbung

classDiagram class Animal Vehicle <|-- Car

Klassendiagramm mit Generics

classDiagram class Square~Shape~{ int id List~int~ position setPoints(List~int~ points) getPoints() List~int~ } Square : -List~string~ messages Square : + setMessages(List~string~ messages) Square : +getMessages() List~string~ Square : +getDistanceMatrix() List~List~int~~

Klassendiagramm mit Relations

classDiagram classA <|-- classB : implements classC *-- classD : composition classE o-- classF : aggregation

Plotly: Data Apps for Production

Dokumentation und Beispiele unter plotly.com.

Linienchart

Kreisdiagramm

Weitere Bibliotheken (nur Links)

• Cytoscape.js – spezialisiert auf Netzwerk-/Graphdarstellungen mit sehr guter Layout- und Interaktionskontrolle.
• AntV G6 – moderne Graph-Engine für komplexe Knoten-Kanten-Diagramme mit vielen Anpassungsmöglichkeiten.
• Apache ECharts – leistungsstarke Library für Datenvisualisierung (Line, Bar, Heatmap, Graph u. a.).
• Vega-Lite – deklarative JSON-Sprache für reproduzierbare, analytische Charts.

Charts und Graphics

• Charts & Graphics – Mermaid und Plotly