Mirofy

Was macht Mirofy?

Erstellen Sie ein eigenständiges, interaktives HTML-Diagramm aus einer kleinen, getypten JSON-Spezifikation. Statische Ausgabe ist der Standard; aktivieren Sie Bewegung nur, wenn der Benutzer nach einer Demo oder Präsentation fragt.

Scan-first: Das Diagramm aus einem echten Repository ableiten

Wenn das Diagramm existierenden Code beschreiben muss, verfassen Sie es nicht aus dem Gedächtnis. Leiten Sie es ab:

npm run scan      # Repository -> Evidenzgraph (Fakten und Lücken)
npm run model     # Evidenz + Dokumente -> ein Systemmodell
npm run compile   # Modell -> eine begrenzte Ansicht mit Absicht

Jeder Schritt berichtet, was er NICHT bestimmen konnte. scan zeichnet eine Lücke für jede Datei auf, die es nicht analysieren konnte; compile zeichnet jedes Objekt auf, das es ausgelassen hat, und warum. Tragen Sie diese an den Benutzer weiter; ein Diagramm, das stillschweigend die Hälfte eines Systems auslässt, ist schlimmer als eines, das sagt, was es weggelassen hat.

Verwenden Sie den schnellen Pfad unten, wenn der Benutzer etwas beschreibt, das noch nicht existiert, oder wenn kein Repository verfügbar ist.

Schneller Autorenpfad

Verwenden Sie diesen begrenzten Pfad für die gewöhnliche Generierung. Lesen Sie die optionale Viewer-Runtime-Referenz nur, wenn der Benutzer nach diesen Funktionen fragt.

1. Wählen Sie architecture, workflow, sequence, dataflow oder lifecycle aus der Frage.

2. Lesen Sie ein passendes Schema in schemas/, schemas/common.schema.json und ein passendes JSON-Beispiel in examples/. Lesen Sie nur diese Dateien. Frische Autorenschaft bedeutet neue stabile IDs, domänenspezifische Formulierungen und Layout; verwenden Sie das Beispiel für die Feldform, nicht für Fakten. Wenn die tatsächliche Produktidentität wichtig ist, führen Sie node bin/mirofy.mjs brands "<name>" --json aus; lesen Sie references/brand-marks.md nur für eine unbekannte Marke mit einer vom Benutzer bereitgestellten URL.

3. Artefakt zuerst: Die nächste Werkzeugaktion muss den Kandidaten schreiben. Schreiben Sie den Kandidaten, bevor Sie die Interna des Renderers inspizieren. Planen Sie keine genauen Koordinaten in Prosa. Beginnen Sie mit einem klaren Hauptpfad, kurzen Seitenzweigen, spärlichen Beschriftungen und maximal 12 primären Knoten. Setzen Sie meta.quality_profile auf "showcase", es sei denn, der Benutzer fordert explizit eine dichte standard-Karte an. Beginnen Sie mit automatischen Routen und Beschriftungen. Fügen Sie via, channelX, channelY oder labelAt erst hinzu, wenn eine Diagnose dies erfordert; wenden Sie höchstens eine diagnostizierte Geometriekontrolle pro Reparatur an.

4. Validieren Sie nach jeder Kandidatenbearbeitung und unmittelbar vor der Übergabe:

   node bin/mirofy.mjs validate <type> <candidate.json> --quality showcase --json
   

   Eine Quittung mit nur 4 Artefaktprüfungen ist grundlegende Validierung, niemals Showcase-Akzeptanz. Ein Showcase-Durchlauf muss alle 9 Artefaktprüfungen mit 0 Kompositionsfehlern und 0 Warnungen melden. Wenn der Kandidat das genaue meta.quality_profile-Feld auslässt oder falsch schreibt, korrigieren Sie es vor der Geometrie. Eine bestandene finale Validierung friert den Kandidaten ein: Bearbeiten Sie ihn danach nie wieder.

5. Für ein geliefertes HTML ist deliver der letzte Akzeptanzbefehl:

   node bin/mirofy.mjs deliver <type> <candidate.json> <output.html> --quality showcase --json
   

   Ein Exit-Code ungleich Null kann niemals als Erfolg beschrieben werden. Wenn die Validierung fehlschlägt, ändern Sie nur das diagnostizierte subject, verifizieren Sie evidence, wählen Sie aus supportedFixes und führen Sie erneut aus. Setzen Sie die fokussierte Korrektur fort, während die objektive Fehlerzahl ein neues Minimum erreicht. Wenn zwei aufeinanderfolgende Runden diese beste Anzahl nicht verbessern, stoppen Sie und berichten Sie die ungelösten Diagnosen wahrheitsgemäß.

Lesen Sie renderers/shared/geometry.mjs, Renderer-Quellcode, Validator-Quellcode, Tests oder Benchmarks nicht vor dem ersten Kandidaten. Inspizieren Sie die Implementierung nur für eine nicht unterstützte interne Diagnose oder nach zwei fehlgeschlagenen fokussierten Reparaturen.

Typ-Router

Typ	Verwendung für
architecture	Komponenten, Dienste, Cloud-/Sicherheitsgrenzen, Infrastruktur
workflow	Prozesse, Genehmigungsstellen, Tool-Aufrufe, Runbooks, CI/CD
sequence	API-Aufrufketten, Anforderungslebenszyklen, asynchrone Spuren, Rückgaben
dataflow	Pipelines, ETL/ELT, Linien, Governance, Verbraucher
lifecycle	Zustands-/Statusübergänge, Wiederholungen, wartende und Endzustände

Bei Unklarheit führen Sie node bin/mirofy.mjs guide "<scenario>" --json aus. Szenario-Belege sind strukturelle Referenzen, keine zu kopierenden Fakten.

Mermaid-Eingabe

node bin/mirofy.mjs import mermaid <input.mmd> [output.json] [--json]

flowchart/graph → architecture, sequenceDiagram → sequence, stateDiagram(-v2) → lifecycle.

Der Importer rät nie: Jede Zeile, die er nicht lesen kann, wird zu einer Lücke mit ihrer Zeilennummer, also berichten Sie, was nicht übertragen wurde, anstatt das Ergebnis als vollständig zu bezeichnen. Er weist auch keine Positionen zu – eine konvertierte Architektur verwendet layout.mode: "grid", und ein Fan-out kann eine Kante durch einen Knoten legen, was das immer aktive clean-flow-Gate fehlschlagen lässt. Validieren Sie immer nach dem Importieren. Lesen Sie die Quelle auch auf Bedeutung: Der Importer überträgt Topologie, keine Domänenbeurteilung, daher verdienen Beschriftungen und Typen oft eine Neufassung.

Reparieren von Geometrie

Wenn die Validierung überlappende Komponenten meldet, bearbeiten Sie Koordinaten nicht einzeln von Hand:

node bin/mirofy.mjs repair <type> <input.json> [output.json] --safe

--safe ist erforderlich, weil dies verfasste Koordinaten überschreibt. Reparatur verschiebt nur Komponenten, die an einer Überlappung beteiligt sind, jeweils um die kleinste Korrektur, die den 8-Pixel-Abstand des Validators freigibt, druckt eine Quittung jeder Anpassung und berührt nur Geometrie und nichts anderes – niemals eine Beschriftung, einen Typ, eine Verbindung oder eine ID. Es validiert erneut und benennt, was Verschiebung nicht beheben kann (Routing, Beschriftungspositionierung), anstatt es für den nächsten Lauf zur Wiederentdeckung zu hinterlassen.

Autoreninvarianten

• Ein offensichtlicher Hauptpfad; Seitenzweige verlassen den nächsten Knoten des Hauptpfads. Entfernen Sie Kanten mit niedrigem Wert, bevor Sie Routing-Steuerungen hinzufügen.
• Lassen Sie meta.visual_preset standardmäßig weg, damit jedes Diagramm im classic-Modus öffnet, unabhängig davon, ob sein aufgelöster Farbmodus hell oder dunkel ist. Farbmodus und visuelles Voreinstellung sind unabhängig: Das Umschalten zwischen Hell/Dunkel muss die aktuelle Voreinstellung beibehalten. Setzen Sie signal-flow, blueprint oder editorial nur, wenn der Benutzer explizit diesen visuellen Stil anfordert.
• Lassen Sie meta.subtitle standardmäßig weg. Erfinden Sie niemals einen Untertitel, der den Titel, Knoten oder Karten wiederholt; fügen Sie nur eine kurze unterstützende Zeile hinzu, wenn der Benutzer explizit danach fragt.
• Behandeln Sie den eigenständigen Desktop-Viewer standardmäßig als Artefakt für den gesamten Bildschirm, nicht als flachen Streifen. Generieren Sie ein responsives Artefakt für Laptops und externe Displays – niemals gerätespezifisches HTML oder alternative Topologie. Der Viewer darf nur die äußere Lesebreite von der Live-Viewport-Höhe anpassen; er muss die erstellte SVG/viewBox, Proportionen, semantische Geometrie und den normalen Dokumentenfluss beibehalten. Verwenden Sie auf einem breiten oder hohen Desktop ausreichend erstellten vertikalen Rhythmus, sodass das Diagramm-Panel und seine notwendigen Schlussfolgerungskarten den Bildschirm als ausgewogenes Ganzes einnehmen; Laufzeitskalierung kann ein überkomprimiertes Y-Layout oder eine zu kleine explizite meta.viewBox nicht reparieren. Öffnen Sie vor der Übergabe das echte HTML bei 1440×900, 1600×1000 und 1920×1080; überprüfen Sie zusätzlich 2048×1320, wenn die Komposition für ein großes Desktop-Display gedacht ist. Erfordern Sie document.documentElement.scrollWidth <= window.innerWidth und scrollHeight <= window.innerHeight bei jeder geprüften Größe, während Sie visuell überprüfen, dass das Diagramm beim größten geprüften Viewport bequem lesbar und vertikal ausgewogen bleibt. Reparieren Sie Überlauf, indem Sie nur wirklich redundante Inhalte entfernen oder Abstände komprimieren, bevor Sie Knoten, Beschriftungen oder das Hauptpanel verkleinern. Wenn der größte Viewport immer noch einen auffälligen leeren unteren Bereich bei der Viewer-Breitenbegrenzung aufweist, verteilen Sie die erstellten Y-Positionen neu und erhöhen Sie die viewBox-Höhe proportional; fügen Sie keine Füllkopien oder dekorativen Karten hinzu. Fälschen Sie niemals einen Durchlauf mit overflow: hidden, abgeschnittenen Inhalten, einem internen Diagramm-Scroller, gedehnter SVG-Höhe oder kleinerer Typografie. Schmale/Mobile-Layouts können vertikal scrollen, wenn der Container dies erfordert.
• Lassen Sie meta.legend für die wahrheitsgetreue auto-Voreinstellung weg. Wenn erforderlich, verwenden Sie nur mode: auto|all|hidden und vom Renderer unterstützte entries.<kind>.label|visible; Beschriftungen ändern niemals die Semantik.
• Wählen Sie eine primäre erstellte Sprache aus einer expliziten Benutzerwahl; andernfalls folgen Sie der dominierenden Sprache der Anfrage oder Konversation. meta.locale steuert nur die Viewer-Benutzeroberfläche des Renderers: Verwenden Sie "en" oder "zh-CN" für die entsprechende unterstützte primäre Sprache. Für jede andere Sprache lassen Sie meta.locale weg und legen explizit offen, dass die feste Viewer-Benutzeroberfläche und <html lang> auf Englisch zurückfallen. Der Renderer übersetzt niemals erstellte Inhalte. Siehe references/authoring-contract.md für Details.
• Bewahren Sie genaue Produktnamen, Code-Identifikatoren, Befehle, Protokolle, API-Pfade und Umgebungsnamen. Sie können innerhalb lokalisierter Kopien Englisch bleiben, aber rechtfertigen Sie niemals, die umgebende erklärende Prosa in einer anderen Sprache zu belassen.
• Markenidentität ist optional und explizit. Setzen Sie eine kanonische integrierte ID in brand, wenn der Knoten dieses reale Produkt benennt. Wenn keine Voreinstellung übereinstimmt und der Benutzer die offizielle HTTP(S)-URL bereitgestellt hat, führen Sie zuerst node bin/mirofy.mjs brands capture "<url>" --json aus, dann erstellen Sie das zurückgegebene Digest-gebundene brand-Objekt. Rendern und Validieren führen niemals eine ungebundene Aufnahme durch. Andernfalls lassen Sie brand weg. Leiten Sie niemals eine Marke aus einer vagen Rolle wie "Datenbank" ab, und lassen Sie niemals ein Abzeichen die semantische type, Beschriftung oder Beziehungsfakten ersetzen.
• Für Sequenzdiagramme lassen Sie meta.column_fit für das stabile fixed-Layout weg. Setzen Sie es auf "spread", wenn eine breite viewBox sonst ungenutzten horizontalen Platz lässt oder wenn sinnvolle Teilnehmerbeschriftungen nicht in die festen Boxen passen; kürzen Sie semantische Beschriftungen nicht, bevor Sie spread versuchen.
• Komponententypen sind frontend, backend, database, cloud, security, messagebus und external; Varianten sind default, emphasis, security und dashed.
• Beziehungsbeschriftungen sind semantische Daten. Wenn eine kollidiert, verschieben Sie die Beschriftung, passen Sie die Route oder den Abstand an, dann kürzen Sie die Formulierung unter Beibehaltung der Bedeutung. Löschen Sie eine Beschriftung nur, wenn beide Endpunkte die Beziehung vollständig implizieren und sie kein Protokoll, keine Aktion, Richtung, synchrones/asynchrones Verhalten oder grenzüberschreitenden Mechanismus enthält; erklären Sie, warum die gelöschte Beschriftung redundant ist. Löschen Sie niemals eine sinnvolle Beschriftung nur, um showcase zu bestehen.
• Lassen Sie meta.engineering_profile standardmäßig weg. Region, Cluster und Sicherheitsgrenzenbezeichnungen allein aktivieren es nicht. Aktivieren Sie deployment-ownership nur, wenn der Benutzer explizit nach einer Produktionsbereitstellungstopologie, Eigentumsübergabe oder Fail-Closed-Bereitstellungsüberprüfung fragt und die Quellfakten bekannt sind. Einmal aktiviert, darf das Engineering-Profil nicht entfernt werden, nur um die Validierung zu bestehen; reparieren Sie die Fakten oder berichten Sie die Diagnosen wahrheitsgemäß.
• Abstand bedeutet klaren Abstand, nicht Mittelpunktabstand. Für eine Beziehungsbeschriftung muss der klare Abstand ihre gemessene Maskenbreite überschreiten; verwenden Sie die beschriftungserhaltende Reparaturreihenfolge, bevor Sie eine Löschung in Betracht ziehen.
• Automatische Routen besitzen ihre Endpunktseiten. Eine Seite ist ein Richtungsvertrag: Das erste und letzte Segment müssen senkrecht zu dieser Seite verlassen/eintreten.
• Automatische Portverteilung ist ein standardmäßiges Renderer-Verhalten für Architektur, Workflow, Datenfluss und Lebenszyklus. Es überspringt einzelne Beziehungen und explizite via, channelX, channelY, labelAt oder nicht-auto-Routen. Nahe parallele Ports verwenden eine Außenbrücke, damit automatisches Routing kein Segment unter 8px oder eine innere Kurve unter 16px erzeugen kann. Architektur hält separat ungehinderte automatische Ports (links/rechts oder oben/unten) auf einer gemeinsamen Achse, wenn ihr Versatz unter 16px liegt und beide Ports Eckfreiheit behalten. Wenn genau ein Endpunkt verteilt wurde, darf nur der nicht geteilte Endpunkt auf diese Achse wandern; wenn beide Endpunkte verteilt wurden, behalten Sie die Außenbrücke bei, damit konkurrierende Ports unterschiedlich bleiben.
• Akzeptieren Sie niemals eine Kante, die einen nicht verwandten undurchsichtigen Knoten, einen mehrdeutigen gemeinsamen Korridor oder eine Beziehungsbeschriftung, die eine andere Route maskiert, kreuzt.

Lesen Sie references/authoring-contract.md nur, wenn Sie Feldeinträge, Abstandsberechnungen, automatische Portplatzierung, Geometriereparaturregeln, Repository-Evidenz oder modus-spezifische Platzierung benötigen.

Lieferung

Verwenden Sie validate während der Reparatur und deliver einmal für die endgültige Akzeptanz. Die Lieferung friert die genauen Spezifikationsbytes in einem privaten Schnappschuss im selben Verzeichnis ein, rendert und überprüft diesen Schnappschuss, committed das HTML atomar und meldet SHA-256 plus Byteanzahlen für Spezifikation und Artefakt.

Sammeln Sie nach der Lieferung begrenzte Desktop-Evidenz, ohne das vertrauenswürdige HTML zu ändern oder neu zu rendern:

node bin/mirofy.mjs visual-check <output.html> --json

visual-check misst Containment bei 1440×900, 1600×1000, 1920×1080 und 2048×1320; macht Hell-/Dunkel-Screenshots bei der kleinsten und größten Größe; und schreibt ein relatives Pfad-Kontaktblatt plus JSON-Seitencars neben das Artefakt. Seine automatisierte Quittung meldet immer visualReview: "pending": Screenshots sind Beweise für die Inspektion, niemals eine automatische Glanzbehauptung. Exit 0 bedeutet, dass Containment und Aufnahmen bestanden wurden; 1 bedeutet Überlauf oder Aufnahmefehler; 2 bedeutet, dass Chrome/Chromium nicht verfügbar war und die Quittung skipped ist. Der Befehl ändert niemals das gelieferte HTML. Fügen Sie --open nur hinzu, wenn der Benutzer eine sofortige lokale Vorschau wünscht. Für eine aktive Desktop-Autorenumgebung ist der optionale Befehl:

node bin/mirofy.mjs preview <type> <input>.json <output>.html --quality showcase

Starten Sie niemals standardmäßig eine Vorschau. Lesen Sie references/delivery-contract.md bei Verwendung von Vorschau, Repository-Evidenz, Exportquittungen, visueller Überprüfung oder nach dem Commit-Öffnen.

Optionale Viewer-Funktionen

Generiertes HTML enthält bereits Themenwechsel, Schwenken/Zoomen, Suche, Fokus, Beziehungsverfolgung, semantische Ansichten, Präsentation und wahrheitsgetreue Exporte. Dies sind Leserfunktionen, keine zusätzliche Autorenarbeit. meta.animation: "trace" ist Opt-in; meta.views ist optional und sollte höchstens fünf kuratierte Kapitel enthalten. Lesen Sie references/viewer-runtime.md nur, wenn der Benutzer explizit nach Share Cards, Route/Reach-Karten, Bewegung, geführten Geschichten, Deep Links, Präsentation, Suche/Fokus oder einer anderen Viewer-Runtime-Funktion fragt.

Einrichtung und Fallback

**Die Installation des Skills ist optional. **

…

[gekürzt für Übersetzung]