@peter.prib/renderengine 0.15.1 → 0.15.3

package/src/archimateArchiFormat.js

@@ -1,6 +1,7 @@
 import { ArchimateNotation } from './archimate.js';
 import { archiElementType, typeProfileId, typeDisplayName, ARCHI_TYPE_FEATURE, ARCHI_TYPE_PROFILE_PREFIX } from './archimateArchiTypes.js';
-import { ArchimateModel } from './charting/diagrams/ArchimateModel.js';
+import { ArchimateModel } from './charting/diagrams/ArchimateModel.js';
+import { ArchimateSpecializationRegistry } from './archimateSpecializations.js';
 import './charting/diagrams/CanvasView.js';   // registers the canvas view type
 import './charting/diagrams/SketchView.js';   // registers the sketch view type
 import { ElementInstance } from './charting/diagrams/ElementInstance.js';
@@ -720,7 +721,39 @@ function _childText(el, tagName) {
  *  @param {Object} archiModel - parsed Archi XML model
  *  @returns {ArchimateModel} with one view per original view (elementIds track which elements appear in each view)
  *  Now applies visual bounds/waypoints per view. */
-export function toArchimateModel(archiModel) {
+/** Register any model-level Archi specializations (<profile>) with ArchimateSpecializationRegistry. @private */
+function _registerModelProfiles(archiModel) {
+    const profilesById = new Map();
+    for (const e of archiModel?.archi?.elements || []) {
+        if (e.tag === 'profile' && !String(e.attributes?.id ?? '').startsWith(ARCHI_TYPE_PROFILE_PREFIX)) {
+            const id = e.attributes?.id || e.attributes?.name;
+            const name = e.attributes?.name || e.attributes?.id;
+            const conceptType = e.attributes?.conceptType;
+            const imagePath = e.attributes?.imagePath;
+            const archiImagePath = e.attributes?.archiImagePath;
+            const profileDef = {
+                id,
+                name,
+                conceptType,
+                baseTypes: conceptType ? [_toKebabType(conceptType)] : [],
+                iconUrl: imagePath || undefined,
+                archiImagePath,
+            };
+            if (id) profilesById.set(id, profileDef);
+            if (name) profilesById.set(name, profileDef);
+            ArchimateSpecializationRegistry.register({
+                id,
+                name,
+                baseTypes: profileDef.baseTypes,
+                iconUrl: profileDef.iconUrl,
+            });
+        }
+    }
+    return profilesById;
+}
+
+export function toArchimateModel(archiModel) {
+    const profilesById = _registerModelProfiles(archiModel);
     const elements = [];
     const relationships = [];
     const folders = [];
@@ -731,7 +764,7 @@ export function toArchimateModel(archiModel) {
 
     // Map all elements first
     for (const el of archiModel.elements || []) {
-        const mapped = _mapElement(el);
+        const mapped = _mapElement(el, profilesById);
         elementById.set(el.id, mapped);
         elements.push(mapped);
     }
@@ -978,7 +1011,8 @@ function _viewInstances(archiView, { elementById, relationshipById }) {
  *  Returns `{ elements, relationships, options }` ready for `archimateDiagram()`.
  *  If `viewId` is omitted, the first view is used.
  *  Kept as original for backward compatibility: applies visual bounds/features and handles all view visuals. */
-export function toRenderEngineModel(archiModel, viewId) {
+export function toRenderEngineModel(archiModel, viewId) {
+    const profilesById = _registerModelProfiles(archiModel);
     const view = viewId
         ? archiModel.views.find(v => v.id === viewId)
         : archiModel.views[0];
@@ -990,7 +1024,7 @@ export function toRenderEngineModel(archiModel, viewId) {
     const relationshipById = new Map();
 
     for (const el of archiModel.elements || []) {
-        const mapped = _mapElement(el);
+        const mapped = _mapElement(el, profilesById);
         elementById.set(el.id, mapped);
         elements.push(mapped);
     }
@@ -1020,7 +1054,7 @@ export function toRenderEngineModel(archiModel, viewId) {
     return { elements, relationships, folders, folderLayout, elementFolders, options };
 }
 
-function _mapElement(el) {
+function _mapElement(el, profilesById = null) {
     const archiType = _toKebabType(el.type);
     const layer = ArchimateNotation.elementLayer({ type: archiType });
     // A type Archi has no class for was written as the nearest one, with its own kept as a feature.
@@ -1032,6 +1066,21 @@ function _mapElement(el) {
         layer: layer !== 'other' ? layer : undefined,
         documentation: el.documentation || undefined,
     };
+    const profileAttr = el.archi?.attributes?.profiles || el.attributes?.profiles;
+    if (profileAttr && !profileAttr.startsWith(ARCHI_TYPE_PROFILE_PREFIX)) {
+        const firstId = profileAttr.trim().split(/\s+/)[0];
+        const profileDef = profilesById?.get(firstId) || ArchimateSpecializationRegistry.resolve(firstId);
+        mapped.specialization = profileDef?.name || firstId;
+        if (profileDef?.iconUrl && !mapped.iconUrl) {
+            mapped.iconUrl = profileDef.iconUrl;
+        }
+    } else if (el.specialization) {
+        mapped.specialization = el.specialization;
+        const spec = ArchimateSpecializationRegistry.resolve(el.specialization);
+        if (spec?.iconUrl && !mapped.iconUrl) {
+            mapped.iconUrl = spec.iconUrl;
+        }
+    }
     const props = _propertiesToTypedArray(el.properties);
     if (props) mapped.properties = props;
     if (el.archiFolder) mapped.archiFolder = el.archiFolder;
@@ -1388,15 +1437,56 @@ export function toArchiExport(model) {
         archi: view.archi,
         children: fromArchimateView(view),
     }));
+    const archiElements = [...(model.archi?.elements ?? [])];
+    const elements = model.elements().map(el => {
+        if (!el.specialization) return el;
+        const spec = ArchimateSpecializationRegistry.resolve(el.specialization);
+        if (!spec) return el;
+        const specId = spec.id.startsWith('id-') ? spec.id : `id-prof-${spec.id}`;
+        const existing = archiElements.find(e => e.tag === 'profile' && (e.attributes?.id === specId || e.attributes?.name === spec.name));
+        if (!existing) {
+            archiElements.push({
+                tag: 'profile',
+                attributes: {
+                    id: specId,
+                    name: spec.name,
+                    conceptType: _toPascalType(el.type),
+                    ...(spec.iconUrl && { imagePath: spec.iconUrl }),
+                },
+            });
+        } else if (spec.iconUrl && !existing.attributes?.imagePath) {
+            existing.attributes = { ...existing.attributes, imagePath: spec.iconUrl };
+        }
+        if (!el.archi?.attributes?.profiles) {
+            return {
+                ...el,
+                archi: {
+                    ...(el.archi ?? {}),
+                    attributes: {
+                        ...(el.archi?.attributes ?? {}),
+                        profiles: specId,
+                    },
+                },
+            };
+        }
+        return el;
+    });
+
+    const archi = (model.archi || archiElements.length) ? {
+        ...(model.archi ?? {}),
+        attributes: { ...(model.archi?.attributes ?? {}) },
+        elements: archiElements,
+    } : null;
+
     return [{
         id: model.id || 'model-1',
         name: model.name || 'ArchiMate Model',
         version: '5.0.0',
         documentation: model.documentation,
         properties: model.properties,
-        archi: model.archi,
+        archi,
         emptyViewFolders: model.emptyViewFolders ?? [],
-        elements: model.elements(),
+        elements,
         relationships: model.relationships(),
     }, views];
 }
@@ -1510,6 +1600,20 @@ export function toArchiXML(model, views) {
         if (original && !el.archi?.attributes?.profiles) {
             profile = typeProfileId(original);
             typeProfiles.set(profile, { name: typeDisplayName(original), conceptType: _toPascalType(type) });
+        } else if (el.specialization && !el.archi?.attributes?.profiles) {
+            const spec = ArchimateSpecializationRegistry.resolve(el.specialization);
+            if (spec) {
+                const specId = spec.id.startsWith('id-') ? spec.id : ('id-prof-' + spec.id);
+                profile = specId;
+                const existing = (model.archi?.elements ?? []).find(e => e.tag === 'profile' && (e.attributes?.id === specId || e.attributes?.name === spec.name));
+                if (!existing && !typeProfiles.has(specId)) {
+                    typeProfiles.set(specId, {
+                        name: spec.name,
+                        conceptType: _toPascalType(type),
+                        ...(spec.iconUrl && { imagePath: spec.iconUrl }),
+                    });
+                }
+            }
         }
         byFolder.get(folder.type).push({ el, type, original, profile });
     }
@@ -1540,8 +1644,8 @@ export function toArchiXML(model, views) {
 
     // What else the model carried (profiles, ...), its own properties, then its documentation (Archi's "purpose").
     lines.push(..._extraElementLines(model.archi?.elements, '  '));
-    for (const [id, { name, conceptType }] of typeProfiles) {
-        lines.push(`  <profile name="${_escapeAttr(name)}" id="${id}" conceptType="${conceptType}"/>`);
+    for (const [id, { name, conceptType, imagePath }] of typeProfiles) {
+        lines.push(`  <profile name="${_escapeAttr(name)}" id="${id}" conceptType="${conceptType}"${imagePath ? ` imagePath="${_escapeAttr(imagePath)}"` : ''}/>`);
     }
     lines.push(..._propertyLines(model.properties, '  '));
     if (model.documentation) lines.push(`  <purpose>${_escapeXml(model.documentation)}</purpose>`);

package/src/archimateArchive.js

@@ -1,4 +1,5 @@
-import { parseArchiModel, toArchiXML } from './archimateArchiFormat.js';
+import { parseArchiModel, toArchiXML, toPascalType } from './archimateArchiFormat.js';
+import { ArchimateSpecializationRegistry } from './archimateSpecializations.js';
 import { ZipArchive } from './zip/ZipArchive.js';
 
 /**
@@ -95,15 +96,37 @@ export function toArchiFile(model, views) {
     _eachVisual(copies, (visual) => registerPicture(visual));
 
     let modelForXml = model;
-    if (model?.archi?.elements?.some(e => e.attributes?.imagePath?.startsWith('data:'))) {
+    let archiElements = [...(model?.archi?.elements || [])];
+    for (const el of model?.elements || []) {
+        if (el.specialization) {
+            const spec = ArchimateSpecializationRegistry.resolve(el.specialization);
+            if (spec?.iconUrl?.startsWith('data:')) {
+                const specId = spec.id.startsWith('id-') ? spec.id : ('id-prof-' + spec.id);
+                if (!archiElements.some(e => e.tag === 'profile' && (e.attributes?.id === specId || e.attributes?.name === spec.name))) {
+                    archiElements.push({
+                        tag: 'profile',
+                        attributes: {
+                            id: specId,
+                            name: spec.name,
+                            conceptType: toPascalType(el.type),
+                            imagePath: spec.iconUrl,
+                        },
+                    });
+                }
+            }
+        }
+    }
+    if (archiElements.some(e => e.attributes?.imagePath?.startsWith('data:'))) {
         modelForXml = {
             ...model,
             archi: {
-                ...model.archi,
-                elements: model.archi.elements.map(e => {
+                ...(model?.archi ?? {}),
+                attributes: { ...(model?.archi?.attributes ?? {}) },
+                elements: archiElements.map(e => {
                     if (!e.attributes?.imagePath?.startsWith('data:')) return e;
                     const clonedAttr = { ...e.attributes };
                     registerPicture(clonedAttr);
+                    delete clonedAttr.archiImagePath;
                     return { ...e, attributes: clonedAttr };
                 }),
             },

package/src/archimateExchangeFormat.js

@@ -144,12 +144,20 @@ function _organizationPaths(root) {
     return { paths, emptyViewFolders };
 }
 
+function _asPropertyPairs(pairs) {
+    const list = pairs.map(p => ({ ...p }));
+    for (const { key, value } of pairs) {
+        if (!(key in list)) list[key] = value;
+    }
+    return list;
+}
+
 /** An element as parseArchiModel gives it (type: Archi's class name). @private */
 function _parseElement(el, propertyPairs) {
     const xsiType = _xsiType(el);
-    const properties = Object.fromEntries(propertyPairs.map(({ key, value }) => [key, value]));
-    const ownType = properties[EXCHANGE_TYPE_PROPERTY];
-    delete properties[EXCHANGE_TYPE_PROPERTY];
+    const ownType = propertyPairs.find(p => p.key === EXCHANGE_TYPE_PROPERTY)?.value;
+    const filteredPairs = propertyPairs.filter(p => p.key !== EXCHANGE_TYPE_PROPERTY);
+    const properties = _asPropertyPairs(filteredPairs);
     const attributes = {};
     const elements = [];
     if (JUNCTION_TYPES[xsiType]) attributes.type = 'or';
@@ -180,7 +188,7 @@ function _parseRelationship(el, propertyPairs) {
         target: el.getAttribute('target'),
         ...(el.getAttribute('isDirected') === 'true' && { directed: true }),
         documentation: _text(el, 'documentation'),
-        properties: Object.fromEntries(propertyPairs.map(({ key, value }) => [key, value])),
+        properties: _asPropertyPairs(propertyPairs),
         ...(Object.keys(attributes).length && { archi: { attributes, elements: [] } }),
     };
 }

package/src/archimateSpecializations.js

@@ -99,6 +99,12 @@ export class ArchimateSpecializationRegistry {
     /** Register or replace a specialization. */
     static register(spec) {
         const s = new ArchimateSpecialization(spec);
+        const existingByName = this.list().find(e => e.name === s.name && e.id !== s.id);
+        if (existingByName) {
+            if (s.iconUrl && !existingByName.iconUrl) existingByName.iconUrl = s.iconUrl;
+            if (s.icon && !existingByName.icon) existingByName.icon = s.icon;
+            if (s.color && !existingByName.color) existingByName.color = s.color;
+        }
         this._store.set(s.id, s);
         return s;
     }
@@ -116,7 +122,11 @@ export class ArchimateSpecializationRegistry {
     /** Look up by id or by exact name. */
     static resolve(idOrName) {
         if (!idOrName) return undefined;
-        return this._store.get(idOrName) || this.list().find(s => s.name === idOrName);
+        const byId = this._store.get(idOrName);
+        if (byId) return byId;
+        const matches = this.list().filter(s => s.name === idOrName);
+        if (!matches.length) return undefined;
+        return matches.find(s => s.iconUrl || s.icon) || matches[0];
     }
 
     /** All registered specializations. */

package/src/chartCatalog.js

@@ -91,12 +91,13 @@ export const CAMERA_MODE = {
 export const CHART_CATALOG = [
   {
     key: 'bar', label: 'Bar', method: 'barChart', category: '2d',
-    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.GROUPED_FIELD, camera: CAMERA_MODE.NONE,
     axes: [
       { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
       { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.POSITION_Y_LENGTH, required: true },
+      { role: 'group',    kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.COLOR,       required: false },
     ],
-    dataShape: 'Array<{label, value}>',
+    dataShape: 'Array<{label, value}> — optional `colorCol` (field name or compiled formula) colors bars by group',
     streamShape: 'flat',
   },
   {
@@ -609,14 +610,15 @@ export const CHART_CATALOG = [
   },
   {
     key: 'lollipop', label: 'Lollipop', method: 'lollipopChart', category: '2d',
-    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.PALETTE, camera: CAMERA_MODE.NONE,
+    coordSystem: COORD_SYSTEM.CARTESIAN, title: true, legend: true, colorMode: COLOR_MODE.GROUPED_FIELD, camera: CAMERA_MODE.NONE,
     seriesCapable: true,
     axes: [
       { role: 'category', kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.POSITION_X, required: true },
       { role: 'value',    kind: AXIS_KIND.NUMERIC,      channel: ENCODING_CHANNEL.POSITION_Y, required: true },
       { role: 'series',   kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.COLOR,      required: false },
+      { role: 'group',    kind: AXIS_KIND.CATEGORICAL, channel: ENCODING_CHANNEL.COLOR,      required: false },
     ],
-    dataShape: 'Array<{label, value}> or multi-series Array<{name, values:Array<{label,value}>}> — stem-and-dot alternative to bars',
+    dataShape: 'Array<{label, value}> or multi-series Array<{name, values:Array<{label,value}>}> — stem-and-dot alternative to bars; `colorCol` supported on 1D data',
     streamShape: 'flat',
   },
   {

package/src/charting/ArchimateDiagramEditor.js

@@ -33,7 +33,8 @@ import { ExchangeFileFormat } from './archimate/ExchangeFileFormat.js';
 import { ArchimateCsvFileFormat } from './archimate/ArchimateCsvFileFormat.js';
 
 /**
- * ArchimateDiagramEditor — ArchiMate-specific diagram editor extending DiagramEditor base.
+ * ArchimateDiagramEditor — legacy GraphDiagram-based ArchiMate editor extending DiagramEditor.
+ * @deprecated Use ArchimateCanvasEditor (or ArchimateCanvasPart) for ArchiMate editing. RenderEngine.archimateDiagram() remains for read-only charts.
  *
  * Encapsulates: ArchiMate model, tree navigator, diagram tabs, rendering, controls wiring.
  * Inherits: common rendering, drag/drop, toolbar, tree, filtering from DiagramEditor.
@@ -140,11 +141,6 @@ export class ArchimateDiagramEditor extends DiagramEditor {
 
         // Enable tree drag-drop (delayed to allow DOM to be ready)
         setTimeout(() => this.enableTreeDragDrop(), 100);
-
-        // Wire controls if not using auto-toolbar
-        if (!this.features) {
-            this.wireControls();
-        }
     }
 
     /**
@@ -1365,19 +1361,10 @@ export class ArchimateDiagramEditor extends DiagramEditor {
     }
 
     /**
-     * Get a control value from the DOM.
+     * Get a control value.
      */
     getOption(controlId, defaultValue) {
-        if (this._options?.has(controlId)) return super.getOption(controlId, defaultValue);
-        // Hosts that bring their own controls (wireControls) keep them in the DOM.
-        try {
-            const el = this.document.getElementById(controlId);
-            if (!el) return defaultValue;
-            if (el.type === 'checkbox') return el.checked;
-            return el.value || defaultValue;
-        } catch {
-            return defaultValue;
-        }
+        return super.getOption(controlId, defaultValue);
     }
 
     /** Save specializations to localStorage. */
@@ -1571,98 +1558,9 @@ export class ArchimateDiagramEditor extends DiagramEditor {
     }
 
     /**
-     * Wire up all control event listeners (version, viewpoint, distinct shapes, etc.).
-     * Triggers render on change. Optional: provide custom handler functions.
+     * @deprecated Legacy control wiring. Controls are now auto-rendered into the toolbar via `features`.
      */
-    wireControls(options = {}) {
-        const {
-            onVersionChange,
-            onViewpointChange,
-            onViewpointModeChange,
-            onDistinctShapesChange,
-            onShowDerivedChange,
-            onManageViewpoints,
-            onManageSpecializations,
-            populateViewpointSelect,
-        } = options;
-
-        // Version selector
-        const versionEl = this.document.getElementById('archimate-version');
-        if (versionEl) {
-            versionEl.addEventListener('change', () => {
-                if (onVersionChange) onVersionChange();
-                this.render();
-            });
-        }
-
-        // Viewpoint selector and mode
-        const viewpointEl = this.document.getElementById('archimate-viewpoint');
-        const viewpointModeEl = this.document.getElementById('archimate-viewpoint-mode');
-        if (viewpointEl) {
-            viewpointEl.addEventListener('change', () => {
-                if (onViewpointChange) onViewpointChange();
-                this.render();
-            });
-        }
-        if (viewpointModeEl) {
-            viewpointModeEl.addEventListener('change', () => {
-                if (onViewpointModeChange) onViewpointModeChange();
-                this.render();
-            });
-        }
-
-        // Distinct shapes checkbox
-        const distinctShapesEl = this.document.getElementById('archimate-distinct-shapes');
-        if (distinctShapesEl) {
-            distinctShapesEl.addEventListener('change', () => {
-                if (onDistinctShapesChange) onDistinctShapesChange();
-                this.render();
-            });
-        }
-
-        // Show derived relationships checkbox
-        const showDerivedEl = this.document.getElementById('archimate-show-derived');
-        if (showDerivedEl) {
-            showDerivedEl.addEventListener('change', () => {
-                if (onShowDerivedChange) onShowDerivedChange();
-                this.render();
-            });
-        }
-
-        // Manage viewpoints dialog
-        const manageVpEl = this.document.getElementById('archimate-manage-viewpoints');
-        if (manageVpEl && onManageViewpoints) {
-            manageVpEl.addEventListener('click', onManageViewpoints);
-        }
-
-        // Manage specializations dialog
-        const manageSpecEl = this.document.getElementById('archimate-manage-specializations');
-        if (manageSpecEl && onManageSpecializations) {
-            manageSpecEl.addEventListener('click', onManageSpecializations);
-        }
-
-        // Settings dialog
-        const settingsEl = this.document.getElementById('archimate-settings');
-        if (settingsEl) {
-            settingsEl.addEventListener('click', () => {
-                this.workspace.showGlobalSettingsDialog(this.document, this.settingsManager, 'default');
-            });
-        }
-
-        // Filter controls
-        const filterInput = this.document.getElementById('archimate-filter');
-        const filterClearEl = this.document.getElementById('archimate-filter-clear');
-        if (filterInput && this.currentEngine) {
-            const applyFilter = () => {
-                this.currentEngine.filterGraphNodes(filterInput.value);
-            };
-            filterInput.addEventListener('input', applyFilter);
-            if (filterClearEl) {
-                filterClearEl.addEventListener('click', () => {
-                    filterInput.value = '';
-                    applyFilter();
-                });
-            }
-        }
+    wireControls(_options = {}) {
+        // No-op: toolbar and controls are managed via features and MenuBar
     }
 }

package/src/charting/DiagramTypeRegistry.js

@@ -12,7 +12,8 @@ import {
     EllipseTemplate, DiamondTemplate, TriangleTemplate, PentagonTemplate, HexagonTemplate,
     OctagonTemplate, StarTemplate, ParallelogramTemplate, TrapezoidTemplate, ManualInputTemplate,
     CylinderTemplate, DocumentTemplate, NoteTemplate, CloudTemplate, ActorTemplate,
-    PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate,
+    PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate,
+    C4PersonTemplate, C4SystemTemplate, C4ContainerTemplate, C4ComponentTemplate, C4BoundaryTemplate,
 } from './templates/index.js';
 
 const C = {
@@ -202,6 +203,24 @@ export const DIAGRAM_TYPES = {
         ],
     },
 
+    'c4-architecture': {
+        name: 'C4 Architecture',
+        group: 'Architecture',
+        description: 'Hierarchical software architecture: Person, System, Container, Component, and Boundaries',
+        templates: [
+            shape('c4-person', 'Person', C4PersonTemplate, { fillColor: '#08427b', textColor: '#ffffff' }, 'A human user, actor, persona, or stakeholder interacting with systems'),
+            shape('c4-system', 'Software System', C4SystemTemplate, { fillColor: '#1168bd', textColor: '#ffffff' }, 'The software system in focus delivering business value'),
+            shape('c4-system-external', 'External System', C4SystemTemplate, { external: true, fillColor: '#999999', textColor: '#ffffff' }, 'An external software system outside the boundary of change'),
+            shape('c4-container', 'Container', C4ContainerTemplate, { fillColor: '#438dd5', textColor: '#ffffff' }, 'An application, web service, mobile app, or microservice'),
+            shape('c4-database', 'Database Container', C4ContainerTemplate, { containerType: 'database', fillColor: '#438dd5', textColor: '#ffffff' }, 'A database, persistence store, cache, or datastore container'),
+            shape('c4-component', 'Component', C4ComponentTemplate, { fillColor: '#85bbf0', textColor: '#000000' }, 'A modular component, controller, or service within a container'),
+            shape('c4-system-boundary', 'System Boundary', C4BoundaryTemplate, { boundaryType: 'System', zIndex: -1 }, 'Boundary box enclosing containers belonging to a Software System'),
+            shape('c4-enterprise-boundary', 'Enterprise Boundary', C4BoundaryTemplate, { boundaryType: 'Enterprise', zIndex: -2 }, 'Boundary box enclosing all systems belonging to an enterprise'),
+            shape('c4-container-boundary', 'Container Boundary', C4BoundaryTemplate, { boundaryType: 'Container', zIndex: -1 }, 'Boundary box enclosing components belonging to a Container'),
+            note,
+        ],
+    },
+
     'er-diagram': {
         name: 'Entity-Relationship',
         group: 'Data',

package/src/charting/DiagramViewPropertiesDialog.js

@@ -2,26 +2,33 @@ import { ViewPropertiesDialog } from './ViewPropertiesDialog.js';
 import { inheritableFields, readInheritableFields } from './SettingsCascade.js';
 import { EDGE_STYLE_PROPERTIES } from './edgeStyle/EdgeStyleSchema.js';
 import { SetStyleCommand } from './edgeStyle/SetStyleCommand.js';
+import { CompositeCommand } from './CommandHistory.js';
+
+const TITLE_POSITIONS = [['none', 'None'], ['top', 'Top'], ['bottom', 'Bottom']];
+const WATERMARK_ROTATIONS = [['0°', 'Horizontal (0°)'], ['-45°', 'Diagonal (-45°)'], ['-90°', 'Vertical (-90°)']];
+const WATERMARK_REPEATS = [['none', 'Center (single)'], ['repeat', 'Repeated grid'], ['tile', 'Tiled pattern']];
 
 /**
  * DiagramViewPropertiesDialog — a template-editor diagram's properties plus
- * its line-style defaults: the diagram level of the line-style cascade
- * (diagram → model → tool), each property inheriting unless set. The style
- * change is one step on the model's undo history. Used by
- * DiagramEditorPart.
+ * its line-style defaults and visual appearance (background, title band, watermark):
+ * the diagram level of the line-style cascade (diagram → model → tool) and
+ * the diagram appearance settings. Changes are undoable on the diagram's history.
+ * Used by DiagramEditorPart.
  */
 export class DiagramViewPropertiesDialog extends ViewPropertiesDialog {
     /**
      * @param {Object} options - As ViewPropertiesDialog, plus:
      * @param {EdgeStyleCascade} options.cascade - The diagram's line-style levels, the diagram's own keyed `levelKey`
      * @param {string} [options.levelKey] - Which level is this diagram's
-     * @param {() => void} [options.onStyleChange] - After the style changes (e.g. redraw)
+     * @param {() => void} [options.onStyleChange] - After the line style changes
+     * @param {() => void} [options.onSettingsChange] - After the appearance settings change
      */
-    constructor({ cascade, levelKey = 'view', onStyleChange = () => {}, ...rest }) {
+    constructor({ cascade, levelKey = 'view', onStyleChange = () => {}, onSettingsChange = () => {}, ...rest }) {
         super(rest);
         this.cascade = cascade;
         this.levelKey = levelKey;
         this.onStyleChange = onStyleChange;
+        this.onSettingsChange = onSettingsChange;
     }
 
     /** The diagram's own line style (its level's style object). */
@@ -30,17 +37,54 @@ export class DiagramViewPropertiesDialog extends ViewPropertiesDialog {
     }
 
     sections() {
+        const ownSettings = this.view.viewSettings ?? {};
         return [
             { type: 'heading', label: 'Line style' },
             ...inheritableFields(EDGE_STYLE_PROPERTIES, this.style, this.cascade.inheritedBy(this.levelKey)),
+            { type: 'heading', label: 'Appearance' },
+            { key: 'background', label: 'Background', type: 'color', value: ownSettings.background || '#ffffff' },
+            { key: 'backgroundImage', label: 'Background image', type: 'text', value: ownSettings.backgroundImage ?? '', placeholder: 'URL (optional)' },
+            { key: 'bandTitle', label: 'Title band', type: 'text', value: ownSettings.title ?? '', placeholder: 'Text shown above or below the diagram' },
+            { key: 'titlePosition', label: 'Title position', type: 'select', value: ownSettings.titlePosition || 'none', choices: TITLE_POSITIONS },
+            { key: 'watermark', label: 'Watermark', type: 'text', value: ownSettings.watermark ?? '', placeholder: 'CONFIDENTIAL, DRAFT, ...' },
+            { key: 'watermarkRotation', label: 'Watermark rotation', type: 'select', value: ownSettings.watermarkRotation || '-45°', choices: WATERMARK_ROTATIONS },
+            { key: 'watermarkOpacity', label: 'Watermark opacity', type: 'number', min: 0, max: 100, step: 5, value: ownSettings.watermarkOpacity ?? 20 },
+            { key: 'watermarkRepeat', label: 'Watermark repeat', type: 'select', value: ownSettings.watermarkRepeat || 'none', choices: WATERMARK_REPEATS },
         ];
     }
 
     applySections(values) {
+        // Line style
         const patch = readInheritableFields(EDGE_STYLE_PROPERTIES, values);
-        const changed = Object.entries(patch).some(([k, v]) => this.style[k] !== v);
-        if (!changed) return;
-        this.view.history.execute(new SetStyleCommand(this.style, patch, 'Diagram line style'));
-        this.onStyleChange();
+        const styleChanged = Object.entries(patch).some(([k, v]) => this.style[k] !== v);
+
+        // Appearance
+        const ownSettings = this.view.viewSettings ?? (this.view.viewSettings = {});
+        const appearancePatch = {};
+        if ('background' in values) appearancePatch.background = values.background;
+        if ('backgroundImage' in values) appearancePatch.backgroundImage = values.backgroundImage?.trim() || undefined;
+        if ('bandTitle' in values) appearancePatch.title = values.bandTitle?.trim() || undefined;
+        if ('titlePosition' in values) appearancePatch.titlePosition = values.titlePosition && values.titlePosition !== 'none' ? values.titlePosition : undefined;
+        if ('watermark' in values) appearancePatch.watermark = values.watermark?.trim() || undefined;
+        if ('watermarkRotation' in values) appearancePatch.watermarkRotation = values.watermarkRotation && values.watermarkRotation !== '-45°' ? values.watermarkRotation : undefined;
+        if ('watermarkOpacity' in values) appearancePatch.watermarkOpacity = values.watermarkOpacity != null && Number(values.watermarkOpacity) !== 20 ? Number(values.watermarkOpacity) : undefined;
+        if ('watermarkRepeat' in values) appearancePatch.watermarkRepeat = values.watermarkRepeat && values.watermarkRepeat !== 'none' ? values.watermarkRepeat : undefined;
+
+        const appearanceChanged = Object.entries(appearancePatch).some(([k, v]) => ownSettings[k] !== v);
+
+        if (styleChanged && appearanceChanged) {
+            this.view.history.execute(new CompositeCommand('Diagram properties', [
+                new SetStyleCommand(this.style, patch, 'Diagram line style'),
+                new SetStyleCommand(ownSettings, appearancePatch, 'Diagram appearance'),
+            ]));
+            this.onStyleChange();
+            this.onSettingsChange();
+        } else if (styleChanged) {
+            this.view.history.execute(new SetStyleCommand(this.style, patch, 'Diagram line style'));
+            this.onStyleChange();
+        } else if (appearanceChanged) {
+            this.view.history.execute(new SetStyleCommand(ownSettings, appearancePatch, 'Diagram appearance'));
+            this.onSettingsChange();
+        }
     }
 }

package/src/charting/Edge.js

@@ -117,4 +117,26 @@ export class Edge {
     clearWaypoints() {
         this.waypoints = [];
     }
+
+    /** The edge as plain JSON: its endpoints, label, waypoints, side pins and style overrides. */
+    toJSON() {
+        return {
+            id: this.id,
+            sourceId: this.sourceId,
+            targetId: this.targetId,
+            label: this.label,
+            waypoints: this.waypoints.map(w => ({ x: w.x, y: w.y })),
+            sourceSide: this.sourceSide,
+            targetSide: this.targetSide,
+            visible: this.visible,
+            ...this.styleOverrides(),
+        };
+    }
+
+    /** Reconstruct an Edge from plain JSON. */
+    static fromJSON(json) {
+        if (!json) throw new TypeError('Edge.fromJSON requires a JSON object');
+        const { id, sourceId, targetId, ...rest } = json;
+        return new Edge(id, sourceId, targetId, rest);
+    }
 }