הטמעה

erd-editor.io/embed מציג תרשים לקריאה בלבד במציג שממלא את הדף, כדי שאתר אחר ימסגר אותו: ויקי, בלוג, בונה אתרים או כל דף שאינו יכול לטעון סקריפטים משלו.
הפרמטר src שלו מציין את המסמך, כתובת של קובץ כפי ש-ERD Editor שומר אותו, כמו קובץ .erd.json. שאר הכתובת קובע איך המציג מציג אותו, והבונה באותה כתובת כותב בשבילכם את כתובת ה-URL ואת שורת ה-iframe שלה.

המסגרת הזו מציגה את data/embed-small.erd.json ממאגר erd-editor, וזו השורה שמכניסה אותה לדף:

<iframe src="https://erd-editor.io/embed?src=https%3A%2F%2Fgithub.com%2Fdineug%2Ferd-editor%2Fblob%2Fmain%2Fdata%2Fembed-small.erd.json" width="100%" height="480" style="border: 0" loading="lazy" title="ERD Editor"></iframe>

מה המסגרת מציגה

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

מעל בד הציור נמצאים:

• מפת המיני, כל עוד יש בתרשים תוכן.
• סרגל הפקדים בתחתית: Zoom out, רמת הזום, שלחיצה עליה מאפסת את הזום, Zoom in, Fit, הרשימה Name View, ו-Go to content כל עוד אף חלק מהתרשים אינו על המסך.
• הקישור erd-editor.io בפינה הימנית התחתונה, שפותח את erd-editor.io בכרטיסייה חדשה ואינו שולח לו referrer, ולכן הלחיצה אינה מוסרת לאתר דבר על המסמך שהמסגרת מציגה. במסגרת צרה הוא יכול לכסות חלק מסרגל הפקדים.

בזמן שהקובץ נטען, המסגרת מציגה Loading diagram. אם אי אפשר להביא אותו או שהוא אינו מכיל מסמך, המסגרת מציגה תרשים ריק עם Couldn't load the diagram – ראו קבצים ב-GitHub ו-קבצים בשרתים אחרים.

המסגרת עוקבת אחרי כתובת ה-URL שלה ואחרי המערכת של המבקר בלבד. השפה וערכת הנושא של המבקר עצמו ב-erd-editor.io אינן חלות בה.

הבונה

יש לפתוח את erd-editor.io/embed בלי src כדי לקבל את הבונה, דף שכותרתו Embed a diagram:

1. להדביק את כתובת המסמך ב-Document URL. היא נכנסת לתוקף בלחיצה על Enter או ביציאה מהשדה, ולכן הקלדה אינה מביאה דבר. ברגע שהיא נכנסת לתוקף, שורת Loads from מתחת לשדה מציינת את הכתובת שהמציג מביא: זו שנתתם, או, עבור דף ב-GitHub, הכתובת שלו במארח הגולמי של GitHub – ראו קבצים ב-GitHub.
2. לבחור את האפשרויות. כל אחת נכנסת לתוקף מיד בתצוגה המקדימה, בכתובת ה-URL ובשורת ה-iframe:
   • Theme: System, Light או Dark.
   • Display Language: System, כשהשפה שהוא מייצג בדפדפן שלכם לצדו, ואחריו 25 השפות, כל אחת בשמה שלה.
   • Name View: As Saved, Physical Names, Logical Names או Both Names. As Saved מציג את תצוגת השמות ששמר הקובץ.
   • Accent color ו-Gray color, כל אחד ברשימה לפי שם עם דוגמית צבע.
   • Minimap ו-Controls, שני מתגים, שניהם מופעלים.
   • Height, בפיקסלים, 480 בהתחלה. גובה שאינו מספר שלם חיובי נחשב כ-480.
3. לבדוק את Preview: המציג כפי שהמסגרת תציג אותו, עם הקישור erd-editor.io, בתיבה גבוהה כמו Height. שפת ה-System שלו היא זו של הדפדפן שלכם, יהיו השפה ש-erd-editor.io עצמו מציג אשר תהיה.
4. להעתיק את התוצאה. Embed URL היא הכתובת של המסגרת, ו-Embed code שורת ה-iframe, עם הגובה שקבעתם והרוחב 100%. לכל אחת יש לחצן Copy, שנשאר מושבת עד שכתובת מסמך נכנסת לתוקף, ושמציג Copied לרגע אחרי העתקה, עד ששינוי כותב מחדש את מה שהועתק.

ניקוי Document URL מרוקן את התצוגה המקדימה ואת שתי התוצאות ברגע שהניקוי נכנס לתוקף.

פרמטרים בכתובת

פרמטר	ערכים	ברירת מחדל
src	כתובת המסמך, מקודדת כ-URL.	אין: בלעדיו, או עם ערך ריק, הדף הוא הבונה.
theme	light, dark או system.	system: המצב הבהיר או הכהה שהדפדפן של המבקר מדווח עליו.
locale	system, או קוד מטבלת השפות, כמו de-DE.	system: שפות הדפדפן של המבקר, מותאמות כפי ש-מערכת מתאימה אותן, ואנגלית כשאין למציג אף אחת מהן.
name-view	physical, logical או both.	תצוגת השמות ששמר הקובץ.
minimap	false מסתיר את מפת המיני.	מוצגת.
controls	false מסתיר את סרגל הפקדים.	מוצג.
accent-color	אחד מ-26 צבעי ההדגשה של בונה ערכת הנושא, כמו jade.	indigo
gray-color	gray, mauve, slate, sage, olive או sand.	slate

ברירות המחדל הן אלה של המציג עצמו, לא של אפליקציית הרשת, שמתחילה ב-jade וב-olive.

• הבונה משמיט מכתובת ה-URL כל אפשרות שנשארה בברירת המחדל שלה, ולכן כתובת הטמעה מכילה רק את מה ששונה.
• ערך שהמציג אינו מקבל מתעלמים ממנו, והאפשרות שלו שומרת על ברירת המחדל. הערכים מותאמים בדיוק כפי שהם רשומים, ולכן theme=Dark מתעלמים ממנו, ו-minimap ו-controls נשארים מוצגים לכל ערך מלבד false.
• פרמטר שניתן פעמיים לוקח את הערך הראשון שלו.
• src מקודד כ-URL, כפי שהבונה כותב אותו, כי כתובת שמכילה & או # משלה נחתכת אחרת.

קבצים ב-GitHub

אפשר לתת קובץ או gist ב-GitHub לפי הכתובת שהדף שלו מציג, כמו המסגרת שלמעלה. המציג מביא אותו במקום זאת מהמארח הגולמי של GitHub, שעונה לבקשה של אתר אחר במקום שבו הכתובת של הדף עצמו אינה עונה:

• דף של קובץ, https://github.com/<owner>/<repo>/blob/<ref>/<path>, או הכתובת raw שלו, https://github.com/<owner>/<repo>/raw/<ref>/<path>, נטען מ-https://raw.githubusercontent.com/<owner>/<repo>/<ref>/<path>. <ref> הוא ענף, תג או commit: ענף מציג את הקובץ כפי שיש לאותו ענף, ותג או commit שומרים את הגרסה הזו.
• דף של gist, https://gist.github.com/<user>/<id>, נטען מ-https://gist.githubusercontent.com/<user>/<id>/raw, שהוא הקובץ הראשון של ה-gist. יש להשאיר את התרשים כקובץ היחיד של ה-gist.

כתובת ההטמעה שומרת את הכתובת שנתתם, ושורת Loads from של הבונה מציגה את זו שהובאה.
זה עובד עבור מאגרים ציבוריים ו-gists ציבוריים בלבד. המארח הגולמי שומר כל קובץ במטמון למשך חמש דקות, ולכן שינוי שדחפתם יכול להימשך עד חמש דקות עד שיופיע במסגרת.

קבצים בשרתים אחרים

המציג ב-erd-editor.io מביא את הקובץ בבקשת GET פשוטה מהדפדפן של המבקר, ולכן השרת שמחזיק בו צריך להתיר את הבקשה הזו בין מקורות (CORS): התשובה שלו צריכה כותרת Access-Control-Allow-Origin שמתירה את https://erd-editor.io, כמו *.
הבקשה אינה נושאת עוגיות, ולכן הקובץ צריך להיות קריא בלי התחברות.
בלי הכותרת הזו, או עבור כתובת שעונה בשגיאה או במשהו שאינו מסמך של ERD Editor, המסגרת מציגה Couldn't load the diagram.

בתוך המסגרת

המסגרת אינה מקבלת גלגלת, מחווה או מקש עד שמבקר לוחץ עליה, מקיש עליה או מגיע אליה באמצעות Tab. עד אז הגלגלת, החלקה וצביטה גוללות או מקרבות את הדף שסביבה כרגיל.
כשיש לה פוקוס, הגלגלת מזיזה את התרשים, Ctrl + Wheel (Windows/Linux) או ⌘ + Wheel (Mac) וצביטה מקרבים אותו, ו-Ctrl + K (Windows/Linux) או ⌘ + K (Mac) פותח חיפוש במסמך, שבו # מוצא טבלה, @ עמודה ו-: הערה או פתק.
גרירה מזיזה את התרשים בין אם למסגרת יש פוקוס ובין אם לא, ולחיצה או הקשה מאירות קשרים: אלה של הטבלה שנלחצה, או הקשר היחיד שנלחץ. הטבלה שהמצביע נח עליה מאירה את שלה. ראו פוקוס ומקשים לכל המקשים.

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

ניתוח נתונים

erd-editor.io סופר ביקורים במסגרת באמצעות Google Analytics, כפי שהוא סופר ביקורים באפליקציית הרשת. הכתובת שהוא רושם עבור מסגרת היא erd-editor.io/embed בלבד, בלי כתובת המסמך ש-src מציין.
ראו את מדיניות הפרטיות.

טעינת המציג בעצמכם

דף שיכול לטעון סקריפטים יכול להציג תרשים באמצעות האלמנט <erd-viewer> מהחבילה @dineug/erd-editor במקום זאת. הוא מקבל את אותן אפשרויות כתכונות וכמתודות, אינו שולח אף בקשה ל-erd-editor.io, ויכול לטעון מסמך מהאתר של הדף עצמו, מה שאינו דורש CORS.