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

מבוא

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

תרשים של חנות: ריחוף עם הסמן מעל קשר, הוספת עמודה והתמקדות ב-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>, שאינו תלוי באף מסגרת עבודה, ו-<erd-viewer>, שמציג תרשים לקריאה בלבד – ראו התקנה ו-ErdViewerElement
כל אתרerd-editor.io/embedתרשים לקריאה בלבד ב-iframe, מכתובת ה-URL של מסמך, בלי קוד – ראו הטמעה
סוכני קוד@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 ואת @dineug/erd-editor-mcp בכל מקום שבו משתפים תרשימים. גרסה שקודמת לכרטיסיית מילון, או שרת MCP בגרסה קודמת שעורך קובץ בדיסק, שומרים את התרשים בלי השמות הלוגיים, הקישורים לתחומים והמילונים שלו. גרסה שקודמת לקבוצות הטבלאות גם אינה מציגה סמלי מפתח ראשי בקובץ שהגרסה הנוכחית שמרה, ושמירת הקובץ שם משמיטה ממנו את קבוצות הטבלאות ואת הסקריפטים של סכמת 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.
  • מתן שמות לוגיים לטבלאות ולעמודות, השמות שאנשים קוראים, כגון Customer Name עבור CUST_NM, לצד השמות הפיזיים שסכמת SQL ומחולל הקוד כותבים. תצוגת השמות (Physical Names, Logical Names או Both Names) קובעת אילו מהם בד הציור מציג, ורוב המקומות האחרים שמציגים שם של טבלה או של עמודה, כגון שורות הטבלאות והעמודות בסייר, מצב זרימה ותמונה מיוצאת, עוקבים אחריה. ניתן לבחור אותה מהלחצן Name View בסרגל הכלים של בד הציור, מתפריט ההקשר של בד הציור, מסרגל הכלים של ויזואליזציה במצב Flow או מהחיפוש המהיר.
  • שמירת תקן השמות של התרשים בכרטיסיית מילון. בגיליונות Domains, Words ו-Terms שלה ניתן לחפש, למיין ולערוך כמו בגיליון אלקטרוני, ולכל אחד מהם היסטוריית פעולות משלו. הגיליונות מייבאים ומייצאים CSV: ייבוא קורא את המבנה של העורך עצמו או את המבנה של תקן הנתונים הציבוריים של קוריאה, ב-UTF-8 או ב-EUC-KR, וייצוא כותב את המבנה של העורך עצמו. תא השם הלוגי משלים שמות של מונחים. שם לוגי נותן לטבלה או לעמודה שלו שם פיזי מהמונח התואם, או מהקיצורים של המילים שהוא מתפצל אליהן, עד שהשם נכתב ידנית. אחרי שמילה או מונח משתנים, Derive Physical Names Again גוזר את השמות מחדש, כולל שמות שנכתבו ידנית. עמודה שמקושרת לתחום, ידנית או דרך המונח שלה, מקבלת את סוג הנתונים של התחום ועוקבת אחרי השינויים בו, ואפשרות התצוגה Domain מציגה את התחום של כל עמודה. הגיליון Checks מפרט מילים אסורות, מילים לא רשומות ומילים נרדפות, שמות כפולים, תחומים לא ידועים, שמות פיזיים ששונים מהשם של המונח שלהם, וסוגי עמודות ששונים מהסוג של התחום שלהן. בד הציור צובע את השמות הלוגיים והפיזיים שבדיקות המילים והמונחים מסמנות.
  • ייבוא סכמה קיימת מ-json, מ-Schema SQL, מ-GraphQL, מ-DBML או מ-AML. ראו ייבוא וייצוא של קבצים. קובץ סכמת SQL, GraphQL, DBML או AML מיובא כשהטבלאות שלו פרוסות לאורך הקשרים שלהן, או בשורות כשאין בו קשרים. הפקודה Import and Add מוסיפה קובץ מתחת לתרשים במקום להחליף אותו.
  • ייצוא התרשים כ-json; כסכמת SQL מכרטיסיית סכמת SQL, שנשמרת כקובץ .sql או מועתקת; או מתיבת הדו-שיח Export image כתמונת PNG או SVG, או כ-PNG בלוח.
  • הצגת תרשים לקריאה בלבד באתר אחר: מסגור של erd-editor.io/embed עם כתובת ה-URL של קובץ, גם כזה ב-GitHub, או טעינה של האלמנט <erd-viewer> בדף של האתר. קורא מזיז את התצוגה, מתקרב, מחפש ומאיר קשרים, ודבר אינו עורך את התרשים.
  • כתיבת סכמת 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 כדי להתמקד בטבלאות שנבחרו ובטבלאות הקשורות אליהן. במצב Flow, Previous table ו-Next table מבצעים צעד אחורה וצעד קדימה בין מה שמצב הזרימה צומצם אליו, כמו מקשי ביטול הפעולה והביצוע החוזר שם.
  • עבודה על בד ציור ללא קצוות: הזזת התצוגה לכל מקום שהתרשים מגיע אליו, זום מ-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, שבהם כל שינוי מופיע על בד הציור ברגע שהוא מתבצע, או בקובץ עצמו. הוא יכול גם לקבוע שמות לוגיים ותחומים של עמודות, לערוך את המילונים, לגזור מחדש שמות פיזיים ולפרט את מה שהגיליון Checks מוצא.
  • עריכה משותפת בזמן אמת באפליקציית הרשת (ניסיוני). הסשנים הם עמית לעמית ומוצפנים מקצה לקצה, כך ששום שרת אינו מחזיק את הסכמה, והעמיתים רואים את סמני העכבר, את הפוקוס ואת הבחירות זה של זה. בדף שמטמיע את העורך, getSharedStore() מספק את אותו זרם פעולות על גבי שכבת התעבורה שבוחרים, ו-@dineug/erd-editor-yjs שומר על התרשים מסונכרן באמצעות מסמך Yjs וכל ספק שנושא אותו, כולל עריכות במצב לא מקוון ונוכחות.

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

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

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