Developer guide
Embed the complete viewer.
Use the shared module directory with the complete profile pack. ESM loading follows the host’s normal browser policy; the HTML utilities also open directly from disk.
import { createRuntime, createCompleteRuntimeOptions, createViewer }
from './download/ddn-viewer.js';
const runtime = createRuntime(createCompleteRuntimeOptions());
const viewer = createViewer(document.querySelector('#diagram'), { runtime });
await viewer.open({
entry: 'main.ddn',
files: [{
id: 'main.ddn',
text: 'erd Sales\n Customer\n Order\n connect Customer to Order\n',
revision: '1', encoding: 'utf-8', writable: true,
}],
});
// When the host removes the view:
viewer.destroy();
runtime.destroy();Add editing deliberately
createDesigner(viewer, { authority }) adds editing controls to an existing viewer. The authority provider decides the distinct grants for model edits, lifecycle review, acceptance and reopening. Prepared changes recheck authority and revisions before commit.
A viewer receiving a supplied update remains read-only. The host calls runtime.ingest() with identified provider data and a matching base revision; displaying it does not grant participation rights.
Use the verifier independently
The verifier module exports createVerifier, createCompletePack and createCompleteRuntimeOptions. The same profile rules are used by the viewer and designer. Inspect complete, partial and unsupported results instead of treating the absence of a thrown error as acceptance.
Keep the files together
Distribute the JavaScript facades with their shared modules/ directory. Supply the document’s included source files, stylesheets and local assets explicitly. A missing file remains an unresolved dependency until the host supplies it.