📊 ERM Editor (Chen-Notation)

Version 0.16.1

Webbasierter Editor fĂŒr Entity-Relationship-Modelle nach Chen-Notation

🎉 Neu in Version 0.16.1

ScrollfÀhige & Dynamische Canvas NEU

Die ZeichenflÀche passt sich jetzt automatisch an:

  • MindestgrĂ¶ĂŸe: 2000x1500 Pixel (genug Platz fĂŒr komplexe Diagramme)
  • Scrollbalken erscheinen automatisch bei Bedarf
  • Automatische Anpassung bei Fenster-Resize
  • Optimale Nutzung des verfĂŒgbaren Platzes

PrimĂ€rschlĂŒssel: Normale Schrift NEU

PrimĂ€rschlĂŒssel werden jetzt normal (nicht mehr fett) dargestellt, bleiben aber unterstrichen fĂŒr klare Erkennbarkeit.

✅ Volle KompatibilitĂ€t: Alte JSON-Dateien funktionieren ohne Probleme - es ist nur eine DarstellungsĂ€nderung!

Neu in Version 0.16.0

DIA-Import NEU

Importieren Sie bestehende ERM-Diagramme aus DIA Editor!

  • đŸ“„ Direkter Import von .dia-Dateien
  • ✅ Automatische ER-Erkennung (nur echte ERM-Diagramme werden akzeptiert)
  • 🔄 VollstĂ€ndige Übernahme: EntitĂ€ten, Attribute, Beziehungen, KardinalitĂ€ten
  • 🔑 PrimĂ€rschlĂŒssel werden korrekt ĂŒbernommen
  • 📍 Positionen bleiben erhalten (mit Koordinaten-Umrechnung)
  • 💎 Beziehungsattribute werden importiert

So funktioniert's: Im Bereich "Laden / Speichern" auf "đŸ“„ DIA importieren" klicken und .dia-Datei auswĂ€hlen.

Hinweis: SVG-Export aus DIA wird nicht unterstĂŒtzt (enthĂ€lt keine ER-Semantik). Verwenden Sie nur .dia-Dateien!

✹ Features

🏱 EntitĂ€ten

Erstellen, benennen und frei positionieren. Dargestellt als Rechtecke.

🔗 Beziehungen

Verbindungen zwischen EntitÀten mit KardinalitÀten (1, N, M). Dargestellt als Rauten.

đŸ·ïž Attribute

Eigenschaften fĂŒr EntitĂ€ten und Beziehungen. PrimĂ€rschlĂŒssel werden unterstrichen (nicht fett).

🔄 Reflexive Beziehungen

Selbst-Beziehungen mit Rollenbezeichnungen fĂŒr beide Richtungen.

đŸ“± Mobile Support

VollstĂ€ndig touch-optimiert fĂŒr Smartphones und Tablets.

đŸ’Ÿ Export

Exportieren als PNG, PDF oder SVG fĂŒr verschiedene AnwendungsfĂ€lle.

đŸ“„ DIA-Import NEU

Importieren von ERM-Diagrammen aus DIA Editor (.dia-Dateien).

📐 ScrollfĂ€hige Canvas NEU

Große ZeichenflĂ€che (2000x1500px) mit automatischen Scrollbalken.

📖 Bedienung

DIA-Import NEU in 0.16.0

💡 ERM-Diagramme aus DIA importieren:
  1. Öffnen Sie Ihr ERM-Diagramm in DIA Editor
  2. Speichern Sie es als .dia-Datei (nicht als SVG!)
  3. Klicken Sie im ERM Editor auf "đŸ“„ DIA importieren"
  4. WĂ€hlen Sie Ihre .dia-Datei aus

Was wird importiert: EntitĂ€ten, Attribute (inkl. PrimĂ€rschlĂŒssel), Beziehungen mit KardinalitĂ€ten, Beziehungsattribute, Positionen.

⚠ Wichtig: Nur .dia-Dateien werden unterstĂŒtzt. SVG-Exporte aus DIA enthalten keine ER-Semantik und können nicht importiert werden.

Mouse-Over Kontexthilfe NEU in 0.15.2

💡 Integrierte Hilfe ohne Aufwand: Bewegen Sie einfach die Maus ĂŒber ein beliebiges Element - nach kurzer Verzögerung (ca. 1-2 Sekunden) erscheint automatisch ein Browser-Tooltip mit hilfreichen Informationen.

Was wird angezeigt?

  • Funktion des Elements
  • Konkrete Beispiele (z.B. "Person, Projekt, Firma")
  • Wertebereiche (z.B. "8-20 Pixel")
  • Nutzungshinweise

Beispiele ausprobieren:

  • Über den Button "EntitĂ€t hinzufĂŒgen" hovern
  • Über das gelb hinterlegte Dateinamen-Feld hovern
  • Über die KardinalitĂ€ts-Dropdowns hovern
  • Über die PrimĂ€rschlĂŒssel-Checkbox hovern

Überall verfĂŒgbar: Werkzeuge, Darstellung, Export, Laden/Speichern, Sidebar-Resizer und alle Eingabefelder!

Sidebar anpassen

💡 Variable Breite: Fahren Sie mit der Maus ĂŒber den rechten Rand der Sidebar - ein blauer Balken erscheint. Klicken und ziehen Sie, um die Breite anzupassen (250-500px).

EntitÀten erstellen

  1. Namen in das Eingabefeld eingeben
  2. Auf "EntitĂ€t hinzufĂŒgen" klicken
  3. EntitÀt mit Maus oder Finger verschieben

Attribute hinzufĂŒgen

  1. EntitÀt aus Dropdown auswÀhlen
  2. Attributname eingeben
  3. Optional: PrimĂ€rschlĂŒssel-Checkbox aktivieren
  4. Auf "Attribut hinzufĂŒgen" klicken
  5. Attribut per Drag & Drop positionieren

Beziehungen definieren

  1. Beziehungsname eingeben
  2. EntitÀt A und B auswÀhlen
  3. KardinalitĂ€ten fĂŒr beide Seiten wĂ€hlen (1, N, M)
  4. Auf "Beziehung hinzufĂŒgen" klicken
💡 Reflexive Beziehungen: Wenn EntitĂ€t A = EntitĂ€t B, erscheinen automatisch Eingabefelder fĂŒr Rolle A und Rolle B. Diese beschreiben die Funktion in jeder Richtung der Beziehung.

Bearbeitung

Aktion Desktop Mobile
Element verschieben Drag & Drop mit Maus Touch & Drag
KontextmenĂŒ öffnen Rechtsklick Langes DrĂŒcken (500ms)
KardinalitĂ€t Ă€ndern Rechtsklick auf Zahl Langes DrĂŒcken auf Zahl
Speichern Strg+S / Cmd+S Speichern-Button
Sidebar anpassen NEU Rand ziehen Nicht verfĂŒgbar

KontextmenĂŒ-Optionen:

  • Umbenennen: Namen des Elements Ă€ndern
  • Löschen: Element entfernen
  • PK umschalten: PrimĂ€rschlĂŒssel-Status Ă€ndern (nur bei Attributen)
  • Rollen bearbeiten: Rollennamen Ă€ndern (nur bei reflexiven Beziehungen)

🎹 Darstellung

Anpassbare Parameter

Parameter Standard Beschreibung
Sidebar-Breite NEU 300px Per Drag & Drop: 250-500px
SchriftgrĂ¶ĂŸe 13px Zentrale Einstellung fĂŒr alle Texte
Attribut Breite 60px Breite der Ellipsen
Attribut Höhe 16px Höhe der Ellipsen
EntitÀt Breite 120px Breite der Rechtecke
EntitÀt Höhe 40px Höhe der Rechtecke
Raute Breite 66px Breite der Beziehungsrauten
Raute Höhe 20px Höhe der Beziehungsrauten
Horizontal-Offset (reflexiv) 200px Breite der reflexiven Schleife
Vertikal-Offset (reflexiv) 60px Vertikaler Abstand zur EntitÀt

Raster-Snap

✅ Empfehlung: Raster-Snap aktiviert lassen (20px-Raster) fĂŒr saubere, ausgerichtete Diagramme.

Datenverwaltung

Speichern/Laden

  • Format: JSON (menschen- und maschinenlesbar)
  • Auto-Versionierung: Automatisches AnhĂ€ngen von _v1, _v2, etc.
  • Einstellungen: Alle Darstellungsparameter werden mitgespeichert

Export-Formate

  • PNG: Bitmap-Grafik fĂŒr PrĂ€sentationen und Dokumente
  • PDF: Vektorgrafik, druckbar und skalierbar
  • SVG: Skalierbare Vektorgrafik fĂŒr Weiterbearbeitung

🚀 Entwicklungsgeschichte

v0.12.0 - Reflexive Beziehungen + Rollen

Erste Implementation reflexiver Beziehungen mit automatischer Erkennung (wenn EntitĂ€t A = EntitĂ€t B). EinfĂŒhrung von Rollenbezeichnungen zur Beschreibung der Richtung in Selbst-Beziehungen.

v0.13.0 - Improved Reflexive Layout

Neue Geometrie fĂŒr reflexive Beziehungen: Verbindungspunkte bei 1/5 und 4/5 der unteren Kante, optimierte LinienfĂŒhrung mit rechten Winkeln, bessere Positionierung von KardinalitĂ€ten und Rollenbeschreibungen.

v0.14.0 - Mobile Support

Große Aktualisierung fĂŒr mobile GerĂ€te:

  • VollstĂ€ndige Touch-Event-UnterstĂŒtzung (touchstart, touchmove, touchend)
  • Responsive CSS fĂŒr Bildschirme unter 768px
  • Viewport-Optimierung gegen ungewolltes Zoomen
  • Langes DrĂŒcken (500ms) fĂŒr KontextmenĂŒ
  • GrĂ¶ĂŸere Touch-Targets fĂŒr bessere Bedienbarkeit
  • Layout-Anpassung: Sidebar oben (40%), Canvas unten (60%)

v0.14.2 - v0.14.4 - Bugfixes Reflexive Geometrie

Mehrere Iterationen zur Korrektur der LinienfĂŒhrung bei reflexiven Beziehungen. Finale korrekte Geometrie: Rechte Linie zur rechten Ecke, linke Linie zur linken Ecke, symmetrische waagerechte Strecken.

v0.15.0 - UI-Verbesserungen

Usability-Optimierungen:

  • Variable Sidebar-Breite: Per Drag & Drop zwischen 250-500px anpassbar
  • Optimierter Titel: "ERM Editor (Chen-Notation)" mit Version und README-Link
  • Reduzierte Standard-Breite: Sidebar jetzt 300px statt 360px

v0.15.2 - Kontexthilfe & Usability

Mouse-Over Hilfe und visuelle Verbesserungen:

  • Umfassende title-Attribute: Alle Eingabefelder, Buttons, Checkboxen und Überschriften haben jetzt native Browser-Tooltips
  • Automatische Anzeige: Tooltips erscheinen nach 1-2 Sekunden Mouse-Over
  • Farbige Hervorhebung: Dateinamen-Feld ist gelb hinterlegt
  • VollstĂ€ndig funktionierende Sidebar-Resizer

v0.16.0 - DIA-Import

Import von bestehenden ERM-Diagrammen aus DIA Editor:

  • DIA-Import-Funktion: VollstĂ€ndiger Import von .dia-Dateien mit ER-Elementen
  • Automatische ER-Erkennung: Nur Dateien mit ER-Objekten werden akzeptiert
  • VollstĂ€ndige Übernahme: EntitĂ€ten, Attribute (inkl. PK), Beziehungen mit KardinalitĂ€ten, Beziehungsattribute
  • Positionserhaltung: Koordinaten werden korrekt umgerechnet (Faktor 20)
  • Intelligente Zuordnung: Participation-Objekte werden analysiert um Verbindungen herzustellen
  • Bereinigung: UnvollstĂ€ndige oder nicht-zugeordnete Elemente werden automatisch entfernt

v0.16.1 - Canvas & Darstellung AKTUELL

Verbesserungen fĂŒr große Diagramme und Darstellung:

  • ScrollfĂ€hige Canvas: Große ZeichenflĂ€che (2000x1500px) mit automatischen Scrollbalken
  • Dynamische Anpassung: Canvas passt sich bei Fenster-Resize automatisch an
  • Responsive Start: Optimale GrĂ¶ĂŸe beim Laden basierend auf FenstergrĂ¶ĂŸe
  • PrimĂ€rschlĂŒssel normal: PK werden nicht mehr fett sondern nur unterstrichen dargestellt (bessere Lesbarkeit)
  • Volle KompatibilitĂ€t: Alte JSON-Dateien funktionieren ohne Änderung

💡 Tipps & Tricks

Effizientes Arbeiten

Empfohlener Workflow:
  1. Sidebar auf gewĂŒnschte Breite anpassen NEU
  2. Erst alle EntitÀten erstellen und grob positionieren
  3. Dann Beziehungen zwischen EntitÀten definieren
  4. Anschließend Attribute hinzufĂŒgen und positionieren
  5. Zum Schluss Feintuning der Positionen und Darstellung
  • Tooltips nutzen NEU: Einfach mit Maus hovern fĂŒr ErklĂ€rungen
  • Raster-Snap aktiviert lassen fĂŒr saubere Ausrichtung
  • Auto-Versionierung nutzen fĂŒr sichere ZwischenstĂ€nde
  • RegelmĂ€ĂŸig speichern (Strg+S / Cmd+S)
  • Bei reflexiven Beziehungen: Horizontal-Offset anpassen (150-250px empfohlen)

HÀufige Probleme & Lösungen

⚠ Attribut lĂ€sst sich nicht verschieben

Lösung: Attribut wurde noch nie positioniert. Einmal anfassen, dann funktioniert Drag & Drop.

⚠ Reflexive Beziehung sieht seltsam aus

Lösung: Horizontal-Offset in den Einstellungen unter "Reflexive Beziehungen" anpassen (Standard: 200px).

⚠ Touch funktioniert nicht auf MobilgerĂ€t

Lösung: Browser-Cache leeren und Seite neu laden.

⚠ KardinalitĂ€t lĂ€sst sich nicht Ă€ndern

Lösung: Direkt auf die KardinalitÀt (1, N, M) klicken, nicht auf die Linie.

Chen-Notation: Reflexive Beziehungen

Definition

Eine reflexive Beziehung ist eine Beziehung einer EntitÀt zu sich selbst.

KardinalitÀten

Typ Beispiel Rollen
1:1 Person ist_verheiratet_mit Person Ehepartner ↔ Ehepartner
1:N Person ist_Vorgesetzter_von Person Vorgesetzter → Mitarbeiter
N:M Person ist_befreundet_mit Person Freund ↔ Freund
💡 Rollen helfen zu verstehen: Welche Funktion hat die EntitĂ€t in welcher Richtung der Beziehung? Bei asymmetrischen Beziehungen (1:N) sind die Rollen unterschiedlich, bei symmetrischen (1:1, N:M) können sie gleich sein.

⚙ Technische Details

Architektur

  • Pure HTML/JavaScript: Keine externen AbhĂ€ngigkeiten
  • Canvas API: FĂŒr performante Zeichnung
  • LocalStorage: FĂŒr Auto-Versionierung
  • Single-File-Application: Alles in einer HTML-Datei (~95 KB)

Browser-KompatibilitÀt

✅ Chrome/Edge
✅ Firefox
✅ Safari
✅ Mobile Browser (iOS Safari, Chrome Mobile, Firefox Mobile)

Tastenkombinationen

  • Strg+S (Windows/Linux) / Cmd+S (Mac): Speichern
  • Enter: BestĂ€tigen bei Eingabefeldern
  • Maus-Drag am Sidebar-Rand NEU: Breite anpassen

📊 ERM Editor (Chen-Notation)

Version 0.16.1

Webbasierter Editor fĂŒr Entity-Relationship-Modelle nach Chen-Notation

🎉 Neu in Version 0.16.1

ScrollfÀhige & Dynamische Canvas NEU

Die ZeichenflÀche passt sich jetzt automatisch an:

  • MindestgrĂ¶ĂŸe: 2000x1500 Pixel (genug Platz fĂŒr komplexe Diagramme)
  • Scrollbalken erscheinen automatisch bei Bedarf
  • Automatische Anpassung bei Fenster-Resize
  • Optimale Nutzung des verfĂŒgbaren Platzes

PrimĂ€rschlĂŒssel: Normale Schrift NEU

PrimĂ€rschlĂŒssel werden jetzt normal (nicht mehr fett) dargestellt, bleiben aber unterstrichen fĂŒr klare Erkennbarkeit.

✅ Volle KompatibilitĂ€t: Alte JSON-Dateien funktionieren ohne Probleme - es ist nur eine DarstellungsĂ€nderung!

Neu in Version 0.16.0

DIA-Import NEU

Importieren Sie bestehende ERM-Diagramme aus DIA Editor!

  • đŸ“„ Direkter Import von .dia-Dateien
  • ✅ Automatische ER-Erkennung (nur echte ERM-Diagramme werden akzeptiert)
  • 🔄 VollstĂ€ndige Übernahme: EntitĂ€ten, Attribute, Beziehungen, KardinalitĂ€ten
  • 🔑 PrimĂ€rschlĂŒssel werden korrekt ĂŒbernommen
  • 📍 Positionen bleiben erhalten (mit Koordinaten-Umrechnung)
  • 💎 Beziehungsattribute werden importiert

So funktioniert's: Im Bereich "Laden / Speichern" auf "đŸ“„ DIA importieren" klicken und .dia-Datei auswĂ€hlen.

Hinweis: SVG-Export aus DIA wird nicht unterstĂŒtzt (enthĂ€lt keine ER-Semantik). Verwenden Sie nur .dia-Dateien!

Änderungen in Version 0.15.2

Mouse-Over Kontexthilfe NEU

Umfassende Hilfe-Texte per Mouse-Over! Einfach mit der Maus ĂŒber Eingabefelder, Buttons, Checkboxen oder Überschriften fahren - nach kurzer Verzögerung (ca. 1-2 Sekunden, abhĂ€ngig vom Browser) erscheint automatisch ein Tooltip mit:

  • ErklĂ€rung der Funktion
  • Beispielen fĂŒr Eingaben (z.B. "z.B. Person, Projekt, Firma")
  • Hinweisen zu Wertebereichen (z.B. "SchriftgrĂ¶ĂŸe in Pixel (8-20)")
  • Tipps zur Verwendung

Beispiele:

  • "EntitĂ€t hinzufĂŒgen"-Button → "Erstellt eine neue EntitĂ€t, die dann mit Maus/Finger positioniert werden kann"
  • Dateiname-Feld → "Dateiname ohne .json-Endung"
  • KardinalitĂ€ts-Dropdown → "KardinalitĂ€t der ersten EntitĂ€t: 1 (genau eins), N (viele), M (viele)"
  • PK-Checkbox → "Markiert dieses Attribut als PrimĂ€rschlĂŒssel (wird unterstrichen dargestellt)"

VerfĂŒgbar fĂŒr: Alle Werkzeuge, sĂ€mtliche Darstellungsoptionen, Export-Funktionen, Laden/Speichern, Sidebar-Resizer und mehr!

Farbige Hervorhebung Dateiname NEU

Das Dateinamen-Eingabefeld ist jetzt gelb hinterlegt (sanftes Gelb mit oranger Border) fĂŒr bessere Sichtbarkeit und schnellere Orientierung.

✹ Features

🏱 EntitĂ€ten

Erstellen, benennen und frei positionieren. Dargestellt als Rechtecke.

🔗 Beziehungen

Verbindungen zwischen EntitÀten mit KardinalitÀten (1, N, M). Dargestellt als Rauten.

đŸ·ïž Attribute

Eigenschaften fĂŒr EntitĂ€ten und Beziehungen. PrimĂ€rschlĂŒssel werden unterstrichen.

🔄 Reflexive Beziehungen

Selbst-Beziehungen mit Rollenbezeichnungen fĂŒr beide Richtungen.

đŸ“± Mobile Support

VollstĂ€ndig touch-optimiert fĂŒr Smartphones und Tablets.

đŸ’Ÿ Export

Exportieren als PNG, PDF oder SVG fĂŒr verschiedene AnwendungsfĂ€lle.

📖 Bedienung

EntitÀten erstellen

  1. Namen in das Eingabefeld eingeben
  2. Auf "EntitĂ€t hinzufĂŒgen" klicken
  3. EntitÀt mit Maus oder Finger verschieben

Attribute hinzufĂŒgen

  1. EntitÀt aus Dropdown auswÀhlen
  2. Attributname eingeben
  3. Optional: PrimĂ€rschlĂŒssel-Checkbox aktivieren
  4. Auf "Attribut hinzufĂŒgen" klicken
  5. Attribut per Drag & Drop positionieren

Beziehungen definieren

  1. Beziehungsname eingeben
  2. EntitÀt A und B auswÀhlen
  3. KardinalitĂ€ten fĂŒr beide Seiten wĂ€hlen (1, N, M)
  4. Auf "Beziehung hinzufĂŒgen" klicken
💡 Reflexive Beziehungen: Wenn EntitĂ€t A = EntitĂ€t B, erscheinen automatisch Eingabefelder fĂŒr Rolle A und Rolle B. Diese beschreiben die Funktion in jeder Richtung der Beziehung.

Bearbeitung

Aktion Desktop Mobile
Element verschieben Drag & Drop mit Maus Touch & Drag
KontextmenĂŒ öffnen Rechtsklick Langes DrĂŒcken (500ms)
KardinalitĂ€t Ă€ndern Rechtsklick auf Zahl Langes DrĂŒcken auf Zahl
Speichern Strg+S / Cmd+S Speichern-Button

KontextmenĂŒ-Optionen:

  • Umbenennen: Namen des Elements Ă€ndern
  • Löschen: Element entfernen
  • PK umschalten: PrimĂ€rschlĂŒssel-Status Ă€ndern (nur bei Attributen)
  • Rollen bearbeiten: Rollennamen Ă€ndern (nur bei reflexiven Beziehungen)

🎹 Darstellung

Anpassbare Parameter

Parameter Standard Beschreibung
SchriftgrĂ¶ĂŸe 13px Zentrale Einstellung fĂŒr alle Texte
Attribut Breite 60px Breite der Ellipsen
Attribut Höhe 16px Höhe der Ellipsen
EntitÀt Breite 120px Breite der Rechtecke
EntitÀt Höhe 40px Höhe der Rechtecke
Raute Breite 66px Breite der Beziehungsrauten
Raute Höhe 20px Höhe der Beziehungsrauten
Horizontal-Offset (reflexiv) 200px Breite der reflexiven Schleife
Vertikal-Offset (reflexiv) 60px Vertikaler Abstand zur EntitÀt

Raster-Snap

✅ Empfehlung: Raster-Snap aktiviert lassen (20px-Raster) fĂŒr saubere, ausgerichtete Diagramme.

Datenverwaltung

Speichern/Laden

  • Format: JSON (menschen- und maschinenlesbar)
  • Auto-Versionierung: Automatisches AnhĂ€ngen von _v1, _v2, etc.
  • Einstellungen: Alle Darstellungsparameter werden mitgespeichert

Export-Formate

  • PNG: Bitmap-Grafik fĂŒr PrĂ€sentationen und Dokumente
  • PDF: Vektorgrafik, druckbar und skalierbar
  • SVG: Skalierbare Vektorgrafik fĂŒr Weiterbearbeitung

🚀 Entwicklungsgeschichte

v0.12.0 - Reflexive Beziehungen + Rollen

Erste Implementation reflexiver Beziehungen mit automatischer Erkennung (wenn EntitĂ€t A = EntitĂ€t B). EinfĂŒhrung von Rollenbezeichnungen zur Beschreibung der Richtung in Selbst-Beziehungen.

v0.13.0 - Improved Reflexive Layout

Neue Geometrie fĂŒr reflexive Beziehungen: Verbindungspunkte bei 1/5 und 4/5 der unteren Kante, optimierte LinienfĂŒhrung mit rechten Winkeln, bessere Positionierung von KardinalitĂ€ten und Rollenbeschreibungen.

v0.14.0 - Mobile Support

Große Aktualisierung fĂŒr mobile GerĂ€te:

  • VollstĂ€ndige Touch-Event-UnterstĂŒtzung (touchstart, touchmove, touchend)
  • Responsive CSS fĂŒr Bildschirme unter 768px
  • Viewport-Optimierung gegen ungewolltes Zoomen
  • Langes DrĂŒcken (500ms) fĂŒr KontextmenĂŒ
  • GrĂ¶ĂŸere Touch-Targets fĂŒr bessere Bedienbarkeit
  • Layout-Anpassung: Sidebar oben (40%), Canvas unten (60%)

v0.14.2 - Bugfix Reflexive

Korrektur der rechten Verbindungslinie bei reflexiven Beziehungen, die vorher außerhalb des sichtbaren Bereichs endete.

v0.14.3 - Fix Reflexive Geometry

Versuchte Korrektur fĂŒhrte zu neuem Fehler (beide KardinalitĂ€ten an derselben Ecke).

v0.14.4 - Reflexive Fix AKTUELL

Finale Korrektur der reflexiven Geometrie:

  • Rechte Linie: Mitte rechte Kante → rechts → runter → rechte Ecke der Raute
  • Linke Linie: Linke Ecke → links → runter → Mitte untere Kante
  • Symmetrische waagerechte Strecken beidseitig der Raute
  • KardinalitĂ€t A: rechts von rechter Ecke
  • KardinalitĂ€t B: links von linker Ecke
  • Rollenbeschreibungen innerhalb der Schleife positioniert

💡 Tipps & Tricks

Effizientes Arbeiten

Empfohlener Workflow:
  1. Erst alle EntitÀten erstellen und grob positionieren
  2. Dann Beziehungen zwischen EntitÀten definieren
  3. Anschließend Attribute hinzufĂŒgen und positionieren
  4. Zum Schluss Feintuning der Positionen und Darstellung
  • Raster-Snap aktiviert lassen fĂŒr saubere Ausrichtung
  • Auto-Versionierung nutzen fĂŒr sichere ZwischenstĂ€nde
  • RegelmĂ€ĂŸig speichern (Strg+S / Cmd+S)
  • Bei reflexiven Beziehungen: Horizontal-Offset anpassen (150-250px empfohlen)

HÀufige Probleme & Lösungen

⚠ Attribut lĂ€sst sich nicht verschieben

Lösung: Attribut wurde noch nie positioniert. Einmal anfassen, dann funktioniert Drag & Drop.

⚠ Reflexive Beziehung sieht seltsam aus

Lösung: Horizontal-Offset in den Einstellungen unter "Reflexive Beziehungen" anpassen (Standard: 200px).

⚠ Touch funktioniert nicht auf MobilgerĂ€t

Lösung: Browser-Cache leeren und Seite neu laden.

⚠ KardinalitĂ€t lĂ€sst sich nicht Ă€ndern

Lösung: Direkt auf die KardinalitÀt (1, N, M) klicken, nicht auf die Linie.

Chen-Notation: Reflexive Beziehungen

Definition

Eine reflexive Beziehung ist eine Beziehung einer EntitÀt zu sich selbst.

KardinalitÀten

Typ Beispiel Rollen
1:1 Person ist_verheiratet_mit Person Ehepartner ↔ Ehepartner
1:N Person ist_Vorgesetzter_von Person Vorgesetzter → Mitarbeiter
N:M Person ist_befreundet_mit Person Freund ↔ Freund
💡 Rollen helfen zu verstehen: Welche Funktion hat die EntitĂ€t in welcher Richtung der Beziehung? Bei asymmetrischen Beziehungen (1:N) sind die Rollen unterschiedlich, bei symmetrischen (1:1, N:M) können sie gleich sein.

⚙ Technische Details

Architektur

  • Pure HTML/JavaScript: Keine externen AbhĂ€ngigkeiten
  • Canvas API: FĂŒr performante Zeichnung
  • LocalStorage: FĂŒr Auto-Versionierung
  • Single-File-Application: Alles in einer HTML-Datei (~90 KB)

Browser-KompatibilitÀt

✅ Chrome/Edge
✅ Firefox
✅ Safari
✅ Mobile Browser (iOS Safari, Chrome Mobile, Firefox Mobile)

Tastenkombinationen

  • Strg+S (Windows/Linux) / Cmd+S (Mac): Speichern
  • Enter: BestĂ€tigen bei Eingabefeldern