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 · Wiki / Docs · Sicherheit · Mitmachen
| Feature | Beschreibung | |
|---|---|---|
| 🧭 | Schritt-für-Schritt-Wizard | Strukturierte Erfassung neuer Datenflüsse in 4 geführten Schritten inkl. DSGVO-Schutzbedarf und Erfassungsart |
| 🗺️ | Netzwerkkarte | Interaktive Graphvisualisierung mit Cytoscape.js – zoom, pan, Knoten-Highlight, Vollbild |
| 📊 | Netzwerk-Insights | Automatische Berechnung von Out-/In-Degree, Betweenness Centrality und Community Clusters |
| 🔍 | Filter-Sidebar | Dynamisches Filtern nach Beziehungstyp, Schutzbedarf, Erfassungsart, Organisation, Häufigkeit u. v. m. |
| 📥 | Flexibler CSV-Import | Einfügen per Paste, Laden per URL oder lokaler Dateiupload mit Drag & Drop |
| 📤 | CSV-Export | Alle erfassten Datenflüsse jederzeit als CSV herunterladen oder im Browser speichern |
| 🛡️ | Datenschutz-Dimensionen | Schutzbedarf (DSGVO-relevant / Intern / Öffentlich) und Erfassungsart (Manuell / Automatisiert) |
| 🔒 | Local-First / No-Database | Alle Daten bleiben im Browser (LocalStorage) – kein Backend, kein Account erforderlich |
https://daimpad.github.io/datengraf
Klicken Sie auf Beispieldaten laden, um den enthaltenen Datensatz zu importieren, oder nutzen Sie Datenfluss erfassen, um manuelle Einträge zu erfassen. Die Sidebar mit Filtern ist standardmäßig versteckt – öffnen Sie sie über das Menü-Symbol oben links.
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
Importieren Sie Ihre Datei über den CSV-Import-Bereich (Einfügen / URL / Datei), oder nutzen Sie den Wizard für die manuelle Einzelerfassung.
| Technologie | Zweck |
|---|---|
| Cytoscape.js v3.23 | Graphvisualisierung und Netzwerkrendering |
| Vanilla JS (ES2020+) | Gesamte Anwendungslogik ohne Framework |
| CSS Custom Properties | Design-System mit Glasmorphismus-Effekten |
| Inter Font | Moderne Schriftart (Google Fonts) |
| Font Awesome 6.4 | Icon-Library |
| FileReader API | Lokaler Dateiimport ohne Upload |
| LocalStorage API | Persistenz ohne Backend |
| Fetch API | CSV-Import per URL |
Keine Build-Tools, keine npm-Abhängigkeiten, keine Transpiler — nur HTML, CSS und JS.
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.
DatenGraf/
├── index.html # Einstiegspunkt – nur HTML-Struktur
├── css/
│ └── styles.css # Styles & Design-Tokens
├── js/
│ └── app.js # Gesamte Anwendungslogik
├── data/
│ └── sample.csv # Beispiel-Datensatz
├── .github/
│ └── CONTRIBUTING.md # Beitragsrichtlinien
├── DOCS.md # Technische Dokumentation
├── SECURITY.md # Sicherheitsrichtlinie
├── LICENSE # GPL-3.0
└── README.md # Diese Datei
Dieses Projekt steht unter der GNU General Public License v3.0.
Ein Projekt von nozilla — bits & bytes mit ❤