@likec4/core 1.10.0 → 1.11.0

package/dist/types/index.d.mts

@@ -1 +1,2 @@
-export { aq as AndOperator, A as AsFqn, aP as AutoLayoutDirection, bl as BBox, aU as BasicElementView, aT as BasicView, o as BorderStyle, B as BorderStyles, e as Color, aE as ColorLiteral, bi as ComputedDynamicView, f as ComputedEdge, bh as ComputedElementView, g as ComputedLikeC4Model, b as ComputedNode, C as ComputedView, m as CustomColor, b4 as CustomColorDefinitions, G as CustomElementExpr, ad as CustomRelationExpr, aA as DefaultArrowType, q as DefaultElementShape, az as DefaultLineStyle, aB as DefaultRelationshipColor, D as DefaultThemeColor, bo as DiagramEdge, bn as DiagramNode, bp as DiagramView, b2 as DynamicView, a$ as DynamicViewIncludeRule, aZ as DynamicViewParallelSteps, b1 as DynamicViewRule, aY as DynamicViewStep, a_ as DynamicViewStepOrParallel, E as EdgeId, h as Element, U as ElementExpression, c as ElementKind, M as ElementKindExpr, v as ElementKindSpecification, u as ElementKindSpecificationStyle, bs as ElementNotation, $ as ElementPredicateExpression, w as ElementRefExpr, d as ElementShape, p as ElementShapes, r as ElementStyle, Q as ElementTagExpr, aG as ElementThemeColorValues, aH as ElementThemeColors, aX as ElementView, Z as ElementWhereExpr, aj as EqualOperator, y as ExpandedElementExpr, l as Expr, ah as Expression, aW as ExtendsElementView, F as Fqn, H as HexColorLiteral, I as IconUrl, a3 as InOutExpr, a5 as IncomingExpr, am as KindEqual, aK as LikeC4Theme, b5 as LikeC4View, t as Link, N as NodeId, k as NonEmptyArray, ao as NotOperator, as as OrOperator, a7 as OutgoingExpr, aw as OverviewGraph, ai as ParsedLikeC4Model, n as Point, i as Relation, a1 as RelationExpr, a9 as RelationExpression, R as RelationID, af as RelationPredicateExpression, ab as RelationWhereExpr, ay as RelationshipArrowType, j as RelationshipKind, aC as RelationshipKindSpecification, ax as RelationshipLineType, aI as RelationshipThemeColorValues, aJ as RelationshipThemeColors, aV as ScopedElementView, bb as StepEdgeId, ba as StepEdgeIdLiteral, a as Tag, ak as TagEqual, s as TagSpec, aD as ThemeColor, T as ThemeColorValues, br as ViewChange, V as ViewID, bq as ViewManualLayout, aS as ViewRule, aQ as ViewRuleAutoLayout, aL as ViewRulePredicate, aN as ViewRuleStyle, bf as ViewWithHash, bg as ViewWithNotation, au as WhereOperator, W as WildcardExpr, X as XYPoint, bd as extractStep, bm as getBBoxCenter, be as getParallelStepsPrefix, ar as isAndOperator, bj as isComputedDynamicView, bk as isComputedElementView, J as isCustomElement, ae as isCustomRelationExpr, b6 as isDynamicView, b0 as isDynamicViewIncludeRule, b3 as isDynamicViewParallelSteps, Y as isElement, O as isElementKindExpr, a0 as isElementPredicateExpr, x as isElementRef, S as isElementTagExpr, b7 as isElementView, _ as isElementWhere, z as isExpandedElementExpr, b8 as isExtendsElementView, a4 as isInOut, a6 as isIncoming, an as isKindEqual, ap as isNotOperator, at as isOrOperator, a8 as isOutgoing, a2 as isRelation, aa as isRelationExpression, ag as isRelationPredicateExpr, ac as isRelationWhere, b9 as isScopedElementView, bc as isStepEdgeId, al as isTagEqual, aF as isThemeColor, aR as isViewRuleAutoLayout, aM as isViewRulePredicate, aO as isViewRuleStyle, K as isWildcard, av as whereOperatorAsPredicate } from '../shared/core.CpR2fq5B.mjs';
+export { at as AndOperator, A as AsFqn, aS as AutoLayoutDirection, bo as BBox, aX as BasicElementView, aW as BasicView, q as BorderStyle, B as BorderStyles, e as Color, aH as ColorLiteral, bl as ComputedDynamicView, f as ComputedEdge, bk as ComputedElementView, g as ComputedLikeC4Model, b as ComputedNode, C as ComputedView, p as CustomColor, b7 as CustomColorDefinitions, M as CustomElementExpr, ag as CustomRelationExpr, aD as DefaultArrowType, t as DefaultElementShape, aC as DefaultLineStyle, aE as DefaultRelationshipColor, s as DefaultThemeColor, l as DiagramEdge, k as DiagramNode, D as DiagramView, b5 as DynamicView, b2 as DynamicViewIncludeRule, b0 as DynamicViewParallelSteps, b4 as DynamicViewRule, a$ as DynamicViewStep, b1 as DynamicViewStepOrParallel, E as EdgeId, h as Element, _ as ElementExpression, c as ElementKind, S as ElementKindExpr, y as ElementKindSpecification, x as ElementKindSpecificationStyle, bs as ElementNotation, a2 as ElementPredicateExpression, z as ElementRefExpr, d as ElementShape, r as ElementShapes, u as ElementStyle, Y as ElementTagExpr, aJ as ElementThemeColorValues, aK as ElementThemeColors, a_ as ElementView, a0 as ElementWhereExpr, am as EqualOperator, J as ExpandedElementExpr, ak as Expression, aZ as ExtendsElementView, F as Fqn, H as HexColorLiteral, I as IconUrl, a6 as InOutExpr, a8 as IncomingExpr, ap as KindEqual, L as LayoutedLikeC4Model, aN as LikeC4Theme, b8 as LikeC4View, w as Link, N as NodeId, m as NonEmptyArray, o as NonEmptyReadonlyArray, ar as NotOperator, av as OrOperator, aa as OutgoingExpr, az as OverviewGraph, al as ParsedLikeC4Model, P as Point, i as Relation, a4 as RelationExpr, ac as RelationExpression, R as RelationID, ai as RelationPredicateExpression, ae as RelationWhereExpr, aB as RelationshipArrowType, j as RelationshipKind, aF as RelationshipKindSpecification, aA as RelationshipLineType, aL as RelationshipThemeColorValues, aM as RelationshipThemeColors, aY as ScopedElementView, be as StepEdgeId, bd as StepEdgeIdLiteral, a as Tag, an as TagEqual, v as TagSpec, aG as ThemeColor, T as ThemeColorValues, br as ViewChange, V as ViewID, bq as ViewManualLayout, aV as ViewRule, aT as ViewRuleAutoLayout, aO as ViewRulePredicate, aQ as ViewRuleStyle, bi as ViewWithHash, bj as ViewWithNotation, ax as WhereOperator, W as WildcardExpr, X as XYPoint, bg as extractStep, bp as getBBoxCenter, bh as getParallelStepsPrefix, au as isAndOperator, bm as isComputedDynamicView, bn as isComputedElementView, O as isCustomElement, ah as isCustomRelationExpr, b9 as isDynamicView, b3 as isDynamicViewIncludeRule, b6 as isDynamicViewParallelSteps, $ as isElement, U as isElementKindExpr, a3 as isElementPredicateExpr, G as isElementRef, Z as isElementTagExpr, ba as isElementView, a1 as isElementWhere, K as isExpandedElementExpr, bb as isExtendsElementView, a7 as isInOut, a9 as isIncoming, aq as isKindEqual, as as isNotOperator, aw as isOrOperator, ab as isOutgoing, a5 as isRelation, ad as isRelationExpression, aj as isRelationPredicateExpr, af as isRelationWhere, bc as isScopedElementView, bf as isStepEdgeId, ao as isTagEqual, aI as isThemeColor, aU as isViewRuleAutoLayout, aP as isViewRulePredicate, aR as isViewRuleStyle, Q as isWildcard, ay as whereOperatorAsPredicate } from '../shared/core.aVt8heZL.mjs';
+import 'type-fest';

package/dist/types/index.d.ts

@@ -1 +1,2 @@
-export { aq as AndOperator, A as AsFqn, aP as AutoLayoutDirection, bl as BBox, aU as BasicElementView, aT as BasicView, o as BorderStyle, B as BorderStyles, e as Color, aE as ColorLiteral, bi as ComputedDynamicView, f as ComputedEdge, bh as ComputedElementView, g as ComputedLikeC4Model, b as ComputedNode, C as ComputedView, m as CustomColor, b4 as CustomColorDefinitions, G as CustomElementExpr, ad as CustomRelationExpr, aA as DefaultArrowType, q as DefaultElementShape, az as DefaultLineStyle, aB as DefaultRelationshipColor, D as DefaultThemeColor, bo as DiagramEdge, bn as DiagramNode, bp as DiagramView, b2 as DynamicView, a$ as DynamicViewIncludeRule, aZ as DynamicViewParallelSteps, b1 as DynamicViewRule, aY as DynamicViewStep, a_ as DynamicViewStepOrParallel, E as EdgeId, h as Element, U as ElementExpression, c as ElementKind, M as ElementKindExpr, v as ElementKindSpecification, u as ElementKindSpecificationStyle, bs as ElementNotation, $ as ElementPredicateExpression, w as ElementRefExpr, d as ElementShape, p as ElementShapes, r as ElementStyle, Q as ElementTagExpr, aG as ElementThemeColorValues, aH as ElementThemeColors, aX as ElementView, Z as ElementWhereExpr, aj as EqualOperator, y as ExpandedElementExpr, l as Expr, ah as Expression, aW as ExtendsElementView, F as Fqn, H as HexColorLiteral, I as IconUrl, a3 as InOutExpr, a5 as IncomingExpr, am as KindEqual, aK as LikeC4Theme, b5 as LikeC4View, t as Link, N as NodeId, k as NonEmptyArray, ao as NotOperator, as as OrOperator, a7 as OutgoingExpr, aw as OverviewGraph, ai as ParsedLikeC4Model, n as Point, i as Relation, a1 as RelationExpr, a9 as RelationExpression, R as RelationID, af as RelationPredicateExpression, ab as RelationWhereExpr, ay as RelationshipArrowType, j as RelationshipKind, aC as RelationshipKindSpecification, ax as RelationshipLineType, aI as RelationshipThemeColorValues, aJ as RelationshipThemeColors, aV as ScopedElementView, bb as StepEdgeId, ba as StepEdgeIdLiteral, a as Tag, ak as TagEqual, s as TagSpec, aD as ThemeColor, T as ThemeColorValues, br as ViewChange, V as ViewID, bq as ViewManualLayout, aS as ViewRule, aQ as ViewRuleAutoLayout, aL as ViewRulePredicate, aN as ViewRuleStyle, bf as ViewWithHash, bg as ViewWithNotation, au as WhereOperator, W as WildcardExpr, X as XYPoint, bd as extractStep, bm as getBBoxCenter, be as getParallelStepsPrefix, ar as isAndOperator, bj as isComputedDynamicView, bk as isComputedElementView, J as isCustomElement, ae as isCustomRelationExpr, b6 as isDynamicView, b0 as isDynamicViewIncludeRule, b3 as isDynamicViewParallelSteps, Y as isElement, O as isElementKindExpr, a0 as isElementPredicateExpr, x as isElementRef, S as isElementTagExpr, b7 as isElementView, _ as isElementWhere, z as isExpandedElementExpr, b8 as isExtendsElementView, a4 as isInOut, a6 as isIncoming, an as isKindEqual, ap as isNotOperator, at as isOrOperator, a8 as isOutgoing, a2 as isRelation, aa as isRelationExpression, ag as isRelationPredicateExpr, ac as isRelationWhere, b9 as isScopedElementView, bc as isStepEdgeId, al as isTagEqual, aF as isThemeColor, aR as isViewRuleAutoLayout, aM as isViewRulePredicate, aO as isViewRuleStyle, K as isWildcard, av as whereOperatorAsPredicate } from '../shared/core.CpR2fq5B.js';
+export { at as AndOperator, A as AsFqn, aS as AutoLayoutDirection, bo as BBox, aX as BasicElementView, aW as BasicView, q as BorderStyle, B as BorderStyles, e as Color, aH as ColorLiteral, bl as ComputedDynamicView, f as ComputedEdge, bk as ComputedElementView, g as ComputedLikeC4Model, b as ComputedNode, C as ComputedView, p as CustomColor, b7 as CustomColorDefinitions, M as CustomElementExpr, ag as CustomRelationExpr, aD as DefaultArrowType, t as DefaultElementShape, aC as DefaultLineStyle, aE as DefaultRelationshipColor, s as DefaultThemeColor, l as DiagramEdge, k as DiagramNode, D as DiagramView, b5 as DynamicView, b2 as DynamicViewIncludeRule, b0 as DynamicViewParallelSteps, b4 as DynamicViewRule, a$ as DynamicViewStep, b1 as DynamicViewStepOrParallel, E as EdgeId, h as Element, _ as ElementExpression, c as ElementKind, S as ElementKindExpr, y as ElementKindSpecification, x as ElementKindSpecificationStyle, bs as ElementNotation, a2 as ElementPredicateExpression, z as ElementRefExpr, d as ElementShape, r as ElementShapes, u as ElementStyle, Y as ElementTagExpr, aJ as ElementThemeColorValues, aK as ElementThemeColors, a_ as ElementView, a0 as ElementWhereExpr, am as EqualOperator, J as ExpandedElementExpr, ak as Expression, aZ as ExtendsElementView, F as Fqn, H as HexColorLiteral, I as IconUrl, a6 as InOutExpr, a8 as IncomingExpr, ap as KindEqual, L as LayoutedLikeC4Model, aN as LikeC4Theme, b8 as LikeC4View, w as Link, N as NodeId, m as NonEmptyArray, o as NonEmptyReadonlyArray, ar as NotOperator, av as OrOperator, aa as OutgoingExpr, az as OverviewGraph, al as ParsedLikeC4Model, P as Point, i as Relation, a4 as RelationExpr, ac as RelationExpression, R as RelationID, ai as RelationPredicateExpression, ae as RelationWhereExpr, aB as RelationshipArrowType, j as RelationshipKind, aF as RelationshipKindSpecification, aA as RelationshipLineType, aL as RelationshipThemeColorValues, aM as RelationshipThemeColors, aY as ScopedElementView, be as StepEdgeId, bd as StepEdgeIdLiteral, a as Tag, an as TagEqual, v as TagSpec, aG as ThemeColor, T as ThemeColorValues, br as ViewChange, V as ViewID, bq as ViewManualLayout, aV as ViewRule, aT as ViewRuleAutoLayout, aO as ViewRulePredicate, aQ as ViewRuleStyle, bi as ViewWithHash, bj as ViewWithNotation, ax as WhereOperator, W as WildcardExpr, X as XYPoint, bg as extractStep, bp as getBBoxCenter, bh as getParallelStepsPrefix, au as isAndOperator, bm as isComputedDynamicView, bn as isComputedElementView, O as isCustomElement, ah as isCustomRelationExpr, b9 as isDynamicView, b3 as isDynamicViewIncludeRule, b6 as isDynamicViewParallelSteps, $ as isElement, U as isElementKindExpr, a3 as isElementPredicateExpr, G as isElementRef, Z as isElementTagExpr, ba as isElementView, a1 as isElementWhere, K as isExpandedElementExpr, bb as isExtendsElementView, a7 as isInOut, a9 as isIncoming, aq as isKindEqual, as as isNotOperator, aw as isOrOperator, ab as isOutgoing, a5 as isRelation, ad as isRelationExpression, aj as isRelationPredicateExpr, af as isRelationWhere, bc as isScopedElementView, bf as isStepEdgeId, ao as isTagEqual, aI as isThemeColor, aU as isViewRuleAutoLayout, aP as isViewRulePredicate, aR as isViewRuleStyle, Q as isWildcard, ay as whereOperatorAsPredicate } from '../shared/core.aVt8heZL.js';
+import 'type-fest';

package/dist/types/index.mjs

@@ -1 +1 @@
-export { A as AsFqn, B as BorderStyles, J as DefaultArrowType, D as DefaultElementShape, I as DefaultLineStyle, K as DefaultRelationshipColor, a as DefaultThemeColor, E as ElementShapes, c as Expr, V as StepEdgeId, X as extractStep, $ as getBBoxCenter, Y as getParallelStepsPrefix, F as isAndOperator, Z as isComputedDynamicView, _ as isComputedElementView, g as isCustomElement, w as isCustomRelationExpr, R as isDynamicView, P as isDynamicViewIncludeRule, Q as isDynamicViewParallelSteps, l as isElement, j as isElementKindExpr, o as isElementPredicateExpr, d as isElementRef, k as isElementTagExpr, S as isElementView, m as isElementWhere, f as isExpandedElementExpr, T as isExtendsElementView, q as isInOut, r as isIncoming, z as isKindEqual, C as isNotOperator, G as isOrOperator, s as isOutgoing, p as isRelation, t as isRelationExpression, x as isRelationPredicateExpr, v as isRelationWhere, U as isScopedElementView, W as isStepEdgeId, y as isTagEqual, L as isThemeColor, O as isViewRuleAutoLayout, M as isViewRulePredicate, N as isViewRuleStyle, h as isWildcard, H as whereOperatorAsPredicate } from '../shared/core.DeifT5lC.mjs';
+export { A as AsFqn, B as BorderStyles, K as DefaultArrowType, a as DefaultElementShape, J as DefaultLineStyle, D as DefaultRelationshipColor, b as DefaultThemeColor, E as ElementShapes, V as StepEdgeId, X as extractStep, $ as getBBoxCenter, Y as getParallelStepsPrefix, G as isAndOperator, Z as isComputedDynamicView, _ as isComputedElementView, h as isCustomElement, x as isCustomRelationExpr, R as isDynamicView, P as isDynamicViewIncludeRule, Q as isDynamicViewParallelSteps, m as isElement, k as isElementKindExpr, p as isElementPredicateExpr, f as isElementRef, l as isElementTagExpr, S as isElementView, o as isElementWhere, g as isExpandedElementExpr, T as isExtendsElementView, r as isInOut, s as isIncoming, C as isKindEqual, F as isNotOperator, H as isOrOperator, t as isOutgoing, q as isRelation, v as isRelationExpression, y as isRelationPredicateExpr, w as isRelationWhere, U as isScopedElementView, W as isStepEdgeId, z as isTagEqual, L as isThemeColor, O as isViewRuleAutoLayout, M as isViewRulePredicate, N as isViewRuleStyle, j as isWildcard, I as whereOperatorAsPredicate } from '../shared/core.CUlHblBQ.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/core",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "license": "MIT",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -16,11 +16,13 @@
     "lint": "run -T eslint src/ --fix",
     "test": "vitest run --no-isolate",
     "test:watch": "vitest",
-    "clean": "run -T rimraf dist"
+    "clean": "rm -r -f dist"
   },
   "files": [
     "dist",
     "src",
+    "!**/*.spec.ts",
+    "!**/__tests__/*",
     "!**/*.map"
   ],
   "type": "module",
@@ -73,19 +75,21 @@
       }
     }
   },
+  "dependencies": {
+    "type-fest": "4.26.1"
+  },
   "devDependencies": {
-    "@likec4/tsconfig": "1.10.0",
+    "@likec4/tsconfig": "1.11.0",
     "@mantine/colors-generator": "^7.12.2",
-    "@types/natural-compare-lite": "^1",
-    "chroma-js": "^3.0.0",
+    "@types/natural-compare-lite": "^1.4.2",
+    "chroma-js": "^3.1.1",
     "execa": "^9.3.1",
     "natural-compare-lite": "^1.4.0",
-    "remeda": "^2.11.0",
+    "remeda": "^2.14.0",
     "turbo": "^2.1.1",
-    "type-fest": "^4.26.0",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
     "unbuild": "^3.0.0-rc.7",
-    "vitest": "~2.0.5"
+    "vitest": "^2.1.1"
   },
-  "packageManager": "yarn@4.3.1"
+  "packageManager": "yarn@4.4.1"
 }

package/src/index.ts

@@ -7,3 +7,5 @@ export * from './utils/fqn'
 export * from './utils/guards'
 export * from './utils/promises'
 export { compareRelations } from './utils/relations'
+
+export * as Expr from './types/expression'

package/src/model/LikeC4DiagramModel.ts

@@ -0,0 +1,338 @@
+import { isNullish } from 'remeda'
+import { nonNullable } from '../errors'
+import {
+  type ElementKind as C4ElementKind,
+  type ElementShape as C4ElementShape,
+  type Tag as C4Tag
+} from '../types/element'
+import { DefaultRelationshipColor } from '../types/relation'
+import type { Color as C4Color } from '../types/theme'
+import type { ComputedElementView, DiagramEdge, DiagramNode, DiagramView } from '../types/view'
+import type { LikeC4Model } from './LikeC4Model'
+import { type EdgeId, type ElementOrFqn, type Fqn, getId, type IncomingFilter, type OutgoingFilter } from './types'
+
+/**
+ * All methods are view-scoped, i.e. only return elements and connections in the view.
+ */
+export class LikeC4DiagramModel {
+  private _rootElements = new Set<LikeC4DiagramModel.Element>()
+
+  private _elements = new Map<Fqn, LikeC4DiagramModel.Element>()
+
+  private _connections: Map<EdgeId, LikeC4DiagramModel.Connection>
+
+  constructor(
+    public readonly view: DiagramView,
+    public readonly model: LikeC4Model.Layouted
+  ) {
+    for (const node of view.nodes) {
+      const el = new LikeC4DiagramModel.Element(node, this)
+      this._elements.set(node.id, el)
+      if (isNullish(node.parent)) {
+        this._rootElements.add(el)
+      }
+    }
+    this._connections = new Map(view.edges.map(e => [e.id, new LikeC4DiagramModel.Connection(e, this)]))
+  }
+
+  get isDynamic() {
+    return this.view.__ === 'dynamic'
+  }
+
+  get id() {
+    return this.view.id
+  }
+
+  get title() {
+    return this.view.title
+  }
+
+  get viewOf() {
+    if (isNullish(this.view.__) || this.view.__ === 'element') {
+      const computedView = this.view as ComputedElementView
+      return computedView.viewOf ? this.model.element(computedView.viewOf) : null
+    }
+    return null
+  }
+
+  get tags(): C4Tag[] {
+    return this.view.tags ?? []
+  }
+
+  public roots(): ReadonlyArray<LikeC4DiagramModel.Element> {
+    return [...this._rootElements]
+  }
+
+  public elements(): ReadonlyArray<LikeC4DiagramModel.Element> {
+    return [...this._elements.values()]
+  }
+
+  public element(id: Fqn): LikeC4DiagramModel.Element {
+    return nonNullable(this._elements.get(id), `LikeC4DiagramModel.Element ${id} in view ${this.view.id} not found`)
+  }
+
+  public hasElement(id: Fqn): boolean {
+    return this._elements.has(id)
+  }
+
+  public connections(): ReadonlyArray<LikeC4DiagramModel.Connection> {
+    return [...this._connections.values()]
+  }
+
+  public connection(id: EdgeId): LikeC4DiagramModel.Connection {
+    return nonNullable(this._connections.get(id), `Connection ${id} in view ${this.view.id}  not found`)
+  }
+
+  public findConnections(
+    source: ElementOrFqn,
+    target: ElementOrFqn,
+    direction: 'both' | 'direct' = 'direct'
+  ): ReadonlyArray<LikeC4DiagramModel.Connection> {
+    const sourceId = getId(source)
+    const targetId = getId(target)
+    return this.connections().filter(c =>
+      (c.source.id === sourceId && c.target.id === targetId)
+      || (direction === 'both' && c.source.id === targetId && c.target.id === sourceId)
+    )
+  }
+
+  public parent(element: ElementOrFqn): LikeC4DiagramModel.Element | null {
+    const el = this.element(getId(element))
+    return el.node.parent ? this.element(el.node.parent) : null
+  }
+
+  public children(element: ElementOrFqn): ReadonlyArray<LikeC4DiagramModel.Element> {
+    const el = this.element(getId(element))
+    return el.node.children.map(c => this.element(c))
+  }
+
+  // Get all sibling (i.e. same parent)
+  public siblings(element: ElementOrFqn): ReadonlyArray<LikeC4DiagramModel.Element> {
+    const id = getId(element)
+    const parent = this.parent(id)
+    const siblings = parent ? this.children(parent) : this.roots()
+    return siblings.filter(e => e.id !== id)
+  }
+
+  /**
+   * Get all ancestor elements (i.e. parent, parent’s parent, etc.)
+   * (from closest to root)
+   */
+  public ancestors(element: ElementOrFqn): ReadonlyArray<LikeC4DiagramModel.Element> {
+    let id = getId(element)
+    const result = [] as LikeC4DiagramModel.Element[]
+    let parent
+    while (parent = this.parent(id)) {
+      result.push(parent)
+      id = parent.id
+    }
+    return result
+  }
+
+  public descendants(element: ElementOrFqn): ReadonlyArray<LikeC4DiagramModel.Element> {
+    const children = this.children(element)
+    return children.flatMap(c => [c, ...this.descendants(c.id)])
+  }
+
+  public incoming(
+    element: ElementOrFqn,
+    filter: IncomingFilter = 'all'
+  ): ReadonlyArray<LikeC4DiagramModel.Connection> {
+    const el = this.element(getId(element))
+    const edges = el.node.inEdges.map(e => this.connection(e))
+
+    if (filter === 'all' || edges.length === 0) {
+      return edges
+    }
+
+    return edges.filter(rel => {
+      if (filter === 'direct') {
+        return rel.target.id === el.id
+      }
+      return rel.target.id !== el.id
+    })
+  }
+
+  public incomers(
+    element: ElementOrFqn,
+    filter: IncomingFilter = 'all'
+  ): ReadonlyArray<LikeC4DiagramModel.Element> {
+    return this.incoming(element, filter).map(r => r.source)
+  }
+
+  /**
+   * Outgoing relationships from the element and its descendants
+   */
+  public outgoing(
+    element: ElementOrFqn,
+    filter: OutgoingFilter = 'all'
+  ): ReadonlyArray<LikeC4DiagramModel.Connection> {
+    const el = this.element(getId(element))
+    const edges = el.node.outEdges.map(e => this.connection(e))
+
+    if (filter === 'all' || edges.length === 0) {
+      return edges
+    }
+
+    return edges.filter(rel => {
+      if (filter === 'direct') {
+        return rel.source.id === el.id
+      }
+      return rel.source.id !== el.id
+    })
+  }
+
+  public outgoers(
+    element: ElementOrFqn,
+    filter: OutgoingFilter = 'all'
+  ): ReadonlyArray<LikeC4DiagramModel.Element> {
+    return this.outgoing(element, filter).map(r => r.target)
+  }
+}
+
+export namespace LikeC4DiagramModel {
+  /**
+   * Represents an element in the view. (Diagram node)
+   * All methods are view-scoped, i.e. `children` returns only children of the element in the view.
+   */
+  export class Element {
+    constructor(
+      public readonly node: DiagramNode,
+      private view: LikeC4DiagramModel
+    ) {
+    }
+
+    get id() {
+      return this.node.id
+    }
+
+    get title() {
+      return this.node.title
+    }
+
+    get kind(): C4ElementKind {
+      return this.node.kind
+    }
+
+    get isRoot(): boolean {
+      return isNullish(this.node.parent)
+    }
+
+    get hasNested(): boolean {
+      return this.node.children.length > 0
+    }
+
+    get shape(): C4ElementShape {
+      return this.node.shape
+    }
+
+    get color(): C4Color {
+      return this.node.color
+    }
+
+    get tags(): C4Tag[] {
+      return this.node.tags ?? []
+    }
+
+    get level(): number {
+      return this.node.level
+    }
+
+    get depth(): number {
+      return this.node.depth ?? 0
+    }
+
+    public model(): LikeC4Model.ElementModel<LikeC4DiagramModel> {
+      return this.view.model.element(this.id)
+    }
+
+    public parent(): LikeC4DiagramModel.Element | null {
+      return this.node.parent ? this.view.element(this.node.parent) : null
+    }
+
+    public metadata(key: string): string | undefined
+    public metadata(key: string, defaultValue: string): string
+    public metadata(key: string, defaultValue?: string): string | undefined {
+      return this.model().metadata(key) ?? defaultValue
+    }
+
+    public hasMetadata(key: string): boolean {
+      return this.model().hasMetadata(key)
+    }
+
+    public ancestors(): ReadonlyArray<LikeC4DiagramModel.Element> {
+      return this.view.ancestors(this)
+    }
+
+    public siblings(): ReadonlyArray<LikeC4DiagramModel.Element> {
+      return this.view.siblings(this)
+    }
+
+    public descendants(): ReadonlyArray<LikeC4DiagramModel.Element> {
+      return this.view.descendants(this)
+    }
+
+    public children(): ReadonlyArray<LikeC4DiagramModel.Element> {
+      return this.view.children(this)
+    }
+
+    public incoming(filter: IncomingFilter = 'all'): ReadonlyArray<LikeC4DiagramModel.Connection> {
+      return this.view.incoming(this, filter)
+    }
+
+    public incomers(filter: IncomingFilter = 'all'): ReadonlyArray<LikeC4DiagramModel.Element> {
+      return this.view.incomers(this, filter)
+    }
+
+    public outgoing(filter: OutgoingFilter = 'all'): ReadonlyArray<LikeC4DiagramModel.Connection> {
+      return this.view.outgoing(this, filter)
+    }
+
+    public outgoers(filter: OutgoingFilter = 'all'): ReadonlyArray<LikeC4DiagramModel.Element> {
+      return this.view.outgoers(this, filter)
+    }
+
+    public connectionsTo(target: Fqn | LikeC4DiagramModel.Element): ReadonlyArray<LikeC4DiagramModel.Connection> {
+      return this.view.findConnections(this, target)
+    }
+  }
+
+  /**
+   * Represents a connection between two elements.
+   * May be source from multiple model relationships.
+   */
+  export class Connection {
+    constructor(
+      public readonly edge: DiagramEdge,
+      private view: LikeC4DiagramModel
+    ) {
+    }
+
+    get id() {
+      return this.edge.id
+    }
+
+    get source(): LikeC4DiagramModel.Element {
+      return this.view.element(this.edge.source)
+    }
+
+    get target(): LikeC4DiagramModel.Element {
+      return this.view.element(this.edge.target)
+    }
+
+    get tags(): C4Tag[] {
+      return this.edge.tags ?? []
+    }
+
+    get color(): C4Color {
+      return this.edge.color ?? DefaultRelationshipColor
+    }
+
+    /**
+     * Model relationships
+     */
+    relationships(): ReadonlyArray<LikeC4Model.Relationship<LikeC4DiagramModel>> {
+      return this.edge.relations.map(r => nonNullable(this.view.model.relationship(r)))
+    }
+  }
+}