ERM Editor (Chen-Notation)

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

🎉 Neu in Version 1.8.0

🐛 Löschen via Rechtsklick repariert

Entitäten, Beziehungen und Attribute können wieder über das Kontextmenü (Rechtsklick) gelöscht werden. Der Fehler lag in der deleteTarget()-Funktion: Da sowohl Entitäten als auch Beziehungen ein attributes-Array besitzen, wurde die Unterscheidung nicht korrekt getroffen. Die Erkennung prüft jetzt – analog zum Kontextmenü-Aufbau – zusätzlich auf das Vorhandensein von x/y (Entität) bzw. a/b (Beziehung).

🚧 Elemente bleiben auf der Zeichenebene sichtbar

Beim manuellen Verschieben von Entitäten per Drag & Drop können diese nicht mehr über den linken oder oberen Rand der Zeichenfläche hinaus bewegt werden und damit aus dem sichtbaren Bereich verschwinden. Zusätzlich wird die Canvas-Größe nach jedem abgeschlossenen Drag neu berechnet, sodass weit nach rechts oder unten gezogene Elemente automatisch scrollbar bleiben.

PDF-Dateiname (bereits in v1.7.7)

Der PDF-Export verwendet denselben Projektnamen aus dem Feld Dateiname wie PNG- und SVG-Export.

🖼 Große Zeichenflächen werden automatisch eingepasst

Große ERM-Diagramme werden jetzt beim Laden und beim Ändern der Fenstergröße so eingepasst, dass alle Teile des Diagramms sichtbar und erreichbar bleiben. Das betrifft besonders importierte oder manuell weit auseinandergezogene Modelle, bei denen einzelne Attribute, Entitäten oder Beziehungsrauten zuvor außerhalb der Zeichenfläche liegen konnten.

  • ✅ Die Canvas-Größe wird dynamisch aus den tatsächlichen Diagrammgrenzen berechnet.
  • ✅ Entitäten, Attribute, Beziehungsattribute und Beziehungrauten werden bei der Größenberechnung berücksichtigt.
  • ✅ Elemente mit negativen Koordinaten werden beim Laden automatisch mit Sicherheitsabstand in den sichtbaren Bereich verschoben.
  • ✅ Beim Fenster-Resize wird die Zeichenfläche nicht mehr versehentlich wieder auf eine zu kleine Standardgröße reduziert.
  • ✅ Die Funktion zum Einsammeln ausgerissener Elemente arbeitet robuster und berücksichtigt nun auch große Diagrammausdehnungen.

Technischer Hintergrund

Die Version 1.7.7 erweitert die interne Bounds-Berechnung. Nicht nur die Positionen der Entitäten, sondern auch die Ausdehnung der Attribute, Beziehungsattribute und Rauten fließt in die Berechnung der notwendigen Zeichenfläche ein. Dadurch bleiben weit außen liegende Diagrammteile scrollbar und wieder per Maus oder Touch erreichbar.

💾 Autosave – Diagramm überlebt jeden Browser-Reload

Das aktuelle Diagramm wird bei jeder Änderung automatisch im lokalen Browser-Speicher (localStorage) gesichert. Beim nächsten Öffnen (auch nach Reload oder versehentlichem Schließen) wird es automatisch wiederhergestellt.

  • ✅ Autosave bei jeder Modelländerung (Entität/Beziehung/Attribut hinzufügen, löschen, umbenennen)
  • ✅ Autosave nach jedem Drag (Element verschieben)
  • ✅ Autosave beim Laden einer JSON-Datei
  • ✅ Wiederherstellung beim Seitenstart mit Hinweis + Zeitstempel
  • ✅ Daten bleiben im Browser – keine Cloud, kein Server

🔄 Automatischer Versions-Check

Der Editor prüft alle 5 Minuten, ob eine neuere Version auf dem Server verfügbar ist. Bei einer neueren Version erscheint ein orangener Banner oben im Fenster.

  • ✅ Versions-Check beim Start (nach 3 Sek.) und alle 5 Min.
  • ✅ Kein nervöses Polling – Server-Fehler werden still ignoriert
  • ✅ "Jetzt aktualisieren" speichert erst, dann lädt die Seite neu
  • ✅ Banner kann mit ✕ geschlossen werden (kein Zwang)

⚙️ Einrichtung auf dem Server (einmalig):

Damit der Versions-Check funktioniert, muss eine Datei version.json im Root des Webservers liegen:

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

Beispielinhalt der Datei:

{
  "version": "1.7.7",
  "released": "2026-05-11"
}

Bei jedem neuen Release: version auf die neue Versionsnummer setzen. Die Datei version.json liegt dem Release bei.

Ablauf beim Update-Hinweis:

  1. Schüler hat den Editor seit Tagen geöffnet
  2. Lehrkraft deployt neue Version + aktualisiert version.json
  3. Spätestens 5 Min. später erscheint orangener Banner beim Schüler
  4. Schüler klickt "Jetzt aktualisieren" → Diagramm wird gespeichert → Reload
  5. Neue Version lädt, Diagramm wird automatisch wiederhergestellt
  6. Kein Datenverlust!

✨ 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: Der Name aus dem Feld Dateiname wird auch beim PDF-Druckfenster als Dokumenttitel gesetzt.

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.8.0 (Juni 2026) Aktuell

  • 🐛 Löschen via Rechtsklick repariert: Entitäten, Beziehungen und Attribute können wieder zuverlässig über das Kontextmenü gelöscht werden. Der Erkennungstest in deleteTarget() unterschied bisher Entitäten und Beziehungen nicht korrekt (beide haben ein attributes-Array), was dazu führte, dass Beziehungen als Entitäten behandelt wurden.
  • 🚧 Elemente bleiben auf der Zeichenebene: Beim manuellen Verschieben (Drag) können Entitäten nicht mehr über den oberen oder linken Rand der Zeichenfläche hinaus bewegt werden und damit verschwinden. Der Canvas wird nach jedem Drag automatisch neu berechnet, sodass auch nach rechts/unten gezogene Elemente erreichbar bleiben.
  • 🔢 Versionsnummer auf 1.8.0 angehoben.

Version 1.7.7 (Mai 2026)

  • 📄 PDF-Dateiname korrigiert: Der PDF-Export nutzt nun den angegebenen Dateinamen als Dokumenttitel des Druckfensters. Dadurch schlägt der Browser beim Speichern als PDF denselben Namen vor wie bei PNG und SVG.

Version 1.7.6 (Mai 2026)

  • 🖼 Dynamische Zeichenfläche: Große ERM-Diagramme werden beim Laden und bei Fenstergrößenänderungen automatisch eingepasst, sodass alle Teile sichtbar und wieder ansprechbar bleiben.
  • 📍 Automatisches Zurückholen: Elemente mit negativen Koordinaten werden beim Laden in den erreichbaren Bereich verschoben.
  • ⟲ Einsammel-Funktion verbessert: Berücksichtigt jetzt Entitäten, Attribute, Beziehungsattribute und Beziehungsrauten bei der Größenberechnung.
  • 🔧 Touch-Zoom korrigiert: kleiner JavaScript-Syntaxfehler im Pinch-Zoom-Block behoben.

Version 1.7.2 (April 2026)

  • 💾 Autosave: Diagramm wird bei jeder Änderung in localStorage gesichert
  • 🔄 Autorestore: Diagramm wird beim Seitenstart automatisch wiederhergestellt
  • 🔔 Versions-Check: Prüft alle 5 Min. auf neue Versionen via version.json
  • 🟠 Update-Banner: Zeigt Hinweis bei neuer Version – "Aktualisieren" speichert erst, dann Reload
  • 📄 version.json: Neue Server-Datei für Versions-Management

Version 1.7.1 (April 2026)

  • 🐛 Erkennungslogik Entität/Beziehung korrigiert
  • 🎛️ Konvertierungs-Dialog: Auswahl der zu verbindenden Entitäten
  • 🎯 Intelligente Positionierung bei Beziehung→Entität

Version 1.7.0 (April 2026)

  • 🎓 Erstes Feature: Konvertierung Entität ↔ Beziehung (hatte noch Bugs)

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

Änderungen v1.8.0