excalidraw-diagram-generatoryazan GitHub

Excalidraw Diagram Generator Skill.

Claude Code ve Codex için bir diyagram ve grafik skill'i: doğal dilden Excalidraw diyagramları ve zihin haritaları üretir.

Diagrams & Data Visualization
Diagram

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

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

--- name: excalidraw-diagram-generator description: Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw. --- ## When to Use This Skill ## Prerequisites ## Step-by-Step Workflow ## Best Practices ## Example Prompts and Responses ## Advanced Techniques

Ön bilgi ve bölüm başlıkları yukarı akış dosyasından 2026-09-14 tarihinde okundu · tam haliyle 24.276 karakter

01 Ne yapar

Claude Code ve Codex'te excalidraw-diagram-generator Skill'inin Yaptıkları

Ö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ğal dil açıklamalarından Excalidraw formatında diyagramlar üretir. Dokuz diyagram türünü destekler: sıralı süreçler için akış şemaları, varlık bağlantıları için ilişki diyagramları, kavram hiyerarşileri için zihin haritaları, sistem tasarımı için mimari diyagramlar, veri dönüşüm süreçleri için veri akış diyagramları, çeşitli işlevler arası iş akışları için iş akışı şerit (swimlane) diyagramları, nesne yönelimli tasarım için sınıf diyagramları, zaman içinde nesne etkileşimleri için sıra diyagramları ve veritabanı varlık ilişkileri için ER diyagramları.

Hesaplanan koordinatlar kullanılarak konumlandırılmış ve tutarlı renk şemalarıyla stillendirilmiş uygun öğelerle (dikdörtgenler, elipsler, elmaslar, oklar, metin) .excalidraw JSON dosyaları üretir. Dosyalar doğrudan excalidraw.com üzerinde veya VS Code uzantısı aracılığıyla Excalidraw'da açılır.

Neler üretir

Açıklayıcı dosya adına sahip tam .excalidraw JSON dosyası
Diyagram türü ve öğe sayısı dahil olmak üzere oluşturulanların özeti
Diyagramı Excalidraw'da açma ve düzenleme talimatları

Örnek istemi görün ↗

Nasıl Çalışır

01
İsteği Anlama
Diyagram türünü (akış şeması, ilişki diyagramı, zihin haritası, mimari), temel öğeleri (varlıklar, adımlar, kavramlar), ilişkileri (akış, bağlantılar, hiyerarşi) ve karmaşıklığı (öğe sayısı) belirlemek için kullanıcının açıklamasını analiz eder.
02
Uygun Diyagram Türünü Seçme
Anahtar kelimeleri tanıyarak kullanıcının amacını diyagram türüyle eşleştirir.
03
Yapılandırılmış Bilgiyi Çıkarma
Diyagram türüne göre öğeleri listeler. Akış şemaları için: sıralı adımlar, karar noktaları, başlangıç ve bitiş noktaları.
04
Excalidraw JSON Oluşturma
Uygun öğe türleriyle (dikdörtgen, elips, elmas, ok, metin) .excalidraw dosyasını oluşturur ve konum (x, y koordinatları), boyut (genişlik, yükseklik), stil (strokeColor, backgroundColor, fillStyle), yazı tipi (fontFamily: 5, Excalifont için) ve bağlantılar (oklar için points dizisi) dahil olmak üzere temel özellikleri ayarlar.
05
Çıktıyı Biçimlendirme
Tam Excalidraw dosyasını type, version, source, elements dizisi, appState (viewBackgroundColor, gridSize) ve files nesnesiyle yapılandırır.
06
Kaydetme ve Talimat Verme
Açıklayıcı-isim.excalidraw olarak kaydeder ve kullanıcıya excalidraw.com'u ziyaret ederek, Open'a tıklayarak veya dosyayı sürükleyip bırakarak ya da Excalidraw VS Code uzantısını kullanarak nasıl açacağını bildirir.

02 Uyumunuzu bulun

excalidraw-diagram-generator Skill Ne Zaman Kullanılır

İş bu türden diyagramlar ve grafikler olduğunda Claude Code veya Codex'te excalidraw-diagram-generator becerisini kullanın. Aşağıdaki uygunluk ve sınırlar becerinin kendi dosyasından alınmıştır.

İyi Uyum

Akış şemaları kullanılarak sıralı süreçler, iş akışları ve karar ağaçları
İlişki diyagramları kullanılarak varlık ilişkileri, sistem bileşenleri ve bağımlılıklar
Zihin haritaları kullanılarak kavram hiyerarşileri, beyin fırtınası sonuçları ve konu organizasyonu
Mimari diyagramlar kullanılarak sistem tasarımı, modül etkileşimleri ve veri akışı
İş akışı havuz (swimlane) diyagramları kullanılarak fonksiyonlar arası iş akışları ve aktör bazlı süreç akışları

Sınırları Bilin

Düz veya basit eğimli çizgilere sadeleştirilen karmaşık eğriler
Otomatik oluşturmada gömülü görseller desteklenmez
20'den fazla öğe içeren diyagramlar, çünkü diyagram başına önerilen maksimum sayı 20'dir
Otomatik çakışma tespiti, çünkü skill bunun yerine boşluk yönergelerini kullanır

Ne Sağlamalısınız

Görselleştirilecek şeyin net bir açıklamasıDiyagramı oluşturulacak sürecin, sistemin, ilişkilerin veya kavramların doğal dilde açıklaması
Temel varlıkların, adımların veya kavramların belirlenmesiDiyagram öğelerine dönüşecek ana bileşenler
Öğeler arasındaki ilişkilerin veya akışın anlaşılmasıVarlıkların nasıl bağlandığı, adımların sırası veya hiyerarşik yapı

03 Skill'in içinde

excalidraw-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ı.

Öğe Sayısı Sınırları
Akış şeması adımları: 3-10 önerilir, en fazla 15. İlişki varlıkları: 3-8 önerilir, en fazla 12. Zihin haritası dalları: 4-6 önerilir, en fazla 8.
Gerekli Yazı Tipi Ailesi
Tutarlı bir görsel görünüm için tüm metin öğeleri fontFamily: 5 (Excalifont) kullanmalıdır. Bu, doğrulama kontrol listesinde zorunludur.
Boşluk Bırakma Kuralları
Öğeler arası yatay boşluk: 200-300px. Satırlar arası dikey boşluk: 100-150px. Metin boyutu: okunabilirlik için 16-24px.
Renk Şeması Tutarlılığı
Birincil öğeler açık mavi (#a5d8ff), ikincil öğeler açık yeşil (#b2f2bb), önemli/merkezi öğeler sarı (#ffd43b) ve uyarılar/dikkat çekmeler açık kırmızı (#ffc9c9) kullanır.
Karmaşıklık Yönetimi
Kullanıcı isteğinde çok fazla öğe varsa, birden fazla diyagrama bölmeyi öner, önce ana öğelere odaklan ve detaylı alt diyagramlar oluşturmayı teklif et.
Veri Akışı Yönü
Veri akış diyagramlarında süreç sırasını göstermeyin, sadece veri akışını gösterin. Veri akışları soldan sağa veya sol üstten sağ alta doğru gösterilmelidir.
Öğe Sayısı Maksimumu
Netlik için öğe sayısı makul olmalı, 20'den az öğe içermelidir. Bu, teslimden önce doğrulama kontrol listesinde kontrol edilir.
Benzersiz ID'ler ve Çakışma Olmaması
Tüm öğelerin benzersiz ID'leri olmalı ve koordinatlar çakışmayı önlemelidir. Bunlar, diyagramı teslim etmeden önce zorunlu doğrulama kontrolleridir.

04 İşe koyun

Claude Code veya Codex'e excalidraw-diagram-generator yükleyin

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

Claude Code, Codex veya Ajanınıza excalidraw-diagram-generator 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 excalidraw-diagram-generator

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

Beceriye İlk Diyagram ve Grafik Görevi Verin

Bu isteği kendi içeriğiniz ve kısıtlamalarınızla uyarlayın, ardından Claude Code veya Codex'te çalıştırın.

Example prompt

Create a flowchart for user registration

Kaynak: SKILL.md örneği (birebir).

İlk Sonucu Kontrol Edin

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

Tüm öğelerin benzersiz ID'lere sahip olduğunu doğrulayın
Metnin 16 veya daha büyük yazı tipi boyutuyla okunabilir olduğunu kontrol edin
Tüm metin öğelerinin fontFamily: 5 (Excalifont) kullandığını doğrulayın
Okların mantıksal olarak bağlandığını ve renklerin tutarlı bir şemayı takip ettiğini onaylayın

OpenDesign'da excalidraw-diagram-generator'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta 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/excalidraw-diagram-generator/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit 1899b18
License: MIT LICENSE dosyasından.
Repository yıldızları: 38.981 2026-09-14'te github/awesome-copilot deposu için alınan GitHub anlık görüntüsü; bu depoda bu katalogda yer alan 6 skill bulunuyor. excalidraw-diagram-generator için derecelendirme veya kullanım sayısı değil.
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

Bu Skill Ne Zaman KullanılırTetikleyici ifadeleri ve akış şemaları, ilişkiler, zihin haritaları, mimari, DFD, swimlane, sınıf, sıra ve ER diyagramları dahil olmak üzere desteklenen diyagram türlerini listeler
Ön KoşullarAçık bir tanım, temel varlıkların veya adımların belirlenmesi ve ilişkilerin veya akışın anlaşılmasını gerektirir
Adım Adım İş Akışıİsteği anlamaktan diyagram türünü seçmeye, bilgi çıkarmaya, JSON oluşturmaya, çıktıyı biçimlendirmeye ve talimatlarla kaydetmeye kadar altı adımlı süreç
En İyi UygulamalarEleman sayısı kılavuzları, boşluk ve konumlandırma için düzen ipuçları, renk şemaları, metin boyutlandırma ve karmaşıklık yönetimi stratejileri
Örnek İstemler ve YanıtlarKullanıcı kayıt akış şeması, kullanıcı-gönderi-yorum ilişkileri ve çıkarım adımlarıyla makine öğrenimi zihin haritası gösteren üç örnek
Sorun GidermeÜst üste binen elemanlar, metin sığdırma sorunları, çok fazla eleman, belirsiz düzen ve tutarsız renkler için çözümler
Gelişmiş Tekniklerİlişki diyagramları için ızgara düzeni formülü, zihin haritaları için radyal düzen ve zaman damgası ile rastgele dizge kullanan otomatik ID oluşturma modeli
Çıktı BiçimiHer zaman eksiksiz bir .excalidraw JSON dosyası, eleman sayısıyla özet ve excalidraw.com veya VS Code'da açma talimatları sağlar
Doğrulama Kontrol ListesiBenzersiz ID'ler, üst üste binmeyen koordinatlar, okunabilir metin, Excalifont yazı tipi ailesi, mantıklı oklar, tutarlı renkler, geçerli JSON ve makul eleman sayısı dahil teslimattan önce sekiz kontrol
Simge Kitaplıkları (İsteğe Bağlı Geliştirme)Excalidraw kitaplıklarından bulut hizmeti simgeleri eklemek için Python betiği iş akışı, kurulum talimatları ile add-icon-to-diagram.py ve add-arrow.py kullanımı
ReferanslarBirlikte gelen şema belgeleri, eleman türü özellikleri, sekiz diyagram şablonu, simge ve ok entegrasyonu için üç Python betiği ve betik README dosyası
SınırlamalarBasitleştirilmiş eğriler, gömülü görsel yok, önerilen maksimum 20 eleman, otomatik çakışma algılama yok

Skill'in Kendi Açıklaması

"Doğal dil açıklamalarından Excalidraw diyagramları üretir. "Bir diyagram oluştur", "akış şeması yap", "bir süreci görselleştir", "sistem mimarisi çiz", "zihin haritası oluştur" veya "Excalidraw dosyası üret" istendiğinde kullanın. Akış şemaları, ilişki diyagramları, zihin haritaları ve sistem mimarisi diyagramlarını destekler. Doğrudan Excalidraw'da açılabilen .excalidraw JSON dosyaları üretir."

SKILL.md dosyasından ön bilgi açıklaması. Dosyanın tamamı yaklaşık 24.276 karakterdir. Dosyanın tamamını GitHub'da okuyun.

06 Kurmadan önce

excalidraw-diagram-generator Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Oluşturulan diyagram dosyasını nasıl açarım?

excalidraw.com adresini ziyaret edin ve Open'a tıklayın veya .excalidraw dosyasını sürükleyip bırakın. Alternatif olarak, editörünüzde doğrudan açmak için Excalidraw VS Code uzantısını kullanabilirsiniz.

Diyagramlarımda AWS veya bulut hizmeti simgeleri kullanabilir miyim?

Evet, skill excalidraw.com/libraries adresindeki simge kitaplıklarını destekler. Bir .excalidrawlib dosyası indirir, split-excalidraw-library.py betiğini çalıştırarak onu ayrı simgelere bölersiniz, ardından diyagramınıza simge ve bağlantı eklemek için add-icon-to-diagram.py ve add-arrow.py Python betiklerini kullanırsınız.

Bu yaklaşım token tüketimini önler ve otomatik UUID oluşturma ile doğru koordinat dönüşümleri sağlar.

Excalidraw Diagram Generator

excalidraw-diagram-generator'ı gerçek bir diyagram ve grafik görevi üzerinde çalıştırın.

OpenDesign indirin, excalidraw-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 excalidraw-diagram-generator

Claude Code ve Codex'te excalidraw-diagram-generator Skill'inin Yaptıkları

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

excalidraw-diagram-generator Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

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

Öğe Sayısı Sınırları

Gerekli Yazı Tipi Ailesi

Boşluk Bırakma Kuralları

Renk Şeması Tutarlılığı

Karmaşıklık Yönetimi

Veri Akışı Yönü

Öğe Sayısı Maksimumu

Benzersiz ID'ler ve Çakışma Olmaması