draw-io-diagram-generatoryazan GitHub

Draw.io Diagram Generator Skill.

Diyagramlar ve grafikler için bir Claude Code ve Codex skill'i: draw.io diyagram dosyaları (.drawio, .drawio.svg, .drawio.png) oluşturur ve düzenler.

Diagrams & Data Visualization
Diagram

OpenDesign İndir Kullanım kılavuzunu görüntüle

github/awesome-copilot · skills/draw-io-diagram-generator/SKILL.mdSKILL.md

--- name: draw-io-diagram-generator description: Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries, style strings, flowcharts, system architecture, sequence diagrams, ER diagrams, UML class diagrams, network topology, layout strategy, the hediet.vscode-drawio VS Code extension, and the full agent workflow from request to a ready-to-open file. --- ## 1. When to Use This Skill ## 2. Prerequisites ## 3. Step-by-Step Agent Workflow ## 4. Diagram-Type Recipes ## 5. Multi-Page Diagrams ## 6. Editing Existing Diagrams

Ön bilgi ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okundu · tam hali 19.536 karakter

01 Ne yapar

draw-io-diagram-generator Skill'i Claude Code ve Codex'te Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Doğru mxGraph XML'i üreterek draw.io diyagram dosyaları (.drawio, .drawio.svg, .drawio.png) oluşturmak, düzenlemek ve doğrulamak için bir skill. Akış şemalarını, sistem mimarisini, sıra diyagramlarını, ER diyagramlarını ve UML sınıf diyagramlarını assets/templates/ altındaki şablonlar üzerinden işler; ağ topolojisi, BPMN ve zihin haritaları ise şekil kütüphanelerine veya manuel çalışmaya bırakılır.

Ajan, altı adımlı bir iş akışı, kullanıma hazır stil dizeleriyle semantik bir renk paleti, teslimat öncesi bir doğrulama kontrol listesi ve isteğe bağlı Python betikleri (validate-drawio.py, add-shape.py) alır. Diyagramların belgeledikleri kodun yanında bulunduğu bir depoda çalışan ajanları hedefler ve üretilen dosyalar hediet.vscode-drawio VS Code eklentisinde hemen açılmak üzere tasarlanmıştır.

Neler üretir

İstediğiniz yola yazılan .drawio dosyasının kendisi.
Diyagramın ne gösterdiğine dair tek cümlelik bir özet.
Doğrulama betiğinin çalıştırılıp çalıştırılmadığını ve geçip geçmediğini bildiren doğrulama durumu.
Diyagramı özelleştirmeniz muhtemel olduğunda düzenleme talimatları: seçmek için bir şekle tıklayın, etiketi düzenlemek için çift tıklayın, yeniden konumlandırmak için sürükleyin.

Örnek istemi görün ↗

Nasıl Çalışır

01
İsteği Netleştirin
İş akışı, diyagram türünü, varlıkları veya aktörleri, ilişkileri, çıktı yolunu ve dosyanın yeni mi yoksa bir düzenleme mi olduğunu belirleyerek başlar.
02
Bir Şablonu veya Minimal İskeleti Yeniden Kullanın
Diyagram türü assets/templates/ altındaki bir şablonla eşleştiğinde, o yapıyı kopyalayıp yer tutucu değerleri değiştirin; yeni düzenler için iki kök hücreye sahip minimal geçerli mxfile iskeletinden başlayın.
03
XML Yazmadan Önce Yerleşimi Planlayın
Önce satırları veya kademeleri taslak olarak çizin, ardından şekilleri ızgara üzerinde aralayın — aynı satırdaki şekiller arasında yatayda 40-60px, kademe satırları arasında 80-120px, varsayılan 1169 x 827 px A4 yatay tuval üzerinde.
04
mxGraph XML'ini oluşturun
Benzersiz id'lere ve eşleşen üst (parent) referanslarına sahip vertex ve kenar (edge) hücreleri yazın; dosyanın iyi biçimli kalması için etiketlerdeki XML özel karakterlerini escape edin.
05
Paletten Stilleri Uygulayın
Stil dizgileri sabit bir anlamsal paletten gelir — primary/info #dae8fc ile #6c8ebf, warning/decision #fff2cc ile #d6b656, error/end #f8cecc ile #b85450 — böylece aynı amaç bir proje boyunca aynı rengi korur.
06
Kaydedin, Doğrulayın, Teslim Edin
Dosyayı istenen yola .drawio uzantısıyla yazın, isteğe bağlı olarak doğrulayıcıyı çalıştırın, ardından kullanıcıya dosyayı nasıl açacağını söyleyin ve diyagramda ne olduğunu özetleyin.

02 Uyumunuzu bulun

draw-io-diagram-generator Skill Ne Zaman Kullanılır

Bu tür diyagram ve grafikler için Claude Code veya Codex'te draw-io-diagram-generator skill'ini kullanın. Aşağıdaki uyum ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

İstek, bir .drawio, .drawio.svg veya .drawio.png dosyası üretmek veya değiştirmektir.
draw.io VS Code uzantısında hiçbir manuel düzeltme yapmadan hemen açılan bir dosya istiyorsunuz.
Biri bir .drawio dosyası eklemenizi, mevcut bir diyagramı güncellemenizi veya bir akışı görselleştirmenizi ister.
Sistem, tek bir dosyada birkaç sayfayı hak edecek kadar karmaşıktır.
Ham XML'i elle düzenlemeden mevcut bir dosyaya bir şekil eklemeniz gerekir.

Sınırları Bilin

Ağ topolojisi ve BPMN diyagramları için birlikte gelen bir şablon yoktur — dosya bunun yerine yönlendiriciler, sunucular, güvenlik duvarları ve alt ağlar için şekil kütüphanesine işaret eder.
Zihin haritaları manuel iş olarak listelenir: dallanan şubelere sahip merkezi bir konu, kopyalanacak bir şablon olmadan.
mxGraphModel'i base64 kodlanmış olan bir diyagram sıkıştırılmış görünür ve olduğu gibi işlenmez; draw.io web uygulamasından sıkıştırılmamış XML olarak yeniden dışa aktarılması gerekir.

Ne Sağlamalısınız

Diyagram türüİstenen diyagram türünü belirtin — akış şeması, mimari, UML, ER, sıra, ağ — ya da skill'in bunu bağlamdan çıkarmasına izin verin.
Varlıklar, aktörler, sınıflar veya tablolarDiyagramın içermesi gereken ana bileşenleri belirtin, çünkü bunlar vertex hücreleri haline gelecektir.
İlişkiler, yön ve kardinaliteKenar stillerinin ve crow's foot oklarının doğru seçilebilmesi için bileşenlerin nasıl bağlandığını, hangi yönde ve hangi kardinalite ile bağlandığını açıklayın.
Çıkış yolu.drawio dosyasının nereye kaydedilmesi gerektiğini belirtin; diyagramlar belgeledikleri kodun yanında yer almalıdır.
Dosyanın zaten var olup olmadığıYeni oluşturma ve mevcut olanı düzenleme farklı yollardır — bir düzenleme, mevcut hücreleri, konumları ve hiyerarşiyi okuyarak başlar.

03 Skill'in içinde

draw-io-diagram-generator Skill'inin Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 8 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

Kök Hücreler 0 ve 1 Pazarlığa Kapalıdır
Id 0 ve 1 her zaman gereklidir ve bir diyagramdaki ilk iki hücre olmalıdır; başka hiçbir şey için asla yeniden kullanılmamalıdır.
Her Hücre için Bir Benzersiz Id
Her hücre kimliği dosya içinde global olarak benzersiz olmalıdır; bu nedenle mevcut bir diyagrama eklenen yeni şekiller, zaten kullanılan kimliklerle çakışmamalıdır.
Her Vertex Geometri Taşır
Bir vertex hücresi, as="geometry" ile x, y, width ve height değerlerini tutan alt bir mxGeometry olmadan geçerli değildir.
Kenarlar Gerçek Kimliklere Bağlanır
Bir kenarın, mevcut vertex kimlikleriyle eşleşen source ve target özniteliklerine ihtiyacı vardır.
HTML Etiketleri için Html=1
HTML etiketleri (b, i, br) içeren herhangi bir etiket, hücre stilinde html=1 gerektirir; aksi halde etiketler diyagramda kaçış karakterleriyle görünür.
10px Izgaraya Hizala
Tüm koordinatlar 10'a bölünebilir olmalıdır ki şekiller düzgün hizalansın.
Her Sayfaya Her Zaman Başlık
Her sayfa, üstte text stilini kullanan, fontSize=18 ve kalın için fontStyle=1 olan bir başlık metni hücresi alır.
Dosyaları kebab-case Olarak Adlandırın
Diyagram dosyaları, order-service-flow.drawio veya database-schema.drawio gibi kebab-case adlandırmaya uyar ve belgeledikleri kodun yanında docs/ veya architecture/ içinde bulunur.

04 İşe koyun

draw-io-diagram-generator'ı Claude Code veya Codex'e yükleyin

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

draw-io-diagram-generator'ı Claude Code, Codex veya Ajanınıza ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill draw-io-diagram-generator

skills/draw-io-diagram-generator/SKILL.md için genel skills CLI formu; depo kendi yolunu belgeleyebilir.

Beceriye İlk Diyagram ve Grafik Görevi Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt

Create a .drawio sequence diagram for [the checkout flow]. [Client] should send a synchronous POST /orders message to [API Server], which returns 201 Created — include the lifelines and activation boxes. Save it to [docs/checkout-flow.drawio] with a title cell at the top of the page.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

Dosya bir mxfile kök öğesiyle başlar.
Tüm cell id değerleri her diyagram içinde benzersizdir.
Her vertex hücresinin vertex="1" değeri ve as="geometry" olan alt bir mxGeometry'si vardır.
id=0 dışındaki her hücrenin, mevcut bir kimliği işaret eden bir parent'ı vardır.
XML iyi biçimlendirilmiştir — kapatılmamış etiket yoktur ve öznitelik değerlerinde kaçışsız ampersand veya açı ayracı bulunmaz.
Tamamlanmış dosyaya karşı otomatik doğrulayıcıyı çalıştırın.

OpenDesign'da draw-io-diagram-generator'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubuktan seçin.

OpenDesign İndir Hızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author: GitHub
Repository: github.com/github/awesome-copilot Dal main
Skill dosyası: skills/draw-io-diagram-generator/SKILL.md Doğrulama sırasında kaydedilen içerik sağlama toplamı; commit 1899b18
License: MIT LICENSE dosyasından.
Repository yıldızları: 38.981 Bu katalogda 6 skill içeren github/awesome-copilot deposunun tamamı için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. draw-io-diagram-generator için bir değerlendirme veya kullanım sayısı değildir.
OpenDesign tarafından doğrulandı: 2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

1. Bu Skill Ne Zaman KullanılırYüklemek için tetikleyici ifadeler, ayrıca sekiz diyagram türü ve şablonlarını içeren bir tablo.
2. Ön Koşullarhediet.vscode-drawio'yu yükleyin, desteklenen uzantılar, betikler için isteğe bağlı Python 3.8+.
3. Adım Adım Ajan Workflow'uAltı sıralı adım: anlama, şablon seçme, düzeni planlama, XML oluşturma, stil verme, doğrulama.
4. Diyagram Türü ReçeteleriAkış şeması, mimari, sıra, ER ve UML sınıfı için XML parçacıkları ve stil dizeleri.
5. Çok Sayfalı DiyagramlarBir mxfile içinde birden fazla diyagram öğesi; her sayfanın kendi hücre id ad alanı vardır.
6. Mevcut Diyagramları DüzenlemeÖnce oku, sayfayı bul, çakışmayan id'ler ata, konteynerlere uy, kenarları doğrula.
7. En İyi UygulamalarIzgara hizalaması, kısa etiketler, palet tutarlılığı, sayfa boyutu, kebab-case adlandırma ve konumlandırma.

Skill'in Kendi Açıklaması

"Draw.io diyagram dosyaları (.drawio, .drawio.svg, .drawio.png) oluştururken, düzenlerken veya üretirken kullanın. mxGraph XML yazımı, şekil kütüphaneleri, stil dizileri, akış şemaları, sistem mimarisi, dizi diyagramları, ER diyagramları, UML sınıf diyagramları, ağ topolojisi, yerleşim stratejisi, hediet.vscode-drawio VS Code eklentisi ve talepten kullanıma hazır dosyaya kadar tam ajan iş akışını kapsar."

SKILL.md dosyasından ön bilgi açıklaması. Tam dosya yaklaşık 19.536 karakterdir. Tam dosyayı GitHub'da okuyun.

Draw.io Diagram Generator

draw-io-diagram-generator'ı gerçek bir diyagram ve grafik görevinde çalıştırın.

OpenDesign'ı indirin, draw-io-diagram-generator'ı SKILL.md bağlantısından içe aktarın, yukarıdaki istemi yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın

Terminal

npx skills add https://github.com/github/awesome-copilot --skill draw-io-diagram-generator

draw-io-diagram-generator Skill'i Claude Code ve Codex'te Ne Yapar

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

draw-io-diagram-generator Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

draw-io-diagram-generator Skill'inin Claude Code ve Codex'e Verdiği Kurallar

Kök Hücreler 0 ve 1 Pazarlığa Kapalıdır

Her Hücre için Bir Benzersiz Id

Her Vertex Geometri Taşır

Kenarlar Gerçek Kimliklere Bağlanır

HTML Etiketleri için Html=1

10px Izgaraya Hizala

Her Sayfaya Her Zaman Başlık

Dosyaları kebab-case Olarak Adlandırın