AntV X6 Editoryazan antvis

AntV X6 Editor Skill.

Yalnızca mevcut bir ağı görüntülemek için değil, birbirine bağlı diyagramlar oluşturmak için bir arayüz hazırlayın.

Diyagram Editörleri
Düğüm Arayüzleri
AntV

OpenDesign İndir Kullanım Kılavuzunu Gör

Kaynak İncelemesi · AntV X6 EditorSKILL.md

Görev Diyagram Editörleri Çıktı • Biçimlendirilmiş düğüm ve kenarlara sahip X6 diyagram editörü JavaScript • Bilinçli seçilmiş bir editör eklentisi ve tuval etkileşimi kümesi • Editöre uygun bağlantı, çerçeveleme ve isteğe bağlı serileştirme davranışı Başlamadan Önce Bir tarayıcı tuvali ve gerekli eklentilerle birlikte belgelenmiş @antv/x6 v3 API kullanın. Ek referansları almak için ağ erişimi gerekir. Örnekleri kurulu sürümünüzle karşılaştırın.

Editoryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

AntV X6 Editor: Diyagram Tuvali Oluşturun

Zorunlu (imperative) düğüm-kenar oluşturmayı, açık eklenti kurulumunu, hareket ayrımını ve özel referans erişimini kapsayan bir X6 v3 diyagram editörü kılavuzu.

Kaynağa dayalı iş akışıÇalıştırma kıyaslaması değildir

Çalışma Yaklaşımı

AntV X6 Editor, akış şeması, DAG, varlık-ilişki, soy ağacı (lineage) ve organizasyon şeması editörleri gibi etkileşimli diyagram araçlarını hedefler. Alınan girdi X6 v3'ü hedefler ve zorunlu bir yaklaşımı tarif eder: grafiği oluşturun, düğüm ve kenarları ekleyin, ardından amaçlanan işlemler için gereken editör eklentilerini kaydedin.

Ayırt edici işi editör davranışıdır. Seçim, geçmiş, pano, klavye, stencil, sürükle-bırak, dönüşümler ve dışa aktarma açık kurulum gerektirir; tuval kaydırma ve bağlantı davranışı ise farklı bir yapılandırma katmanına aittir. Kaynak ayrıca serileştirme ve porta özgü görevleri ayrıntılı referanslara yönlendirir. Çizilmiş bir iş akışını çalıştırılabilir bir iş sürecine dönüştürmez.

Beklenen Çıktılar

Biçimlendirilmiş düğüm ve kenarlara sahip X6 diyagram editörü JavaScript
Bilinçli seçilmiş bir editör eklentisi ve tuval etkileşimi kümesi
Editöre uygun bağlantı, çerçeveleme ve isteğe bağlı serileştirme davranışı

Örnek Brife Bak

Brifden İncelemeye

01
Düzenleme Görevini Tanımlayın
Kişilerin oluşturabileceği, taşıyabileceği, seçebileceği, bağlayabileceği ve silebileceği diyagram nesnelerini listeleyin. Eklentileri etkinleştirmeden önce hangi editör işlemlerinin gerçekten gerekli olduğuna karar verin.
02
Düğüm-Kenar Modelini Oluşturun
Grafiği oluşturun ve gerekli şekilleri ile bağlantıları ekleyin. Kapsamda portlar, özel HTML düğümleri veya iç içe yapılar varsa bunlar için ayrı kılavuzu alın.
03
Editör Yeteneklerini Kaydedin
Uygulamanın kullandığı eklentileri içe aktarıp kaydedin. Kaydırma ve bağlanma gibi yapıcı seçeneklerini eklenti sınıflarından ayrı tutun.
04
Düzenleme Oturumunu Kontrol Edin
Seçim, kaydırma, yakınlaştırma ve sürükleme hareketlerini çakışmalar açısından test edin, içeriği çerçeveleyin ve vaat edilen kaydetme/yükleme veya dışa aktarma yolunu var saymak yerine doğrulayın.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Bir tarayıcı tuvali ve gerekli eklentilerle birlikte belgelenmiş @antv/x6 v3 API kullanın. Ek referansları almak için ağ erişimi gerekir. Örnekleri kurulu sürümünüzle karşılaştırın.

Uygun Kullanım

İş Akışı Oluşturma ArayüzleriKullanıcıların yalnızca mevcut bir grafiği incelemek yerine düğüm-kenar diyagramı oluşturması veya değiştirmesi gerektiğinde işe yarar.
Alana Özgü Diyagram EditörleriKaynak; ER, soy ağacı (lineage), DAG, UML ve organizasyon şeması gereksinimleri için yönlendirmeler içerir.
Editör Etkileşimi Hata AyıklamaEklenti kaydı ve girdi değiştirici kuralları, eksik işlemleri ve birbiriyle çakışan hareketleri ayrıştırmaya yardımcı olur.

Kontrol Edilecek Sınırlar

İş Akışı Çalıştırma Motoru DeğildirBelgelenen kapsam diyagram düzenlemedir. İş yürütme, sunucu tarafı kalıcılık ve alan doğrulaması ayrı uygulama gerektirir.
G6 veya G2 DeğildirG6 ağ keşfi ile G2 istatistiksel grafikleri farklı amaç ve API'lere sahiptir; bunların oluşturma kalıpları bu editörle karıştırılmamalıdır.
Kaynağa Özgü Çalışma Zamanı VarsayımlarıGirdi, iş akışı için v3 kurallarını, JavaScript çıktısını ve kapsayıcı (container) yönetimini öngörür. Bu varsayımları, kütüphanenin evrensel kısıtlarıymış gibi sunmak yerine kurulu pakette ve barındırma ortamında doğrulayın.

Bu Girdileri Getirin

Diyagram ŞemasıDüğüm türlerini, izin verilen ilişkileri, port gereksinimlerini ve başlangıç diyagram verisini sağlayın.
Düzenleme İşlemleriKullanıcıların seçim, geri alma, pano, stencil, yeniden boyutlandırma, klavye eylemleri veya dışa aktarmaya ihtiyaç duyup duymadığını belirtin.
Uygulama OrtamıKurulu X6 sürümünü, tuval kapsayıcısını, çevredeki sayfa etkileşimlerini ve kalıcılık gereksinimlerini belirtin.

03 Önemli Kararlar

Önemli Kararlar

Yetenekler Açıktır
Yalnızca gerekli eklentileri kaydetmek, görüntülenen bir diyagramla işlevsel bir editör arasındaki farkı görünür kılar.
Hareketlerin Ayrı Görevleri Vardır
Kaynak, kaydırma, yakınlaştırma ve lastik bant seçiminin aynı girdi için yarışmasını önlemek üzere değiştirici tuşlar kullanır.
Oluşturma ve Kalıcılık Farklıdır
Görünür bir diyagram, düzenleme durumunun kaydedilip geri yüklenebileceğinin kanıtı değildir. Serileştirme ayrı bir referans ve doğrulama görevidir.

04 Örnek Görev Tanımı

Odaklı Bir Brif Deneyin

Aşağıdaki örnek brif test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kurulumu İnceleyin

Tam antv-x6-editor Skill kaynağını rehber olarak kullanın ve proje çalışma zamanını ayrıca kurun. Bu girdiden doğrulanmış evrensel bir Skill kurulum komutu yoktur.

Yukarı Akış Kaynak Dosyası

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

Bir tarayıcı tuvali ve gerekli eklentilerle birlikte belgelenmiş @antv/x6 v3 API kullanın. Ek referansları almak için ağ erişimi gerekir. Örnekleri kurulu sürümünüzle karşılaştırın.

Tek Bir Çıktıyla Başlayın

Skill'i çalıştırmadan önce bu brifteki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brif

Verilen düğüm türleri ve izin verilen bağlantılarla bir onay akışı editörünün prototipini çıkarmak için antv-x6-editor kullanın. Önce X6 sürümümüzü inceleyin. Seçim ve geri almayı açık eklenti kaydıyla uygulayın, kaydırma ve yakınlaştırma hareketlerini ayırın ve iş yürütmeyi kapsam dışında tutun. JSON kaydetme/yükleme dahil edilirse serileştirme referansını izleyin ve bir gidiş-dönüş gösterin; arka uç kalıcılığı iddia etmeyin.

Sonucu İnceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

Kullanılan her editör işlemi için gerekli yetenek içe aktarılmış ve kaydedilmiştir.
Kaydırma, yakınlaştırma, seçim ve düğüm manipülasyonu aynı hareket için çekişmez.
Vaat edilen her serileştirme veya dışa aktarma işlemi gerçek projede gösterilir.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, skill'in paketle birlikte geldiği veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının dahil olduğu anlamına gelmez.

OpenDesign İndir Hızlı Başlangıcı Oku

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Yukarı akış davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi: antvis
Depo: antvis/chart-visualization-skills
Skill Dosyası: skills/antv-x6-editor/SKILL.md
Lisans: MIT
İncelenen Anlık Görüntü: 2026-10-07 · a105fa12a9fa

Editoryal Kaynak Özeti

Zorunlu (imperative) düğüm-kenar oluşturmayı, açık eklenti kurulumunu, hareket ayrımını ve özel referans erişimini kapsayan bir X6 v3 diyagram editörü kılavuzu.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; skill kullanımı veya kalite puanı değildir.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorular

Aynı diyagram için neden G6 kullanılmıyor?

Kaynak, X6'nın düzenlenebilir tuvali ve zorunlu (imperative) oluşturma API'sini G6'nın grafik görselleştirme iş akışından ayırır. Seçimi yalnızca görüntünün nasıl göründüğüne göre değil, kullanıcıların ihtiyaç duyduğu etkileşime göre yapın.

Kaydırma ve seçim aynı şekilde mi yapılandırılır?

Hayır. Girdi, yapıcı düzeyindeki etkileşim seçeneklerini, yöntemleri kullanılmadan önce kaydedilmesi gereken Selection gibi eklentilerden ayırır.

Düğüm eklemek ayrı bir graph.render çağrısı gerektirir mi?

Alınan X6 v3 kılavuzu, düğüm ve kenar eklemelerinin otomatik olarak oluşturulduğunu söyler ve G6'dan graph.render almaya karşı uyarır. Entegrasyon sırasında kurulu API sürümünü kontrol edin.

OpenDesign

Bir Sonraki Tasarım Yinelemesine Yer Açın.

Brifinizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndir Tasarım Skill'lerine Göz At