Вбудовування

erd-editor.io/embed показує діаграму лише для читання у засобі перегляду, який заповнює сторінку, щоб інший сайт вставив його у фрейм: вікі, блог, конструктор сайтів чи будь-яка сторінка, що не може завантажувати власних скриптів.
Його параметр src називає документ — адресу файлу в тому вигляді, в якому його зберігає ERD Editor, як-от файл .erd.json. Решта URL задає, як засіб перегляду його показує, а конструктор за тією самою адресою записує 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, яка залишається вимкненою, доки не застосується URL документа, і яка на мить після копіювання показує Copied, доки зміна не перепише скопійоване.

Очищення Document URL спорожнює попередній перегляд і обидва результати, щойно воно застосується.

Параметри 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.

• Конструктор не вносить до URL параметр, залишений зі значенням за замовчуванням, тож 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> — це гілка, тег або коміт: гілка показує файл у тому вигляді, в якому він є в цій гілці, а тег чи коміт зберігає цю версію.
• Сторінка gist, https://gist.github.com/<user>/<id>, завантажується з https://gist.githubusercontent.com/<user>/<id>/raw, тобто першого файлу gist. Тримайте діаграму єдиним файлом gist.

URL для вбудовування зберігає адресу, яку ви дали, а рядок Loads from конструктора показує ту, що завантажується.
Це працює лише для публічних репозиторіїв і публічних gist. Сирий хост кешує кожен файл на п’ять хвилин, тож зміна, яку ви надіслали, може показатися у фреймі не одразу, а через цей час.

Файли на інших серверах

Засіб перегляду на erd-editor.io завантажує файл звичайним GET із браузера відвідувача, тож сервер, на якому він лежить, має дозволити цей міждоменний запит (CORS): у його відповіді потрібен заголовок Access-Control-Allow-Origin, що дозволяє https://erd-editor.io, як-от *.
Запит не несе cookies, тож файл має читатися без входу.
Без цього заголовка, а також для адреси, яка відповідає помилкою або чимось, що не є документом 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 не потрібен.