AntV X6 Editorpar antvis

AntV X6 Editor Skill.

Créez une interface pour concevoir des diagrammes connectés, et pas seulement pour consulter un réseau déjà existant.

Éditeurs de diagrammes
Interfaces à nœuds
AntV

Télécharger OpenDesign Voir le guide d'utilisation

Revue de la source · AntV X6 EditorSKILL.md

Tâche Éditeurs de diagrammes Produit • Un JavaScript d'éditeur de diagrammes X6 avec nœuds et arêtes stylisés • Un ensemble délibéré de plugins d'éditeur et d'interactions de canevas • Un comportement de connexion, de cadrage et, en option, de sérialisation adapté à l'éditeur Avant de commencer Utilisez l'API @antv/x6 v3 documentée avec un canevas de navigateur et les plugins requis. La récupération de références supplémentaires nécessite un accès réseau. Vérifiez les exemples par rapport à votre version installée.

Résumé éditorial · source revue 2026-10-07 · pas un exemple généré

01 Fonctionnement

AntV X6 Editor : créer un canevas de diagramme

Un guide d'éditeur de diagrammes X6 v3 couvrant la construction impérative de nœuds et d'arêtes, la configuration explicite des plugins, la séparation des gestes et la récupération de références spécialisées.

Flux de travail fondé sur la sourcePas un benchmark d'exécution

La méthode de travail

AntV X6 Editor vise les outils de diagrammes interactifs tels que les éditeurs de flowcharts, de DAG, d'entité-relation, de lignage et d'organigrammes. L'entrée analysée cible X6 v3 et décrit une approche impérative : créer le graphe, ajouter nœuds et arêtes, puis enregistrer les plugins d'éditeur nécessaires aux opérations prévues.

Ce qui le distingue, c'est le comportement de l'éditeur. La sélection, l'historique, le presse-papiers, le clavier, le stencil, le glisser-déposer, les transformations et l'export exigent une configuration explicite ; le panoramique du canevas et le comportement des connexions relèvent d'une autre couche de configuration. La source renvoie aussi la sérialisation et les tâches propres aux ports vers des références détaillées. Elle ne transforme pas un flux dessiné en processus métier exécutable.

Livrables attendus

JavaScript d'éditeur de diagrammes X6 avec nœuds et arêtes stylisés
Un ensemble délibéré de plugins d'éditeur et d'interactions de canevas
Un comportement de connexion, de cadrage et, en option, de sérialisation adapté à l'éditeur

Voir l'exemple de brief

Du brief à la revue

01
Définir la tâche d'édition
Listez les objets du diagramme que les utilisateurs peuvent créer, déplacer, sélectionner, connecter et supprimer. Déterminez quelles opérations d'édition sont réellement nécessaires avant d'activer des plugins.
02
Construire le modèle nœuds-arêtes
Créez le graphe et ajoutez les formes et connexions requises. Consultez les indications dédiées pour les ports, les nœuds HTML personnalisés ou les structures imbriquées lorsque ces fonctions sont concernées.
03
Enregistrer les capacités de l'éditeur
Importez et enregistrez les plugins utilisés par l'implémentation. Gardez les options du constructeur, comme le panoramique et la connexion, distinctes des classes de plugins.
04
Vérifier la session d'édition
Testez les gestes de sélection, de panoramique, de zoom et de glisser pour détecter les conflits, cadrez le contenu et vérifiez tout chemin de sauvegarde/chargement ou d'export promis au lieu de supposer qu'il existe.

02 Cas d’usage

Quand l'utiliser

Utilisez l'API @antv/x6 v3 documentée avec un canevas de navigateur et les plugins requis. La récupération de références supplémentaires nécessite un accès réseau. Vérifiez les exemples par rapport à votre version installée.

Cas adaptés

Interfaces de création de fluxUtile lorsque les utilisateurs doivent construire ou modifier un diagramme nœuds-arêtes, et pas seulement inspecter un graphe existant.
Éditeurs de diagrammes métierLa source inclut des pistes pour les besoins ER, lignage, DAG, UML et organigrammes.
Débogage des interactions de l'éditeurSes règles d'enregistrement des plugins et de touches de modification aident à isoler les opérations manquantes et les gestes concurrents.

Limites à vérifier

Pas un moteur d'exécution de fluxLe périmètre documenté est l'édition de diagrammes. L'exécution métier, la persistance côté serveur et la validation métier nécessitent une implémentation distincte.
Pas G6 ni G2L'exploration de réseaux avec G6 et les graphiques statistiques G2 ont des objectifs et des API différents ; leurs modèles de rendu ne doivent pas être mélangés dans cet éditeur.
Hypothèses d'exécution propres à la sourceL'entrée prescrit des conventions v3, une sortie JavaScript et une gestion du conteneur pour son flux de travail. Validez ces hypothèses dans le paquet installé et l'environnement d'hébergement plutôt que de les présenter comme des contraintes universelles de la bibliothèque.

Éléments à fournir

Schéma du diagrammeFournissez les types de nœuds, les relations autorisées, les besoins en ports et les données initiales du diagramme.
Opérations d'éditionIndiquez si les utilisateurs ont besoin de sélection, d'annulation, de presse-papiers, de stencil, de redimensionnement, d'actions clavier ou d'export.
Environnement applicatifIndiquez la version de X6 installée, le conteneur du canevas, les interactions de la page environnante et les besoins de persistance.

03 Décisions importantes

Décisions importantes

Les capacités sont explicites
N'enregistrer que les plugins nécessaires met en évidence la différence entre un diagramme affiché et un éditeur opérationnel.
Chaque geste a un rôle distinct
La source utilise des touches de modification pour éviter que le panoramique, le zoom et la sélection par rectangle se disputent la même entrée.
Création et persistance sont différentes
Un diagramme visible ne prouve pas que l'état d'édition peut être sauvegardé et restauré. La sérialisation relève d'une référence et d'une vérification distinctes.

04 Exemple de brief

Essayer un brief ciblé

L'exemple de brief ci-dessous n'a pas été testé. Vérifiez la configuration du skill avant de l'utiliser.

Vérifier la configuration

Utilisez la source complète du skill antv-x6-editor comme guide et installez séparément l'environnement d'exécution du projet. Aucune commande d'installation universelle de skill n'a été vérifiée à partir de cette entrée.

Fichier source amont

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

Commencer par un livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d'exécuter le skill.

Exemple de brief

Utilisez antv-x6-editor pour prototyper un éditeur de flux d'approbation avec les types de nœuds fournis et les connexions autorisées. Inspectez d'abord notre version de X6. Implémentez la sélection et l'annulation avec un enregistrement explicite des plugins, des gestes de panoramique et de zoom séparés, et laissez l'exécution métier hors périmètre. Si la sauvegarde/le chargement JSON est inclus, suivez la référence de sérialisation et démontrez un aller-retour ; ne prétendez pas à une persistance côté serveur.

Inspecter le résultat

Comparez le résultat réel à ces critères observables.

Chaque opération d'édition utilisée dispose de la capacité requise, importée et enregistrée.
Le panoramique, le zoom, la sélection et la manipulation des nœuds ne se disputent pas le même geste.
Toute opération de sérialisation ou d'export promise est démontrée dans le projet réel.

OpenDesign fournit un espace de travail de conception local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus, ni que ses outils externes, identifiants et dépendances logicielles le sont.

Télécharger OpenDesign Lire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision de source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source: antvis
Dépôt: antvis/chart-visualization-skills
Fichier du skill: skills/antv-x6-editor/SKILL.md
Licence: MIT
Instantané revu: 2026-10-07 · a105fa12a9fa

Résumé éditorial de la source

Un guide d'éditeur de diagrammes X6 v3 couvrant la construction impérative de nœuds et d'arêtes, la configuration explicite des plugins, la séparation des gestes et la récupération de références spécialisées.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d'utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Pourquoi ne pas utiliser G6 pour le même diagramme ?

La source distingue le canevas modifiable de X6 et son API de création impératif du flux de visualisation de graphes de G6. Choisissez selon l'interaction dont les utilisateurs ont besoin, et pas seulement selon l'apparence du dessin.

Le panoramique et la sélection se configurent-ils de la même façon ?

Non. L'entrée sépare les options d'interaction du constructeur de plugins tels que Selection, qui doivent être enregistrés avant d'utiliser leurs méthodes.

L'ajout de nœuds nécessite-t-il un appel graph.render distinct ?

Les indications X6 v3 analysées indiquent que l'ajout de nœuds et d'arêtes est rendu automatiquement et déconseillent d'emprunter graph.render à G6. Vérifiez l'API installée lors de l'intégration.

OpenDesign

Faites de la place pour la prochaine itération de conception.

Gardez votre brief, vos sources et votre travail de conception ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l'ajouter à votre flux de travail.

Télécharger OpenDesign Parcourir les skills de design