Встраивание

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 в новой вкладке и не передает ему реферер, поэтому щелчок ничего не сообщает сайту о документе, который показывает фрейм. В узком фрейме она может закрывать часть панели управления.

Пока файл загружается, фрейм показывает 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, например *.
Запрос не несет cookie, поэтому файл должен читаться без входа в систему.
Без этого заголовка, а также для адреса, который отвечает ошибкой или чем-то, что не является документом 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 не нужен.