التضمين

erd-editor.io/embed يعرض مخططًا للقراءة فقط في عارض يملأ الصفحة، ليؤطره موقع آخر: ويكي أو مدونة أو أداة بناء مواقع أو أي صفحة لا تستطيع تحميل سكربتات خاصة بها.
ومعامله src يسمّي المستند، أي عنوان ملف كما يحفظه ERD Editor، مثل ملف .erd.json. وبقية العنوان تضبط كيف يعرضه العارض، والمُنشئ على العنوان نفسه يكتب لك العنوان وسطر 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 في علامة تبويب جديدة ولا يرسل إليه أي مُحيل، فلا تخبر النقرة الموقع بشيء عن المستند الذي يعرضه الإطار. وفي إطار ضيق قد يغطي جزءًا من شريط عناصر التحكم.

وأثناء تحميل الملف يعرض الإطار Loading diagram. وإذا تعذّر جلبه أو لم يحمل مستندًا، يعرض الإطار مخططًا فارغًا مع Couldn't load the diagram، راجع ملفات على GitHub وملفات على خوادم أخرى.

ويتبع الإطار عنوانه ونظام الزائر وحدهما. ولا تنطبق فيه لغة الزائر ونسقه الخاصان بـerd-editor.io.

المُنشئ

افتح erd-editor.io/embed دون src لتحصل على المُنشئ، وهو صفحة عنوانها Embed a diagram:

1. الصق عنوان المستند في Document URL. وهو يُطبَّق حين تضغط Enter أو تغادر الحقل، لذا لا تجلب الكتابة شيئًا. وبعد أن يُطبَّق، يسمّي سطر Loads from تحت الحقل العنوان الذي يجلبه العارض: الذي أعطيته، أو، لصفحة على GitHub، عنوانها على المضيف الخام لـGitHub، راجع ملفات على GitHub.
2. اختر الخيارات. ويُطبَّق كل منها فورًا على المعاينة والعنوان وسطر iframe:
   • Theme: System أو Light أو Dark.
   • Display Language: System، مع اللغة التي يمثلها في متصفحك بجانبه، ثم اللغات الخمس والعشرون، كل منها باسمها.
   • 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: لغات متصفح الزائر، تُطابَق كما يطابقها System، والإنجليزية حين لا يملك العارض أيًّا منها.
name-view	physical أو logical أو both.	عرض الأسماء الذي حفظه الملف.
minimap	false يخفي الخريطة المصغّرة.	ظاهرة.
controls	false يخفي شريط عناصر التحكم.	ظاهر.
accent-color	واحد من ألوان التمييز الستة والعشرين في منشئ النسق، مثل jade.	indigo
gray-color	gray أو mauve أو slate أو sage أو olive أو sand.	slate

القيم الافتراضية هي قيم العارض نفسه، لا قيم تطبيق الويب، الذي يبدأ على jade وolive.

• يترك المُنشئ كل خيار عند قيمته الافتراضية خارج العنوان، فلا يحمل عنوان التضمين إلا ما يختلف.
• والقيمة التي لا يقبلها العارض تُتجاهل، ويحتفظ خيارها بالقيمة الافتراضية. وتُطابَق القيم كما هي مسرودة تمامًا، فـ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 في المُنشئ العنوان المجلوب.
وهذا يعمل للمستودعات العامة وgist العامة فقط. ويخزّن المضيف الخام كل ملف مؤقتًا خمس دقائق، لذا قد يستغرق ظهور تغيير تدفعه في الإطار هذه المدة.

ملفات على خوادم أخرى

يجلب العارض في 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.