Giriş

erd-editor bir varlık-ilişki diyagramı düzenleyicisidir. Bir web uygulaması, bir Google Drive uygulaması, bir VS Code uzantısı, bir IntelliJ eklentisi, bir Obsidian eklentisi ve kendi sayfanıza yerleştirebileceğiniz bir <erd-editor> özel öğesi olarak kullanılabilir. Bunların tümünde aynı düzenleyici ve aynı belge biçimi kullanılır.

Nereden edinilir

Platform	Kurulum	Neler sunar
Web uygulaması	erd-editor.io	Kurulabilir PWA, çevrimdışı kullanım, gerçek zamanlı ortak çalışma
Google Drive	Google Workspace Marketplace	Drive'ın Open with ve New menülerine ERD Editor öğesini ekler ve aynı dosyaya geri kaydeder
VS Code	Marketplace	.erd.json dosyalarını özel bir düzenleyicide açar
IntelliJ	JetBrains Marketplace	IntelliJ tabanlı IDE'ler için aynı düzenleyici
Obsidian	Community plugins	.erd ve .erd.json dosyalarını bir kasa sekmesinde açar, yalnızca masaüstünde
Kendi sayfanız	npm install @dineug/erd-editor	Çerçeve gerektirmeyen <erd-editor> özel öğesi. Kurulum sayfasına bakın.
Kodlama ajanları	@dineug/erd-editor-mcp	Claude Code'un, Codex'in veya başka bir istemcinin bir diyagramı VS Code'da, bir JetBrains IDE'sinde ya da Obsidian'da canlı olarak veya dosyanın kendisinde düzenlemesini sağlayan bir MCP sunucusu

Bir IDE'de denemek için .erd.json uzantılı boş bir dosya oluşturun ve açın. Obsidian'da komut paletinden ERD Editor: Create new diagram komutunu çalıştırın ya da dosya gezgininde bir klasörün bağlam menüsünden New ERD öğesini seçin. İkisi de boş bir .erd dosyası oluşturur ve açar. Google Drive'da New → More → ERD Editor öğesini seçin, ardından Google ile oturum açın. ERD Editor yalnızca onunla oluşturduğunuz veya açtığınız dosyalara erişir. Web uygulamasında, Google Drive'da, VS Code'da, bir JetBrains IDE'sinde ve Obsidian'da yeni ve boş bir diyagram karşılama ekranında açılır. Bu ekran ilk adımlardan oluşan bir menüdür: New Table, New Memo, Import, Command Palette ve Shortcuts. Yeni bir diyagramda tüm kilitler etkin olduğundan, kaydırmak, yakınlaştırmak ve sekme değiştirmek yeni diyagramın boş dosyasını olduğu gibi bırakır. Kilit bölümüne bakın. VS Code bir ERD dosyasını Source Control, Local History ve Compare with Saved görünümlerinde, VS Code'un sohbetinin ve GitHub Copilot ile Claude Code gibi kodlama ajanlarının düzenleme incelemelerinde ve GitLens, GitHub Pull Requests ve Git Graph gibi uzantıların revizyon görünümlerinde JSON metni olarak açar, böylece bir değişiklik satır satır karşılaştırılır. Reopen Editor With... komutu bir Git revizyonunu salt okunur bir diyagram olarak gösterir.

Obsidian eklentisini güncelledikten sonra Obsidian'ı yeniden başlatın: O zamana kadar pencere, önceki sürümün yüklediği düzenleyiciyi korur. Diyagramları paylaştığınız her yerde ERD Editor sürümünü güncelleyin: Tablo gruplarının eklenmesinden önceki bir sürüm, güncel sürümün kaydettiği bir dosyada birincil anahtar simgelerini göstermez ve dosyayı orada kaydetmek dosyanın tablo gruplarını ve Şema SQL betiklerini atar. Böyle bir sürümün kaydettiği bir dosya, dosyaya yazılan ilk değişiklikte güncel biçimde yeniden yazılır. Kilit bölümüne bakın. O zamana kadar dosyayı kendi $schema alanına göre doğrulayan bir JSON düzenleyicisi onu geçersiz olarak bildirir.

Neler yapar

• Sınırsız bir tuvalde tablolar, sütunlar ve notlar çizin ve bunları dört ilişki türüyle birbirine bağlayın: Zero One, Zero N, One Only, One N. Düzenlemeye başlama sayfasına bakın. Dizinler Tablo özellikleri panelinde tanımlanır. İki veya daha fazla sütunu kapsayan benzersiz bir dizin alternatif anahtardır ve Alternate Key görünüm seçeneği açıkken diyagram bu dizinin sütunlarını AK1.1, AK1.2 vb. olarak işaretler. Dizinler ve Alternatif anahtarlar bölümlerine bakın.
• Bir ilişkiyi bir tablonun zaten sahip olduğu sütunlarda sonlandırın: Fareyle veya kalemle bir ilişki çizerken, ilişkinin bittiği tablonun yanındaki Map to existing columns seçeneği üst tablonun anahtarını o tablonun sütunlarıyla eşleştirir, Create new columns seçeneği ise yeni sütunlar ekler. Bir ilişkinin bağlam menüsündeki Map Columns öğesi ilişkinin sütunlarını sonradan değiştirir. Sütunları eşleme bölümüne bakın. Bir ilişki ON DELETE ve ON UPDATE eylemleri de taşıyabilir. ON DELETE ve ON UPDATE bölümüne bakın.
• Hızlı düzenleyin: Alt + N tuşları bir tablo ekler; Alt + Enter tuşları bir sütun ekler; Alt + K tuşları birincil anahtarı odaktaki sütunda ya da bu sütun seçili sütunlardan biriyse seçili her sütunda açıp kapatır; Delete veya Backspace tuşu da seçimi siler. Her biri tek bir geri alma adımıdır. Kısayollar bölümüne bakın. Tuvalin altındaki tuval araç çubuğu da tek tıklamayla bir tablo veya not ekler.
• Bir tabloyu, notu veya tablo grubunu hazır renk örneklerini ve diyagramın zaten kullandığı renkleri sunan bir renk seçiciyle renklendirin, bir rengi de No color veya Remove color seçeneğiyle kaldırın. Tablo ve not rengi belirleme bölümüne bakın.
• İlgili tabloları tablo gruplarında toplayın: tabloların arkasında duran, adlandırıp renklendirebileceğiniz bir kutu. Bir grubu Alt + G tuşlarıyla ya da tuvalin bağlam menüsündeki, tuval araç çubuğundaki veya Hızlı aramadaki New Table Group öğesiyle çizin ya da seçili tablolardan T, ardından G tuşlarıyla veya bu tabloların bağlam menüsündeki Group selected tables öğesiyle bir grup oluşturun. Bir tabloyu grubun içine bıraktığınızda tablo gruba katılır, dışına bıraktığınızda gruptan ayrılır; bir grubu başlık çubuğundan sürüklemek de grubun tablolarını onunla birlikte taşır. DBML, grupları hem içe hem dışa aktarmada TableGroup blokları olarak taşır.
• Var olan bir şemayı json, Schema SQL, GraphQL, DBML veya AML biçiminden içe aktarın. Dosyaları içe veya dışa aktarma sayfasına bakın. Bir Şema SQL, GraphQL, DBML veya AML dosyası, tabloları ilişkileri boyunca yerleştirilmiş olarak, hiç ilişkisi yoksa satırlara dizilmiş olarak gelir. Import and Add öğesi bir dosyayı, diyagramı onunla değiştirmek yerine diyagramın altına ekler.
• Diyagramı dışa aktarın: json olarak; Şema SQL sekmesinden, .sql dosyası olarak kaydedilen ya da kopyalanan Şema SQL olarak; veya Export image iletişim kutusundan PNG ya da SVG görüntüsü olarak ya da panoda bir PNG olarak.
• Şema SQL'i sekiz veritabanı sisteminin söz diziminde oluşturun: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake ve SQLite. Tabloyla ilgili işlevler bölümüne bakın. Şema SQL sekmesinin seçenekler paneli yazılacak ifadeleri, başlığı ve tablo gruplarını seçer, ayrıca tablolardan önce ve sonra yazılmak üzere kendi SQL'inizi diyagramda saklar.
• Yirmi iki hedef için kod oluşturun: C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift ve TypeScript dilleri; Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy ve TypeORM ORM'leri; ayrıca AML, DBML, GraphQL, JSON Schema, Mermaid ve Zod. Kod oluşturucu sekmesinin seçenekler paneli dili, veritabanını ve ad biçimlerini seçer, kod da dilin uzantısını taşıyan bir dosya olarak kaydedilir veya kopyalanır. Kod oluşturucu sayfasına bakın.
• Şemayı Görselleştirme sekmesinde kuvvet yönelimli bir Graph ya da ilişkileri boyunca yerleştirilmiş tablo kartlarından oluşan bir Flow olarak inceleyin. Bu akışta bir tablonun üzerine gelmek, tablonun dokunduğu her şeyi vurgular. Seçili tablolara ve onlarla ilişkili tablolara odaklanmak için ERD sekmesinde Alt + F tuşlarına basın.
• Kenarı olmayan bir tuvalde çalışın: Diyagram nereye uzanırsa oraya kaydırın, Ctrl + Wheel (Mac'te ⌘ + Wheel), klavye ya da kıstırma hareketi ile yakınlaştırmayı 10% ile 150% arasında ayarlayın ve Zen moduyla diyagram dışındaki her şeyi kaldırın. Farenin orta düğmesiyle sürüklemek, tuvalin her yerinden, bir tablonun üzerinden bile görünümü kaydırır. Tuvalde gezinme bölümüne bakın.
• Otomatik düzen ile bütün bir diyagramı tek adımda yerleştirin: bir kuvvet simülasyonu, soldan sağa bir akış ya da iki yönden birinde bir ağaç; her tablo grubu bir arada tutulur.
• Hızlı aramayla her yerden bir komut çalıştırın ya da bir tabloya, bir sütuna veya bir açıklamaya ya da nota atlamak için aramayı #, @ veya : ile başlatın. Geri al, yinele ile düzenleme geçmişinde adım adım ilerleyin, bu oturumun geçmişini Zaman yolculuğuyla tuvalde yeniden oynatın ya da diyagramı Fark görüntüleyicide başka bir .json dosyasıyla karşılaştırın. Fark görüntüleyicinin iki sürümün yanında duran ağacı, eklenen, değiştirilen, silinen veya yeniden adlandırılan tabloları, sütunları, dizinleri, yabancı anahtarları, notları ve tablo gruplarını listeler.
• Diyagrama, tuvalin soluna yerleşik bir ağaç olan Gezginde göz atın: her biri kendi sütunları, dizinleri ve yabancı anahtarlarıyla birlikte tablolar, ardından tablo grupları ve notlar. Bir satırın tuvalde temsil ettiği öğeye gitmek için o satıra tıklayın; bir yabancı anahtar satırı ilişkisini de vurgular. Araç çubuğunda Search düğmesinin yanındaki Explorer düğmesi Gezgini açar ve kapatır.
• Gezginin üst kısmındaki Bul ve değiştir ile metin bulun. Tablo, sütun, dizin ve tablo grubu adlarında, açtığınızda da açıklamalarda ve notlarda arar ve eşleşmeleri Gezginin ağacında gösterir. Tek bir eşleşmeyi veya hepsini değiştirin; Preserve Case seçeneği her yeni metne, yerini aldığı metnin büyük/küçük harf biçimini verir. Ctrl + F (Mac'te ⌘ + F) tuşları Gezgini, metin imleci Bul alanında olacak şekilde açar, tuşlara yeniden basmak da Gezgini kapatır.
• Düzenleyiciyi araç çubuğundaki Display Language düğmesinden veya Hızlı aramadan seçilen 25 dilde kullanın. System seçeneği tarayıcının veya ana uygulamanın dilini izler; Arapça, İbranice ve Farsça ise diyagram soldan sağa kalırken düzenleyiciyi sağdan sola yerleştirir. Yalnızca düzenleyicinin kendi metni değişir: Adlar, SQL ve oluşturulan kod yazıldığı gibi kalır. Araç çubuğundaki tema oluşturucu görünüşü (System, Light veya Dark), bir gri tonunu ve bir vurgu rengini seçer. Dil ve tema sayfasına bakın.
• Farkları temiz tutun: Kaydırma konumu ve yakınlaştırma, açık sekme, Kod oluşturucunun dili ve ad biçimleri ile tırnak türü varsayılan olarak kilitlidir, bu yüzden dosya bunların kilitlendikleri andaki değerlerini korur ve kaydırmak, yakınlaştırmak veya sekme değiştirmek dosyayı asla değiştirmez. Dosya sabit bir sırayla yazılır ve ölçülen genişlikleri, katman sırasını, bağlantı çizgilerinin bağlantı noktalarını ve kaldırılan öğeleri dışarıda bırakır, böylece bir diyagramı açıp düzenlemeden kapatmak dosyayı olduğu gibi bırakır.
• Claude Code veya Codex gibi bir kodlama ajanının diyagramı MCP sunucusu aracılığıyla düzenlemesini sağlayın: her değişikliğin gerçekleştiği anda tuvalde göründüğü VS Code'da, Obsidian'da veya bir JetBrains IDE'sinde canlı olarak ya da dosyanın kendisinde.
• Web uygulamasında gerçek zamanlı olarak birlikte düzenleyin (deneysel). Oturumlar eşler arası ve uçtan uca şifrelidir, bu nedenle hiçbir sunucu şemanızı tutmaz ve eşler birbirlerinin imleçlerini, odaklarını ve seçimlerini görür. Kendi sayfanızda getSharedStore() yöntemi size aynı eylem akışını seçtiğiniz taşıma katmanı üzerinden sunar.

Düzenleme kılavuzuyla başlayın.

Bu projenin arkasındaki neden

Mevcut modelleme araçları istediğim düzeyde bir kullanıcı deneyimi sunmuyordu.
Bu yüzden en üst düzey kullanıcı deneyimini sunmak için bu projeyi başlattım.
Projenin en önemli önceliği kullanıcının düzenleme deneyimidir.
Size düzenlemede hayret verici bir deneyim sunacak.