ERM Editor (Chen-Notation)

Version 1.6.6 Aktuell
Professioneller Entity-Relationship-Modell-Editor für Datenbankdesign

🎉 Neu in Version 1.6.6

1️⃣ Beziehungen direkt löschen

Beziehungen können jetzt über das Kontextmenü (Rechtsklick auf die Raute) direkt gelöscht werden. Gleiches Verfahren wie für Entitäten und Attribute. Das Löschen entfernt auch alle zugeordneten Attribute der Beziehung automatisch.

2️⃣ PNG Export verbessert: Bounding Box wie PDF

Problem behoben: PNG Export exportierte das gesamte Canvas mit viel leerem Raum rundherum.

  • ✅ Automatische Berechnung der Diagramm-Bounding-Box
  • ✅ Nur relevanter Bereich wird exportiert (kein leerer Raum)
  • ✅ Kleinere Dateigrößen, bessere Qualität
  • ✅ Konsistent mit PDF-Export-Verhalten

3️⃣ Tablet & Mobile: Zoom und Scroll funktionieren jetzt!

Großes Usability-Update für iPad/Tablets:

  • ✅ Zwei-Finger-Pinch-Zoom: Mit zwei Fingern zusammenziehen/auseinanderziehen zum Zoomen (funktioniert überall)
  • ✅ Normales Ein-Finger-Scrolling: Das Diagramm kann jetzt einfach mit einem Finger gescrollt werden
  • ✅ Smart preventDefault(): Nur wenn wirklich ein Objekt gegriffen wird, wird das Browser-Scrolling blockiert
  • ✅ Vollständiges Tablet-Erlebnis: Zoom + Scroll funktionieren überall, auch ohne Kontextmenü

Tablets/Mobile Bedienung:

  • Zwei Finger zusammenziehen: Verkleinern (Zoom Out)
  • Zwei Finger auseinanderziehen: Vergrößern (Zoom In)
  • Ein Finger draußen scrollen: Normales Scrollen des Canvas (funktioniert jetzt!)
  • Ein Finger auf Element: Element verschieben (wie vorher)
  • Langes Drücken auf Element: Kontextmenü anzeigen (wie vorher)
Technischer Hintergrund: Das Problem war, dass touchstart/touchmove Events unconditional preventDefault() aufriefe, was das Browser-Scrolling blockierte. In v1.6.6 wird preventDefault() nur aufgerufen, wenn ein Objekt wirklich gegriffen wird.

✨ Hauptfeatures

🎨 Chen-Notation

Vollständige Umsetzung der Chen-Notation mit Rechtecken für Entitäten, Rauten für Beziehungen und Ellipsen für Attribute.

🔄 AutoLayout

Force-directed Algorithmus für automatische, optimale Anordnung mit Kollisionsvermeidung und intelligenter Attribut-Positionierung.

🔢 Kardinalitäten

Flexible 3-Parameter-Steuerung mit direkter absoluter Positionierung für präzise Platzierung.

✅ Live-Validierung

Echtzeit-Überprüfung mit farbigen Badges und automatischer Fehleranzeige inkl. Primärschlüssel-Prüfung.

💾 Multi-Format Export

PNG, SVG, JSON und optimierter PDF-Export (DIN A4) mit automatischer Orientierung.

📱 Responsive

Funktioniert auf Desktop, Tablet und Smartphone mit Touch-Unterstützung.

🔗 Reflexive Beziehungen

Unterstützung für selbstbezügliche Relationen mit Rollenbezeichnungen.

🎯 Raster-Snap

Automatisches Einrasten am 10px-Raster für präzise Anordnung.

🌐 Online verfügbar

Der ERM Editor ist öffentlich zugänglich unter:

https://erm.siemens-gymnasium-berlin.de

Netzwerkzugriff auf diese Domain ist für den Editor erlaubt und erforderlich.

🎮 Bedienung

Entitäten erstellen

  1. Namen eingeben im Feld "Entitätsname"
  2. Button "➕ Entität hinzufügen" klicken
  3. Entität erscheint auf der Zeichenfläche und kann verschoben werden

Attribute hinzufügen

  1. Entität auswählen (Dropdown "Entität auswählen")
  2. Attributname eingeben
  3. Optional: Als Primärschlüssel markieren (Checkbox "Primärschlüssel")
  4. Button "➕ Attribut hinzufügen" klicken
Hinweis: Primärschlüssel werden unterstrichen dargestellt. Die Validierung prüft, dass maximal ein Primärschlüssel pro Entität existiert.

Beziehungen erstellen

  1. Namen für die Beziehung eingeben
  2. Entität A auswählen
  3. Entität B auswählen
  4. Kardinalitäten eingeben (z.B. "1", "N", "M", "0..1")
  5. Optional: Rolle A und Rolle B für reflexive Beziehungen
  6. Button "➕ Beziehung hinzufügen" klicken

AutoLayout verwenden

  1. Im Abschnitt "🔄 AutoLayout" den Button "🔄 AutoLayout anwenden" klicken
  2. Der Force-directed Algorithmus ordnet alle Elemente automatisch an
  3. Entitäten werden gleichmäßig verteilt
  4. Attribute werden kreisförmig um Entitäten platziert
  5. Beziehungsattribute werden ebenfalls optimiert positioniert
Tipp: AutoLayout ist besonders nützlich bei komplexen Diagrammen mit vielen Überschneidungen. Bei Bedarf können Sie danach einzelne Elemente manuell nachjustieren.

Kontextmenü

Rechtsklick auf Elemente öffnet Kontextmenü zum:

  • Bearbeiten von Namen
  • Löschen von Elementen
  • Bearbeiten von Rollen (bei reflexiven Beziehungen)
  • Ändern von Attributen (Primärschlüssel-Status)

🔢 Kardinalitäten - Präzise Positionierung

Das 3-Parameter-System (v1.6.3)

┌─────────────────────────────────────────────────────────┐ │ Virtuelle Parallellinie zur Verbindungslinie: │ │ │ │ Entity A ●━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━● Entity B │ │ ┃ ┃ │ │ ┃ senkrechter Offset ┃ │ │ ▼ ▼ │ │ 1◄──── Abstand ────►N │ │ ▲ ▲ │ │ │ │ │ │ └───────────────────┘ │ │ Längs-Verschiebung │ │ (beide gemeinsam) │ └─────────────────────────────────────────────────────────┘
Parameter Funktion Standard
Senkrechter Offset Abstand der virtuellen Linie von der Verbindungslinie (horizontal: oberhalb, vertikal: links) 18
Abstand Horizontaler Abstand zwischen den beiden Kardinalitäten auf der virtuellen Linie 150
Längs-Verschiebung Verschiebt beide Kardinalitäten gemeinsam entlang der virtuellen Linie 0

Empfohlene Einstellungen

Für enge Diagramme:

  • Senkrechter Offset: 15
  • Abstand: 120
  • Längs-Verschiebung: 0

Für weitläufige Diagramme:

  • Senkrechter Offset: 22
  • Abstand: 180
  • Längs-Verschiebung: 0

Für lange Beziehungsnamen:

  • Längs-Verschiebung erhöhen (z.B. 30 oder 50)
  • Damit liegen die Kardinalitäten weiter außen und überlappen nicht mit dem Beziehungsnamen

Technischer Hintergrund (v1.6.3)

Direkte absolute Positionierung

Version 1.6.3 implementiert eine neue, zuverlässigere Methode:

  • Horizontale Linien: cardPosY = diamondConn.y - Math.abs(perpOffset) → immer oberhalb
  • Vertikale Linien: cardPosX = diamondConn.x - Math.abs(perpOffset) → immer links
  • Entlang-Richtung nutzt weiterhin Einheitsvektor (ux, uy)
  • Math.abs() macht die Positionierung robust gegenüber negativen Werten

🔄 AutoLayout - Intelligente Anordnung

Funktionsweise

Der AutoLayout-Algorithmus verwendet ein Force-directed Layout basierend auf physikalischen Kräften:

1. Abstoßungskräfte (Entitäten)

  • Alle Entitäten stoßen sich gegenseitig ab
  • Verhindert Überlappungen und sorgt für gleichmäßige Verteilung
  • Stärke nimmt mit der Entfernung ab (inverse Quadratfunktion)

2. Anziehungskräfte (Beziehungen)

  • Verbundene Entitäten ziehen sich an
  • Hält zusammengehörige Elemente nah beieinander
  • Linearproportional zur Entfernung

3. Intelligente Attribut-Positionierung

  • Attribute werden kreisförmig um ihre Entität angeordnet
  • Der Algorithmus sucht die größte Lücke zwischen bestehenden Beziehungslinien
  • Attribute werden in dieser Lücke platziert → minimale Überschneidungen
  • Bei nur einem Attribut: optimale Position wird automatisch gewählt

4. Raster-Snap

  • Alle finalen Positionen werden am 10px-Raster ausgerichtet
  • Sorgt für saubere, professionelle Darstellung
Best Practice:
  1. Erstellen Sie zuerst Ihr komplettes Datenmodell
  2. Klicken Sie auf "🔄 AutoLayout anwenden"
  3. Justieren Sie bei Bedarf einzelne Positionen manuell nach

💾 Export-Funktionen

Verfügbare Formate

Format Verwendungszweck Besonderheiten
PNG Präsentationen, Dokumentationen, Websites Rasterformat, transparent, hohe Qualität
SVG Vektorgrafiken, Webentwicklung, Druckvorstufe Verlustfrei skalierbar, editierbar
JSON Speichern & Laden, Versionskontrolle, Backup Komplettes Datenmodell mit allen Metadaten
PDF Abgaben, Drucken, Archivierung DIN A4 optimiert, automatische Orientierung

PDF-Export (DIN A4 optimiert)

Automatische Optimierung in v1.6.0+

  • Bounding-Box-Berechnung: Nur das tatsächliche Diagramm wird erfasst (kein leerer Canvas-Bereich)
  • Automatische Orientierung:
    • Querformat bei breiten Diagrammen (Breite > Höhe)
    • Hochformat bei hohen Diagrammen (Höhe > Breite)
  • Zentrierte Darstellung: Das Diagramm wird mittig auf der A4-Seite platziert
  • Automatische Skalierung: Bei Bedarf wird das Diagramm verkleinert, um auf eine Seite zu passen
  • 15mm Rand: Professioneller Seitenrand rundherum

Dateiname anpassen

Im Bereich "💾 Datei-Verwaltung" können Sie einen Dateinamen eingeben:

  • Dieser Name wird für PNG-, SVG- und PDF-Exporte verwendet
  • Fallback: "erm-model" wenn das Feld leer ist
  • Dateiendung wird automatisch ergänzt

💡 Tipps & Tricks

Allgemeine Tipps

  • Speichern nicht vergessen: Exportieren Sie regelmäßig als JSON, um Ihre Arbeit zu sichern
  • Raster nutzen: Elemente rasten automatisch am 10px-Raster ein für saubere Ausrichtung
  • Tastenkombinationen: Strg+S (Windows) oder Cmd+S (Mac) zum schnellen Speichern
  • Validierung beachten: Das farbige Badge zeigt Fehler sofort an

Problemlösungen

Kardinalitäten überlappen sich:

  • Abstand erhöhen (z.B. von 150 auf 180)
  • Oder: Längs-Verschiebung anpassen

Kardinalitäten zu weit von der Raute entfernt:

  • Abstand verringern (z.B. von 150 auf 120)
  • Senkrechter Offset anpassen (z.B. von 18 auf 15)

Kardinalitäten überlappen mit Beziehungsnamen:

  • Längs-Verschiebung erhöhen (z.B. auf 40 oder 50)
  • Dadurch wandern die Kardinalitäten weiter nach außen

Attribute überlappen mit Beziehungslinien:

  • "🔄 AutoLayout anwenden" - der Algorithmus findet die optimale Lücke
  • Oder: Attribute manuell verschieben

Diagramm zu groß für PDF:

  • AutoLayout verwenden für kompaktere Anordnung
  • Oder: Entitäten manuell näher zusammenschieben
  • PDF skaliert automatisch, aber kleinere Diagramme sind besser lesbar

Best Practices für große Diagramme

  1. Zentrale Entitäten in die Mitte platzieren
  2. Verwandte Entitäten gruppieren
  3. AutoLayout als Startpunkt verwenden
  4. Kardinalitäts-Abstand bei vielen Beziehungen reduzieren (120-130)
  5. Regelmäßig zwischenspeichern (JSON-Export)

⚙️ Technische Details

Systemanforderungen

  • Browser: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
  • Mobile: iOS Safari, Chrome Mobile, Samsung Internet
  • JavaScript: Muss aktiviert sein
  • Canvas-Support: Wird benötigt für Zeichnung

Architektur

  • Single-File-Application: Komplett in einer HTML-Datei
  • Keine externen Abhängigkeiten: Funktioniert offline
  • Canvas API: Für performante Rendering
  • JSON-Datenmodell: Einfach zu speichern und zu laden
  • Event-driven: Reaktive UI-Updates

Datenmodell-Struktur

Das exportierte JSON enthält:

  • entities: Array mit allen Entitäten (Name, Position, Attribute)
  • relationships: Array mit allen Beziehungen (Name, Entitäten, Kardinalitäten, Rollen)
  • displaySettings: Kardinalitäts-Parameter, Sidebar-Breite
  • metadata: Editor-Version, Erstellungs-/Änderungsdatum, Autor

Kompatibilität

  • Dateien aus älteren Versionen können geladen werden
  • Fehlende Parameter werden mit Standardwerten ergänzt
  • Neue Features sind abwärtskompatibel
Hinweis zur Domain: Der Editor ist unter https://erm.siemens-gymnasium-berlin.de gehostet. Netzwerkzugriff auf diese Domain ist erforderlich und erlaubt.

📋 Versionshistorie

Version 1.6.6 (Februar 2026) Aktuell

  • 🗑 Beziehungen löschen: Kontextmenü-Option zum direkten Löschen von Beziehungen
  • 🖼 PNG Export verbessert: Bounding-Box-Logik wie PDF - nur relevanter Bereich wird exportiert
  • 📱 Tablet/Mobile Support: Zwei-Finger-Pinch-Zoom für Tablets und iPads
  • 🎯 Smart Touch-Scrolling: preventDefault() nur bei echtem Drag - Scrolling funktioniert wieder!

Version 1.6.5 (Februar 2026)

  • 🔄 AutoLayout Verbesserungen: Kompaktere Anordnung mit reduzierten Spacing-Werten
  • 🐛 KRITISCHER FIX: Canvas-Overflow behoben - Entitäten werden nicht mehr herausgetrieben
  • ✅ Canvas-Grenzen implementiert (max 1200x1000px)
  • ⚡ Schwächere repulsive Forces und bessere Attribute-Positionierung

Version 1.6.4 (Februar 2026)

  • 🖱️ Zoom-Fix: Mouse Events bei allen Browser-Zoom-Leveln funktionieren
  • ✅ canvasXY() zoom-aware mit currentZoom-Faktor
  • 🔧 Alle Touch-Event-Handler konsistent aktualisiert
  • 📱 Kontextmenü-Trigger funktioniert zuverlässig

Version 1.6.0 (Februar 2026)

  • 🔄 AutoLayout: Force-directed Algorithmus für automatische Anordnung
  • 🎯 Intelligente Attribut-Positionierung mit Lücken-Erkennung
  • ✅ Primärschlüssel-Validierung: Warnung bei mehreren PKs pro Entität
  • 📄 PDF-Export optimiert: DIN A4 mit Bounding-Box und auto-Orientierung
  • 🔗 Links auf erm.siemens-gymnasium-berlin.de gesetzt
  • 🐛 Bugfix: Duplizierten JavaScript-Block entfernt (~280 Zeilen)

Version 1.5.2 (Januar 2026)

  • 🎨 UI-Verbesserungen und Bugfixes
  • 📝 Verbesserte Fehlerbehandlung
  • 🔧 Performance-Optimierungen

Version 1.4.0 (Januar 2026)

  • ✅ Verbessertes Validierungs-UI mit farbigen Badges
  • 📋 Editierbares Datenmodell-Textfeld (vorher "Debug")
  • 💾 Dynamische Dateinamen bei PNG/SVG/PDF-Export
  • 🎨 Tool-Gruppierung mit farbigen Boxen
  • 🔧 UTF-8 Encoding-Probleme behoben
  • 📱 Verbesserte Touch-Unterstützung

Version 1.3.3 (Januar 2026)

  • 🐛 SVG-Export Bugfixes
  • 📝 README-Dokumentation aktualisiert
  • 🔧 Stabilität-Verbesserungen

Version 1.2.1 (Januar 2026)

  • 🎯 Revolutionäres 3-Parameter-System: Virtuelle Parallellinie für Kardinalitäten
  • 📐 Intuitive Parameter: Senkrechter Offset, Abstand, Längs-Verschiebung
  • 🔄 Automatische Anpassung für alle Orientierungen
  • 📚 Umfangreiche Dokumentation mit ASCII-Diagrammen

Version 1.2.0 (Januar 2026)

  • 🎛️ Dropdown-Interface für Kardinalitäts-Positionen
  • ⚡ Live-Updates: Keine "Apply"-Buttons mehr nötig
  • 🎯 5 Presets für verschiedene Orientierungen
  • 🔧 Verbesserte Benutzerfreundlichkeit

Version 1.1.0 (Januar 2026)

  • 🔄 Reflexive Beziehungen mit Rollenbezeichnungen
  • 📐 Vektorbasierte Kardinalitäts-Positionierung
  • 🎨 Kontextmenü für Bearbeitung
  • 💾 Metadaten im JSON-Export

Version 1.0.1 (Januar 2026)

  • 🎉 Erste stabile Version
  • 📐 Chen-Notation vollständig implementiert
  • 💾 Multi-Format Export (PNG, SVG, JSON)
  • ✅ Live-Validierung
  • 📱 Responsive Design