@agilewallaby/c4-model 2.8.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agilewallaby/c4-model",
-  "version": "2.8.0",
+  "version": "4.0.0",
   "publishConfig": {
     "access": "public"
   },

package/src/archetype.d.ts

@@ -1,5 +1,11 @@
 import { TechnologyDefinition } from './core';
-export type ElementKind = 'person' | 'softwareSystem' | 'container' | 'component';
+export declare const ELEMENT_KINDS: {
+    readonly person: "person";
+    readonly softwareSystem: "softwareSystem";
+    readonly container: "container";
+    readonly component: "component";
+};
+export type ElementKind = (typeof ELEMENT_KINDS)[keyof typeof ELEMENT_KINDS];
 export declare class ElementArchetype {
     readonly name: string;
     readonly elementKind: ElementKind;
@@ -10,6 +16,7 @@ export declare class ElementArchetype {
     readonly description?: string;
     readonly technology?: string;
     readonly tags: ReadonlyArray<string>;
+    get canonicalName(): string;
     constructor(name: string, elementKind: ElementKind, definition?: TechnologyDefinition, parent?: ElementArchetype | undefined);
 }
 export declare class RelationshipArchetype {
@@ -21,6 +28,7 @@ export declare class RelationshipArchetype {
     readonly description?: string;
     readonly technology?: string;
     readonly tags: ReadonlyArray<string>;
+    get canonicalName(): string;
     constructor(name: string, definition?: TechnologyDefinition, parent?: RelationshipArchetype | undefined);
 }
 export declare function mergeArchetypeWithOverride(archetype: {

package/src/index.cjs

@@ -33,6 +33,7 @@ __export(index_exports, {
   Component: () => Component,
   Container: () => Container,
   ContainerGroup: () => ContainerGroup,
+  ELEMENT_KINDS: () => ELEMENT_KINDS,
   ElementArchetype: () => ElementArchetype,
   Model: () => Model,
   ModelGroup: () => ModelGroup,
@@ -41,7 +42,6 @@ __export(index_exports, {
   SoftwareSystem: () => SoftwareSystem,
   SoftwareSystemGroup: () => SoftwareSystemGroup,
   StructurizrDSLWriter: () => StructurizrDSLWriter,
-  View: () => View,
   Views: () => Views,
   buildModel: () => buildModel,
   exportWorkspaceJson: () => exportWorkspaceJson,
@@ -52,52 +52,6 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// libs/c4-model/src/archetype.ts
-var ElementArchetype = class {
-  constructor(name, elementKind, definition, parent) {
-    this.name = name;
-    this.elementKind = elementKind;
-    this.parent = parent;
-    this.ownDescription = definition?.description;
-    this.ownTechnology = definition?.technology;
-    this.ownTags = definition?.tags ?? [];
-    this.description = this.ownDescription ?? parent?.description;
-    this.technology = this.ownTechnology ?? parent?.technology;
-    this.tags = [...parent?.tags ?? [], ...this.ownTags];
-  }
-  ownDescription;
-  ownTechnology;
-  ownTags;
-  description;
-  technology;
-  tags;
-};
-var RelationshipArchetype = class {
-  constructor(name, definition, parent) {
-    this.name = name;
-    this.parent = parent;
-    this.ownDescription = definition?.description;
-    this.ownTechnology = definition?.technology;
-    this.ownTags = definition?.tags ?? [];
-    this.description = this.ownDescription ?? parent?.description;
-    this.technology = this.ownTechnology ?? parent?.technology;
-    this.tags = [...parent?.tags ?? [], ...this.ownTags];
-  }
-  ownDescription;
-  ownTechnology;
-  ownTags;
-  description;
-  technology;
-  tags;
-};
-function mergeArchetypeWithOverride(archetype, override) {
-  return {
-    description: override?.description ?? archetype.description,
-    technology: override?.technology ?? archetype.technology,
-    tags: [...archetype.tags, ...override?.tags ?? []]
-  };
-}
-
 // node_modules/.pnpm/change-case@5.4.4/node_modules/change-case/dist/index.js
 var SPLIT_LOWER_UPPER_RE = /([\p{Ll}\d])(\p{Lu})/gu;
 var SPLIT_UPPER_UPPER_RE = /(\p{Lu})([\p{Lu}][\p{Ll}])/gu;
@@ -184,6 +138,64 @@ function splitPrefixSuffix(input, options = {}) {
   ];
 }
 
+// libs/c4-model/src/archetype.ts
+var ELEMENT_KINDS = {
+  person: "person",
+  softwareSystem: "softwareSystem",
+  container: "container",
+  component: "component"
+};
+var ElementArchetype = class {
+  constructor(name, elementKind, definition, parent) {
+    this.name = name;
+    this.elementKind = elementKind;
+    this.parent = parent;
+    this.ownDescription = definition?.description;
+    this.ownTechnology = definition?.technology;
+    this.ownTags = definition?.tags ?? [];
+    this.description = this.ownDescription ?? parent?.description;
+    this.technology = this.ownTechnology ?? parent?.technology;
+    this.tags = [...parent?.tags ?? [], ...this.ownTags];
+  }
+  ownDescription;
+  ownTechnology;
+  ownTags;
+  description;
+  technology;
+  tags;
+  get canonicalName() {
+    return camelCase(this.name);
+  }
+};
+var RelationshipArchetype = class {
+  constructor(name, definition, parent) {
+    this.name = name;
+    this.parent = parent;
+    this.ownDescription = definition?.description;
+    this.ownTechnology = definition?.technology;
+    this.ownTags = definition?.tags ?? [];
+    this.description = this.ownDescription ?? parent?.description;
+    this.technology = this.ownTechnology ?? parent?.technology;
+    this.tags = [...parent?.tags ?? [], ...this.ownTags];
+  }
+  ownDescription;
+  ownTechnology;
+  ownTags;
+  description;
+  technology;
+  tags;
+  get canonicalName() {
+    return camelCase(this.name);
+  }
+};
+function mergeArchetypeWithOverride(archetype, override) {
+  return {
+    description: override?.description ?? archetype.description,
+    technology: override?.technology ?? archetype.technology,
+    tags: [...archetype.tags, ...override?.tags ?? []]
+  };
+}
+
 // libs/c4-model/src/core.ts
 var Element = class {
   constructor(name, defaultTags = [], definition, archetype, overrideDefinition) {
@@ -629,6 +641,10 @@ var View = class {
   addProperty(name, value) {
     this._properties.set(name, value);
   }
+  with(callback) {
+    callback(this);
+    return this;
+  }
   get scopes() {
     return this._scopes;
   }
@@ -762,7 +778,7 @@ var StructurizrDSLWriter = class {
     if (elementArchetypes.length === 0 && relationshipArchetypes.length === 0) return "";
     let dsl = this.writeLine(`archetypes {`, level);
     for (const arch of elementArchetypes) {
-      const baseType = arch.parent ? arch.parent.name : arch.elementKind;
+      const baseType = arch.parent ? arch.parent.canonicalName : arch.elementKind;
       let inner = "";
       if (arch.ownDescription) {
         inner += this.writeLine(`description "${arch.ownDescription}"`, level + 2);
@@ -774,15 +790,15 @@ var StructurizrDSLWriter = class {
         inner += this.writeLine(`tags ${arch.ownTags.map((t) => `"${t}"`).join(" ")}`, level + 2);
       }
       if (inner) {
-        dsl += this.writeLine(`${arch.name} = ${baseType} {`, level + 1);
+        dsl += this.writeLine(`${arch.canonicalName} = ${baseType} {`, level + 1);
         dsl += inner;
         dsl += this.writeLine(`}`, level + 1);
       } else {
-        dsl += this.writeLine(`${arch.name} = ${baseType} {}`, level + 1);
+        dsl += this.writeLine(`${arch.canonicalName} = ${baseType} {}`, level + 1);
       }
     }
     for (const arch of relationshipArchetypes) {
-      const arrow = arch.parent ? `--${arch.parent.name}->` : `->`;
+      const arrow = arch.parent ? `--${arch.parent.canonicalName}->` : `->`;
       let inner = "";
       if (arch.ownDescription) {
         inner += this.writeLine(`description "${arch.ownDescription}"`, level + 2);
@@ -794,11 +810,11 @@ var StructurizrDSLWriter = class {
         inner += this.writeLine(`tags ${arch.ownTags.map((t) => `"${t}"`).join(" ")}`, level + 2);
       }
       if (inner) {
-        dsl += this.writeLine(`${arch.name} = ${arrow} {`, level + 1);
+        dsl += this.writeLine(`${arch.canonicalName} = ${arrow} {`, level + 1);
         dsl += inner;
         dsl += this.writeLine(`}`, level + 1);
       } else {
-        dsl += this.writeLine(`${arch.name} = ${arrow} {}`, level + 1);
+        dsl += this.writeLine(`${arch.canonicalName} = ${arrow} {}`, level + 1);
       }
     }
     dsl += this.writeLine(`}`, level);
@@ -806,7 +822,7 @@ var StructurizrDSLWriter = class {
   }
   writeElement(elementType, element, level, closeElement = true) {
     let elementDsl = "";
-    const type = element.archetype ? element.archetype.name : elementType;
+    const type = element.archetype ? element.archetype.canonicalName : elementType;
     elementDsl += this.writeLine(`${element.canonicalName} = ${type} "${element.name}" {`, level);
     if (element.archetype) {
       const ovr = element.overrideDefinition;
@@ -899,7 +915,7 @@ var StructurizrDSLWriter = class {
   writeRelationship(relationship, level) {
     let dsl = "";
     if (relationship.archetype) {
-      const arrow = `--${relationship.archetype.name}->`;
+      const arrow = `--${relationship.archetype.canonicalName}->`;
       const ovr = relationship.overrideDefinition;
       const desc = ovr?.description ?? relationship.description ?? "uses";
       dsl += this.writeLine(
@@ -996,7 +1012,9 @@ var StructurizrDSLWriter = class {
   }
   writeView(view, viewType, level) {
     let viewDsl = this.writeLine(`${viewType}${view.subject ? ' "' + view.subject.canonicalName + '"' : ""} "${view.key}" {`, level);
-    viewDsl += this.writeLine(`description "${view.description}"`, level + 1);
+    if (view.description) {
+      viewDsl += this.writeLine(`description "${view.description}"`, level + 1);
+    }
     if (view.title) {
       viewDsl += this.writeLine(`title "${view.title}"`, level + 1);
     }
@@ -1241,6 +1259,7 @@ async function exportWorkspaceJson(model, views) {
   Component,
   Container,
   ContainerGroup,
+  ELEMENT_KINDS,
   ElementArchetype,
   Model,
   ModelGroup,
@@ -1249,7 +1268,6 @@ async function exportWorkspaceJson(model, views) {
   SoftwareSystem,
   SoftwareSystemGroup,
   StructurizrDSLWriter,
-  View,
   Views,
   buildModel,
   exportWorkspaceJson,

package/src/index.d.ts

@@ -43,7 +43,13 @@ declare class Group<TChild extends Element$1 | Group = never> {
 	get canonicalName(): string;
 	with<TChildren extends Record<string, TChild>>(callback: (self: this) => TChildren): this & TChildren;
 }
-export type ElementKind = "person" | "softwareSystem" | "container" | "component";
+export declare const ELEMENT_KINDS: {
+	readonly person: "person";
+	readonly softwareSystem: "softwareSystem";
+	readonly container: "container";
+	readonly component: "component";
+};
+export type ElementKind = (typeof ELEMENT_KINDS)[keyof typeof ELEMENT_KINDS];
 export declare class ElementArchetype {
 	readonly name: string;
 	readonly elementKind: ElementKind;
@@ -54,6 +60,7 @@ export declare class ElementArchetype {
 	readonly description?: string;
 	readonly technology?: string;
 	readonly tags: ReadonlyArray<string>;
+	get canonicalName(): string;
 	constructor(name: string, elementKind: ElementKind, definition?: TechnologyDefinition, parent?: ElementArchetype | undefined);
 }
 export declare class RelationshipArchetype {
@@ -65,6 +72,7 @@ export declare class RelationshipArchetype {
 	readonly description?: string;
 	readonly technology?: string;
 	readonly tags: ReadonlyArray<string>;
+	get canonicalName(): string;
 	constructor(name: string, definition?: TechnologyDefinition, parent?: RelationshipArchetype | undefined);
 }
 export declare function mergeArchetypeWithOverride(archetype: {
@@ -147,11 +155,13 @@ export declare class Person extends Element$1 {
 	constructor(name: string, definition?: PersonDefinition, archetype?: ElementArchetype, overrideDefinition?: TechnologyDefinition);
 	getChildElements(): ReadonlyArray<Element$1>;
 }
-export interface ViewDefinition<T extends Element$1> {
-	subject?: T;
-	description: string;
+export interface BaseViewDefinition {
+	description?: string;
 	title?: string;
 }
+export interface ScopedViewDefinition<T extends Element$1> extends BaseViewDefinition {
+	subject: T;
+}
 export type AutoLayoutDirection = "tb" | "bt" | "lr" | "rl";
 export interface AutoLayout {
 	direction?: AutoLayoutDirection;
@@ -192,16 +202,7 @@ export interface RelationshipStyleEntry {
 	tag: string;
 	definition: RelationshipStyleDefinition;
 }
-export declare class View<T extends Element$1> {
-	readonly key: string;
-	readonly subject?: T;
-	readonly description: string;
-	readonly title?: string;
-	private _scopes;
-	private _autoLayout?;
-	private _isDefault;
-	private _properties;
-	constructor(key: string, viewDefinition: ViewDefinition<T>);
+export interface ViewBuilder {
 	includeAll(): void;
 	includeElement(element: Element$1): void;
 	includeExpression(expression: string): void;
@@ -211,10 +212,17 @@ export declare class View<T extends Element$1> {
 	autoLayout(direction?: AutoLayoutDirection, rankSeparation?: number, nodeSeparation?: number): void;
 	setDefault(): void;
 	addProperty(name: string, value: string): void;
-	get scopes(): ReadonlyArray<string>;
-	get autoLayoutConfig(): AutoLayout | undefined;
-	get isDefault(): boolean;
-	get properties(): ReadonlyMap<string, string>;
+}
+export interface ReadonlyView<T extends Element$1> {
+	readonly key: string;
+	readonly subject?: T;
+	readonly description?: string;
+	readonly title?: string;
+	readonly scopes: ReadonlyArray<string>;
+	readonly autoLayoutConfig: AutoLayout | undefined;
+	readonly isDefault: boolean;
+	readonly properties: ReadonlyMap<string, string>;
+	with(callback: (builder: ViewBuilder) => void): ReadonlyView<T>;
 }
 export declare class Views {
 	private readonly _systemLandscapeViews;
@@ -225,18 +233,18 @@ export declare class Views {
 	private _relationshipStyles;
 	private _themes;
 	private _properties;
-	addSystemLandscapeView(key: string, definition: ViewDefinition<Element$1>): View<Element$1>;
-	addSystemContextView(key: string, definition: ViewDefinition<SoftwareSystem>): View<SoftwareSystem>;
-	addContainerView(key: string, definition: ViewDefinition<SoftwareSystem>): View<SoftwareSystem>;
-	addComponentView(key: string, definition: ViewDefinition<Container>): View<Container>;
+	addSystemLandscapeView(key: string, definition: BaseViewDefinition): ReadonlyView<Element$1>;
+	addSystemContextView(key: string, definition: ScopedViewDefinition<SoftwareSystem>): ReadonlyView<SoftwareSystem>;
+	addContainerView(key: string, definition: ScopedViewDefinition<SoftwareSystem>): ReadonlyView<SoftwareSystem>;
+	addComponentView(key: string, definition: ScopedViewDefinition<Container>): ReadonlyView<Container>;
 	addElementStyle(tag: string, definition: ElementStyleDefinition): void;
 	addRelationshipStyle(tag: string, definition: RelationshipStyleDefinition): void;
 	addTheme(url: string): void;
 	addProperty(name: string, value: string): void;
-	get systemLandscapeViews(): ReadonlyArray<View<Element$1>>;
-	get systemContextViews(): ReadonlyArray<View<SoftwareSystem>>;
-	get containerViews(): ReadonlyArray<View<SoftwareSystem>>;
-	get componentViews(): ReadonlyArray<View<Container>>;
+	get systemLandscapeViews(): ReadonlyArray<ReadonlyView<Element$1>>;
+	get systemContextViews(): ReadonlyArray<ReadonlyView<SoftwareSystem>>;
+	get containerViews(): ReadonlyArray<ReadonlyView<SoftwareSystem>>;
+	get componentViews(): ReadonlyArray<ReadonlyView<Container>>;
 	get elementStyles(): ReadonlyArray<ElementStyleEntry>;
 	get relationshipStyles(): ReadonlyArray<RelationshipStyleEntry>;
 	get themes(): ReadonlyArray<string>;

package/src/index.js

@@ -1,49 +1,3 @@
-// libs/c4-model/src/archetype.ts
-var ElementArchetype = class {
-  constructor(name, elementKind, definition, parent) {
-    this.name = name;
-    this.elementKind = elementKind;
-    this.parent = parent;
-    this.ownDescription = definition?.description;
-    this.ownTechnology = definition?.technology;
-    this.ownTags = definition?.tags ?? [];
-    this.description = this.ownDescription ?? parent?.description;
-    this.technology = this.ownTechnology ?? parent?.technology;
-    this.tags = [...parent?.tags ?? [], ...this.ownTags];
-  }
-  ownDescription;
-  ownTechnology;
-  ownTags;
-  description;
-  technology;
-  tags;
-};
-var RelationshipArchetype = class {
-  constructor(name, definition, parent) {
-    this.name = name;
-    this.parent = parent;
-    this.ownDescription = definition?.description;
-    this.ownTechnology = definition?.technology;
-    this.ownTags = definition?.tags ?? [];
-    this.description = this.ownDescription ?? parent?.description;
-    this.technology = this.ownTechnology ?? parent?.technology;
-    this.tags = [...parent?.tags ?? [], ...this.ownTags];
-  }
-  ownDescription;
-  ownTechnology;
-  ownTags;
-  description;
-  technology;
-  tags;
-};
-function mergeArchetypeWithOverride(archetype, override) {
-  return {
-    description: override?.description ?? archetype.description,
-    technology: override?.technology ?? archetype.technology,
-    tags: [...archetype.tags, ...override?.tags ?? []]
-  };
-}
-
 // node_modules/.pnpm/change-case@5.4.4/node_modules/change-case/dist/index.js
 var SPLIT_LOWER_UPPER_RE = /([\p{Ll}\d])(\p{Lu})/gu;
 var SPLIT_UPPER_UPPER_RE = /(\p{Lu})([\p{Lu}][\p{Ll}])/gu;
@@ -130,6 +84,64 @@ function splitPrefixSuffix(input, options = {}) {
   ];
 }
 
+// libs/c4-model/src/archetype.ts
+var ELEMENT_KINDS = {
+  person: "person",
+  softwareSystem: "softwareSystem",
+  container: "container",
+  component: "component"
+};
+var ElementArchetype = class {
+  constructor(name, elementKind, definition, parent) {
+    this.name = name;
+    this.elementKind = elementKind;
+    this.parent = parent;
+    this.ownDescription = definition?.description;
+    this.ownTechnology = definition?.technology;
+    this.ownTags = definition?.tags ?? [];
+    this.description = this.ownDescription ?? parent?.description;
+    this.technology = this.ownTechnology ?? parent?.technology;
+    this.tags = [...parent?.tags ?? [], ...this.ownTags];
+  }
+  ownDescription;
+  ownTechnology;
+  ownTags;
+  description;
+  technology;
+  tags;
+  get canonicalName() {
+    return camelCase(this.name);
+  }
+};
+var RelationshipArchetype = class {
+  constructor(name, definition, parent) {
+    this.name = name;
+    this.parent = parent;
+    this.ownDescription = definition?.description;
+    this.ownTechnology = definition?.technology;
+    this.ownTags = definition?.tags ?? [];
+    this.description = this.ownDescription ?? parent?.description;
+    this.technology = this.ownTechnology ?? parent?.technology;
+    this.tags = [...parent?.tags ?? [], ...this.ownTags];
+  }
+  ownDescription;
+  ownTechnology;
+  ownTags;
+  description;
+  technology;
+  tags;
+  get canonicalName() {
+    return camelCase(this.name);
+  }
+};
+function mergeArchetypeWithOverride(archetype, override) {
+  return {
+    description: override?.description ?? archetype.description,
+    technology: override?.technology ?? archetype.technology,
+    tags: [...archetype.tags, ...override?.tags ?? []]
+  };
+}
+
 // libs/c4-model/src/core.ts
 var Element = class {
   constructor(name, defaultTags = [], definition, archetype, overrideDefinition) {
@@ -575,6 +587,10 @@ var View = class {
   addProperty(name, value) {
     this._properties.set(name, value);
   }
+  with(callback) {
+    callback(this);
+    return this;
+  }
   get scopes() {
     return this._scopes;
   }
@@ -708,7 +724,7 @@ var StructurizrDSLWriter = class {
     if (elementArchetypes.length === 0 && relationshipArchetypes.length === 0) return "";
     let dsl = this.writeLine(`archetypes {`, level);
     for (const arch of elementArchetypes) {
-      const baseType = arch.parent ? arch.parent.name : arch.elementKind;
+      const baseType = arch.parent ? arch.parent.canonicalName : arch.elementKind;
       let inner = "";
       if (arch.ownDescription) {
         inner += this.writeLine(`description "${arch.ownDescription}"`, level + 2);
@@ -720,15 +736,15 @@ var StructurizrDSLWriter = class {
         inner += this.writeLine(`tags ${arch.ownTags.map((t) => `"${t}"`).join(" ")}`, level + 2);
       }
       if (inner) {
-        dsl += this.writeLine(`${arch.name} = ${baseType} {`, level + 1);
+        dsl += this.writeLine(`${arch.canonicalName} = ${baseType} {`, level + 1);
         dsl += inner;
         dsl += this.writeLine(`}`, level + 1);
       } else {
-        dsl += this.writeLine(`${arch.name} = ${baseType} {}`, level + 1);
+        dsl += this.writeLine(`${arch.canonicalName} = ${baseType} {}`, level + 1);
       }
     }
     for (const arch of relationshipArchetypes) {
-      const arrow = arch.parent ? `--${arch.parent.name}->` : `->`;
+      const arrow = arch.parent ? `--${arch.parent.canonicalName}->` : `->`;
       let inner = "";
       if (arch.ownDescription) {
         inner += this.writeLine(`description "${arch.ownDescription}"`, level + 2);
@@ -740,11 +756,11 @@ var StructurizrDSLWriter = class {
         inner += this.writeLine(`tags ${arch.ownTags.map((t) => `"${t}"`).join(" ")}`, level + 2);
       }
       if (inner) {
-        dsl += this.writeLine(`${arch.name} = ${arrow} {`, level + 1);
+        dsl += this.writeLine(`${arch.canonicalName} = ${arrow} {`, level + 1);
         dsl += inner;
         dsl += this.writeLine(`}`, level + 1);
       } else {
-        dsl += this.writeLine(`${arch.name} = ${arrow} {}`, level + 1);
+        dsl += this.writeLine(`${arch.canonicalName} = ${arrow} {}`, level + 1);
       }
     }
     dsl += this.writeLine(`}`, level);
@@ -752,7 +768,7 @@ var StructurizrDSLWriter = class {
   }
   writeElement(elementType, element, level, closeElement = true) {
     let elementDsl = "";
-    const type = element.archetype ? element.archetype.name : elementType;
+    const type = element.archetype ? element.archetype.canonicalName : elementType;
     elementDsl += this.writeLine(`${element.canonicalName} = ${type} "${element.name}" {`, level);
     if (element.archetype) {
       const ovr = element.overrideDefinition;
@@ -845,7 +861,7 @@ var StructurizrDSLWriter = class {
   writeRelationship(relationship, level) {
     let dsl = "";
     if (relationship.archetype) {
-      const arrow = `--${relationship.archetype.name}->`;
+      const arrow = `--${relationship.archetype.canonicalName}->`;
       const ovr = relationship.overrideDefinition;
       const desc = ovr?.description ?? relationship.description ?? "uses";
       dsl += this.writeLine(
@@ -942,7 +958,9 @@ var StructurizrDSLWriter = class {
   }
   writeView(view, viewType, level) {
     let viewDsl = this.writeLine(`${viewType}${view.subject ? ' "' + view.subject.canonicalName + '"' : ""} "${view.key}" {`, level);
-    viewDsl += this.writeLine(`description "${view.description}"`, level + 1);
+    if (view.description) {
+      viewDsl += this.writeLine(`description "${view.description}"`, level + 1);
+    }
     if (view.title) {
       viewDsl += this.writeLine(`title "${view.title}"`, level + 1);
     }
@@ -1185,6 +1203,7 @@ export {
   Component,
   Container,
   ContainerGroup,
+  ELEMENT_KINDS,
   ElementArchetype,
   Model,
   ModelGroup,
@@ -1193,7 +1212,6 @@ export {
   SoftwareSystem,
   SoftwareSystemGroup,
   StructurizrDSLWriter,
-  View,
   Views,
   buildModel,
   exportWorkspaceJson,

package/src/views.d.ts

@@ -1,11 +1,13 @@
 import { Container } from './container';
 import { Element } from './core';
 import { SoftwareSystem } from './softwareSystem';
-interface ViewDefinition<T extends Element> {
-    subject?: T;
-    description: string;
+interface BaseViewDefinition {
+    description?: string;
     title?: string;
 }
+interface ScopedViewDefinition<T extends Element> extends BaseViewDefinition {
+    subject: T;
+}
 export type AutoLayoutDirection = 'tb' | 'bt' | 'lr' | 'rl';
 export interface AutoLayout {
     direction?: AutoLayoutDirection;
@@ -46,16 +48,7 @@ export interface RelationshipStyleEntry {
     tag: string;
     definition: RelationshipStyleDefinition;
 }
-export declare class View<T extends Element> {
-    readonly key: string;
-    readonly subject?: T;
-    readonly description: string;
-    readonly title?: string;
-    private _scopes;
-    private _autoLayout?;
-    private _isDefault;
-    private _properties;
-    constructor(key: string, viewDefinition: ViewDefinition<T>);
+export interface ViewBuilder {
     includeAll(): void;
     includeElement(element: Element): void;
     includeExpression(expression: string): void;
@@ -65,10 +58,17 @@ export declare class View<T extends Element> {
     autoLayout(direction?: AutoLayoutDirection, rankSeparation?: number, nodeSeparation?: number): void;
     setDefault(): void;
     addProperty(name: string, value: string): void;
-    get scopes(): ReadonlyArray<string>;
-    get autoLayoutConfig(): AutoLayout | undefined;
-    get isDefault(): boolean;
-    get properties(): ReadonlyMap<string, string>;
+}
+export interface ReadonlyView<T extends Element> {
+    readonly key: string;
+    readonly subject?: T;
+    readonly description?: string;
+    readonly title?: string;
+    readonly scopes: ReadonlyArray<string>;
+    readonly autoLayoutConfig: AutoLayout | undefined;
+    readonly isDefault: boolean;
+    readonly properties: ReadonlyMap<string, string>;
+    with(callback: (builder: ViewBuilder) => void): ReadonlyView<T>;
 }
 export declare class Views {
     private readonly _systemLandscapeViews;
@@ -79,18 +79,18 @@ export declare class Views {
     private _relationshipStyles;
     private _themes;
     private _properties;
-    addSystemLandscapeView(key: string, definition: ViewDefinition<Element>): View<Element>;
-    addSystemContextView(key: string, definition: ViewDefinition<SoftwareSystem>): View<SoftwareSystem>;
-    addContainerView(key: string, definition: ViewDefinition<SoftwareSystem>): View<SoftwareSystem>;
-    addComponentView(key: string, definition: ViewDefinition<Container>): View<Container>;
+    addSystemLandscapeView(key: string, definition: BaseViewDefinition): ReadonlyView<Element>;
+    addSystemContextView(key: string, definition: ScopedViewDefinition<SoftwareSystem>): ReadonlyView<SoftwareSystem>;
+    addContainerView(key: string, definition: ScopedViewDefinition<SoftwareSystem>): ReadonlyView<SoftwareSystem>;
+    addComponentView(key: string, definition: ScopedViewDefinition<Container>): ReadonlyView<Container>;
     addElementStyle(tag: string, definition: ElementStyleDefinition): void;
     addRelationshipStyle(tag: string, definition: RelationshipStyleDefinition): void;
     addTheme(url: string): void;
     addProperty(name: string, value: string): void;
-    get systemLandscapeViews(): ReadonlyArray<View<Element>>;
-    get systemContextViews(): ReadonlyArray<View<SoftwareSystem>>;
-    get containerViews(): ReadonlyArray<View<SoftwareSystem>>;
-    get componentViews(): ReadonlyArray<View<Container>>;
+    get systemLandscapeViews(): ReadonlyArray<ReadonlyView<Element>>;
+    get systemContextViews(): ReadonlyArray<ReadonlyView<SoftwareSystem>>;
+    get containerViews(): ReadonlyArray<ReadonlyView<SoftwareSystem>>;
+    get componentViews(): ReadonlyArray<ReadonlyView<Container>>;
     get elementStyles(): ReadonlyArray<ElementStyleEntry>;
     get relationshipStyles(): ReadonlyArray<RelationshipStyleEntry>;
     get themes(): ReadonlyArray<string>;