· kaynak dev.to (home feed)
XMarkdown, düz Markdown'a grafikler, diyagramlar ve etkileşimli kontroller ekliyor
XMarkdown, standart Markdown'ı grafikler, diyagramlar, denklemler ve etkileşimli kontrollerle genişleten açık kaynaklı bir renderer; amaçlayan şey, AI modellerinin görsel raporlar için üretmesi gereken çıktıyı küçültmek.

Bağımsız bir geliştirici, tanıdık düz yazı sözdizimini koruyan ve grafikler, diyagramlar, denklemler, etkileşimli kontroller ve doğrulanmış SVG için isteğe bağlı bloklar ekleyen açık kaynaklı bir Markdown renderer'ı olan XMarkdown'ı yayımladı. Projenin yazarının dev.to'daki yazısına göre motivasyon, AI araçlarının raporlar için HTML artifact'leri ürettiğini izlemekten ve bu çıktının ne kadarını model yerine bir kütüphanenin üretemeyeceğini sormaktan gelmiş.
İçeriği render etmek yerine tanımlamak
Temel fikir bir iş bölümü: yazar — insan ya da AI — veriyi ve etiketleri sağlar, renderer ise geometriyi, eksenleri ve etiketleri sağlar. Bir çubuk grafik; tip, başlık, metin açıklaması ve veri satırlarını içeren küçük bir JSON bloğu olarak belirtiliyor — SVG koordinatları ya da tekrarlanan attribute'lar yok. Yazar bunun gerçek bir maliyete işaret ettiğini savunuyor: HTML üreten bir model, output token'larını bir kütüphanenin zaten nasıl üreteceğini bildiği render ayrıntılarını tanımlamakla harcıyor.
Standart düz yazı markdown-it üzerinden geçiyor; dolayısıyla başlıklar, vurgu, listeler, alıntılar, bağlantılar, code fence'ler, tablolar ve üstü çizili metin her zamanki gibi davranıyor. Uzantılar isteğe bağlı bloklar:
- Grafikler: doğrulamalı SVG çubuk ve çizgi grafikler, 256 veri satırına kadar
- Diyagramlar: otomatik düğüm yerleşimli yönlü grafikler, 32 düğüme ve 128 kenara kadar
- Matematik: KaTeX tarafından MathML'e derlenen satır içi ve blok TeX
- Kontroller: çıktıları hesaplayan sınırlı ifadelere bağlanan slider, sayı, toggle ve select'ler
- Çizim: geri alma ve temizleme destekli, işaretçi tabanlı SVG vuruşları; vuruş ve nokta limitleriyle sınırlı
- SVG sahneleri ve içe aktarmalar: path'leri, grupları, gradient'leri, mask'leri, kırpma (clipping), pattern ve sembolleri kapsayan doğrulanmış bir statik sahne formatı; ayrıca mevcut statik SVG'yi içe aktarmak için bir x-svg bloğu
- Streaming: kısmi güncellemeler sırasında geçici önizlemeler, tamamlanmada tam bir Markdown parse'ı ile
Tek motor, birçok runtime
Uygulama paylaşılan JavaScript'ten oluşuyor: Node girişi, tarayıcı API'si ve bir React bileşeni aynı çekirdeği kullanıyor. Projenin canlı sitesi gerçek motoru çalıştırıyor — kayıtlı örnekler Node üzerinden, playground'daki düzenlemeler ise tarayıcı girişi üzerinden render ediliyor. Diğer dillerdeki sunucu tarafı kodu, render'a bir Node/HTTP köprüsü üzerinden erişebilir; yazar, yerel Python, Go veya Rust parser'larının henüz gönderilmediğini belirtiyor.
Dağıtım npm üzerinden xmarkdown-renderer adıyla, 0.2.1 sürümünde yapılıyor ve TypeScript bildirimleri dahil. Desteklenen kurulum Node.js 22+ ve React 18+; Next.js ve Vue için tarifler mevcut, daha fazla adapter planlanıyor.
Bildirilen token tasarrufu
Yazar MVP'den iki ölçüm bildiriyor. Tam bir demo belgesi, eşdeğer kompakt bir HTML/SVG sürümünün 1.219 token'ına karşılık 208 kaynak token tüketmiş. Genişletilmiş bir streaming iş yükü, bir belgenin büyüyen öneklerini tekrar tekrar render etmekle karşılaştırıldığında 5,48 kat iyileşme göstermiş. Yazar ayrıca model üretimi deneylerinin ve kullanıcı çalışmalarının henüz geleceğini belirtiyor; yani bunlar bağımsız olarak doğrulanmış benchmark'lar değil, erken ve kendisi tarafından bildirilmiş rakamlar.
Kapsam ve ödünleşimler
MVP'de bilinçli sınırlar var. Ham HTML escape ediliyor ve görseller şu anda yalnızca alt metinlerini gösteriyor. Diyagram kenar yönlendirmesi temel düzeyde olarak tanımlanıyor ve içe aktarılan SVG, bağlantılı kaynak getirmesi olmayan statik bir alt küme. Yazar formatın maliyeti hakkında da açık sözlü: şemaları biri öğrenmek zorunda ve host uygulaması bir renderer yüklemek zorunda. Kazanç, bu şemaların ve render kurallarının her belgede yeniden kullanılması.
Neden önemli
AI tarafından üretilen raporlar giderek HTML artifact'leri olarak yayımlanıyor; bu da render işini modelün token bütçesine ve streaming gecikmesine bindiriyor. XMarkdown gibi bildirimsel bir katman bu bölünmeyi tersine çeviriyor: model veriyi tanımlıyor, kütüphane çiziyor. Bildirilen token oranları gerçek iş yüklerinde tutarsa, bu AI destekli dokümantasyon için doğrudan bir maliyet ve hız argümanı olur; streaming yaklaşımı ise belgelerin parça parça geldiği sohbet arayüzlerine uyuyor. Güvenlik duruşu da dikkat çekici — ham HTML'i escape etmek, SVG element ve attribute'larını beyaz listeye almak ve ifade değerlendirmesini sınırlamak, tam da belge girdisi bir dil modelinden geldiğinde önem taşıan kısıtların türünde. Proje genç ve iddiaları doğrulanmış değil; ama yön — kompakt, doğrulanmış, renderer destekli belgeler — her AI raporlama aracının şu anda karşılaştığı bir soruna inandırıcı bir yanıt.
- #markdown
- #open-source
- #javascript
- #react
- #developer-tools