דילוג לתוכן הראשי

מבוא

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

תרשים של חנות: ריחוף עם הסמן מעל קשר, הוספת עמודה והתמקדות ב-orders במצב Flow

היכן להשיג את העורך​

פלטפורמההתקנהמה מקבלים
אפליקציית הרשתerd-editor.ioPWA שניתן להתקין, עבודה במצב לא מקוון, שיתוף פעולה בזמן אמת
Google DriveGoogle Workspace Marketplaceהוספת ERD Editor לתפריטים Open with ו-New של Drive, ושמירה חזרה לאותו קובץ
VS CodeMarketplaceפתיחת קבצי .erd.json בעורך מותאם אישית
IntelliJJetBrains Marketplaceאותו עורך, עבור סביבות IDE מבוססות IntelliJ
ObsidianCommunity 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() מספק את אותו זרם פעולות על גבי שכבת התעבורה שבוחרים.

מומלץ להתחיל במדריך העריכה.

הסיבה מאחורי הפרויקט​

כלי המידול הקיימים לא סיפקו את רמת חוויית המשתמש שרציתי.
לכן יזמתי את הפרויקט הזה כדי להעניק את חוויית המשתמש הטובה ביותר.
העדיפות העליונה של הפרויקט היא חוויית העריכה של המשתמש.
הפרויקט יעניק חוויית עריכה מדהימה.