جاسازی

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 را در زبانه‌ای تازه باز می‌کند و هیچ referrer‌ای برایش نمی‌فرستد، بنابراین کلیک به سایت چیزی دربارهٔ سندی که قاب نشان می‌دهد نمی‌گوید. در یک قاب باریک می‌تواند بخشی از نوار کنترل‌ها را بپوشاند.

تا وقتی فایل بارگذاری می‌شود، قاب 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، نشانی آن در میزبان raw گیت‌هاب — فایل‌ها در GitHub را ببینید.
2. گزینه‌ها را انتخاب کنید. هر کدام بی‌درنگ روی پیش‌نمایش، نشانی و خط 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: زبان‌های مرورگر بیننده، همان‌طور که 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 شروع می‌کند.

• سازنده هر گزینه‌ای را که روی پیش‌فرض باشد از نشانی بیرون می‌گذارد، بنابراین نشانی جاسازی فقط آنچه را که فرق دارد در خود دارد.
• مقداری که نمایشگر نمی‌پذیرد نادیده گرفته می‌شود و گزینهٔ آن پیش‌فرض را نگه می‌دارد. مقادیر دقیقاً همان‌طور که فهرست شده‌اند تطبیق داده می‌شوند، بنابراین theme=Dark نادیده گرفته می‌شود و minimap و controls برای هر مقداری جز false نمایان می‌مانند.
• پارامتری که دو بار داده شود مقدار اول را می‌گیرد.
• src همان‌طور که سازنده می‌نویسد با رمزگذاری URL است، چون نشانی‌ای که & یا # خودش را داشته باشد در غیر این صورت کوتاه می‌شود.

فایل‌ها در GitHub

فایل یا gist در GitHub را می‌توان با نشانی‌ای که صفحه‌اش نشان می‌دهد داد، همان‌طور که قاب بالا چنین است. نمایشگر آن را به‌جای آن از میزبان raw گیت‌هاب دریافت می‌کند، که به درخواست سایتی دیگر پاسخ می‌دهد، در حالی که نشانی خود صفحه پاسخ نمی‌دهد:

• صفحهٔ یک فایل، 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های عمومی کار می‌کند. میزبان raw هر فایل را پنج دقیقه نگه می‌دارد، بنابراین تغییری که push می‌کنید ممکن است تا آن مدت در قاب دیده نشود.

فایل‌ها در سرورهای دیگر

نمایشگر در 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) جست‌وجویی روی سند باز می‌کند، که در آن # یک جدول، @ یک ستون و : یک توضیح یا یادداشت را پیدا می‌کند.
کشیدن نمودار را جابه‌جا می‌کند، چه قاب فوکوس داشته باشد چه نداشته باشد، و کلیک یا لمس رابطه‌ها را روشن می‌کند: رابطه‌های جدولی که روی آن کلیک شده، یا همان یک رابطه‌ای که روی آن کلیک شده. جدولی که نشانگر روی آن می‌ایستد رابطه‌های خودش را روشن می‌کند. برای هر کلید فوکوس و کلیدها را ببینید.

برای امتحان روی نموداری بزرگ‌تر، با بزرگ‌نمایی و جست‌وجو، نمونهٔ bookstore را باز کنید، با نُه جدول و دو گروه جدول، در صفحه‌ای جداگانه.

تحلیل‌ها

erd-editor.io بازدیدهای قاب را با Google Analytics می‌شمارد، همان‌طور که بازدیدهای برنامهٔ وب را می‌شمارد. نشانی‌ای که برای یک قاب ثبت می‌کند فقط erd-editor.io/embed است، بدون نشانی سندی که src نام می‌برد.
سیاست حریم خصوصی را ببینید.

بارگذاری خود نمایشگر

صفحه‌ای که می‌تواند اسکریپت بارگذاری کند می‌تواند به‌جای آن یک نمودار را با عنصر <erd-viewer> از بستهٔ @dineug/erd-editor نشان دهد. همان گزینه‌ها را به‌صورت صفت و متد می‌گیرد، هیچ درخواستی به erd-editor.io نمی‌فرستد و می‌تواند سندی را از سایت خود صفحه بارگذاری کند، که به CORS نیاز ندارد.