102.3K+Download
Zur Nutzungsanleitung springen
AntV X6 Editorvon antvis

AntV X6 Editor Skill.

Erstelle eine Oberfläche zum Erstellen verbundener Diagramme, nicht nur zum Ansehen eines bereits vorhandenen Netzwerks.

  • Diagrammeditoren
  • Knotenoberflächen
  • AntV
OpenDesign herunterladenNutzungsanleitung ansehen
Quellenprüfung · AntV X6 EditorSKILL.md
Aufgabe Diagrammeditoren Ergebnis • X6-Diagrammeditor-JavaScript mit gestalteten Knoten und Kanten • Eine gezielte Auswahl an Editor-Plugins und Canvas-Interaktionen • Verbindungs-, Ausschnitts- und optionales Serialisierungsverhalten passend zum Editor Vor dem Start Verwende die dokumentierte @antv/x6-v3-API mit einer Browser-Canvas und den erforderlichen Plugins. Das Abrufen weiterer Referenzen erfordert Netzwerkzugriff. Prüfe die Beispiele gegen deine installierte Version.
Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-07 · kein generiertes Beispiel

01 Funktionen

AntV X6 Editor: Eine Diagramm-Canvas erstellen

Ein Leitfaden für X6-v3-Diagrammeditoren zu imperativem Aufbau von Knoten und Kanten, expliziter Plugin-Einrichtung, Trennung von Gesten und gezieltem Abruf spezieller Referenzen.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

AntV X6 Editor richtet sich an interaktive Diagramm-Tools wie Flussdiagramm-, DAG-, Entity-Relationship-, Lineage- und Organigramm-Editoren. Der erfasste Eintrag zielt auf X6 v3 und beschreibt einen imperativen Ansatz: Graph erstellen, Knoten und Kanten hinzufügen und dann die Editor-Plugins registrieren, die für die vorgesehenen Operationen nötig sind.

Das Besondere ist das Editorverhalten. Auswahl, Verlauf, Zwischenablage, Tastatur, Stencil, Drag-and-drop, Transformationen und Export erfordern eine explizite Einrichtung; Canvas-Verschieben und Verbindungsverhalten gehören zu einer anderen Konfigurationsebene. Die Quelle verweist außerdem für Serialisierung und portspezifische Aufgaben auf detaillierte Referenzen. Ein gezeichneter Ablauf wird dadurch nicht zu einem ausführbaren Geschäftsprozess.

Erwartete Ergebnisse

  • X6-Diagrammeditor-JavaScript mit gestalteten Knoten und Kanten
  • Eine gezielte Auswahl an Editor-Plugins und Canvas-Interaktionen
  • Verbindungs-, Ausschnitts- und optionales Serialisierungsverhalten passend zum Editor
Beispielbriefing ansehen

Vom Briefing zur Prüfung

  1. 01
    Die Bearbeitungsaufgabe definieren

    Liste die Diagrammobjekte auf, die Personen erstellen, verschieben, auswählen, verbinden und entfernen können. Lege fest, welche Editor-Operationen wirklich nötig sind, bevor du Plugins aktivierst.

  2. 02
    Das Knoten-Kanten-Modell aufbauen

    Erstelle den Graph und füge die benötigten Formen und Verbindungen hinzu. Rufe gezielte Anleitungen für Ports, benutzerdefinierte HTML-Knoten oder verschachtelte Strukturen ab, wenn diese Funktionen im Umfang liegen.

  3. 03
    Editor-Funktionen registrieren

    Importiere und registriere die Plugins, die die Implementierung nutzt. Halte Konstruktoroptionen wie Verschieben und Verbinden getrennt von Plugin-Klassen.

  4. 04
    Die Bearbeitungssitzung prüfen

    Teste Auswahl-, Verschiebe-, Zoom- und Drag-Gesten auf Konflikte, rahme den Inhalt ein und prüfe jeden zugesagten Speicher-/Lade- oder Exportpfad, statt anzunehmen, dass er existiert.

02 Einsatzbereiche

Wann du es einsetzt

Verwende die dokumentierte @antv/x6-v3-API mit einer Browser-Canvas und den erforderlichen Plugins. Das Abrufen weiterer Referenzen erfordert Netzwerkzugriff. Prüfe die Beispiele gegen deine installierte Version.

Gut geeignet

  • Oberflächen zum Erstellen von WorkflowsNützlich, wenn Nutzende ein Knoten-Kanten-Diagramm erstellen oder ändern müssen, statt nur einen bestehenden Graphen anzusehen.
  • Fachspezifische DiagrammeditorenDie Quelle enthält Verweise für ER-, Lineage-, DAG-, UML- und Organigramm-Anforderungen.
  • Debugging von Editor-InteraktionenDie Regeln zur Plugin-Registrierung und zu Eingabe-Modifikatoren helfen, fehlende Operationen und konkurrierende Gesten einzugrenzen.

Grenzen, die du prüfen solltest

  • Keine Engine zur Workflow-AusführungDer dokumentierte Umfang ist das Bearbeiten von Diagrammen. Geschäftsausführung, serverseitige Persistenz und fachliche Validierung erfordern eine separate Implementierung.
  • Nicht G6 oder G2G6 für die Netzwerkerkundung und G2 für statistische Diagramme haben andere Zwecke und APIs; ihre Rendering-Muster sollten nicht in diesen Editor übernommen werden.
  • Quellenspezifische LaufzeitannahmenDer Eintrag schreibt für seinen Workflow v3-Konventionen, JavaScript-Ausgabe und Container-Handling vor. Prüfe diese Annahmen im installierten Paket und in der Hosting-Umgebung, statt sie als allgemeine Bibliotheksvorgaben darzustellen.

Diese Eingaben bereithalten

  • DiagrammschemaGib Knotentypen, erlaubte Beziehungen, Port-Anforderungen und anfängliche Diagrammdaten an.
  • BearbeitungsoperationenGib an, ob Nutzende Auswahl, Rückgängig, Zwischenablage, ein Stencil, Größenänderung, Tastaturaktionen oder Export brauchen.
  • AnwendungsumgebungNenne die installierte X6-Version, den Canvas-Container, die umgebenden Seiteninteraktionen und die Anforderungen an die Persistenz.

03 Wichtige Entscheidungen

Wichtige Entscheidungen

  1. Funktionen sind explizit

    Nur die benötigten Plugins zu registrieren, macht den Unterschied zwischen einem angezeigten Diagramm und einem funktionsfähigen Editor sichtbar.

  2. Gesten haben getrennte Aufgaben

    Die Quelle nutzt Modifikatortasten, damit Verschieben, Zoomen und Gummiband-Auswahl nicht um dieselbe Eingabe konkurrieren.

  3. Erstellen und Persistenz sind verschieden

    Ein sichtbares Diagramm belegt nicht, dass der Bearbeitungszustand gespeichert und wiederhergestellt werden kann. Serialisierung ist eine eigene Referenz- und Verifikationsaufgabe.

04 Beispielbriefing

Mit einem fokussierten Briefing testen

Das folgende Beispielbriefing wurde nicht getestet. Prüfe die Einrichtung des Skills, bevor du es verwendest.

Einrichtung prüfen

Verwende die vollständige Quelle des antv-x6-editor-Skills als Anleitung und installiere die Projekt-Laufzeit separat. Aus diesem Eintrag wurde kein universeller Skill-Installationsbefehl verifiziert.

Upstream-Quelldatei
https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-x6-editor/SKILL.md

Verwende die dokumentierte @antv/x6-v3-API mit einer Browser-Canvas und den erforderlichen Plugins. Das Abrufen weiterer Referenzen erfordert Netzwerkzugriff. Prüfe die Beispiele gegen deine installierte Version.

Mit einem Ergebnis beginnen

Passe Umfang, Quellenmaterial und Vorgaben in diesem Briefing an, bevor du den Skill ausführst.

Beispielbriefing
Verwende antv-x6-editor, um einen Editor für Genehmigungsabläufe mit den vorgegebenen Knotentypen und erlaubten Verbindungen zu prototypen. Prüfe zuerst unsere X6-Version. Implementiere Auswahl und Rückgängig mit expliziter Plugin-Registrierung, trenne Verschieben und Zoomen als Gesten und lasse die Geschäftsausführung außerhalb des Umfangs. Falls JSON-Speichern/-Laden enthalten ist, folge der Serialisierungsreferenz und zeige einen vollständigen Hin-und-zurück-Durchlauf; behaupte keine Backend-Persistenz.

Das Ergebnis prüfen

Prüfe das tatsächliche Ergebnis anhand dieser beobachtbaren Kriterien.

  • Jede verwendete Editor-Operation hat die erforderliche importierte und registrierte Funktion.
  • Verschieben, Zoomen, Auswahl und Knotenmanipulation konkurrieren nicht um dieselbe Geste.
  • Jede zugesagte Serialisierungs- oder Exportoperation wird im tatsächlichen Projekt demonstriert.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agents. Diese Auflistung bedeutet nicht, dass der Skill gebündelt ist oder dass seine externen Tools, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladenSchnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte fixierte Quellrevision. Upstream-Verhalten und Anforderungen können sich ändern.

Quelleninhaber
antvis
Repository
antvis/chart-visualization-skills
Skill-Datei
skills/antv-x6-editor/SKILL.md
Lizenz
MIT
Geprüfter Stand
2026-10-07 · a105fa12a9fa
Redaktionelle Quellenzusammenfassung
Ein Leitfaden für X6-v3-Diagrammeditoren zu imperativem Aufbau von Knoten und Kanten, expliziter Plugin-Einrichtung, Trennung von Gesten und gezieltem Abruf spezieller Referenzen.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Popularitätssignal, weder Skill-Nutzung noch Qualitätswert.

06 Fragen vor dem Start

Fragen vor dem Start

Warum nicht G6 für dasselbe Diagramm verwenden?

Die Quelle unterscheidet die bearbeitbare Canvas und die imperative Erstellungs-API von X6 vom Graph-Visualisierungs-Workflow von G6. Wähle nach der Interaktion, die Nutzende brauchen, nicht nur danach, wie das Bild aussieht.

Werden Verschieben und Auswahl gleich konfiguriert?

Nein. Der Eintrag trennt Interaktionsoptionen auf Konstruktorebene von Plugins wie Selection, die registriert sein müssen, bevor ihre Methoden verwendet werden.

Braucht das Hinzufügen von Knoten einen separaten Aufruf von graph.render?

Die erfasste X6-v3-Anleitung besagt, dass hinzugefügte Knoten und Kanten automatisch gerendert werden, und warnt davor, graph.render aus G6 zu übernehmen. Prüfe bei der Integration die installierte API.

OpenDesign

Schaffe Raum für die nächste Design-Iteration.

Halte Briefing, Quellmaterial und Designarbeit in einem lokalen Arbeitsbereich zusammen. Prüfe die eigene Einrichtung des Skills, bevor du ihn in deinen Workflow aufnimmst.

OpenDesign herunterladenDesign-Skills durchsuchen
Upstream-Quelldatei
https://github.com/antvis/chart-visualization-skills/blob/a105fa12a9fa41fccccc2eba7f4b34973628f5d3/skills/antv-x6-editor/SKILL.md