@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/archimateArchiTypes.js

@@ -0,0 +1,72 @@
+import { ArchimateNotation, archimate32Type } from './archimate.js';
+import { ITIconNotation } from './itIcons.js';
+import { RELATIONSHIP_TABLE_CONCEPTS } from './archimateRelationshipTable.js';
+
+/**
+ * The element types Archi can hold, and the nearest one for a type it cannot.
+ *
+ * Archi has a class for each ArchiMate 3.2 element type and no others: a file
+ * naming any other class (an IT icon type such as `load-balancer`, or a custom
+ * type) does not open. So such an element is written as its nearest 3.2 type,
+ * chosen by its layer and aspect, with its own type kept beside it: the
+ * feature ARCHI_TYPE_FEATURE (which Archi keeps, and import reads back) and an
+ * Archi specialization (profile) named after it, so Archi users see it too.
+ */
+
+/** The feature that keeps an element's own type when Archi has no class for it. */
+export const ARCHI_TYPE_FEATURE = 'renderengine.type';
+
+/** Ids of the specializations written for such types start with this. */
+export const ARCHI_TYPE_PROFILE_PREFIX = 'id-renderengine-type-';
+
+/** Every element type Archi has a class for (ArchiMate 3.2, from its relationship table). */
+export const ARCHI_ELEMENT_TYPES = new Set(RELATIONSHIP_TABLE_CONCEPTS.filter(t => t !== 'relationship'));
+
+/** The nearest 3.2 type by layer and aspect, for a type Archi lacks. */
+export const NEAREST_ARCHI_TYPE = Object.freeze({
+    business: { active: 'business-actor', behavior: 'business-process', passive: 'business-object' },
+    application: { active: 'application-component', behavior: 'application-process', passive: 'data-object' },
+    technology: { active: 'node', behavior: 'technology-process', passive: 'artifact' },
+    physical: { active: 'equipment', behavior: 'technology-process', passive: 'material' },
+    motivation: { active: 'stakeholder', behavior: 'requirement', passive: 'requirement' },
+    strategy: { active: 'resource', behavior: 'capability', passive: 'resource' },
+    implementation: { active: 'work-package', behavior: 'work-package', passive: 'deliverable' },
+});
+
+/** 'active' | 'behavior' | 'passive' from an aspect name ('active-structure', ...). */
+function _aspect(name) {
+    const text = String(name ?? '').toLowerCase();
+    if (text.startsWith('passive')) return 'passive';
+    if (text.startsWith('behav')) return 'behavior';
+    return 'active';
+}
+
+/** A layer as a name, whether given as a name or an ArchimateLayer. */
+const _layerName = (layer) => (typeof layer === 'string' ? layer : layer?.name);
+
+/**
+ * The type to write for an element in an Archi file.
+ * @param {{type: string, layer?: string, aspect?: string}} element
+ * @returns {{ type: string, original: string|null }} the type Archi has, and the element's own
+ *   type when that had to change (null when Archi has it, or its 3.2 form)
+ */
+export function archiElementType(element) {
+    const type32 = archimate32Type(element);
+    if (ARCHI_ELEMENT_TYPES.has(type32)) return { type: type32, original: null };
+    const it = ITIconNotation.elementType(element.type);
+    const known = ArchimateNotation.elementType(element.type);
+    const layer = _layerName(element.layer) ?? _layerName(it?.layer) ?? _layerName(known?.layer) ?? 'other';
+    const aspect = _aspect(element.aspect ?? it?.aspect ?? known?.aspect);
+    const type = NEAREST_ARCHI_TYPE[layer]?.[aspect] ?? 'grouping';
+    return { type, original: element.type };
+}
+
+/** The id of the specialization written for an element type Archi lacks. */
+export function typeProfileId(type) {
+    return `${ARCHI_TYPE_PROFILE_PREFIX}${String(type).replace(/[^A-Za-z0-9_-]/g, '_')}`;
+}
+
+/** A type's name as a person reads it: 'load-balancer' → 'Load Balancer'. */
+export function typeDisplayName(type) {
+    return String(type).split(/[-_\s]+/).filter(Boolean).map(w => w[0].toUpperCase() + w.slice(1)).join(' ');
+}

package/src/archimateArchive.js

@@ -0,0 +1,140 @@
+import { parseArchiModel, toArchiXML } from './archimateArchiFormat.js';
+import { ZipArchive } from './zip/ZipArchive.js';
+
+/**
+ * Archi's file as it is on disk. A model without images is plain XML; a model
+ * with images is a zip archive holding the XML as `model.xml` and each picture
+ * under `images/`, which the visuals' `imagePath` names. Here pictures travel
+ * as `data:` URLs, so reading turns each archived picture into one, and writing
+ * turns each `data:` URL back into an archived picture.
+ */
+
+/** The archive entry holding the model. */
+export const ARCHI_MODEL_ENTRY = 'model.xml';
+const IMAGE_FOLDER = 'images/';
+
+const MIME_BY_EXTENSION = Object.freeze({
+    png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', bmp: 'image/bmp',
+    svg: 'image/svg+xml', webp: 'image/webp', ico: 'image/x-icon', tif: 'image/tiff', tiff: 'image/tiff',
+});
+const EXTENSION_BY_MIME = Object.freeze({
+    'image/png': 'png', 'image/jpeg': 'jpg', 'image/gif': 'gif', 'image/bmp': 'bmp',
+    'image/svg+xml': 'svg', 'image/webp': 'webp', 'image/x-icon': 'ico', 'image/tiff': 'tif',
+});
+
+/**
+ * Read an Archi file: plain XML (a string, or its bytes) or an archive.
+ * @param {string|Uint8Array|ArrayBuffer} input
+ * @returns {Object} the parsed model, as parseArchiModel returns it, with every
+ *   archived picture's `imagePath` replaced by a `data:` URL
+ */
+export function parseArchiFile(input) {
+    const bytes = input instanceof ArrayBuffer ? new Uint8Array(input) : input;
+    if (typeof bytes === 'string') return parseArchiModel(bytes);
+    if (!ZipArchive.isZip(bytes)) return parseArchiModel(new TextDecoder().decode(bytes));
+
+    const zip = ZipArchive.read(bytes);
+    const xml = zip.get(ARCHI_MODEL_ENTRY);
+    if (!xml) throw new Error(`Not an Archi archive: it has no ${ARCHI_MODEL_ENTRY}`);
+    const model = parseArchiModel(new TextDecoder().decode(xml));
+    const urls = new Map();
+    const resolve = (path) => {
+        if (!urls.has(path)) {
+            const data = zip.get(path);
+            urls.set(path, data ? archivedFileUrl(data, path) : null);
+        }
+        return urls.get(path);
+    };
+    _eachVisual(model.views, (visual) => {
+        if (!visual.imagePath) return;
+        const url = resolve(visual.imagePath);
+        if (url) {
+            visual.archiImagePath = visual.imagePath;   // kept, so export writes the picture back under the same name
+            visual.imagePath = url;
+        }
+    });
+    return model;
+}
+
+/**
+ * Write an Archi file. Plain XML when no visual carries a `data:` picture;
+ * otherwise an archive with the pictures under `images/`.
+ * @param {Object} model - as toArchiXML takes it
+ * @param {Array<Object>} views - as toArchiXML takes them (not changed)
+ * @returns {{ data: string|Uint8Array, archive: boolean, mimeType: string }}
+ */
+export function toArchiFile(model, views) {
+    const copies = _copyTrees(views);
+    const pictures = new Map();   // data: URL -> archive path
+    _eachVisual(copies, (visual) => {
+        const url = visual.imagePath;
+        if (!url?.startsWith('data:')) return;
+        if (!pictures.has(url)) {
+            // Its own archive path when it came from one (and no other picture took it), else a new one.
+            const taken = new Set(pictures.values());
+            const own = visual.archiImagePath && !taken.has(visual.archiImagePath) ? visual.archiImagePath : null;
+            const { mime } = _parseDataUrl(url);
+            let path = own;
+            for (let n = pictures.size + 1; !path || (path !== own && taken.has(path)); n++) path = `${IMAGE_FOLDER}image-${n}.${EXTENSION_BY_MIME[mime] ?? 'bin'}`;
+            pictures.set(url, path);
+        }
+        visual.imagePath = pictures.get(url);
+    });
+    const xml = toArchiXML(model, copies);
+    if (!pictures.size) return { data: xml, archive: false, mimeType: 'application/xml' };
+
+    const zip = new ZipArchive().add(ARCHI_MODEL_ENTRY, xml);
+    for (const [url, path] of pictures) zip.add(path, _parseDataUrl(url).bytes);
+    return { data: zip.toBytes(), archive: true, mimeType: 'application/zip' };
+}
+
+/** Call fn on every visual of every view, nested ones included. @private */
+function _eachVisual(views, fn) {
+    const walk = (visual) => {
+        fn(visual);
+        for (const child of visual.children || []) walk(child);
+    };
+    for (const view of views || []) for (const child of view.children || []) walk(child);
+}
+
+/** Views with their visual trees copied, so the caller's are left alone. @private */
+function _copyTrees(views) {
+    const copy = (visual) => ({ ...visual, children: (visual.children || []).map(copy) });
+    return (views || []).map(view => ({ ...view, children: (view.children || []).map(copy) }));
+}
+
+const _extension = (path) => (path.match(/\.([^./]+)$/)?.[1] ?? '').toLowerCase();
+
+/**
+ * An archived file's bytes as a `data:` URL, its media type taken from the
+ * path's extension (a picture in an Archi archive or template).
+ * @param {Uint8Array} bytes
+ * @param {string} path
+ * @returns {string}
+ */
+export function archivedFileUrl(bytes, path) {
+    return _dataUrl(bytes, MIME_BY_EXTENSION[_extension(path)] ?? 'application/octet-stream');
+}
+
+/** Bytes as a base64 `data:` URL. @private */
+function _dataUrl(bytes, mime) {
+    let binary = '';
+    const CHUNK = 0x8000;
+    for (let i = 0; i < bytes.length; i += CHUNK) binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK));
+    return `data:${mime};base64,${btoa(binary)}`;
+}
+
+/** A `data:` URL's media type and bytes (base64 or percent-encoded). @private */
+function _parseDataUrl(url) {
+    const comma = url.indexOf(',');
+    const header = url.slice(5, comma);
+    const body = url.slice(comma + 1);
+    const mime = (header.split(';')[0] || 'text/plain').toLowerCase();
+    if (header.split(';').includes('base64')) {
+        const binary = atob(body);
+        const bytes = new Uint8Array(binary.length);
+        for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+        return { mime, bytes };
+    }
+    return { mime, bytes: new TextEncoder().encode(decodeURIComponent(body)) };
+}

package/src/archimateCSV.js

@@ -0,0 +1,127 @@
+import { parseCsvTable } from './csvTable.js';
+/**
+ * archimateCSV — minimal CSV import/export for renderengine element/relationship
+ * models. No external dependencies: a small RFC-4180-ish parser just big enough
+ * for the two shapes we need.
+ *
+ * Two files are used:
+ *   - elements.csv: id, name, type, layer, documentation, properties
+ *   - relationships.csv: id, source, target, kind, label, documentation, properties
+ *
+ * The `properties` column is a JSON string of [{name, type, value}]. Empty cells
+ * round-trip cleanly.
+ */
+
+function escapeCsvCell(value) {
+    const str = value == null ? '' : String(value);
+    if (/[",\n\r]/.test(str)) {
+        return '"' + str.replace(/"/g, '""') + '"';
+    }
+    return str;
+}
+
+/** The rows of a CSV text, as objects by the header's columns (csvTable.js: the one CSV reader). */
+function parseCsv(csv) {
+    return parseCsvTable(csv, { delimiter: ',' }).rows;
+}
+
+function stringifyProperties(properties) {
+    if (!Array.isArray(properties) || properties.length === 0) return '';
+    return JSON.stringify(properties);
+}
+
+function parseProperties(raw) {
+    if (!raw) return undefined;
+    try {
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) && parsed.length > 0 ? parsed : undefined;
+    } catch {
+        return undefined;
+    }
+}
+
+/** Export an array of element objects to CSV. */
+export function exportElementsCSV(elements = []) {
+    const header = ['id', 'name', 'type', 'layer', 'documentation', 'properties'];
+    const lines = [header.join(',')];
+    for (const el of elements) {
+        lines.push([
+            escapeCsvCell(el.id),
+            escapeCsvCell(el.name),
+            escapeCsvCell(el.type),
+            escapeCsvCell(el.layer),
+            escapeCsvCell(el.documentation),
+            escapeCsvCell(stringifyProperties(el.properties)),
+        ].join(','));
+    }
+    return lines.join('\n');
+}
+
+/** Export an array of relationship objects to CSV. */
+export function exportRelationshipsCSV(relationships = []) {
+    const header = ['id', 'source', 'target', 'kind', 'label', 'documentation', 'properties'];
+    const lines = [header.join(',')];
+    for (const rel of relationships) {
+        lines.push([
+            escapeCsvCell(rel.id),
+            escapeCsvCell(rel.source),
+            escapeCsvCell(rel.target),
+            escapeCsvCell(rel.kind),
+            escapeCsvCell(rel.label),
+            escapeCsvCell(rel.documentation),
+            escapeCsvCell(stringifyProperties(rel.properties)),
+        ].join(','));
+    }
+    return lines.join('\n');
+}
+
+/** Parse an elements CSV string into element objects. */
+export function importElementsCSV(csv) {
+    const rows = parseCsv(csv);
+    return rows.map(row => {
+        const el = {
+            id: row.id,
+            name: row.name,
+            type: row.type,
+        };
+        if (row.layer) el.layer = row.layer;
+        if (row.documentation) el.documentation = row.documentation;
+        const props = parseProperties(row.properties);
+        if (props) el.properties = props;
+        return el;
+    });
+}
+
+/** Parse a relationships CSV string into relationship objects. */
+export function importRelationshipsCSV(csv) {
+    const rows = parseCsv(csv);
+    return rows.map(row => {
+        const rel = {
+            id: row.id,
+            source: row.source,
+            target: row.target,
+            kind: row.kind,
+        };
+        if (row.label) rel.label = row.label;
+        if (row.documentation) rel.documentation = row.documentation;
+        const props = parseProperties(row.properties);
+        if (props) rel.properties = props;
+        return rel;
+    });
+}
+
+/** Convenience: export both in one call. Returns { elementsCSV, relationshipsCSV }. */
+export function exportModelCSV(model = {}) {
+    return {
+        elementsCSV: exportElementsCSV(model.elements || []),
+        relationshipsCSV: exportRelationshipsCSV(model.relationships || []),
+    };
+}
+
+/** Convenience: import both in one call. Returns { elements, relationships }. */
+export function importModelCSV(elementsCSV = '', relationshipsCSV = '') {
+    return {
+        elements: importElementsCSV(elementsCSV),
+        relationships: importRelationshipsCSV(relationshipsCSV),
+    };
+}

package/src/archimateDrawio.js

@@ -0,0 +1,182 @@
+import { toArchiExport } from './archimateArchiFormat.js';
+import { ArchimateDiagram } from './charting/diagrams/ArchimateDiagram.js';
+
+/**
+ * draw.io (diagrams.net) export: an ArchiMate model's views as one draw.io
+ * file, a page per view, drawn with draw.io's own ArchiMate 3 shapes (the
+ * type-to-shape table of the jArchi "Export view to draw.io" script). Each
+ * box keeps its place, size, colours and nesting (a box inside another is
+ * its child cell), each line its relationship's look and its bendpoints;
+ * notes, groups and canvas boxes come too. The element's or relationship's
+ * id, type and properties go on the cell's object, so draw.io keeps them.
+ * Export only: draw.io files do not come back in.
+ */
+
+const box = (props, extra = '') => ({ html: 1, whiteSpace: 'wrap', outlineConnect: 0, ...props, _extra: extra });
+const app = (appType, archiType) => box({ shape: 'mxgraph.archimate3.application', appType, archiType });
+
+/** ArchiMate element types as draw.io styles. */
+export const DRAWIO_ELEMENT_STYLES = Object.freeze({
+    // Strategy
+    capability: app('capability', 'rounded'), 'course-of-action': app('course', 'rounded'), resource: app('resource', 'square'),
+    'value-stream': app('valueStream', 'rounded'),
+    // Motivation
+    stakeholder: app('role', 'oct'), driver: app('driver', 'oct'), goal: app('goal', 'oct'), outcome: app('outcome', 'oct'),
+    principle: app('principle', 'oct'), requirement: app('requirement', 'oct'), assessment: app('assess', 'oct'),
+    constraint: app('constraint', 'oct'), meaning: box({ shape: 'cloud' }), value: box({ shape: 'ellipse' }),
+    // Business
+    'business-actor': app('actor', 'square'), 'business-role': app('role', 'square'), 'business-collaboration': app('collab', 'square'),
+    'business-interface': app('interface', 'square'), 'business-process': app('proc', 'rounded'), 'business-function': app('func', 'rounded'),
+    'business-interaction': app('interaction', 'rounded'), 'business-event': app('event', 'rounded'), 'business-service': app('serv', 'rounded'),
+    'business-object': box({ shape: 'mxgraph.archimate3.businessObject', overflow: 'fill' }),
+    contract: box({ shape: 'mxgraph.archimate3.contract' }), representation: box({ shape: 'mxgraph.archimate3.representation' }),
+    product: box({ shape: 'mxgraph.archimate3.product' }),
+    // Application
+    'application-component': app('comp', 'square'), 'application-collaboration': app('collab', 'square'),
+    'application-interface': app('interface', 'square'), 'application-function': app('func', 'rounded'),
+    'application-interaction': app('interaction', 'rounded'), 'application-process': app('proc', 'rounded'),
+    'application-event': app('event', 'rounded'), 'application-service': app('serv', 'rounded'),
+    'data-object': box({ shape: 'mxgraph.archimate3.businessObject', overflow: 'fill' }),
+    // Technology and physical
+    node: box({ shape: 'mxgraph.archimate3.node' }), device: box({ shape: 'mxgraph.archimate3.device' }),
+    'system-software': app('sysSw', 'square'), 'technology-collaboration': app('collab', 'square'),
+    'technology-interface': app('interface', 'square'), path: app('path', 'square'), 'communication-network': app('netw', 'square'),
+    'technology-function': app('func', 'rounded'), 'technology-process': app('proc', 'rounded'), 'technology-interaction': app('interaction', 'rounded'),
+    'technology-event': app('event', 'rounded'), 'technology-service': app('serv', 'rounded'), artifact: app('artifact', 'square'),
+    equipment: box({ shape: 'mxgraph.archimate3.tech', techType: 'equipment' }), facility: box({ shape: 'mxgraph.archimate3.tech', techType: 'facility' }),
+    'distribution-network': app('distribution', 'square'), material: app('material', 'square'),
+    // Implementation and migration
+    'work-package': app(undefined, 'rounded'), deliverable: box({ shape: 'mxgraph.archimate3.deliverable' }),
+    'implementation-event': app('event', 'rounded'), plateau: box({ shape: 'mxgraph.archimate3.tech', techType: 'plateau' }),
+    gap: box({ shape: 'mxgraph.archimate3.gap' }),
+    // Other
+    location: app('location', 'square'),
+    grouping: box({ shape: 'folder', spacingTop: 10, tabWidth: 100, tabHeight: 25, tabPosition: 'left', dashed: 1, outlineConnect: undefined }),
+    junction: box({ verticalLabelPosition: 'bottom', verticalAlign: 'top', outlineConnect: undefined }, 'ellipse;'),
+});
+
+/** The other boxes a view draws: notes, groups (folders), pictures, canvas boxes; and a type with no shape of its own. */
+const OTHER_STYLES = {
+    'diagram-model-note': box({ shape: 'note', size: 12, align: 'left', verticalAlign: 'top', spacingLeft: 4 }),
+    'diagram-model-group': box({ shape: 'folder', spacingTop: 10, tabWidth: 100, tabHeight: 25, tabPosition: 'left', verticalAlign: 'top', outlineConnect: undefined }),
+    'diagram-model-image': box({ shape: 'image' }),
+    other: box({ rounded: 1 }),
+};
+
+const line = (props) => ({ html: 1, endArrow: 'none', rounded: 0, ...props });
+
+/** Relationship kinds as draw.io line styles (access by its access type). */
+export const DRAWIO_RELATIONSHIP_STYLES = Object.freeze({
+    access: line({ dashed: 1, dashPattern: '1 4', endArrow: 'open', endFill: 0 }),
+    'access-read': line({ dashed: 1, dashPattern: '1 4', startArrow: 'open', startFill: 0 }),
+    'access-write': line({ dashed: 1, dashPattern: '1 4', endArrow: 'open', endFill: 0 }),
+    'access-readwrite': line({ dashed: 1, dashPattern: '1 4', startArrow: 'open', startFill: 0, endArrow: 'open', endFill: 0 }),
+    'access-access': line({ dashed: 1, dashPattern: '1 4' }),
+    aggregation: line({ startArrow: 'diamondThin', startFill: 0, startSize: 10 }),
+    assignment: line({ startArrow: 'oval', startFill: 1, endArrow: 'block', endFill: 1 }),
+    association: line({}),
+    composition: line({ startArrow: 'diamondThin', startFill: 1, startSize: 10 }),
+    flow: line({ dashed: 1, dashPattern: '6 4', endArrow: 'block', endFill: 1 }),
+    influence: line({ dashed: 1, dashPattern: '6 4', endArrow: 'open', endFill: 0 }),
+    realization: line({ dashed: 1, endArrow: 'block', endFill: 0 }),
+    serving: line({ endArrow: 'open', endFill: 1 }),
+    specialization: line({ endArrow: 'block', endFill: 0 }),
+    triggering: line({ endArrow: 'block', endFill: 1 }),
+    connection: line({}),
+});
+
+/** Archi's access types (as its files write them) by our names. */
+const ACCESS_TYPES = { 0: 'write', 1: 'read', 2: 'access', 3: 'readwrite', write: 'write', read: 'read', access: 'access', readwrite: 'readwrite' };
+/** Archi's text alignment and position numbers as draw.io's. */
+const ALIGN = { 1: 'left', 2: 'center', 4: 'right' };
+const VERTICAL = { 0: 'top', 1: 'middle', 2: 'bottom' };
+
+const esc = (v) => String(v ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/\n/g, '&#10;');
+const attrs = (o) => Object.entries(o).filter(([, v]) => v !== undefined && v !== null).map(([k, v]) => ` ${k}="${esc(v)}"`).join('');
+
+/** A style object as draw.io's "key=value;" text, with an item's own colours and text placement. */
+function styleText(base, own = {}) {
+    const { _extra = '', ...props } = base;
+    const merged = { ...props };
+    if (own.fillColor) merged.fillColor = own.fillColor;
+    if (own.lineColor) merged.strokeColor = own.lineColor;
+    if (own.fontColor) merged.fontColor = own.fontColor;
+    if (ALIGN[own.textAlignment]) merged.align = ALIGN[own.textAlignment];
+    if (VERTICAL[own.textPosition]) merged.verticalAlign = VERTICAL[own.textPosition];
+    return _extra + Object.entries(merged).filter(([, v]) => v !== undefined).map(([k, v]) => `${k}=${v};`).join('');
+}
+
+/** An item's properties as attributes of its draw.io object (names made safe). */
+function propertyAttrs(properties) {
+    const out = {};
+    for (const p of properties ?? []) {
+        const name = String(p.name ?? p.key ?? '').trim().replace(/[^A-Za-z0-9_.-]+/g, '_').replace(/^[^A-Za-z_]+/, '_');
+        if (name && !(name in out)) out[name] = p.value;
+    }
+    return out;
+}
+
+/**
+ * The model's views as a draw.io file.
+ * @param {ArchimateModel} model
+ * @param {Object} [options]
+ * @param {Array<string>} [options.viewIds] - Only these views (default: every view but model templates)
+ * @returns {string} draw.io XML (an mxfile)
+ */
+export function toDrawioXML(model, { viewIds = null } = {}) {
+    const [data, views] = toArchiExport(model);
+    const elements = new Map((data.elements ?? []).map(e => [e.id, e]));
+    const relationships = new Map((data.relationships ?? []).map(r => [r.id, r]));
+    const pages = views
+        .filter(v => (viewIds ? viewIds.includes(v.id) : !v.template))
+        .map(view => page(view, elements, relationships));
+    return `<?xml version="1.0" encoding="UTF-8"?>\n<mxfile${attrs({ host: 'renderengine', agent: 'RenderEngine', type: 'device' })}>\n${pages.join('')}</mxfile>\n`;
+}
+
+/** One view as a draw.io page. @private */
+function page(view, elements, relationships) {
+    const cells = [];
+    const centres = new Map();   // visual id -> its centre on the page, for bendpoints
+    const edges = [];
+    const walk = (visual, parentId, origin) => {
+        const b = visual.bounds ?? { x: 0, y: 0, width: 120, height: 55 };
+        const abs = { x: origin.x + b.x, y: origin.y + b.y };
+        centres.set(visual.id, { x: abs.x + b.width / 2, y: abs.y + b.height / 2 });
+        const element = visual.archimateElement ? elements.get(visual.archimateElement) : null;
+        const own = { ...visual.style };
+        let base, value, object;
+        if (element) {
+            base = DRAWIO_ELEMENT_STYLES[element.type] ?? OTHER_STYLES.other;
+            if (!own.fillColor) own.fillColor = ArchimateDiagram.layerColor(ArchimateDiagram.elementLayer(element));
+            value = element.name ?? '';
+            object = { archimateId: element.id, archimateType: element.type, ...(element.documentation && { documentation: element.documentation }), ...propertyAttrs(element.properties) };
+        } else {
+            base = OTHER_STYLES[visual.type] ?? OTHER_STYLES.other;
+            value = visual.text ?? visual.name ?? '';
+            object = null;
+        }
+        const geometry = `<mxGeometry${attrs({ x: b.x, y: b.y, width: b.width, height: b.height, as: 'geometry' })}/>`;
+        const cell = `<mxCell${attrs({ style: styleText(base, own), vertex: 1, parent: parentId })}>${geometry}</mxCell>`;
+        cells.push(object
+            ? `<object${attrs({ id: visual.id, label: value, ...object })}>${cell}</object>`
+            : `<mxCell${attrs({ id: visual.id, value, style: styleText(base, own), vertex: 1, parent: parentId })}>${geometry}</mxCell>`);
+        edges.push(...(visual.sourceConnections ?? []));
+        for (const child of visual.children ?? []) walk(child, visual.id, abs);
+    };
+    for (const visual of view.children ?? []) walk(visual, '1', { x: 0, y: 0 });
+
+    for (const sc of edges) {
+        const rel = sc.relationship ? relationships.get(sc.relationship) : null;
+        const kind = rel?.kind ?? rel?.type ?? 'connection';
+        const key = kind === 'access' ? `access-${ACCESS_TYPES[rel?.accessType ?? rel?.archi?.attributes?.accessType] ?? 'write'}` : kind;
+        const style = styleText(DRAWIO_RELATIONSHIP_STYLES[key] ?? DRAWIO_RELATIONSHIP_STYLES.connection, sc.style);
+        const from = centres.get(sc.source);
+        const points = (sc.bendpoints ?? []).filter(() => from).map(bp => `<mxPoint${attrs({ x: from.x + (bp.startX ?? 0), y: from.y + (bp.startY ?? 0) })}/>`);
+        const geometry = `<mxGeometry${attrs({ relative: 1, as: 'geometry' })}>${points.length ? `<Array as="points">${points.join('')}</Array>` : ''}</mxGeometry>`;
+        const cell = `<mxCell${attrs({ style, edge: 1, parent: '1', source: sc.source, target: sc.target })}>${geometry}</mxCell>`;
+        cells.push(rel
+            ? `<object${attrs({ id: sc.id, label: rel.name ?? '', archimateId: rel.id, archimateType: kind, ...propertyAttrs(rel.properties) })}>${cell}</object>`
+            : `<mxCell${attrs({ id: sc.id, value: sc.name ?? '', style, edge: 1, parent: '1', source: sc.source, target: sc.target })}>${geometry}</mxCell>`);
+    }
+    return `  <diagram${attrs({ id: view.id, name: view.name || view.id })}>\n    <mxGraphModel${attrs({ grid: 1, gridSize: 10, guides: 1, tooltips: 1, connect: 1, arrows: 1, fold: 1, page: 1, pageScale: 1, math: 0, shadow: 0 })}>\n      <root>\n        <mxCell id="0"/>\n        <mxCell id="1" parent="0"/>\n${cells.map(c => `        ${c}\n`).join('')}      </root>\n    </mxGraphModel>\n  </diagram>\n`;
+}