ErdViewerElement

از نسخهٔ 5.0.0 بسته <erd-viewer> را هم عرضه می‌کند، نمایی فقط خواندنی از یک سند: خواننده نمودار را جابه‌جا می‌کند، بزرگ‌نمایی می‌کند، جست‌وجو می‌کند و رابطه‌ها را روشن می‌کند، و هیچ‌چیز در آن ویرایش نمی‌کند. فقط بوم ERD را با نوارهای پیمایش آن، یک نقشهٔ کوچک، یک نوار کنترل‌ها و یک پالت که سند را جست‌وجو می‌کند رسم می‌کند و نوار ابزار، زبانه، کاوشگر یا منوی زمینه ندارد.

import '@dineug/erd-editor/erd-viewer.js';

<erd-viewer src="/diagrams/shop.erd.json" style="display: block; height: 480px"></erd-viewer>

قاب بالا همین عنصر است، آن‌طور که erd-editor.io/embed نشانش می‌دهد، اینجا با نمونهٔ bookstore: روی آن کلیک کنید تا فوکوس بگیرد، سپس با کلیدهای فوکوس و کلیدها بزرگ‌نمایی و جست‌وجو کنید، و برای قاب کردن سندی از خودتان بدون کد جاسازی را ببینید.

نمایشگر یک HTMLElement ساده است.
تعریف نوع آن به شرح زیر است.

interface ErdViewerElement extends HTMLElement {
  src: string;
  nameView: 'physical' | 'logical' | 'both' | null;
  minimap: boolean;
  controls: boolean;
  value: string;
  setPresetTheme: (themeOptions: Partial<ThemeOptions>) => void;
  setSystemAppearance: (appearance: 'dark' | 'light' | null) => void;
  setTheme: (theme: Partial<Theme>) => void;
  setLocale: (locale: LocaleOption) => Promise<void>;
  setSystemLocale: (locale: string | null) => Promise<void>;
  destroy: () => void;
}

وارد کردن @dineug/erd-editor/erd-viewer.js تگ <erd-viewer> را تعریف می‌کند و <erd-editor> را تعریف‌نشده می‌گذارد. وارد کردن ریشهٔ بسته هیچ‌کدام را تعریف نمی‌کند: کلاس ErdViewerElement و defineErdViewer() را صادر می‌کند، که تگ را همان‌جا که فراخوانی کنید تعریف می‌کند، بنابراین صفحه می‌تواند کلاس را زیر تگی از خودش هم تعریف کند — ثبت عنصرها را ببینید.
هر نقطهٔ ورود جز engine.js و peer.js به DOM نیاز دارد، این یکی هم، بنابراین صفحهٔ رندرشده در سمت سرور آن را در سمت کلاینت وارد می‌کند — رندر سمت سرور را ببینید.
وارد کردن این نقطهٔ ورود erd-viewer را به HTMLElementTagNameMap اضافه می‌کند، بنابراین document.createElement('erd-viewer') و document.querySelector('erd-viewer') بدون cast از نوع ErdViewerElement هستند.

نمایشگر، مانند ویرایشگر، درون یک shadow root بسته رندر می‌شود، بنابراین viewer.shadowRoot برابر null است و استایل‌های صفحه نه به درون نفوذ می‌کنند و نه به بیرون؛ آن را با setTheme و خاصیت‌های سفارشی --erd-editor-* استایل دهید. چند نمایشگر در یک صفحه هر کدام سند، نما، طرح زمینه و زبان خود را نگه می‌دارند.
<erd-viewer> اندازهٔ ذاتی ندارد. عنصر سفارشی inline است، بنابراین مانند بالا به آن display: block و یک ارتفاع بدهید. نما جعبهٔ عنصر را پر می‌کند و با تغییر اندازهٔ آن، بزرگ‌نمایی را نگه داشته، از آن پیروی می‌کند.

src، name-view، minimap و controls تنها صفت‌های آن هستند، هر کدام با یک خاصیت هم‌نام، nameView برای name-view. value فقط یک خاصیت است.
مقدار value، src، nameView، minimap یا controls که پیش از تعریف شدن تگ روی عنصر تنظیم شده باشد، مثلاً توسط فریم‌ورکی که عنصر را پیش از بارگذاری نقطهٔ ورود رندر می‌کند، پس از تعریف شدن تگ، بر صفت‌هایی که نشانه‌گذاری به آن داده بود، برداشته می‌شود. به ترتیبی برداشته می‌شوند که صفحه برای اولین بار هر کدام را نوشته است، بنابراین از value و src دومی برنده است. valueای که سندی در بر نداشته باشد در آن لحظه فراخواننده‌ای ندارد که خطا را به او پرتاب کند: به‌صورت یک خطای گرفته‌نشده گزارش می‌شود و نمایشگر خالی می‌ماند.

بیلد تگ script، یعنی dist/erd-viewer.umd.js، فقط نمایشگر را با هر وابستگی در خود دارد. <erd-viewer> را تعریف می‌کند و ErdViewerElement و defineErdViewer را روی window.ErdViewer می‌گذارد. نشانی CDN بدون مسیر به‌جای آن بیلد ویرایشگر را ارائه می‌دهد، بنابراین نام فایل را بیاورید — تگ script را ببینید.

<erd-viewer src="diagram.erd.json" style="display: block; height: 480px"></erd-viewer>
<script src="https://cdn.jsdelivr.net/npm/@dineug/erd-editor@5.0.0/dist/erd-viewer.umd.js"></script>

src

نشانی سندی که نمایشگر باید دریافت و نشان دهد. به‌طور پیش‌فرض '' است، یعنی هیچ.
دریافت یک fetch() ساده است، یک GET بدون گزینهٔ خاص خودش، بنابراین قواعد CORS مرورگر بر آن حاکم است: سندی در مبدأ دیگر به سروری نیاز دارد که مبدأ صفحه را اجازه دهد، و کوکی‌ها فقط به مبدأ خود صفحه می‌روند. نشانی نسبی نسبت به صفحه حل می‌شود.
پاسخ باید سندی را در بر داشته باشد، همان‌طور که یک فایل .erd.json دارد، یعنی شکل ذخیره‌سازی‌ای که value ویرایشگر و هر میزبان رسمی می‌نویسد. هیچ قالب دیگری خوانده نمی‌شود: فایل SQL، GraphQL، DBML یا AML به‌صورت متنی که تجزیه نمی‌شود شکست می‌خورد.
سندی که تجزیه شود جا داده‌شده به نما فرود می‌آید و load را ارسال می‌کند. درخواستی که شبکه یا CORS رد کرده باشد، پاسخی که ok نباشد یا متنی که تجزیه نشود، error را ارسال می‌کند و یک نمودار خالی بر جا می‌گذارد — بارگذاری را ببینید.

فقط آخرین درخواست به حساب می‌آید. src تازه دریافتی را که هنوز در جریان است لغو می‌کند، بنابراین پاسخ کند هرگز روی سند بعدی نمی‌نشیند. مقداردهی value هم آن را لغو می‌کند، و همین‌طور برداشتن src یا تنظیم آن روی ''، که پیروی از آن را متوقف می‌کند و سند نشان‌داده‌شده را همان‌طور که بود می‌گذارد.
از value و src هر کدام آخر تنظیم شود برنده است، چه از طریق خاصیت چه از طریق صفت. srcای که پس از یک value نوشته شود دریافت می‌شود، حتی اگر نشانی‌ای را نام ببرد که پیش‌تر دریافت شده بود. اگر روی سندی که از پیش نشان می‌دهد دوباره نوشته شود، چیزی دریافت نمی‌کند.
نمایشگر فقط تا وقتی در یک صفحه است دریافت می‌کند. بیرون آوردنش دریافتِ در جریان را لغو می‌کند و برگرداندنش srcای را دریافت می‌کند که نشان نداده است، از جمله آن که شکست خورده بود، و هرگز آن را که از پیش نشان می‌دهد.
src تنها fetch()ای است که بسته انجام می‌دهد، بنابراین Content Security Policy سخت‌گیرانه مبدأ سند را در connect-src فهرست می‌کند.

viewer.src = 'https://example.com/diagrams/shop.erd.json';
// or
viewer.setAttribute('src', 'https://example.com/diagrams/shop.erd.json');

<erd-viewer src="https://example.com/diagrams/shop.erd.json"></erd-viewer>

value

getter

سندِ نشان‌داده‌شده را، چه از src آمده باشد چه از value، به‌صورت رشتهٔ JSON در شکل ذخیره‌سازی‌ای که value ویرایشگر می‌نویسد برمی‌گرداند. پیش از آنکه چیزی نشان داده شود، یک سند جدید و خالی است که doc آن {} است.
تا وقتی قفل Viewport سند روشن است، که در سند جدید چنین است، بزرگ‌نمایی و پیمایشی را می‌نویسد که سند روی آن قفل شده است، خواننده نما را هر جا برده باشد. فقط با خاموش بودن آن قفل می‌نویسد نما کجا ایستاده است، از جمله جا دادنی که فرود می‌آورد.
نمایش نام‌هایی را می‌نویسد که سند نگه می‌دارد، نه آنکه nameView یا نوار کنترل‌ها روی آن نشان می‌دهد، حتی در سندی که قفل Name View آن خاموش است.
پس از destroy هم سند را برمی‌گرداند.

const data = viewer.value;

setter

یک سند را از متن آن نشان می‌دهد، سند نشان‌داده‌شده را جایگزین می‌کند و آن را به نما جا می‌دهد — بارگذاری را ببینید. متنی را می‌گیرد که یک فایل یا value ویرایشگر در بر دارد.
متنی که تجزیه نشود پیش از هر تغییری خطا پرتاب می‌کند و سند نشان‌داده‌شده می‌ماند: SyntaxError برای متنی که JSON نیست، TypeError برای JSON‌ای که سندی در بر ندارد، مانند 7. رشتهٔ خالی، یا هر چیزی که رشته نیست، یک نمودار خالی نشان می‌دهد.
مقداردهی آن دریافت src در جریان را لغو می‌کند و نه load را ارسال می‌کند و نه error را.

viewer.value = localStorage.getItem('my-diagram') ?? '';

nameView

نمودار را در یک نمایش نام‌ها روی آنچه سند نگه می‌دارد نشان می‌دهد: 'physical' برای Physical Names، 'logical' برای Logical Names یا 'both' برای Both Names. null، پیش‌فرض، نمای خود سند را نشان می‌دهد و مقدار صفتی جز این سه به‌صورت null خوانده می‌شود.
بر هر سندی که پس از آن بارگذاری شود در اعمال می‌ماند و value هرگز آن را نمی‌نویسد. برداشتن صفت به نمای خود سند برمی‌گردد.
فهرست Name View در نوار کنترل‌ها هم نما را تغییر می‌دهد، تا سند بعدی فرود بیاید یا nameView دوباره تغییر کند. تغییر در آنجا هم در value نوشته نمی‌شود.

viewer.nameView = 'both';
// or
viewer.setAttribute('name-view', 'both');

<erd-viewer name-view="logical"></erd-viewer>

minimap

نقشهٔ کوچک را در گوشهٔ بالا سمت راست نشان می‌دهد، تا وقتی سند یک جدول، یک یادداشت نمایان یا یک گروه جدول نمایان دارد. به‌طور پیش‌فرض روشن است.
مانند نقشهٔ کوچک ویرایشگر کار می‌کند: روی آن کلیک کنید تا نما به آنجا برود، یا مستطیل نمای آن را بکشید تا جابه‌جا شود — حرکت در بوم را ببینید. انگشت روی آن تا وقتی نمایشگر فوکوس نگرفته است مال صفحه است.
فقط minimap="false" آن را خاموش می‌کند. صفت بدون مقدار، هر مقدار دیگر و نبود صفت همگی آن را روشن می‌گذارند.

viewer.minimap = false;
// or
viewer.setAttribute('minimap', 'false');

<erd-viewer minimap="false"></erd-viewer>

controls

نوار کنترل‌ها را روی وسط لبهٔ پایین بوم نشان می‌دهد. به‌طور پیش‌فرض روشن است و از چپ به راست این‌ها را در بر دارد:

• بزرگ‌نمایی: Zoom out، بزرگ‌نمایی فعلی به‌صورت درصد و Zoom in. این دو دکمه بزرگ‌نمایی را همان‌طور که کلیدهای بزرگ‌نمایی گام می‌دهند گام می‌دهند، و کلیک روی درصد، Reset zoom، آن را به 100% برمی‌گرداند. هر کدام کلید خود را در راهنمای ابزارش نام می‌برد.
• Fit، که بزرگ‌نمایی و پیمایش را طوری تنظیم می‌کند که کل نمودار در نما، در مرکز، نمایان شود.
• Name View، دکمه‌ای که نمای در اعمال را نام می‌برد و فهرستی از Physical Names، Logical Names و Both Names را بالای نوار باز می‌کند — nameView را ببینید.
• قطب‌نمای Go to content، که فقط وقتی هیچ بخشی از نمودار روی صفحه نیست به انتهای نوار می‌پیوندد و نما را به نزدیک‌ترین بخش آن می‌برد.

نوار در هر زبانی از چپ به راست می‌ایستد.
فقط controls="false" آن را خاموش می‌کند، همراه با قطب‌نما و فهرست Name View آن. صفت بدون مقدار، هر مقدار دیگر و نبود صفت همگی آن را روشن می‌گذارند. بدون نوار هم، چرخ، حرکت دو انگشتی و کلیدها وقتی نمایشگر فوکوس بگیرد همچنان بزرگ‌نمایی می‌کنند.

viewer.controls = false;
// or
viewer.setAttribute('controls', 'false');

<erd-viewer controls="false"></erd-viewer>

رویدادها

load و error تنها دو رویدادند و هر دو دربارهٔ src گزارش می‌دهند. هیچ‌کدام bubble نمی‌شود، بنابراین روی خود عنصر گوش دهید.

load

وقتی سندی که src نام می‌برد دریافت و نشان داده شد ارسال می‌شود. event.detail برابر null است.
مقداردهی value هیچ‌کدام را ارسال نمی‌کند و دریافتی که src بعدی، یک value، بیرون آوردن عنصر از صفحه یا destroy لغو کرده باشد هم همین‌طور.

viewer.addEventListener('load', () => {
  console.log('shown', viewer.src);
});

error

وقتی دریافت src شکست بخورد ارسال می‌شود: شبکه یا CORS درخواست را رد کرده، پاسخ ok نبوده یا متن آن تجزیه نشده است. نمایشگر سپس یک نمودار خالی و اعلان Couldn't load the diagram را نشان می‌دهد — بارگذاری را ببینید.
event.detail علت است: TypeErrorای که fetch() با آن رد می‌شود، یک Error که وضعیت را نام می‌برد، مانند GET /missing.erd.json answered 404 Not Found، یا SyntaxError یا TypeError تجزیه‌گر.
دریافتی که چیزی لغوش کرده باشد چیزی ارسال نمی‌کند.

viewer.addEventListener('error', event => {
  console.warn('could not show', viewer.src, event.detail);
});

setPresetTheme

یک طرح زمینهٔ از پیش‌تنظیم را تنظیم می‌کند و ThemeOptions ویرایشگر را می‌گیرد — setPresetTheme را ببینید.
نمایشگر با appearance: 'system'، grayColor: 'slate' و accentColor: 'indigo' شروع می‌کند، بنابراین از نخستین فریم روشن یا تیره‌ای را نشان می‌دهد که سیستم‌عامل گزارش می‌کند و وقتی آن تغییر کند عوض می‌شود. ویرایشگر در عوض تیره شروع می‌کند.
هر فیلد به‌تنهایی اعمال می‌شود، بنابراین فراخوانی جزئی دو فیلد دیگر را همان‌طور که هستند می‌گذارد. مقداری که یکی از نام‌ها نباشد نادیده گرفته می‌شود و فراخوانی هرگز خطا پرتاب نمی‌کند.
نمایشگر سازندهٔ طرح زمینه و systemDarkMode ندارد و برای طرح زمینه رویدادی ارسال نمی‌کند.

viewer.setPresetTheme({ appearance: 'light', accentColor: 'teal' });

setSystemAppearance

روشن یا تیره‌ای را نام می‌برد که ظاهر 'system' نشان می‌دهد، برای صفحه‌ای که روشن و تیرهٔ خودش را دارد. تا وقتی یکی نام برده شده است، تغییرهای سیستم‌عامل نادیده گرفته می‌شوند.
null، یا هر مقداری جز 'dark' یا 'light'، به پیروی از سیستم‌عامل برمی‌گردد.
تا وقتی ظاهر 'light' یا 'dark' است روی صفحه چیزی را تغییر نمی‌دهد، اما مقدار نگه داشته می‌شود و به‌محض اینکه ظاهر 'system' شود اعمال می‌شود. چیزی ارسال نمی‌کند.

viewer.setSystemAppearance('dark'); // null follows the OS again

setTheme

توکن‌های طرح زمینه را روی پیش‌تنظیم بازنویسی می‌کند و توکن‌های Theme ویرایشگر را می‌گیرد — setTheme را ببینید.
هر فراخوانی کل لایهٔ روی آن را جایگزین می‌کند، بنابراین برای برگشت به پیش‌تنظیم {} بدهید. فقط نام توکن‌ها، با مقدارهای رشته‌ای، نگه داشته می‌شوند و setPresetTheme بعدی پیش‌تنظیم زیر آن را عوض می‌کند، در حالی که بازنویسی‌ها می‌مانند.
خاصیت‌های سفارشی CSS با نام --erd-editor-* هم، روی عنصر یا هر جای بالای آن، به نمایشگر می‌رسند — متغیرهای CSS را ببینید. بوم، که هیچ stylesheetی به آن نمی‌رسد، آن‌ها را دوباره می‌خواند وقتی یک stylesheet در head صفحه تغییر کند، یا صفت class یا style عنصر یا عنصری بالای آن تغییر کند. قاعده‌ای که با insertRule() اضافه شود هیچ‌یک از این‌ها را تغییر نمی‌دهد، بنابراین بوم آن را در تغییر بعدی از این نوع برمی‌دارد.

erd-viewer {
  --erd-editor-canvas-background: #ffffff;
}

setLocale

زبان نمایش را تنظیم می‌کند: 'system'، پیش‌فرض، یا یکی از 25 کدی که زبان نمایش ویرایشگر فهرست می‌کند. هر چیز دیگر، مانند 'ko' تنها یا مقداری که رشته نیست، نادیده گرفته می‌شود.
زبان راهنمای ابزار نوار کنترل‌ها، فهرست Name View، پالت، اعلان‌های بارگذاری و واژه‌هایی را که خود نمودار رسم می‌کند، مانند unnamed، تغییر می‌دهد. نام‌ها، توضیحات و بقیهٔ سند هرگز ترجمه نمی‌شوند.

انگلیسی بخشی از نقطهٔ ورود نمایشگر است و پیش از بازگشت فراخوانی اعمال می‌شود. هر زبان دیگر ماژولی جداگانه است که باندلر شما آن را به‌صورت یک بخش در کنار نمایشگر تولید می‌کند و نمایشگر نخستین باری که صفحه آن زبان را بخواهد آن را از باندل شما دریافت می‌کند، برای همهٔ نمایشگرهای صفحه فقط یک بار. تا وقتی فرود بیاید، نمایشگر زبانی را که نشان می‌داد نگه می‌دارد، در نخستین فریم انگلیسی. اگر بارگذاری شکست بخورد، نمایشگر انگلیسی نشان می‌دهد و درخواست دوبارهٔ همان زبان دوباره تلاش می‌کند.
بیلد تگ script هر 25 زبان را در خود دارد، بنابراین هیچ‌کدام را دریافت نمی‌کند. باندلی که ویرایشگر را هم دارد هر زبان را با بخش ویرایشگر بارگذاری می‌کند — ثبت عنصرها را ببینید.
Promiseای که برمی‌گرداند وقتی آن زبان فرود آمد یا شکست خورد حل می‌شود و هرگز رد نمی‌شود. آن زبان، یا انگلیسی پس از شکست، سپس در اعمال است، مگر اینکه فراخوانی بعدی زبان دیگری خواسته باشد: فراخوانی بعدی برنده است، زبان‌ها به هر ترتیبی فرود بیایند.

عبری، عربی و فارسی پالت و اعلان‌های بارگذاری را راست‌به‌چپ می‌چینند. بوم، نقشهٔ کوچک، نوارهای پیمایش و نوار کنترل‌ها با قطب‌نمایش از چپ به راست می‌مانند، همان‌طور که بوم ویرایشگر می‌ماند — زبان‌های راست‌به‌چپ را ببینید.
نمایشگر lang و dir را روی ریشهٔ خودش درون shadow root بسته تنظیم می‌کند، هرگز روی عنصر میزبان یا صفحه.
چیزی ارسال نمی‌کند و نمایشگر انتخابگر زبان ندارد و چیزی ذخیره نمی‌کند.

await viewer.setLocale('ko-KR');

setSystemLocale

زبانی را که 'system' نماینده‌اش است به‌صورت برچسب BCP 47 نام می‌برد، برای صفحه‌ای که تنظیم زبان خودش را دارد.
برچسب trim می‌شود. null، رشتهٔ خالی یا مقداری که رشته نیست به زبان‌های صفحه برمی‌گردد.
آن‌ها <html lang> صفحه و سپس navigator.languages مرورگر هستند، که یک بار هنگام نخستین اتصال نمایشگر خوانده می‌شوند. 'system' نخستین آن‌ها را برمی‌دارد که نمایشگر برایش زبانی دارد، با قاعدهٔ ویرایشگر در setSystemLocale، و وقتی هیچ‌کدام را ندارد انگلیسی. بنابراین صفحه‌ای که <html lang> آن زبانی را نام می‌برد که نمایشگر دارد، مرورگر هر چه ترجیح دهد آن زبان را نشان می‌دهد، و تغییر بعدی lang یا زبان‌های مرورگر هیچ نمایشگری را جابه‌جا نمی‌کند.
فقط وقتی اهمیت دارد که گزینهٔ در اعمال 'system' باشد و Promise آن مانند setLocale حل می‌شود.

viewer.setSystemLocale('ja-JP'); // null goes back to the page's languages

destroy

نمایشگر را برای همیشه پایان می‌دهد. نما را پیش از بازگشت پایین می‌آورد، چه عنصر هنوز در صفحه باشد چه پیش از آن بیرون آمده باشد، دریافت src در جریان را لغو می‌کند و پیروی از طرح رنگ سیستم‌عامل و استایل‌های صفحه را متوقف می‌کند.
نمایشگر نابودشده دیگر چیزی رسم نمی‌کند، چیزی دریافت نمی‌کند و زبانی نمی‌خواهد، حتی اگر دوباره به صفحه اضافه شود. خواندن value همچنان سندی را که داشت برمی‌گرداند.
بیرون آوردن عنصر از صفحه آن را نابود نمی‌کند: برگردانده شود ادامه می‌دهد و srcای را که هنوز نشان نداده دریافت می‌کند — بارگذاری را ببینید.

viewer.destroy();

فوکوس و کلیدها

نمایشگر هنگام سوار شدن، فرود آمدن یک سند یا بسته شدن پالتش فوکوس نمی‌گیرد، بنابراین هرگز صفحه را به سمت خودش پیمایش نمی‌کند یا کلیدهای صفحه را نمی‌گیرد.
کلیک یا لمس روی بومش آن را بدون پیمایش صفحه فوکوس می‌کند و یک ایستگاه کلید Tab است. برخلاف ویرایشگر، focus() یا blur() مخصوص خودش را ندارد. فشردن در هر جای دیگر صفحه فوکوس را دوباره برمی‌دارد.

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

• چرخ نما را جابه‌جا می‌کند و Shift + Wheel آن را به پهلو جابه‌جا می‌کند. روی یادداشتی که متنش سرریز دارد، چرخ یادداشت را پیمایش می‌کند.
• Ctrl + Wheel (Windows/Linux) یا ⌘ + Wheel (Mac)، حرکت دو انگشتی روی تاچ‌پد یا دو انگشت روی صفحهٔ لمسی بزرگ‌نمایی می‌کنند.
• یک انگشت نما را جابه‌جا می‌کند.
• Ctrl + Plus و Ctrl + Minus (Windows/Linux) یا ⌘ + Plus و ⌘ + Minus (Mac) بزرگ‌نمایی را همان‌طور که دکمه‌های Zoom in و Zoom out انجام می‌دهند گام می‌دهند، و Ctrl + 0 (Windows/Linux) یا ⌘ + 0 (Mac) مستقیم به 100% برمی‌گردد و وسط صفحه را همان‌جا که هست نگه می‌دارد.
• Ctrl + K (Windows/Linux) یا ⌘ + K (Mac) پالت را باز می‌کند و Esc آن را می‌بندد.

این‌ها تنها کلیدهای آن هستند و نمی‌توان دوباره به آن‌ها نگاشت داد. هر کلید دیگر، با فوکوس یا بدون آن، بدون جلوگیری به صفحه می‌رسد: Delete، Backspace، Space، Enter، Tab، Ctrl + A، Ctrl + F و هر ترکیبی که در ویرایشگر ویرایش می‌کند.

پالت فقط سند را جست‌وجو می‌کند و هیچ فرمانی فهرست نمی‌کند. ورودی خالی آن پیشوندها را نشان می‌دهد: # جدول‌ها را جست‌وجو می‌کند، @ ستون‌ها را، : توضیحات و یادداشت‌ها را و ? پیشوندها را فهرست می‌کند، مانند ویرایشگر — جست‌وجو در نمودار را ببینید. واژه‌ای بدون پیشوند No commands match را بالای ردیف‌هایی نشان می‌دهد که نمودار را برای آن جست‌وجو می‌کنند.
انتخاب یک ردیف نما را با قاعدهٔ ویرایشگر، محل فرود یک پرش، جابه‌جا می‌کند و بزرگ‌نمایی را همان‌طور که هست می‌گذارد، و آنچه را به آن رسیده، به جلو آورده‌شده، دورنما می‌کند: جدول، جدولی که ستون یا توضیح را در بر دارد، یا یادداشت.
انتخاب یک ردیف یا فشردن Esc پالت را می‌بندد و فوکوس را بدون هیچ عنصری می‌گذارد، بنابراین چرخ بعدی صفحه را پیمایش می‌کند؛ روی نما کلیک کنید تا دوباره چرخ و کلیدها را بگیرد. تا وقتی پالت باز است، چرخ فهرست آن را پیمایش می‌کند و کلیدهای بزرگ‌نمایی کاری نمی‌کنند.

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

بارگذاری

تا وقتی src بارگذاری می‌شود، اعلانی روی وسط بوم Loading diagram را کنار یک نشانگر چرخان می‌خواند. وقتی بارگذاری شکست بخورد، Couldn't load the diagram را کنار یک علامت هشدار می‌خواند، تا وقتی src تازه یا value جایش را بگیرد یا src برداشته شود. فشردن‌ها از اعلان به بوم می‌رسند و اعلان به زبان نمایش خوانده می‌شود، در زبان راست‌به‌چپ راست‌به‌چپ.

هر سندی که فرود بیاید، از src یا از value، به جعبهٔ نمایشگر جا داده می‌شود: بزرگ‌نمایی و پیمایش طوری تنظیم می‌شود که کل نمودار در مرکز نمایان شود، همان‌طور که Fit انجام می‌دهد، و بزرگ‌نمایی و پیمایشی که فایل ذخیره کرده کنار گذاشته می‌شود. سندی که پیش از داشتن اندازه به نمایشگر داده شود، پیش از آنکه در صفحه باشد یا وقتی جعبه‌اش خالی است، به‌محض داشتن اندازه جا داده می‌شود. تغییر اندازهٔ بعدی بزرگ‌نمایی را نگه می‌دارد؛ Fit دوباره جا می‌دهد.

نمایشگر فقط تا وقتی در یک صفحه است src را دریافت می‌کند. بیرون آوردنش دریافتِ در جریان را لغو می‌کند و برگرداندنش srcای را دریافت می‌کند که نشان نداده است، از جمله آن که شکست خورده بود، و هرگز آن را که از پیش نشان می‌دهد. نمایشگری که دیگر لازم نیست با destroy پایان می‌یابد.

آنچه به یک صفحه می‌افزاید

• هیچ ورکری. هیچ ورکری شروع نمی‌کند، بنابراین Content Security Policy برای آن به worker-src نیاز ندارد.
• هیچ ذخیره‌سازی‌ای. هیچ کوکی، localStorage، sessionStorage یا IndexedDB نمی‌نویسد.
• دو نوع درخواست: دریافت src، که سیاست سخت‌گیرانه مبدأ آن را در connect-src فهرست می‌کند، و ماژول یک زبان نمایش جز انگلیسی، از باندل خودتان — setLocale را ببینید.
• استایل‌ها در constructed stylesheets، که style-src سخت‌گیرانه آن‌ها را می‌پذیرد. مرورگری که constructed stylesheets ندارد، مانند Firefox پیش از 101، به‌جای آن عنصرهای <style> می‌گیرد که به style-src 'unsafe-inline' نیاز دارند.
• شنونده‌هایی روی window. وارد کردن نقطهٔ ورود سه شنونده برای تمام عمر صفحه اضافه می‌کند، برای mousedown، touchstart و رویداد خود بسته یعنی @dineug/erd-editor/internal-forward-move-start. Konva، که بوم را رسم می‌کند، window.Konva را تنظیم می‌کند و با نخستین stage خود شنونده‌های ماوس و لمس را به window و شنوندهٔ visibilitychange را به document اضافه می‌کند و هرگز آن‌ها را برنمی‌دارد. نقطهٔ ورود ویرایشگر همین‌ها را اضافه می‌کند.
• تا destroy، هر نمایشگر از طرح رنگ سیستم‌عامل پیروی می‌کند و استایل‌های صفحه را برای خاصیت‌های سفارشی‌ای که setTheme توضیح می‌دهد زیر نظر دارد.