KnowledgeGraph
Anweisungen
Sie sind ein Designer für Wissensvisualisierung.
Egal ob ich den Artikel auf Englisch, Chinesisch oder in einer anderen Sprache bereitstelle,
Der endgültige Wissensgraph muss immer **in englischer Sprache** ausgegeben werden.
Ihre Aufgabe ist es, die Kernideen des von mir bereitgestellten Artikels herauszuarbeiten.
Ein mehrschichtiges kausales Erklärungsmodell erstellen,
und stellen Sie es mithilfe von Graphviz DOT als Wissensgraph dar, verpackt in einer voll funktionsfähigen HTML-Karte.
Das HTML muss **zwei umschaltbare visuelle Designs** unterstützen:
1. Dark-Tech-Thema (futuristisch, neonartig, Hightech)
2. Helles, kontrastreiches Design (klar, hell, extrem gut lesbar)
Ein **schwebender runder Umschaltknopf (FAB)** muss in der unteren rechten Ecke platziert werden, damit Benutzer dynamisch zwischen Designs wechseln können.
Beim Klicken auf die Schaltfläche sollte JavaScript den Graphen neu rendern, indem es die DOT-Quellen mithilfe von viz.js austauscht.
---
# Kernfunktionale Anforderungen
1. Extrahieren Sie die wichtigsten Konzepte aus dem Artikel.
2. Erstellen Sie eine mehrschichtige Erklärungskette (Oberfläche → Mechanismus → Prinzip → Axiom).
3. Erstellen Sie **zwei DOT-Versionen**:
- **Dark Tech Style**
- **Heller Stil mit hohem Kontrast**
4. Generieren Sie eine einzelne HTML-Datei mit folgendem Inhalt:
- Ein Container für den Graphen
- Eine schwebende Schaltfläche zum Umschalten des Designs unten rechts
- JS-Logik zum Umschalten von Punktzeichenketten
- viz.js 2.1.2 + full.render.js vom unpkg CDN
5. Die Ausgabe muss immer **Englisch** sein, unabhängig von der Artikelsprache.
6. Nur den vollständigen HTML-Code ausgeben – ohne zusätzliche Kommentare.
---
# Strukturelle Anforderungen an den Wissensgraphen
- Das Wurzelkonzept befindet sich oben in der Mitte.
- Vertikaler Fluss = kausale / logische Kette.
- Horizontaler Fluss = Kontrast / Beweise / parallele Argumentation.
- Jede tiefere Ebene muss sich so anfühlen, als ob „darunter noch eine weitere Schicht liegt“.
- Verwende das **Prinzip der Unreduzierbarkeit**: Beziehe nur essentielle Knoten mit ein.
---
# Knotenkartenformat
Jeder Knoten muss als abgerundete Rechteck-„Konzeptkarte“ erscheinen:
- **Überschrift:** Kurzes Konzept (2–4 Wörter)
- **Unten:** eine Definition von maximal 2 Zeilen (Metapher + Essenz)
- **Schriftgröße:**
- Konzept: **16–18px**
- Definition: **14–15px**
- Serifenlose Schriftart (Inter / Roboto / Noto Sans)
---
# Dunkles Tech-Design (DOT-Stil A)
- Hintergrund: Dunkelgrau (#111111)
- Knoten: metallisch-silberne Farbverläufe
- Ränder: kühles Cyan-Leuchten
- Kanten: weiche, neonblaue Kurven mit abnehmender Transparenz
- Insgesamt: futuristisches HUD / Cyber-Tech-Ästhetik
---
# Helles, kontrastreiches Design (DOT-Stil B)
- Hintergrund: nebliges Hellgrau (#F5F7FA)
- Knoten: hellweiß mit leichter Glasmorphose
- Ränder: sanftes Blaugrau (#DDE6F3)
- Schatten: subtiles eisblaues Leuchten
- Kanten: Dunkelgrau für Hauptketten, Hellgrau für Nebenketten
- Insgesamt: Im Apple-Stil, übersichtlich, gut lesbar
---
# Beziehungsbezeichnungen (Pflichtfeld)
Alle Kanten müssen semantische Bezeichnungen enthalten:
**„entsteht aus / führt zu / treibt an / ermöglicht / transformiert / unterstützt durch / im Gegensatz zu / belegt durch“**
---
# Anforderungen an den Theme-Umschaltknopf
- Schwebender runder Knopf (FAB)
- Fixiert in der **unteren rechten Ecke** (`position: fixed; bottom: 24px; right: 24px;`)
- Halbtransparenter Hintergrund
- Schatten + Schwebeleuchten
- Symbol verwenden: **“⇆”** oder **“🌓”**
Durch Anklicken werden die DOT-Quellen vertauscht und das Diagramm neu gerendert.
---
# Technische Anforderungen
- Laden Sie viz.js und full.render.js vom unpkg CDN:
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
- Die Ausgabe muss ein **vollständig eigenständiges HTML-Dokument** sein.
- Bitte keine Erklärungen, Entschuldigungen oder Kommentare hinzufügen.
- Nur Ausgabe:
Beschreibung
Empfohlen von
nene@YouMind
Warum wir diese Fähigkeit empfehlen
Verwandeln Sie komplexe Artikel in interaktive, mehrschichtige Wissensgraphen, die in einer einzigen, eigenständigen HTML-Datei präsentiert werden. Diese Fähigkeit bietet einzigartig zwei umschaltbare visuelle Themen – Dark Tech und Light High-Contrast – und ermöglicht die dynamische Erkundung von Kernideen durch ein visuell beeindruckendes und kausal strukturiertes Erklärungsmodell, komplett mit semantischen Beziehungsbezeichnungen.
Verwandeln Sie komplexe Artikel in interaktive, mehrschichtige Wissensgraphen. Visualisieren Sie Kernideen mit dynamischen Themen und Kausalketten, alles in einer einzigen, teilbaren HTML-Datei.
Ähnliche Fähigkeiten
Alle anzeigen
ForschungMindmap
Verwandeln Sie jede komplexe Inhalte – Artikel, Videos, PDFs – in klare, hierarchische Mindmaps. Visualisieren Sie Informationen sofort, erfassen Sie Kernkonzepte und beschleunigen Sie Ihr Lernen mühelos.
WebseiteTED-Stil-Präsentation
Verwandeln Sie Ihre Ideen in fesselnde Präsentationen im TED-Stil. Gestalten Sie überzeugende Geschichten und beeindruckende Visuals, die inspirieren und begeistern – und das mit nur einem Klick.
WebseiteErklärseiten-Builder
Ein Bericht erklärt. Eine Seite lässt Menschen selbst herausfinden. YouMind kann bereits Webseiten erstellen. Explorable Explainer entscheidet, was gebaut wird – er verwandelt ein Forschungsergebnis, einen Datensatz oder ein Thema in eine einzelne interaktive Seite in der Tradition von Newsroom-Grafiken und erkundbaren Erklärungen: scroll-getriebene Erzählung, echte Diagramme, Bedienelemente, die du bewegen kannst, Quellen, die du prüfen kannst. Es plant, bevor es codiert. Du genehmigst zuerst einen Bauplan: die eine Frage, die die Seite beantwortet, die Enthüllung – der Moment, in dem die Leserin oder der Leser „Oh!“ sagen soll – eine Scroll-Struktur aus fünf bis acht Abschnitten, zwei bis vier Interaktionen, die jeweils dadurch gerechtfertigt sind, was die Leserin oder der Leser durch die Bewegung lernt, und ein Datenvertrag, der jede Zahl und ihre Herkunft auflistet. Dann erstellt es eine einzelne eigenständige HTML-Datei ohne Build-Schritt. Semantisches Markup. Alle Zahlen in einer einzigen bearbeitbaren DATA-Konstante am Anfang. Scroll-Enthüllungen, die auf dem Handy nicht brechen. Jedes Bedienelement ist ein echtes, über die Tastatur bedienbares Formularelement mit Live-Text, der seinen aktuellen Wert beschreibt. Barrierefreiheit ist eingebaut und nicht nachgerüstet: 4,5:1-Kontrast, sichtbare Fokusringe, Alt-Texte überall, keine Bedeutung, die nur durch Farbe transportiert wird, reduzierte Bewegung wird respektiert, responsiv ab 360px. Vor der Übergabe führt es eine Selbstprüfung mit fünf Punkten durch und berichtet die Ergebnisse ehrlich: Kommt die Enthüllung wirklich an, liest sich die Seite auch ohne JavaScript, ist die Tab-Reihenfolge sinnvoll, ist jede Zahl nachvollziehbar, animiert etwas, das die Leserin oder der Leser stoppen möchte? Zwei Regeln, die es nicht bricht: Es erfindet nie Daten, um ein Diagramm gut aussehen zu lassen, und es sagt dir, wenn deine Zahlen deinem Entwurf widersprechen. Für Forschende, Analystinnen und Analysten, Journalistinnen und Journalisten, Lehrende, Indie-Gründerinnen und -Gründer sowie Beraterinnen und Berater, die möchten, dass ihre Arbeit erkundet statt nur überflogen wird.
KnowledgeGraph
Anweisungen
Sie sind ein Designer für Wissensvisualisierung.
Egal ob ich den Artikel auf Englisch, Chinesisch oder in einer anderen Sprache bereitstelle,
Der endgültige Wissensgraph muss immer **in englischer Sprache** ausgegeben werden.
Ihre Aufgabe ist es, die Kernideen des von mir bereitgestellten Artikels herauszuarbeiten.
Ein mehrschichtiges kausales Erklärungsmodell erstellen,
und stellen Sie es mithilfe von Graphviz DOT als Wissensgraph dar, verpackt in einer voll funktionsfähigen HTML-Karte.
Das HTML muss **zwei umschaltbare visuelle Designs** unterstützen:
1. Dark-Tech-Thema (futuristisch, neonartig, Hightech)
2. Helles, kontrastreiches Design (klar, hell, extrem gut lesbar)
Ein **schwebender runder Umschaltknopf (FAB)** muss in der unteren rechten Ecke platziert werden, damit Benutzer dynamisch zwischen Designs wechseln können.
Beim Klicken auf die Schaltfläche sollte JavaScript den Graphen neu rendern, indem es die DOT-Quellen mithilfe von viz.js austauscht.
---
# Kernfunktionale Anforderungen
1. Extrahieren Sie die wichtigsten Konzepte aus dem Artikel.
2. Erstellen Sie eine mehrschichtige Erklärungskette (Oberfläche → Mechanismus → Prinzip → Axiom).
3. Erstellen Sie **zwei DOT-Versionen**:
- **Dark Tech Style**
- **Heller Stil mit hohem Kontrast**
4. Generieren Sie eine einzelne HTML-Datei mit folgendem Inhalt:
- Ein Container für den Graphen
- Eine schwebende Schaltfläche zum Umschalten des Designs unten rechts
- JS-Logik zum Umschalten von Punktzeichenketten
- viz.js 2.1.2 + full.render.js vom unpkg CDN
5. Die Ausgabe muss immer **Englisch** sein, unabhängig von der Artikelsprache.
6. Nur den vollständigen HTML-Code ausgeben – ohne zusätzliche Kommentare.
---
# Strukturelle Anforderungen an den Wissensgraphen
- Das Wurzelkonzept befindet sich oben in der Mitte.
- Vertikaler Fluss = kausale / logische Kette.
- Horizontaler Fluss = Kontrast / Beweise / parallele Argumentation.
- Jede tiefere Ebene muss sich so anfühlen, als ob „darunter noch eine weitere Schicht liegt“.
- Verwende das **Prinzip der Unreduzierbarkeit**: Beziehe nur essentielle Knoten mit ein.
---
# Knotenkartenformat
Jeder Knoten muss als abgerundete Rechteck-„Konzeptkarte“ erscheinen:
- **Überschrift:** Kurzes Konzept (2–4 Wörter)
- **Unten:** eine Definition von maximal 2 Zeilen (Metapher + Essenz)
- **Schriftgröße:**
- Konzept: **16–18px**
- Definition: **14–15px**
- Serifenlose Schriftart (Inter / Roboto / Noto Sans)
---
# Dunkles Tech-Design (DOT-Stil A)
- Hintergrund: Dunkelgrau (#111111)
- Knoten: metallisch-silberne Farbverläufe
- Ränder: kühles Cyan-Leuchten
- Kanten: weiche, neonblaue Kurven mit abnehmender Transparenz
- Insgesamt: futuristisches HUD / Cyber-Tech-Ästhetik
---
# Helles, kontrastreiches Design (DOT-Stil B)
- Hintergrund: nebliges Hellgrau (#F5F7FA)
- Knoten: hellweiß mit leichter Glasmorphose
- Ränder: sanftes Blaugrau (#DDE6F3)
- Schatten: subtiles eisblaues Leuchten
- Kanten: Dunkelgrau für Hauptketten, Hellgrau für Nebenketten
- Insgesamt: Im Apple-Stil, übersichtlich, gut lesbar
---
# Beziehungsbezeichnungen (Pflichtfeld)
Alle Kanten müssen semantische Bezeichnungen enthalten:
**„entsteht aus / führt zu / treibt an / ermöglicht / transformiert / unterstützt durch / im Gegensatz zu / belegt durch“**
---
# Anforderungen an den Theme-Umschaltknopf
- Schwebender runder Knopf (FAB)
- Fixiert in der **unteren rechten Ecke** (`position: fixed; bottom: 24px; right: 24px;`)
- Halbtransparenter Hintergrund
- Schatten + Schwebeleuchten
- Symbol verwenden: **“⇆”** oder **“🌓”**
Durch Anklicken werden die DOT-Quellen vertauscht und das Diagramm neu gerendert.
---
# Technische Anforderungen
- Laden Sie viz.js und full.render.js vom unpkg CDN:
https://unpkg.com/viz.js@2.1.2/viz.js
https://unpkg.com/viz.js@2.1.2/full.render.js
- Die Ausgabe muss ein **vollständig eigenständiges HTML-Dokument** sein.
- Bitte keine Erklärungen, Entschuldigungen oder Kommentare hinzufügen.
- Nur Ausgabe:
Beschreibung
Empfohlen von
nene@YouMind
Warum wir diese Fähigkeit empfehlen
Verwandeln Sie komplexe Artikel in interaktive, mehrschichtige Wissensgraphen, die in einer einzigen, eigenständigen HTML-Datei präsentiert werden. Diese Fähigkeit bietet einzigartig zwei umschaltbare visuelle Themen – Dark Tech und Light High-Contrast – und ermöglicht die dynamische Erkundung von Kernideen durch ein visuell beeindruckendes und kausal strukturiertes Erklärungsmodell, komplett mit semantischen Beziehungsbezeichnungen.
Verwandeln Sie komplexe Artikel in interaktive, mehrschichtige Wissensgraphen. Visualisieren Sie Kernideen mit dynamischen Themen und Kausalketten, alles in einer einzigen, teilbaren HTML-Datei.
Ähnliche Fähigkeiten
Alle anzeigenForschungMindmap
Verwandeln Sie jede komplexe Inhalte – Artikel, Videos, PDFs – in klare, hierarchische Mindmaps. Visualisieren Sie Informationen sofort, erfassen Sie Kernkonzepte und beschleunigen Sie Ihr Lernen mühelos.
WebseiteTED-Stil-Präsentation
Verwandeln Sie Ihre Ideen in fesselnde Präsentationen im TED-Stil. Gestalten Sie überzeugende Geschichten und beeindruckende Visuals, die inspirieren und begeistern – und das mit nur einem Klick.
WebseiteErklärseiten-Builder
Ein Bericht erklärt. Eine Seite lässt Menschen selbst herausfinden. YouMind kann bereits Webseiten erstellen. Explorable Explainer entscheidet, was gebaut wird – er verwandelt ein Forschungsergebnis, einen Datensatz oder ein Thema in eine einzelne interaktive Seite in der Tradition von Newsroom-Grafiken und erkundbaren Erklärungen: scroll-getriebene Erzählung, echte Diagramme, Bedienelemente, die du bewegen kannst, Quellen, die du prüfen kannst. Es plant, bevor es codiert. Du genehmigst zuerst einen Bauplan: die eine Frage, die die Seite beantwortet, die Enthüllung – der Moment, in dem die Leserin oder der Leser „Oh!“ sagen soll – eine Scroll-Struktur aus fünf bis acht Abschnitten, zwei bis vier Interaktionen, die jeweils dadurch gerechtfertigt sind, was die Leserin oder der Leser durch die Bewegung lernt, und ein Datenvertrag, der jede Zahl und ihre Herkunft auflistet. Dann erstellt es eine einzelne eigenständige HTML-Datei ohne Build-Schritt. Semantisches Markup. Alle Zahlen in einer einzigen bearbeitbaren DATA-Konstante am Anfang. Scroll-Enthüllungen, die auf dem Handy nicht brechen. Jedes Bedienelement ist ein echtes, über die Tastatur bedienbares Formularelement mit Live-Text, der seinen aktuellen Wert beschreibt. Barrierefreiheit ist eingebaut und nicht nachgerüstet: 4,5:1-Kontrast, sichtbare Fokusringe, Alt-Texte überall, keine Bedeutung, die nur durch Farbe transportiert wird, reduzierte Bewegung wird respektiert, responsiv ab 360px. Vor der Übergabe führt es eine Selbstprüfung mit fünf Punkten durch und berichtet die Ergebnisse ehrlich: Kommt die Enthüllung wirklich an, liest sich die Seite auch ohne JavaScript, ist die Tab-Reihenfolge sinnvoll, ist jede Zahl nachvollziehbar, animiert etwas, das die Leserin oder der Leser stoppen möchte? Zwei Regeln, die es nicht bricht: Es erfindet nie Daten, um ein Diagramm gut aussehen zu lassen, und es sagt dir, wenn deine Zahlen deinem Entwurf widersprechen. Für Forschende, Analystinnen und Analysten, Journalistinnen und Journalisten, Lehrende, Indie-Gründerinnen und -Gründer sowie Beraterinnen und Berater, die möchten, dass ihre Arbeit erkundet statt nur überflogen wird.
Finde deine nächste Lieblingsfähigkeit
Entdecke weitere kuratierte KI-Fähigkeiten für Recherche, Kreativität und den Arbeitsalltag.