DatenGraf ist ein browserbasiertes, datenbankfreies Werkzeug zur Kartierung und Analyse von Datenflüssen innerhalb von Organisationen. Es unterstützt Datenschutzbeauftragte, Architekten und Analysten dabei, Datenökosysteme sichtbar zu machen – ohne Server, ohne Login, ohne Cloud.
→ Jetzt starten · Sicherheit · Mitmachen · Design-System
| Feature | Beschreibung | |
|---|---|---|
| 🧭 | Schritt-für-Schritt-Wizard | Strukturierte Erfassung neuer Datenflüsse in geführten Schritten – mit Duplikat-Erkennung und Validierung (Quelle ≠ Ziel) vor dem Speichern |
| ✏️ | Bearbeiten & duplizieren | Einträge direkt in der Listenansicht bearbeiten oder als Vorlage klonen; Doppelklick auf einen Knoten öffnet den Wizard im Bearbeitungsmodus |
| 📥 | Flexibler CSV-Import | Einfügen per Paste, Laden per URL oder lokaler Dateiupload – plus CSV-Vorlage zum Download |
| 👀 | Import-Vorschau | Vor dem Übernehmen zeigt eine Tabelle die ersten Zeilen, markiert Pflichtspalten und warnt bei fehlenden Feldern |
| ↩️ | Undo | Strg/Cmd + Z macht die letzten 20 Datenänderungen rückgängig |
| Feature | Beschreibung | |
|---|---|---|
| 🗺️ | Netzwerkkarte | Interaktive Graphvisualisierung mit Cytoscape.js – Zoom, Pan, Knoten-Highlight, Vollbild |
| 🔎 | Knoten-Detailpanel | Klick auf einen Knoten zeigt alle ein- und ausgehenden Verbindungen sowie Hub-/Gatekeeper-Status |
| 🔦 | Knotensuche | Knoten in der Karte per Namenssuche finden und fokussieren (Strg/Cmd + F) |
| 🛤️ | Pfadfinder | Kürzesten Pfad zwischen zwei Knoten suchen und hervorheben (A*-Algorithmus) |
| 🎯 | Hub- & Gatekeeper-Markierung | Strukturell kritische Knoten werden farblich markiert und in einer Topologie-Legende erklärt |
| 🎨 | Org-Farben | Knoten nach Organisation einfärben mit automatischer Legende |
| 🏛️ | Org-Hierarchie | Knoten als Compound-Nodes nach Bereich gruppieren, inklusive Erklärungslegende |
| 📶 | Häufigkeits-Visualisierung | Kanten kodieren die Übertragungshäufigkeit über Dicke, Linienstil und Transparenz |
| 🏷️ | Beziehungs-Legende | Automatisch aus dem Datensatz erzeugt und klickbar – filtert die Karte auf einen Beziehungstyp |
| 💬 | Knoten-Tooltip | Hover zeigt Organisation, Abteilung und Bereich ohne Klick |
| Feature | Beschreibung | |
|---|---|---|
| 🧠 | Analyse-Briefing (3 Schichten) | Regelbasierte Befunde → Snapshot-Differenzanalyse → optionales LLM-Narrativ |
| 📈 | Vollständigkeits-Score | Bewertet den Datensatz über fünf gewichtete Kategorien und zeigt gezielt, wo Angaben fehlen |
| 📊 | Netzwerk-Insights | Out-/In-Degree, Betweenness Centrality und Community Cluster |
| 🔍 | Filter-Sidebar | Filtern nach Beziehungstyp, Schutzbedarf, Erfassungsart, Organisation, Abteilung, Häufigkeit, Format und Freitextsuche – Einstellungen bleiben erhalten |
| 📸 | Snapshots & Vergleichsbasis | Datenstände benennen und speichern; Vergleichsbasis für die Diff-Analyse festlegen |
| 🤖 | KI-Narrativ (opt-in) | Mit eigenem Anthropic API-Key erstellt Claude ein kontextbezogenes Netzwerk-Narrativ |
| 🧪 | 5 Beispieldatensätze | Wirtschaft, Zivilgesellschaft, Verwaltung, Wissenschaft, Medien – jeweils mit Analyse-Infopanel |
| Feature | Beschreibung | |
|---|---|---|
| 📤 | Mehrfach-Export | CSV, PNG- und SVG-Netzwerkbild sowie PDF-Bericht (Stats, Graph, Briefing, Tabelle) |
| 🔗 | Sharable Link | Datensatz als komprimierten URL-Hash teilen – kein Backend nötig |
| 🎚️ | Filterbewusster Export | Sind Filter aktiv, wird der gefilterte Stand exportiert – nicht versehentlich alles |
| Feature | Beschreibung | |
|---|---|---|
| 🔒 | Local-First / No-Database | Alle Daten bleiben im Browser (LocalStorage) – kein Backend, kein Account |
| 🛡️ | Datenschutz-Dimensionen | Schutzbedarf (DSGVO-relevant / Intern / Öffentlich), Erfassungsart, Ansprechpartner (Art. 30) |
| 🌗 | Hell & Dunkel | Umschaltbares Theme, das die Auswahl merkt und beim Erststart der Systemeinstellung folgt |
| ♿ | Kontrast nach WCAG AA | Text erfüllt in beiden Themes die AA-Schwellen (gemessen, siehe unten) |
| 🧯 | Ausfallsicher | Ist das CDN blockiert, erklärt die App das und Liste, Insights und Briefing arbeiten weiter |
| ❓ | FAQ-Panel | Eingebaute Antworten zu Kantenfarben, Hierarchie, Import, Briefing und Snapshots |
| 📱 | Mobile-Navigation | Responsives Layout mit mobilem Menü-Dropdown für Tab-Wechsel und Wizard-Zugang |
| Kürzel | Wirkung |
|---|---|
Strg/Cmd + N |
Wizard öffnen – neuen Datenfluss erfassen |
Strg/Cmd + Z |
Letzte Datenänderung rückgängig machen (bis zu 20 Schritte) |
Strg/Cmd + F |
Knotensuche fokussieren (in der Netzwerkansicht) |
Esc |
Offenes Modal schließen |
https://datengraf.nozilla.net
Klicke auf Beispieldaten entdecken, wähle einen der 5 Sektordatensätze, oder nutze Datenfluss erfassen für manuelle Einträge. Die Filter-Sidebar öffnest du über das Menü-Symbol oben rechts.
git clone https://github.com/daimpad/DatenGraf.git
cd DatenGraf
python3 -m http.server 8080
# → http://localhost:8080Hinweis:
index.htmlmuss über HTTP(S) geöffnet werden, damitfetch()die CSV-Beispieldaten laden kann. Ein direktes Öffnen alsfile://startet die App leer – CSV-Import per Paste funktioniert jedoch immer.
Quelle,QuelleAbteilung,QuelleBereich,QuelleOrganisation,QuelleRolle,
Beziehung,Ziel,Datentyp,Häufigkeit,Format,Schutzbedarf,Erfassungsart,Anmerkungen,Ansprechpartner
Importiere deine Datei über den CSV-Import-Bereich (Einfügen / URL / Datei), oder nutze den Wizard für die manuelle Einzelerfassung. Eine Vorlage zum kollaborativen Befüllen steht direkt in der App zum Download bereit.
Das Analyse-Briefing ist das Kernstück der automatischen Netzwerkanalyse und arbeitet in drei Schichten:
Schicht 1 – Regelbasierte Befunde Erkennt automatisch Hubs (Knoten mit überdurchschnittlich vielen Verbindungen), Gatekeeper (hohe Betweenness), isolierte Teilgraphen sowie Lücken in der Dokumentation – fehlende Ansprechpartner bei DSGVO-relevanten Flüssen, fehlende Schutzklasse, fehlender Datentyp, fehlende Organisationsangabe. Jeder Befund ist aufklappbar und nennt betroffene Knoten und eine Empfehlung.
Schicht 2 – Snapshot-Differenzanalyse Vergleicht den aktuellen Datensatz mit einem gespeicherten Snapshot (Vergleichsbasis). Meldet neue und entfallene Verbindungen sowie Knoten, die seit dem letzten Stand zu Hubs oder Gatekeepern geworden sind.
Schicht 3 – LLM-Narrativ (opt-in)
Mit einem eigenen Anthropic API-Key (sk-ant-…) in den Einstellungen (Zahnrad-Icon) generiert Claude ein deutschsprachiges Fließtext-Narrativ, das den Zustand des Netzwerks einordnet. Der Key wird ausschließlich im Browser-LocalStorage gespeichert und direkt an die Anthropic-API gesendet – kein DatenGraf-Backend ist beteiligt. Ohne Key bleibt ein Template-Narrativ aktiv.
Ergänzend bewertet ein Score von 0–100, wie belastbar die Dokumentation ist. Er stützt sich auf fünf gewichtete Kategorien – Datentyp, Schutzklasse, Organisation, Erfassungsart und Ansprechpartner (DSGVO Art. 30) – und schlüsselt auf, in welcher Kategorie wie viele Einträge fehlen.
Das Briefing bewertet immer den vollständigen Datensatz, nicht die gefilterte Ansicht. Sind Filter aktiv, weist ein Hinweis darauf hin.
Die Textfarben erfüllen in beiden Themes die Kontrastschwellen nach WCAG 2.1 AA (4.5:1 für Fließtext, 3:1 für große Schrift). Geprüft wurde automatisiert über alle sichtbaren Textelemente, inklusive Auflösung transparenter Ebenen.
Dafür trennt das Design-System bewusst zwischen Flächenfarben (--c-success, --c-warn, --c-danger) und Schriftfarben (--ink-*): dieselbe semantische Farbe braucht als Text einen dunkleren beziehungsweise im Dark Mode helleren Wert als für Balken und Punkte. Text auf Akzentflächen nutzt --on-accent, das im Dark Mode auf dunkle Tinte umschaltet, weil der Akzent dort hell ist.
Alle Modals lassen sich mit Esc schließen; interaktive Elemente sind per Tastatur erreichbar.
| Technologie | Version | Zweck |
|---|---|---|
| Cytoscape.js | 3.23 | Graphvisualisierung, Netzwerkrendering, A*-Pfadsuche |
| LZ-String | 1.5 | URL-sichere Komprimierung für Sharable Links |
| Vanilla JS | ES2020+ | Gesamte Anwendungslogik ohne Framework |
| CSS Custom Properties | — | Design-System mit Glasmorphismus und Theme-Umschaltung |
| Inter | 6.x (lokal) | Schriftart (latin + latin-ext, 400/500/600/700) |
| Font Awesome | 6.7.2 (lokal) | Icon-Library (solid, regular, brands) |
| FileReader API | — | Lokaler Dateiimport ohne Upload |
| LocalStorage API | — | Persistenz ohne Backend |
| Fetch API | — | CSV-Import per URL, Beispieldaten, Anthropic API |
| Clipboard API | — | Link-Teilen mit Fallback auf prompt() |
Keine Build-Tools, kein npm-Workflow zur Laufzeit, keine Transpiler — nur HTML, CSS und JS. Inter und Font Awesome werden lokal aus
assets/fonts/ausgeliefert, nicht per CDN.
Zu den beiden CDN-Bibliotheken: Cytoscape.js und LZ-String werden zur Laufzeit von cdnjs.cloudflare.com geladen. Sperrt ein Netz diesen Zugriff – in Verwaltungs- und Unternehmensumgebungen keine Seltenheit –, weist die App darauf hin, statt stillschweigend zu brechen. Listenansicht, Insights und Analyse-Briefing funktionieren dann weiterhin; Netzwerkkarte und Share-Link entfallen.
| Schlüssel | Inhalt |
|---|---|
datengraf_data |
Aktueller Datensatz |
datengraf_snap_* |
Benannte Snapshots |
datengraf_baseline |
Aktive Vergleichsbasis |
datengraf_filters |
Persistierte Filter-Einstellungen |
datengraf_theme |
Hell/Dunkel-Auswahl |
datengraf_api_key |
Anthropic API-Key (nur bei opt-in) |
Gradzentralität (Degree Centrality)
Der Out-Degree eines Knotens v gibt an, wie viele Datenflüsse von ihm ausgehen – ein Maß für seine Rolle als Datenproduzent. Der In-Degree misst die eingehenden Flüsse und identifiziert Datensammler:
C_D(v) = deg(v) / (|V| - 1)
Betweenness Centrality (Brandes 2001)
Misst, wie häufig ein Knoten v auf dem kürzesten Pfad zwischen zwei anderen Knoten liegt. Hohe Werte markieren Flaschenhälse und Gatekeeper:
C_B(v) = Σ (σ_st(v) / σ_st) für alle s ≠ v ≠ t
Community Detection (Label Propagation, Raghavan et al. 2007)
Zur Erkennung von Datensilos: Jeder Knoten übernimmt iterativ das häufigste Label seiner Nachbarn, bis das Netzwerk in stabile Gemeinschaften konvergiert.
Komponentenanalyse (BFS)
Eine Breitensuche über den ungerichteten Graphen findet Teilgraphen ohne Verbindung zum Hauptnetz. Solche isolierten Inseln deuten auf Datensilos oder unvollständige Erfassung hin und erscheinen als eigener Befund im Briefing.
Kürzester Pfad (A*, Cytoscape.js)
Der Pfadfinder nutzt den A*-Algorithmus von Cytoscape.js (cy.elements().aStar()) auf dem gerichteten Graphen. Gefundene Pfade werden grün hervorgehoben; alle anderen Knoten werden ausgeblendet.
DatenGraf/
├── index.html # Einstiegspunkt – HTML-Struktur
├── css/
│ └── styles.css # Styles & Design-Tokens (~2900 Zeilen)
├── js/
│ └── app.js # Gesamte Anwendungslogik (~2700 Zeilen)
├── assets/
│ └── fonts/
│ ├── fa/all.min.css # Font Awesome 6.7.2 CSS
│ ├── webfonts/ # Font Awesome woff2-Dateien (solid/regular/brands)
│ └── inter/ # Inter-Schriftdateien (woff2) + inter.css
├── data/
│ ├── template.csv # Leere Vorlage für eigene Erfassung
│ ├── sample-wirtschaft.csv # Beispiel: Globex Handels GmbH
│ ├── sample-zivilgesellschaft.csv # Beispiel: Nachbarschaftshilfe e.V.
│ ├── sample-verwaltung.csv # Beispiel: Stadtverwaltung Musterstadt
│ ├── sample-wissenschaft.csv # Beispiel: Institut für Klimaforschung
│ └── sample-medien.csv # Beispiel: Tagesblatt Regional GmbH
├── docs/
│ ├── design-system.html # Interaktive Referenz aller Design-Tokens
│ ├── Features.md # Feature-Dokumentation
│ ├── Algorithmen.md # Vertiefung der Analyseverfahren
│ ├── CSV-Format.md # Spaltenreferenz
│ ├── Installation.md # Einrichtung
│ ├── Konfiguration.md # Konfigurationsoptionen
│ ├── Entwicklung.md # Entwicklungshinweise
│ ├── FAQ.md # Häufige Fragen
│ └── Home.md # Wiki-Startseite
├── .github/
│ ├── workflows/
│ │ ├── static.yml # GitHub Pages Deployment
│ │ └── main.yml # FTP-Deployment
│ └── CONTRIBUTING.md # Beitragsrichtlinien
├── robots.txt # Crawler-Regeln + Sitemap-Verweis
├── sitemap.xml # Sitemap
├── social-preview.svg # Vorschaubild für Social Media (Open Graph)
├── site.webmanifest # PWA-Manifest
├── CLAUDE.md # AI-Entwicklungs-Kontext & Architektur
├── DOCS.md # Technische Dokumentation
├── SECURITY.md # Sicherheitsrichtlinie
├── LICENSE # GPL-3.0
└── README.md # Diese Datei
DatenGraf beantwortet, wie die Datenflüsse einer Organisation aussehen und wo die Schwachstellen liegen. Für die Schritte danach gibt es zwei Anschlusswerkzeuge:
- Datenatlas – Inspiration, welche Daten sich sektorspezifisch veröffentlichen lassen.
- DatenLotse – führt von der fertigen Kartierung in die Umsetzung: Dateninventar nach DCAT-AP.de, Risiko-Clearing und datenschutzkonforme Aufbereitung.
Dieses Projekt steht unter der GNU General Public License v3.0.
Ein Projekt von nozilla — bits & bytes mit ❤