Das bekommst du
- Ein Offline-HTML-Diagramm mit Suche, Zoom, Verschieben und Detailbereich
- Das zugrunde liegende JSON-Modell, bereit für die Versionskontrolle
- Ein Build-Skript, das lose Kanten und Lücken im Hauptpfad findet
- Eine Textübersicht aller Beziehungen für Leser und Druck
- Optionales Titelbild für die Doku von PopNow, vorher beziffert
Gut für
- Onboarding-Dokumentation für einen Service oder ein Repository
- Eine Anfrage oder einen Job durch ein System verfolgen
- Workflows und Lebenszyklen für Design-Reviews
Nicht für
- Laufzeitverhalten, Last oder Ausfallfolgen belegen
- Hunderte Komponenten in einem Bild
- Pixelgenaue Diagramme für Präsentationen
So nutzt du ihn
In Claude oder ChatGPT
Nutze den PopNow-Skill „Interaktives Architekturdiagramm“ (interactive-architecture-diagram) dafür: Zeig, wie ein Datei-Upload durch dieses Repo läuft, vom Webformular bis zum Thumbnail-Worker.
In einem Coding-Agent
/popnow-interactive-architecture-diagram Zeig, wie ein Datei-Upload durch dieses Repo läuft, vom Webformular bis zum Thumbnail-Worker.
Dann probier
Markiere den externen Storage-Bucket als Vertrauensgrenze und baue neu.
Erstelle eine zweite Karte für den Lebenszyklus des Upload-Status.
Das solltest du bereithalten
- Die Frage, die das Diagramm beantworten soll
- Eine Beschreibung, Zugriff aufs Repository oder eine Komponentenliste
- Genaue Namen und Protokolle, die sich nicht ändern dürfen
Ähnliche Skills
Alle ansehen →3D-Avatar-Maker
+3Baue im Browser eine niedliche 3D-Figur im Plüschtier-Look und speichere sie als transparentes PNG oder 3D-Seite.
Kalender-Heatmap
+3Ein Jahr täglicher Aktivität als schattiertes Kalenderraster, mit Serien, Summen und Tastaturbedienung.
KI-SaaS-Landingpage
+3Warmes Sandpapier und feine Linien um ein lebendiges Kanban-Board, auf dem ein Assistent Aufgaben plant.
Animierte Hero-Section
+3Ein Landingpage-Hero mit sanft wechselndem Schlagwort, zwei Buttons und einem breiten Bildrahmen.
Shader-Hero-Website für Agenturen
+3Orange-Shader hinter großer Aussage, Pillen-Navigation und versetztem Raster mit Fallstudien.
Dunkle SaaS-Landingpage
+3Eine dunkle, bewegungsreiche Marketingseite für ein Softwareprodukt, geliefert als eine eigenständige HTML-Datei.
Designer-Portfolio-Website
+3Sechs geneigte Karten um eine verblassende Überschrift auf ruhigem Grau, eine rote Porträtkarte, Fallstudien.
Entwickler-Portfolio-Website
+3Eine dunkle persönliche Website für Entwickler mit Fallstudien, Artikeln, Vorträgen, Lebenslauf und Kontaktformular.
Redaktionelle SaaS-Website
+3Marineblauer geteilter Hero, Serifen-Überschrift neben einem Dokumentarbild, schräge Bänder, ein Kobaltakzent.
Glassmorphism-Website-Vorlage
+3Mattglas-Pillen auf Fastschwarz, große Serifen-Überschrift mit einem kursiven Wort und E-Mail-Anmeldung.
Website für Hardware-Produkte
+3Riesige haarlinige Modellnamen auf Silber-Studioaufnahmen, Datenkarten und eine maßstabsgetreue Reihe.
Interaktiver Raster-Hero
+3Dunkles Raster feiner Fäden, das sich zum Cursor neigt und bei jedem Klick einen Ring ausrollt.
Knowledge-Graph-Explorer
+3Mach aus Projektnotizen einen durchsuchbaren Offline-Graphen, in dem jede Aussage auf ihre Quellzeile verweist.
KPI-Dashboard-Vorlage
+3Vier KPI-Kacheln mit Veränderungs-Chips über einem leuchtenden Liniendiagramm, Aufschlüsselung und Zielbalken.
Landingpage aus KI-Mockups
+3Drei Entwürfe ganzer Seiten ansehen, einen wählen, dann baut dein Agent ihn als sauberen Code.
Magazin-Website-Vorlage
+3Eine Magazin-Website in Printqualität mit Artikeln, Themen, kleinem Shop und Abos, als eine HTML-Datei.
Partikel-Animations-Hero
+3Text auf warmem Papier neben einer drehenden Kugel aus Tinten- und Türkispunkten, die sich je Idee formt.
Persönliche Marken-Website
+3Ein Porträt, das in warmes Papier übergeht, darüber eine feine Klammer, daneben kurze und fette Aussagen.
Kinoreife Produkt-Launch-Seite
+3Fastschwarze Filmseite: Serifen-Titelkarte über gleitendem Licht, Letterbox-Nachtszene, Reservierungsformular.
Admin-Dashboard-Vorlage
+3Eine funktionierende Backoffice-Konsole mit Diagrammen, Tabellen, Kanban und Kalender, als eine Offline-HTML-Datei.
SaaS-Landingpage-Vorlage
+3Eine ruhige, helle Marketingseite für ein Softwareprodukt mit funktionierender Produktkonsole, Preisen und Registrierung.
Portfolio-Website im Scrapbook-Stil
+3Ein mehrseitiger Online-Lebenslauf aus Papierobjekten, mit Fallstudien und druckbarem Lebenslauf.
Sneaker-Shop-Website-Vorlage
+3Ein kompletter Schuh- oder Modeshop mit Katalog, Produktseiten, Warenkorb und Demo-Checkout in einer HTML-Datei.
Landingpage für Workflow-Automatisierung
+3Graphit-Seite mit kleiner Überschrift und einem lebenden Knotengraphen, der läuft und Logs streamt.
Fragen
Braucht das Diagramm Internet oder einen Diagrammdienst?
Nein. Das Ergebnis ist eine HTML-Datei mit allem inline. Sie öffnet sich von der Festplatte, funktioniert offline und stellt keine Netzwerkanfragen.
Woher weiß ich, welche Teile Vermutungen sind?
Jeder Kasten und jede Verbindung trägt einen Belegstatus: im Briefing angegeben, in einer Datei gesehen, abgeleitet oder unbekannt. Der Detailbereich zeigt ihn, wenn vorhanden mit Datei und Zeile.
Kann ich das Diagramm später bearbeiten?
Ja. Bearbeite das JSON-Modell und führe das Build-Skript erneut aus. Es prüft IDs, Verbindungen und den Hauptpfad, bevor es die neue Seite schreibt.
Was steuert PopNow hier bei?
Nur ein optionales Titel- oder Share-Bild für die Seite, auf der das Diagramm liegt, nachdem du den Preis gesehen hast. Das Diagramm wird nie von einem Bildmodell erzeugt.