AntV X6 Editordi antvis

AntV X6 Editor Skill.

Crea un'interfaccia per redigere diagrammi connessi, non solo per visualizzare una rete già esistente.

Editor di diagrammi
Interfacce a nodi
AntV

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · AntV X6 EditorSKILL.md

Attività Editor di diagrammi Produce • JavaScript di editor di diagrammi X6 con nodi e archi stilizzati • Un insieme ponderato di plugin dell'editor e interazioni della canvas • Comportamento di connessione, inquadratura e, facoltativamente, serializzazione adatto all'editor Prima di iniziare Usa l'API @antv/x6 v3 come documentata, con una canvas nel browser e i plugin richiesti. Il recupero di riferimenti aggiuntivi richiede l'accesso alla rete. Verifica gli esempi rispetto alla versione installata.

Sintesi editoriale · fonte esaminata 2026-10-07 · non è un esempio generato

01 Funzionalità

AntV X6 Editor: crea una canvas per diagrammi

Una guida per editor di diagrammi X6 v3 che copre la costruzione imperativa nodo-arco, la configurazione esplicita dei plugin, la separazione dei gesti e il recupero di riferimenti specialistici.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

L'approccio di lavoro

AntV X6 Editor è pensata per strumenti di diagrammi interattivi, come editor di flowchart, DAG, entità-relazione, lineage e organigrammi. La voce acquisita è rivolta a X6 v3 e descrive un approccio imperativo: creare il grafo, aggiungere nodi e archi, quindi registrare i plugin dell'editor necessari per le operazioni previste.

Il suo lavoro distintivo riguarda il comportamento dell'editor. Selezione, cronologia, appunti, tastiera, stencil, drag-and-drop, trasformazioni ed esportazione richiedono una configurazione esplicita; il panning della canvas e il comportamento delle connessioni appartengono a un diverso livello di configurazione. La fonte rimanda inoltre a riferimenti dettagliati per la serializzazione e per le attività specifiche delle porte. Non trasforma un flusso disegnato in un processo aziendale eseguibile.

Risultati attesi

JavaScript di editor di diagrammi X6 con nodi e archi stilizzati
Un insieme ponderato di plugin dell'editor e interazioni della canvas
Comportamento di connessione, inquadratura e, facoltativamente, serializzazione adatto all'editor

Vedi il brief di esempio

Dal brief alla revisione

01
Definisci l'attività di modifica
Elenca gli oggetti del diagramma che le persone possono creare, spostare, selezionare, collegare e rimuovere. Decidi quali operazioni dell'editor sono davvero necessarie prima di attivare i plugin.
02
Costruisci il modello nodo-arco
Crea il grafo e aggiungi le forme e le connessioni necessarie. Recupera le indicazioni dedicate per porte, nodi HTML personalizzati o strutture annidate quando queste funzionalità rientrano nell'ambito.
03
Registra le funzionalità dell'editor
Importa e registra i plugin usati dall'implementazione. Mantieni le opzioni del costruttore, come panning e connessione, separate dalle classi dei plugin.
04
Verifica la sessione di modifica
Testa i gesti di selezione, pan, zoom e trascinamento per individuare conflitti, inquadra il contenuto e verifica ogni percorso di salvataggio/caricamento o di esportazione promesso invece di darlo per scontato.

02 Quando usarlo

Quando usarla

Usa l'API @antv/x6 v3 come documentata, con una canvas nel browser e i plugin richiesti. Il recupero di riferimenti aggiuntivi richiede l'accesso alla rete. Verifica gli esempi rispetto alla versione installata.

Quando è adatta

Interfacce per creare flussi di lavoroUtile quando gli utenti devono costruire o modificare un diagramma nodo-arco, e non soltanto ispezionare un grafo esistente.
Editor di diagrammi di dominioLa fonte include indicazioni per requisiti ER, lineage, DAG, UML e organigrammi.
Debug dell'interazione nell'editorLe sue regole sulla registrazione dei plugin e sui modificatori di input aiutano a isolare operazioni mancanti e gesti in conflitto.

Limiti da verificare

Non è un motore di esecuzione di flussi di lavoroL'ambito documentato è la modifica di diagrammi. Esecuzione aziendale, persistenza lato server e validazione di dominio richiedono implementazioni separate.
Non è G6 né G2L'esplorazione di reti con G6 e i grafici statistici con G2 hanno scopi e API diversi; i rispettivi schemi di rendering non vanno mescolati in questo editor.
Presupposti di runtime specifici della fonteLa voce prescrive convenzioni v3, output JavaScript e gestione del contenitore per il proprio flusso di lavoro. Verifica questi presupposti nel pacchetto installato e nell'ambiente di hosting, senza presentarli come vincoli universali della libreria.

Cosa portare

Schema del diagrammaFornisci i tipi di nodo, le relazioni consentite, i requisiti delle porte e i dati iniziali del diagramma.
Operazioni di modificaIndica se gli utenti hanno bisogno di selezione, annullamento, appunti, stencil, ridimensionamento, azioni da tastiera o esportazione.
Ambiente applicativoFornisci la versione di X6 installata, il contenitore della canvas, le interazioni della pagina circostante e i requisiti di persistenza.

03 Decisioni importanti

Le decisioni che contano

Le funzionalità sono esplicite
Registrare solo i plugin necessari rende evidente la differenza tra un diagramma visualizzato e un editor operativo.
Ogni gesto ha un compito distinto
La fonte usa i modificatori per evitare che panning, zoom e selezione ad area competano per lo stesso input.
Creazione e persistenza sono diverse
Un diagramma visibile non prova che lo stato di modifica possa essere salvato e ripristinato. La serializzazione è un riferimento e una verifica separati.

04 Esempio di brief

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Rivedi la configurazione

Usa la fonte completa della skill antv-x6-editor come guida e installa separatamente il runtime del progetto. Da questa voce non è stato verificato alcun comando di installazione universale per la skill.

File sorgente originale

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

Parti da un solo risultato

Adatta ambito, materiale di partenza e vincoli di questo brief prima di eseguire la skill.

Brief di esempio

Usa antv-x6-editor per prototipare un editor di flussi di approvazione con i tipi di nodo e le connessioni consentite forniti. Controlla prima la nostra versione di X6. Implementa selezione e annullamento con registrazione esplicita dei plugin, gesti di pan e zoom separati, e lascia fuori ambito l'esecuzione aziendale. Se è incluso il salvataggio/caricamento JSON, segui il riferimento sulla serializzazione e dimostra un round trip; non dichiarare una persistenza lato backend.

Ispeziona il risultato

Confronta l'output effettivo con questi criteri osservabili.

Ogni operazione dell'editor usata ha la funzionalità richiesta importata e registrata.
Panning, zoom, selezione e manipolazione dei nodi non competono per lo stesso gesto.
Ogni operazione di serializzazione o esportazione promessa è dimostrata nel progetto reale.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che siano inclusi i suoi strumenti esterni, le credenziali e le dipendenze software.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte bloccata collegata qui sotto. Comportamento e requisiti upstream possono cambiare.

Proprietario della fonte: antvis
Repository: antvis/chart-visualization-skills
File della skill: skills/antv-x6-editor/SKILL.md
Licenza: MIT
Snapshot esaminato: 2026-10-07 · a105fa12a9fa

Sintesi editoriale della fonte

Una guida per editor di diagrammi X6 v3 che copre la costruzione imperativa nodo-arco, la configurazione esplicita dei plugin, la separazione dei gesti e il recupero di riferimenti specialistici.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non un dato sull'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Perché non usare G6 per lo stesso diagramma?

La fonte distingue la canvas modificabile di X6 e la sua API di creazione imperativa dal flusso di visualizzazione dei grafi di G6. Scegli in base all'interazione di cui gli utenti hanno bisogno, non solo all'aspetto dell'immagine.

Panning e selezione si configurano allo stesso modo?

No. La voce separa le opzioni di interazione a livello di costruttore da plugin come Selection, che devono essere registrati prima di usarne i metodi.

Aggiungere nodi richiede una chiamata graph.render separata?

La guida X6 v3 acquisita afferma che le aggiunte di nodi e archi vengono renderizzate automaticamente e avverte di non riprendere graph.render da G6. Durante l'integrazione verifica l'API installata.

OpenDesign

Fai spazio alla prossima iterazione di design.

Tieni brief, materiale di partenza e lavoro di design insieme in uno spazio di lavoro locale. Controlla la configurazione della skill prima di aggiungerla al tuo flusso di lavoro.

Scarica OpenDesign Sfoglia le skill di design