Kullanım kılavuzuna geç
diagramyazan Garry Tan

Diagram Skill.

Diyagramlar ve grafikler için bir Claude Code ve Codex skill'i: bir açıklama veya Mermaid kaynağını düzenlenebilir Excalidraw dosyası artı render edilmiş SVG ve PNG'ye dönüştürür.

  • Diagrams & Data Visualization
  • Diagram
garrytan/gstack · diagram/SKILL.mdSKILL.md
--- name: diagram description: Turn an English description (or mermaid source) into a diagram triplet: the source, an editable .excalidraw file you can open on excalidraw.com, and rendered SVG + PNG. (gstack) --- ## When to invoke this skill ## Step 1 — Author the diagram ## Step 2 — Stage the render bundle (once per session) ## Step 3 — Render the triplet ## Step 4 — Show and deliver ## Rules
Ön bilgi ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okundu · tam hali 16.276 karakter

01 Ne yapar

Diyagram 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

İngilizce bir açıklamayı veya Mermaid kaynağını bir diyagram üçlüsüne dönüştürür: Mermaid kaynağı (.mmd), excalidraw.com'da açılan düzenlenebilir bir Excalidraw dosyası (.excalidraw) ve render edilmiş SVG + PNG çıkışları. Render işlemi yerel bir loopback sunucusu üzerinden tamamen çevrimdışı gerçekleşir — çalışıyorsa Aside tarayıcısını kullanır, aksi halde gstack'in kendi headless tarayıcısını kullanır.

Akış şemaları (graph LR/TD) ve sıra diyagramları, gerçek kutular, oklar ve metinlerle tamamen düzenlenebilir Excalidraw sahneleri üretir. Diğer Mermaid diyagram türleri (state, class, gantt) SVG/PNG olarak render edilir ve Excalidraw dosyasında tek bir görsel öğe olarak dışa aktarılır — taşınabilir ve üzerine not eklenebilir ama öğe düzeyinde düzenlenemez. Mermaid kaynağı, yineleme için tek gerçek kaynak olarak kalır.

Neler üretir

  • LLM'e uygun değişim formatı ve tek gerçek kaynak olarak görev yapan bir Mermaid kaynak dosyası (.mmd).
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Mermaid Kaynağı Yazın

    Kullanıcının isteğine uygun Mermaid yazın. Ardışık düzenler/akışlar için graph LR'yi, hiyerarşiler için graph TD'yi tercih edin.

  2. 02
    Render Paketini Oturum Başına Bir Kez Hazırlayın

    diagram-render.html'yi gstack'in render hazırlama dizininde ${TMPDIR:-/tmp}/gstack-render altında, paket SHA'sına göre içerik adresli olarak hazırlayın.

  3. 03
    Üçlüyü Tek Komutla Render Edin

    .mmd dosyasını yazın, ardından hazırlanan paketle gstack-render'ı çalıştırın.

  4. 04
    Göster ve Teslim Et

    Kullanıcının diyagramı görebilmesi için PNG'yi satır içinde okuyun. Üçlü yolları listeleyin ve .excalidraw dosyasının düzenleme için excalidraw.com'da açıldığını belirtin.

02 Uyumunuzu bulun

diagram Skill Ne Zaman Kullanılır

Bu türden diyagram ve grafik işi olduğunda Claude Code veya Codex'te diagram becerisini kullanın. Uygunluk ve sınırlar aşağıda becerinin kendi dosyasından alınmıştır.

İyi Uyum

  • Kullanıcı bir diyagram yapılmasını, mimarinin çizilmesini, bir akış şeması oluşturulmasını, bunun diyagramlanmasını veya bir akışın görselleştirilmesini istediğinde.
  • Sohbet, issue veya README'ler için raster çıkışların yanı sıra dokümantasyon için net vektör diyagramlar üretme.
  • Kullanıcının excalidraw.com'da açıp kutuları taşıyabileceği ve üzerinde çalışmayı sürdürebileceği düzenlenebilir bir Excalidraw dosyası oluşturma.

Sınırları Bilin

  • Tek bir sahnede 15'ten fazla düğüm içeren diyagramlar — okunabilirlik için birden fazla diyagrama bölünmelidir.
  • Durum, sınıf, gantt ve akış şeması/sıra diyagramı olmayan diğer Mermaid türleri, taşınabilir ama öğe düzeyinde düzenlenemeyen bir Excalidraw dosyası üretir.

Ne Sağlamalısınız

  • İngilizce açıklama veya Mermaid kaynağıKullanıcı, oluşturulacak diyagramın açıklamasını sağlar veya render edilmek üzere mevcut bir Mermaid kaynağı sunar.

03 Skill'in içinde

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

  1. Render Etmeden Asla Teslim Etmeyin

    Tek başına bir .mmd dosyası diyagram değildir. Render işlemi mümkün değilse (paket eksikse veya tarayıcı yoksa) engeli bildirin ve durun.

  2. Akış Şemaları ve Sıra Diyagramları Tam Olarak Düzenlenebilir

    Akış şemaları (graph LR/TD) ve sıra diyagramları, gerçek kutular, oklar ve metinler içeren tam düzenlenebilir Excalidraw sahnelerine dönüştürülür. Diğer Mermaid türleri tek bir görsel öğe olarak dışa aktarılır.

  3. Tarayıcı Aktarımı İçin Kaynağı Base64 Olarak Kodlayın

    Kaynaktaki ters tırnak işaretlerini, ${ } ifadelerini ve ters eğik çizgileri yorumlama sorununu önlemek için Mermaid kaynağını render sayfasına base64 ile gönderin. Dosya içeriğini asla bir JS template literal'ine eklemeyin.

  4. Çıkış Dizini Git Bağlamını Takip Eder

    cwd bir git deposu olduğunda ./diagrams/ dizinine yazın (kullanıcının commit edebileceği artifact'lar), aksi halde /tmp/gstack-diagrams/ dizinine yazın. Slug'ı konudan kebab-case olarak türetin, en fazla 40 karakter.

  5. PNG Genişliği 1950px Olarak Sabittir

    Rasterize edilen PNG her zaman 1950 piksel genişliğindedir, bu da 6,5 inç bir yerleşimin 300dpi'sine eşdeğerdir.

  6. Render Etme Tamamen Çevrimdışıdır

    diagram-render paketi kendi kendine yeterlidir ve loopback üzerinden sunulur. CDN yok, ağ bağlantısı yok.

  7. Mermaid'e Dokunmadan Düzenlenmiş Excalidraw'ı Yeniden Render Edin

    Kullanıcı bir .excalidraw dosyasını düzenleyip yeniden render etmek istediğinde, sahne dosyasını yükleyin ve doğrudan SVG/PNG olarak dışa aktarın — Mermaid kaynağından yeniden üretmeyin.

  8. PDF Hedefleri İçin .mmd Gömmeyi Tercih Edin

    Bir PDF'ye eklenecek diyagramlar için, kullanıcıya make-pdf'in Mermaid bloklarını doğrudan render ettiğini hatırlatın — markdown içine .mmd gömmek, PNG gömmekten daha iyidir.

04 İşe koyun

Claude Code veya Codex'e diagram'ı 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 diagram ekleyin

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

Terminal
npx skills add https://github.com/garrytan/gstack --skill diagram

diagram/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 flowchart showing the build pipeline for [my TypeScript project]. Include lint, test, build, and deploy stages with their dependencies. Use graph LR layout and output to ./diagrams/.

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:

  • Diyagramın doğru render edildiğini ve kullanıcının isteğiyle eşleştiğini doğrulamak için PNG çıktısını satır içinde okuyun.
  • Mermaid ayrıştırma hatalarını gösteren ERROR: satırları için gstack-render çıktısını kontrol edin — varsa .mmd dosyasını düzeltip yeniden deneyin.
  • Excalidraw dönüştürücünün tek bir görsel öğeye ne zaman geri düştüğünü doğrulamak için PAGE_ERRORS çıktısında 'Error processing Mermaid diagram' ifadesini inceleyin.
  • SVG, PNG ve Excalidraw dosyalarının yazıldığını doğrulamak için gstack-render çıktısında üç OK <path> satırının da göründüğünü doğrulayın.
  • Düzenlenmiş Excalidraw yeniden render'ları için PAGE_ERRORS içindeki zararsız WorkerInTheMainChunkError'u yok sayın — SVG/PNG doğrudur.

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

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
Garry Tan
Repository
github.com/garrytan/gstack Branch main
Skill dosyası
diagram/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit 71f6048
License
MIT LICENSE dosyasından.
Repository yıldızları
132.921 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm garrytan/gstack deposu için alındı; bu depoda katalogda listelenen 7 skill bulunur. diagram için derecelendirme 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 çağrılırDiyagram, mimari, akış şeması veya görselleştirme istekleri için kullanın; SVG/PNG Mermaid stilini kullanır, Excalidraw ise el çizimi estetiğine sahiptir.
  2. Adım 1 — Diyagramı oluşturunMermaid kaynağını yazın; akış şemaları ve sıra diyagramları tam düzenlenebilir Excalidraw'a dönüşür, diğer türler tek görsel olarak dışa aktarılır.
  3. Adım 2 — Render paketini hazırlayın (oturum başına bir kez)diagram-render.html dosyasını gstack'in render hazırlama dizinine, SHA ile içerik adreslenmiş şekilde ve eşzamanlı oturumlara zarar vermeden kopyalayın.
  4. Adım 3 — Üçlüyü render edin.mmd dosyasını yazın, base64 kodlu kaynak ile gstack-render'ı çalıştırın, SVG/PNG/Excalidraw çıktısı alın; ayrıştırma hataları ve PAGE_ERRORS için kontrol edin.
  5. Adım 4 — Gösterin ve teslim edinPNG'yi satır içinde okuyun, üçlü yolları listeleyin, Excalidraw düzenlenebilirliğini belirtin; değişiklikler için .mmd dosyasını düzenleyip yeniden render edin.
  6. KurallarRender etmeden asla teslim etmeyin; PDF hedefleri için kullanıcıya make-pdf'in Mermaid bloklarını doğal olarak render ettiğini hatırlatın.
  7. Tamamlanma durumuÜçlü teslim edildiğinde TAMAMLANDI; paket eksikse veya tarayıcı yoksa ENGELLENDİ.
Skill'in Kendi Açıklaması
"Bir İngilizce açıklamayı (veya mermaid kaynağını) bir diyagram üçlüsüne dönüştürün: kaynak, excalidraw.com'da açabileceğiniz düzenlenebilir bir .excalidraw dosyası ve işlenmiş SVG + PNG. (gstack)"

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

06 Kurmadan önce

diagram 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.

Render paketi eksikse veya tarayıcı yoksa ne olur?

Skill durur ve gstack deposunda bun run build:diagram-render komutunu çalıştırarak paketi oluşturmanızı veya gstack'in tarayıcısı derlenmemişse Aside'ı (macOS 15+) açmanızı söyler. Skill sizin için Aside'ı asla kurmaz veya bir CDN ya da başka bir render motoruyla değiştirmez.

Diagram

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

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

Terminal
npx skills add https://github.com/garrytan/gstack --skill diagram

OpenDesign Masaüstü

Tek tasarım sistemi. Her çıktıda tutarlı bir marka

Tam Vibe Design Workspace içinde aynı marka kurallarını web sitelerine, sunumlara, etkileşimli prototiplere, panolara, görsellere ve HTML videolara uygulayın. Yerel Codex, Claude Code, Cursor ve diğer kodlama ajanlarını bağlayıp ücretsiz üretin.

  • Web, sunum, prototip, pano, görsel ve video
  • 140+ tasarım sistemi ve eksiksiz şablon ile beceri kitaplığı
  • Yerel Codex ve 21+ kodlama ajanını bağlayın · Ücretsiz
Ücretsiz indir

macOS ve Windows için