מבוא
erd-editor הוא עורך תרשימי ישויות-קשרים.
הוא זמין כאפליקציית רשת, כאפליקציית Google Drive, כהרחבת VS Code, כתוסף ל-IntelliJ, כתוסף ל-Obsidian, וכאלמנט מותאם אישית <erd-editor> שניתן להטמיע בכל דף.
בכל אלה מדובר באותו עורך ובאותו פורמט מסמך.

היכן להשיג את העורך
| פלטפורמה | התקנה | מה מקבלים |
|---|---|---|
| אפליקציית הרשת | erd-editor.io | PWA שניתן להתקין, עבודה במצב לא מקוון, שיתוף פעולה בזמן אמת |
| Google Drive | Google Workspace Marketplace | הוספת ERD Editor לתפריטים Open with ו-New של Drive, ושמירה חזרה לאותו קובץ |
| VS Code | Marketplace | פתיחת קבצי .erd.json בעורך מותאם אישית |
| IntelliJ | JetBrains Marketplace | אותו עורך, עבור סביבות IDE מבוססות IntelliJ |
| Obsidian | Community plugins | פתיחת קבצי .erd ו-.erd.json בכרטיסייה של הכספת, במחשב שולחני בלבד |
| דף שמטמיע את העורך | npm install @dineug/erd-editor | האלמנט המותאם אישית <erd-editor>, שאינו תלוי באף מסגרת עבודה – ראו התקנה |
| סוכני קוד | @dineug/erd-editor-mcp | שרת MCP שמאפשר ל-Claude Code, ל-Codex או ללקוח אחר לערוך תרשים בזמן אמת ב-VS Code, ב-IDE של JetBrains או ב-Obsidian, או בקובץ עצמו |
כדי לנסות את העורך ב-IDE, יש ליצור קובץ ריק עם הסיומת .erd.json ולפתוח אותו.
ב-Obsidian, יש להריץ את הפקודה ERD Editor: Create new diagram מלוח הפקודות, או לבחור ב-New ERD בתפריט ההקשר של תיקייה בסייר הקבצים. כל אחת משתי הדרכים יוצרת קובץ .erd ריק ופותחת אותו.
ב-Google Drive, יש לבחור ב-New → More → ERD Editor, ואז להתחבר באמצעות Google. ERD Editor ניגש רק לקבצים שנוצרים או נפתחים באמצעותו.
באפליקציית הרשת, ב-Google Drive, ב-VS Code, ב-IDE של JetBrains וב-Obsidian, תרשים חדש וריק נפתח במסך הפתיחה, תפריט של צעדים ראשונים: New Table, New Memo, Import, Command Palette ו-Shortcuts.
גלילה, זום ומעבר בין כרטיסיות משאירים את הקובץ הריק של תרשים חדש כפי שהוא, כי בתרשים חדש כל הנעילות מופעלות. ראו נעילה.
VS Code פותח קובץ ERD כטקסט JSON ב-Source Control, ב-Local History, ב-Compare with Saved, בסקירות העריכה של הצ'אט של VS Code ושל סוכני קוד כגון GitHub Copilot ו-Claude Code, ובתצוגות הגרסאות של הרחבות כגון GitLens, GitHub Pull Requests ו-Git Graph, כך ששינוי מושווה שורה אחר שורה. הפקודה Reopen Editor With... מציגה גרסה מ-Git כתרשים לקריאה בלבד.
לאחר עדכון התוסף ל-Obsidian, יש להפעיל מחדש את Obsidian: עד אז, החלון שומר את העורך שהגרסה הקודמת טענה.
יש לעדכן את ERD Editor בכל מקום שבו משתפים תרשימים: גרסה שקודמת לקבוצות הטבלאות אינה מציגה סמלי מפתח ראשי בקובץ שהגרסה הנוכחית שמרה, ושמירת הקובץ שם משמיטה ממנו את קבוצות הטבלאות ואת הסקריפטים של סכמת SQL.
קובץ שגרסה כזו שמרה נכתב מחדש בצורה הנוכחית בשינוי הראשון שנשמר בקובץ – ראו נעילה. עד אז, עורך JSON שמאמת אותו מול ה-$schema שלו מדווח עליו כלא תקין.
מה העורך עושה
- שרטוט טבלאות, עמודות ופתקים על בד ציור ללא גבולות, וחיבורם באמצעות ארבעה סוגי קשרים:
Zero One,Zero N,One Only,One N. ראו תחילת העריכה. האינדקסים מוגדרים בחלון מאפייני הטבלה. אינדקס ייחודי על שתי עמודות או יותר הוא מפתח חלופי, וכשאפשרות התצוגהAlternate Keyמופעלת, התרשים מסמן את העמודות שלו ב-AK1.1,AK1.2וכן הלאה. ראו אינדקסים ומפתחות חלופיים. - סיום קשר על עמודות שכבר קיימות בטבלה: במהלך שרטוט קשר באמצעות עכבר או עט, האפשרות
Map to existing columnsשלצד הטבלה שבה הקשר מסתיים מצמידה את המפתח של טבלת האב לעמודות של אותה טבלה, והאפשרותCreate new columnsמוסיפה עמודות חדשות. הפריטMap Columnsבתפריט ההקשר של קשר משנה את העמודות שלו בשלב מאוחר יותר. ראו מיפוי עמודות. קשר יכול גם לכלול פעולות ON DELETE ו-ON UPDATE. ראו ON DELETE ו-ON UPDATE. - עריכה מהירה:
Alt + Nמוסיף טבלה;Alt + Enterמוסיף עמודה;Alt + Kמפעיל או מכבה את המפתח הראשי בעמודה הפעילה, או בכל העמודות שנבחרו כשהיא אחת מהן; ו-DeleteאוBackspaceמוחקים את הבחירה. כל פעולה כזו היא צעד ביטול אחד. ראו קיצורי מקשים. גם סרגל הכלים של בד הציור שבתחתית בד הציור מוסיף טבלה או פתק בלחיצה אחת. - צביעת טבלה, פתק או קבוצת טבלאות באמצעות בורר שמציע צבעים מוגדרים מראש ואת הצבעים שכבר בשימוש בתרשים, והסרת צבע באמצעות
No colorאוRemove color. ראו קביעת צבע לטבלאות ולפתקים. - קיבוץ טבלאות קשורות בקבוצות טבלאות: מלבן שמוצג מאחוריהן, שניתן לתת לו שם וצבע. ניתן לשרטט קבוצה באמצעות
Alt + Gאו באמצעותNew Table Groupמתפריט ההקשר של בד הציור, מסרגל הכלים של בד הציור או מהחיפוש המהיר, או ליצור קבוצה מהטבלאות שנבחרו באמצעותTואזGאו באמצעותGroup selected tablesבתפריט ההקשר שלהן. טבלה מצטרפת לקבוצה כשמשחררים אותה בתוכה ויוצאת ממנה כשמשחררים אותה מחוצה לה, וגרירת קבוצה בשורת הכותרת שלה מזיזה איתה את הטבלאות שלה. ב-DBML, הקבוצות נשמרות בייבוא ובייצוא כבלוקים שלTableGroup. - ייבוא סכמה קיימת מ-
json, מ-Schema SQL, מ-GraphQL, מ-DBMLאו מ-AML. ראו ייבוא וייצוא של קבצים. קובץ סכמת SQL, GraphQL, DBML או AML מיובא כשהטבלאות שלו פרוסות לאורך הקשרים שלהן, או בשורות כשאין בו קשרים. הפקודהImport and Addמוסיפה קובץ מתחת לתרשים במקום להחליף אותו. - ייצוא התרשים כ-
json; כסכמת SQL מכרטיסיית סכמת SQL, שנשמרת כקובץ.sqlאו מועתקת; או מתיבת הדו-שיחExport imageכתמונת PNG או SVG, או כ-PNG בלוח. - כתיבת סכמת SQL בתחביר של שמונה מסדי נתונים: Databricks, MSSQL, MariaDB, MySQL, Oracle, PostgreSQL, Snowflake ו-SQLite. ראו פעולות על טבלאות. חלונית האפשרויות של כרטיסיית סכמת SQL קובעת אילו משפטים, איזו כותרת ואילו קבוצות טבלאות ייכתבו, ושומרת בתרשים SQL מותאם אישית שייכתב לפני הטבלאות ואחריהן.
- יצירת קוד לעשרים ושניים יעדים: שפות הקוד C#, Go, Java, Kotlin, PHP, Rust, Scala, Swift ו-TypeScript; כלי ה-ORM Doctrine, Drizzle, JPA, SeaORM, Sequelize, SQLAlchemy ו-TypeORM; וכן AML, DBML, GraphQL, JSON Schema, Mermaid ו-Zod. חלונית האפשרויות של כרטיסיית מחולל קוד קובעת את שפת הקוד, את מסד הנתונים ואת סגנונות השמות, והקוד נשמר כקובץ עם הסיומת של שפת הקוד או מועתק. ראו מחולל קוד.
- קריאת הסכמה בויזואליזציה, כ-
Graphמבוסס כוחות או כ-Flowשל כרטיסי טבלאות שנפרסים לאורך הקשרים ביניהן, ושם ריחוף עם הסמן מעל טבלה מאיר את כל מה שהיא נוגעת בו. בכרטיסיית ERD, יש להקיש עלAlt + Fכדי להתמקד בטבלאות שנבחרו ובטבלאות הקשורות אליהן. - עבודה על בד ציור ללא קצוות: הזזת התצוגה לכל מקום שהתרשים מגיע אליו, זום מ-
10%עד150%באמצעותCtrl + Wheel(⌘ + Wheelב-Mac), המקלדת או צביטה, והסתרת כל מה שאינו התרשים באמצעות מצב זן. גרירה עם לחצן העכבר האמצעי מזיזה את התצוגה מכל מקום בבד הציור, גם מעל טבלה. ראו ניווט בבד הציור. - סידור תרשים שלם בצעד אחד באמצעות פריסה אוטומטית: סימולציית כוחות, זרימה משמאל לימין או עץ בכל אחד משני הכיוונים, כשכל קבוצת טבלאות נשמרת יחד.
- הרצת פקודה מכל מקום באמצעות החיפוש המהיר, או התחלת החיפוש ב-
#, ב-@או ב-:כדי לקפוץ לטבלה, לעמודה, או להערה או לפתק. מעבר צעד אחר צעד בהיסטוריית העריכה באמצעות ביטול פעולה וביצוע חוזר, הפעלה חוזרת של ההיסטוריה של הסשן הנוכחי על בד הציור באמצעות מסע בזמן, או השוואת התרשים לקובץ.jsonאחר במציג ההבדלים. העץ שלו, לצד שתי הגרסאות, מפרט את הטבלאות, העמודות, האינדקסים, המפתחות הזרים, הפתקים וקבוצות הטבלאות שנוספו, שונו, נמחקו או ששמם שונה. - עיון בתרשים בסייר, עץ שמעוגן לקצה השמאלי של בד הציור: הטבלאות, כל אחת עם העמודות, האינדקסים והמפתחות הזרים שלה, ואחריהן קבוצות הטבלאות והפתקים. לחיצה על שורה עוברת אל מה שהשורה מייצגת בבד הציור; שורה של מפתח זר מאירה גם את הקשר שלו. הלחצן
Explorerבסרגל הכלים, לידSearch, פותח וסוגר אותו. - איתור טקסט באמצעות איתור והחלפה בראש הסייר. הוא מחפש בשמות של טבלאות, עמודות, אינדקסים וקבוצות טבלאות, וגם בהערות ובפתקים לאחר שמפעילים אותם, ומציג את ההתאמות בעץ של הסייר. ניתן להחליף התאמה אחת או את כולן; המתג
Preserve Caseנותן לכל החלפה את הרישיות של הטקסט שהיא מחליפה.Ctrl + F(⌘ + Fב-Mac) פותח את הסייר כשסמן הטקסט בשדה האיתור, והקשה נוספת סוגרת את הסייר. - שימוש בעורך ב-25 שפות, שנבחרות מהלחצן
Display Languageבסרגל הכלים או מהחיפוש המהיר. האפשרותSystemעוקבת אחר השפה של הדפדפן או של הסביבה המארחת, ובערבית, בעברית ובפרסית העורך נפרס מימין לשמאל, בעוד שהתרשים נשאר משמאל לימין. רק הטקסט של העורך עצמו משתנה: שמות, SQL וקוד שנוצר נשארים כפי שנכתבו. בונה ערכת הנושא שבסרגל הכלים קובע את המראה (System,LightאוDark), גוון אפור וצבע הדגשה. ראו שפה וערכת נושא. - שמירה על השוואות נקיות בין גרסאות: מיקום הגלילה והזום, הכרטיסייה הפתוחה, שפת הקוד וסגנונות השמות של מחולל הקוד, וסוג המירכאות נעולים כברירת מחדל, ולכן הקובץ שומר את הערכים שהיו להם בעת הנעילה, וגלילה, זום או מעבר בין כרטיסיות לעולם אינם משנים אותו. הקובץ נכתב בסדר קבוע ואינו כולל רוחבים שנמדדו, את סדר השכבות, נקודות עיגון של קווי קשר ופריטים שהוסרו, ולכן פתיחת תרשים וסגירתו בלי עריכה משאירות את הקובץ כפי שהיה.
- מתן אפשרות לסוכן קוד כגון Claude Code או Codex לערוך את התרשים דרך שרת ה-MCP: בזמן אמת ב-VS Code, ב-Obsidian או ב-IDE של JetBrains, שבהם כל שינוי מופיע על בד הציור ברגע שהוא מתבצע, או בקובץ עצמו.
- עריכה משותפת בזמן אמת באפליקציית הרשת (ניסיוני). הסשנים הם עמית לעמית ומוצפנים מקצה לקצה, כך ששום שרת אינו מחזיק את הסכמה, והעמיתים רואים את סמני העכבר, את הפוקוס ואת הבחירות זה של זה. בדף שמטמיע את העורך,
getSharedStore()מספק את אותו זרם פעולות על גבי שכבת התעבורה שבוחרים.
מומלץ להתחיל במדריך העריכה.
הסיבה מאחורי הפרויקט
כלי המידול הקיימים לא סיפקו את רמת חוויית המשתמש שרציתי.
לכן יזמתי את הפרויקט הזה כדי להעניק את חוויית המשתמש הטובה ביותר.
העדיפות העליונה של הפרויקט היא חוויית העריכה של המשתמש.
הפרויקט יעניק חוויית עריכה מדהימה.