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; yanında bir diyagramı salt okunur göstermek için <erd-viewer> vardır. Kendi script'ini yüklemeyen bir site, bunun yerine erd-editor.io/embed adresinden salt okunur bir diyagramı çerçeveleyebilir. 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 ve bir diyagramı salt okunur gösteren <erd-viewer>. Kurulum ve ErdViewerElement sayfalarına bakın.
Herhangi bir site	erd-editor.io/embed	Bir belgenin URL'sinden, kodsuz, bir iframe içinde salt okunur diyagram. Gömme 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, sekme değiştirmek ve Ad görünümünü 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 ve @dineug/erd-editor-mcp sürümlerini güncelleyin. Sözlük sekmesinden önceki bir sürüm ya da diskteki bir dosyayı düzenleyen daha eski bir MCP sunucusu, diyagramı mantıksal adları, değer alanı bağlantıları ve sözlükleri olmadan kaydeder. Tablo gruplarının eklenmesinden önceki bir sürüm ayrıca 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. Daha eski 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. Bu kayıt, eski sürümün yazdığı boş metinleri, listeleri ve koleksiyonları da atar, bu yüzden dosyada düzenlemenin değiştirdiğinden daha fazlasını değiştirir. O zamana kadar, tablo gruplarından önceki bir sürümün kaydettiği bir 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.
• Tablolara ve sütunlara, Şema SQL'in ve Kod oluşturucunun yazdığı fiziksel adların yanında, insanların okuduğu adlar olan mantıksal adlar verin, örneğin CUST_NM için Customer Name. Ad görünümü (Physical Names, Logical Names veya Both Names) tuvalin bunlardan hangisini göstereceğine karar verir ve Gezginin tablo ve sütun satırları, Akış modu ve dışa aktarılan bir görüntü gibi bir tabloyu veya sütunu adlandıran diğer yerlerin çoğu da onu izler. Ad görünümünü tuval araç çubuğundaki Name View düğmesinden, tuvalin bağlam menüsünden, Flow modunda Görselleştirme araç çubuğundan veya Hızlı aramadan seçin.
• Diyagramın adlandırma standardını Sözlük sekmesinde tutun. Sekmenin Domains, Words ve Terms sayfalarında bir elektronik tablodaki gibi arama, sıralama ve düzenleme yapılır ve her birinin kendine ait bir geri alma geçmişi vardır. Sayfalar CSV içe ve dışa aktarır: İçe aktarma, düzenleyicinin kendi düzenini ya da Kore'nin kamu veri standardının düzenini UTF-8 veya EUC-KR olarak okur, dışa aktarma ise düzenleyicinin kendi düzenini yazar. Mantıksal ad hücresi terim adlarını tamamlar. Bir mantıksal ad, adı kendiniz yazana kadar tablosuna veya sütununa eşleşen terimden ya da bölündüğü sözcüklerin kısaltmalarından bir fiziksel ad verir. Bir sözcük veya terim değiştikten sonra Derive Physical Names Again, kendi yazdığınız adlar dahil, adları yeniden türetir. Elle ya da terimi aracılığıyla bir değer alanına bağlanan sütun değer alanının veri türünü alır ve değişikliklerini izler, Domain görünüm seçeneği de her sütunun değer alanını gösterir. Checks sayfası yasaklı, kayıtlı olmayan ve eş anlamlı sözcükleri, yinelenen adları, bilinmeyen değer alanlarını, teriminkinden farklı olan fiziksel adları ve değer alanınınkinden farklı olan sütun türlerini listeler. Tuval, sözcük ve terim denetimlerinin sorun bulduğu mantıksal ve fiziksel adları renklendirir.
• 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.
• Bir diyagramı başka bir sitede salt okunur gösterin: erd-editor.io/embed adresini bir dosyanın URL'siyle, GitHub'daki bir dosya dahil, çerçeveleyin ya da kendi sayfanıza <erd-viewer> öğesini yükleyin. Okuyucu kaydırır, yakınlaştırır, arar ve ilişkileri aydınlatır; hiçbir şey diyagramı düzenlemez.
• Ş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, mantıksal adları boş açıklamalara yazabilir ve 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. Flow modunda Previous table ve Next table düğmeleri, oradaki geri alma ve yineleme tuşları gibi, Akış modunun daraltıldığı tablolar arasında geri ve ileri adım atar.
• 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; # ve @ mantıksal adlarla da eşleşir. 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, tabloların ve sütunların mantıksal 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, tırnak türü ve Ad görünümü varsayılan olarak kilitlidir, bu yüzden dosya bunların kilitlendikleri andaki değerlerini korur ve kaydırmak, yakınlaştırmak, sekme değiştirmek veya Ad görünümünü değiştirmek dosyayı asla değiştirmez. Dosya, her sözlük satırı için bir satır olmak üzere sabit bir sırayla yazılır ve ölçülen genişlikleri, katman sırasını, bağlantı çizgilerinin bağlantı noktalarını, kaldırılan öğeleri, bir öğenin boş metnini ve diyagramda hiç örneği bulunmayan türlerin listelerini ve koleksiyonlarını 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. Ajan ayrıca mantıksal adları ve sütunların değer alanlarını ayarlayabilir, sözlükleri düzenleyebilir, fiziksel adları yeniden türetebilir ve Checks sayfasının bulduklarını listeleyebilir.
• 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 ve @dineug/erd-editor-yjs diyagramı bir Yjs belgesi ve onu taşıyan herhangi bir sağlayıcı üzerinden, çevrimdışı düzenlemeler ve anlık durum bilgisi dahil, eşzamanlı tutar.

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.