@likec4/core 1.26.1 → 1.27.0

package/src/compute-view/deployment-view/predicates/relation-direct.ts

@@ -1,14 +1,13 @@
 import { filter, flatMap, isNonNullish, map, pick, pipe } from 'remeda'
 import { invariant } from '../../../errors'
-import type {
-  ConnectionModel,
-  DeploymentElementModel,
-  DeploymentRelationModel,
-  LikeC4DeploymentModel,
-} from '../../../model'
 import type { DeploymentConnectionModel } from '../../../model/connection/deployment'
 import { findConnection, findConnectionsBetween, findConnectionsWithin } from '../../../model/connection/deployment'
-import { findConnectionsBetween as findModelConnectionsBetween } from '../../../model/connection/model'
+import {
+  type ConnectionModel,
+  findConnectionsBetween as findModelConnectionsBetween,
+} from '../../../model/connection/model'
+import type { DeploymentElementModel, DeploymentRelationModel } from '../../../model/DeploymentElementModel'
+import type { LikeC4DeploymentModel } from '../../../model/DeploymentModel'
 import type { RelationshipModel } from '../../../model/RelationModel'
 import type { AnyAux } from '../../../model/types'
 import { type Filterable, type OperatorPredicate, type RelationExpr, FqnExpr } from '../../../types'

package/src/compute-view/deployment-view/predicates/relation-incoming.ts

@@ -1,8 +1,9 @@
 import { anyPass, filter, pipe } from 'remeda'
 import { invariant } from '../../../errors'
-import type { AnyAux, RelationshipModel } from '../../../model'
 import { findConnectionsBetween } from '../../../model/connection/deployment'
 import type { LikeC4DeploymentModel } from '../../../model/DeploymentModel'
+import type { RelationshipModel } from '../../../model/RelationModel'
+import type { AnyAux } from '../../../model/types'
 import { type RelationExpr, FqnExpr } from '../../../types'
 import { isAncestor } from '../../../utils'
 import type { Connection, Elem, PredicateExecutor } from '../_types'

package/src/compute-view/deployment-view/predicates/relation-outgoing.ts

@@ -1,7 +1,7 @@
 import { anyPass, filter, pipe } from 'remeda'
 import { invariant } from '../../../errors'
-import type { LikeC4DeploymentModel } from '../../../model'
 import { findConnection, findConnectionsBetween } from '../../../model/connection/deployment'
+import type { LikeC4DeploymentModel } from '../../../model/DeploymentModel'
 import type { RelationshipModel } from '../../../model/RelationModel'
 import { type RelationExpr, FqnExpr } from '../../../types'
 import { isAncestor } from '../../../utils'

package/src/compute-view/dynamic-view/compute.ts

@@ -8,22 +8,22 @@ import {
   type Color,
   type ComputedDynamicView,
   type ComputedEdge,
-  DefaultArrowType,
-  DefaultLineStyle,
-  DefaultRelationshipColor,
   type DynamicView,
   type DynamicViewStep,
-  isDynamicViewParallelSteps,
-  isViewRuleAutoLayout,
-  isViewRulePredicate,
   type NonEmptyArray,
   type RelationId,
   type RelationshipArrowType,
   type RelationshipLineType,
   type StepEdgeId,
-  stepEdgeId,
   type Tag,
-  type ViewId
+  type ViewId,
+  DefaultArrowType,
+  DefaultLineStyle,
+  DefaultRelationshipColor,
+  isDynamicViewParallelSteps,
+  isViewRuleAutoLayout,
+  isViewRulePredicate,
+  stepEdgeId,
 } from '../../types'
 import { ancestorsFqn, commonAncestor, parentFqn } from '../../utils/fqn'
 import { applyCustomElementProperties } from '../utils/applyCustomElementProperties'
@@ -62,7 +62,7 @@ class DynamicViewCompute {
 
   constructor(
     protected model: LikeC4Model,
-    protected view: DynamicView
+    protected view: DynamicView,
   ) {}
 
   private addStep(
@@ -75,7 +75,7 @@ class DynamicViewCompute {
       ...step
     }: DynamicViewStep,
     index: number,
-    parent?: number
+    parent?: number,
   ) {
     const id = parent ? stepEdgeId(parent, index) : stepEdgeId(index)
     const source = this.model.element(stepSource)
@@ -89,11 +89,8 @@ class DynamicViewCompute {
       relations,
       tags,
       navigateTo: derivedNavigateTo,
-      head,
-      tail,
       color,
       line,
-      notation
     } = this.findRelations(source, target)
 
     const navigateTo = isTruthy(stepNavigateTo) && stepNavigateTo !== this.view.id ? stepNavigateTo : derivedNavigateTo
@@ -108,11 +105,8 @@ class DynamicViewCompute {
       isBackward: isBackward ?? false,
       ...(navigateTo ? { navigateTo } : {}),
       ...(tags ? { tags } : {}),
-      ...(head ? { head } : {}),
-      ...(tail ? { tail } : {}),
       ...(color ? { color } : {}),
       ...(line ? { line } : {}),
-      ...(notation ? { notation } : {})
     })
   }
 
@@ -171,7 +165,7 @@ class DynamicViewCompute {
         color: DefaultRelationshipColor,
         line: DefaultLineStyle,
         head: DefaultArrowType,
-        ...step
+        ...step,
       }
       if (isBackward) {
         edge.dir = 'back'
@@ -204,8 +198,8 @@ class DynamicViewCompute {
       applyViewRuleStyles(
         rules,
         // Keep order of elements
-        elements.map(e => nonNullable(nodesMap.get(e.id)))
-      )
+        elements.map(e => nonNullable(nodesMap.get(e.id))),
+      ),
     )
 
     const autoLayoutRule = findLast(rules, isViewRuleAutoLayout)
@@ -217,7 +211,7 @@ class DynamicViewCompute {
       autoLayout: {
         direction: autoLayoutRule?.direction ?? 'LR',
         ...(autoLayoutRule?.nodeSep && { nodeSep: autoLayoutRule.nodeSep }),
-        ...(autoLayoutRule?.rankSep && { rankSep: autoLayoutRule.rankSep })
+        ...(autoLayoutRule?.rankSep && { rankSep: autoLayoutRule.rankSep }),
       },
       nodes: map(nodes, n => {
         // omit notation
@@ -230,9 +224,9 @@ class DynamicViewCompute {
       edges,
       ...(elementNotations.length > 0 && {
         notation: {
-          elements: elementNotations
-        }
-      })
+          elements: elementNotations,
+        },
+      }),
     })
   }
 
@@ -241,11 +235,8 @@ class DynamicViewCompute {
     tags: NonEmptyArray<Tag> | null
     relations: NonEmptyArray<RelationId> | null
     navigateTo: ViewId | null
-    tail: RelationshipArrowType | null
-    head: RelationshipArrowType | null
     color: Color | null
     line: RelationshipLineType | null
-    notation: string | null
   } {
     const relationships = findConnection(source, target, 'directed').flatMap(r => [...r.relations])
     if (relationships.length === 0) {
@@ -254,18 +245,15 @@ class DynamicViewCompute {
         tags: null,
         relations: null,
         navigateTo: null,
-        tail: null,
-        head: null,
         color: null,
         line: null,
-        notation: null
       }
     }
     const alltags = pipe(
       relationships,
       flatMap(r => r.tags),
       filter(isTruthy),
-      unique()
+      unique(),
     )
     const tags = hasAtLeast(alltags, 1) ? alltags : null
     const relations = hasAtLeast(relationships, 1) ? map(relationships, r => r.id) : null
@@ -280,27 +268,21 @@ class DynamicViewCompute {
       filter(isTruthy),
       filter(v => v !== this.view.id),
       unique(),
-      only()
+      only(),
     )
 
     const commonProperties = pipe(
       relationships,
       reduce((acc, { title, $relationship: r }) => {
         isTruthy(title) && acc.title.add(title)
-        isTruthy(r.tail) && acc.tail.add(r.tail)
-        isTruthy(r.head) && acc.head.add(r.head)
         isTruthy(r.color) && acc.color.add(r.color)
         isTruthy(r.line) && acc.line.add(r.line)
-
         return acc
       }, {
-        tail: new Set<RelationshipArrowType>(),
-        head: new Set<RelationshipArrowType>(),
         color: new Set<Color>(),
         line: new Set<RelationshipLineType>(),
-        notation: new Set<string>(),
-        title: new Set<string>()
-      })
+        title: new Set<string>(),
+      }),
     )
 
     return {
@@ -308,17 +290,14 @@ class DynamicViewCompute {
       relations,
       navigateTo: navigateTo ?? null,
       title: only([...commonProperties.title]) ?? null,
-      tail: only([...commonProperties.tail]) ?? null,
-      head: only([...commonProperties.head]) ?? null,
       color: only([...commonProperties.color]) ?? null,
       line: only([...commonProperties.line]) ?? null,
-      notation: only([...commonProperties.notation]) ?? null
     }
   }
 }
 export function computeDynamicView<M extends AnyAux>(
   model: LikeC4Model<M>,
-  view: DynamicView
+  view: DynamicView,
 ): ComputedDynamicView {
   return new DynamicViewCompute(model, view).compute()
 }

package/src/compute-view/index.ts

@@ -1,5 +1,4 @@
 export { computeView, computeViews, unsafeComputeView } from './compute-view'
 export type { ComputeViewResult } from './compute-view'
-export { computeRelationshipsView } from './relationships-view/compute'
 export { resolveRulesExtendedViews } from './utils/resolve-extended-views'
 export { viewsWithReadableEdges, withReadableEdges } from './utils/with-readable-edges'

package/src/compute-view/relationships-view/_types.ts

@@ -1,5 +1,6 @@
 import { type ElementModel } from '../../model/ElementModel'
 import type { RelationshipModel } from '../../model/RelationModel'
+import type { AnyAux } from '../../model/types'
 
 // type Pair = {
 //   left: ReadonlySet<ElementModel>
@@ -7,10 +8,10 @@ import type { RelationshipModel } from '../../model/RelationModel'
 //   right: ReadonlySet<ElementModel>
 // }
 
-export type RelationshipsViewData = {
-  incomers: ReadonlySet<ElementModel>
-  incoming: ReadonlySet<RelationshipModel>
-  subjects: ReadonlySet<ElementModel>
-  outgoing: ReadonlySet<RelationshipModel>
-  outgoers: ReadonlySet<ElementModel>
+export type RelationshipsViewData<M extends AnyAux = AnyAux> = {
+  incomers: ReadonlySet<ElementModel<M>>
+  incoming: ReadonlySet<RelationshipModel<M>>
+  subjects: ReadonlySet<ElementModel<M>>
+  outgoing: ReadonlySet<RelationshipModel<M>>
+  outgoers: ReadonlySet<ElementModel<M>>
 }

package/src/compute-view/relationships-view/compute.ts

@@ -1,74 +1,162 @@
+import { pipe } from 'remeda'
+import { invariant } from '../../errors'
 import type { ElementModel } from '../../model/ElementModel'
 import type { LikeC4Model } from '../../model/LikeC4Model'
 import type { RelationshipModel } from '../../model/RelationModel'
-import type { Fqn } from '../../types'
-import { ifind, toSet } from '../../utils/iterable'
+import type { AnyAux } from '../../model/types'
+import type { LikeC4ViewModel } from '../../model/view/LikeC4ViewModel'
+import { isDescendantOf, sortParentsFirst } from '../../utils/fqn'
+import { ifilter, imap, toArray, toSet } from '../../utils/iterable'
+import type { RelationshipsViewData } from './_types'
+import { treeFromElements } from './utils'
 
-export function computeRelationshipsView(
-  subjectId: Fqn,
-  likec4model: LikeC4Model,
-): {
-  incomers: Set<ElementModel<LikeC4Model.Any>>
-  incoming: Set<RelationshipModel<LikeC4Model.Any>>
-  subjects: Set<ElementModel<LikeC4Model.Any>>
-  outgoing: Set<RelationshipModel<LikeC4Model.Any>>
-  outgoers: Set<ElementModel<LikeC4Model.Any>>
-} {
-  const subject = likec4model.element(subjectId)
-  let relationships = {
-    incoming: [...subject.incoming()],
-    outgoing: [...subject.outgoing()],
+const finalize = <M extends AnyAux>(
+  elements: Set<ElementModel<M>>,
+  explicits: Set<ElementModel<M>>,
+): Set<ElementModel<M>> => {
+  if (elements.size > 2 && explicits.size !== elements.size) {
+    return new Set(sortParentsFirst([
+      ...treeFromElements(elements).flatten(),
+      ...explicits,
+    ]))
   }
+  if (elements.size > 1) {
+    return new Set(sortParentsFirst([...elements]))
+  }
+  return elements
+}
 
-  const subjectSiblings = toSet(subject.ascendingSiblings())
-  const isSubjectSibling = (e: ElementModel) => subjectSiblings.has(e)
-  const subjects = new Set([subject])
+function computeRelationships<const M extends AnyAux>(
+  subject: ElementModel<M>,
+  others: Set<ElementModel<M>>,
+  relationships: {
+    incoming: ReadonlyArray<RelationshipModel<M>>
+    outgoing: ReadonlyArray<RelationshipModel<M>>
+  },
+): Omit<RelationshipsViewData<M>, 'subjectExistsInScope'> {
+  const isOther = (e: ElementModel<M>) => others.has(e)
+  let subjects = new Set([subject])
+  const explicits = {
+    incomers: new Set<ElementModel<M>>(),
+    subjects: new Set([subject]),
+    outgoers: new Set<ElementModel<M>>(),
+  }
 
   // Iterate over incoming and outgoing relationships
   // and add the source and target elements to appropriate sets.
-  // If element is deeper in the hierarchy - find the closest ancestor that is a sibling of the subject.
-  const incomers = new Set(relationships.incoming.flatMap((r) => {
+  // If element is deeper in the hierarchy - add all ancestors until that is a sibling of the subject
+  let incomers = new Set(relationships.incoming.flatMap((r) => {
+    explicits.subjects.add(r.target)
+    explicits.incomers.add(r.source)
+
     subjects.add(r.target)
-    if (subjectSiblings.has(r.source)) {
-      return [r.source]
+    if (r.target !== subject) {
+      let target = r.target.parent
+      while (target && target !== subject) {
+        subjects.add(target)
+        target = target.parent
+      }
     }
-    const parent = ifind(r.source.ancestors(), isSubjectSibling)
-    return parent ? [r.source, parent] : [r.source]
+
+    let source = r.source
+    const incomerBranch = [] as ElementModel<M>[]
+    while (true) {
+      incomerBranch.push(source)
+      if (isOther(source) || !source.parent) {
+        break
+      }
+      source = source.parent
+    }
+    return incomerBranch
   }))
-  const outgoers = new Set(relationships.outgoing.flatMap((r) => {
+
+  let outgoers = new Set(relationships.outgoing.flatMap((r) => {
+    explicits.subjects.add(r.source)
+    explicits.outgoers.add(r.target)
+
     subjects.add(r.source)
-    if (subjectSiblings.has(r.target)) {
-      return [r.target]
+    if (r.source !== subject) {
+      let source = r.source.parent
+      while (source && source !== subject) {
+        subjects.add(source)
+        source = source.parent
+      }
+    }
+
+    let target = r.target
+    const outgoerBranch = [] as ElementModel<M>[]
+    while (true) {
+      outgoerBranch.push(target)
+      if (isOther(target) || !target.parent) {
+        break
+      }
+      target = target.parent
     }
-    const parent = ifind(r.target.ancestors(), isSubjectSibling)
-    return parent ? [r.target, parent] : [r.target]
+    return outgoerBranch
   }))
 
   return {
-    incomers,
+    incomers: finalize(incomers, explicits.incomers),
     incoming: new Set(relationships.incoming),
-    subjects,
+    subjects: finalize(subjects, explicits.subjects),
     outgoing: new Set(relationships.outgoing),
-    outgoers,
+    outgoers: finalize(outgoers, explicits.outgoers),
   }
+}
+
+export function computeRelationshipsView<const M extends AnyAux>(
+  subjectId: NoInfer<M['Element']>,
+  likec4model: LikeC4Model<M>,
+  scopeViewId: NoInfer<M['View']> | null,
+  scope: 'global' | 'view' = 'global',
+): RelationshipsViewData<M> {
+  let subjectExistsInScope = true
+  const view = scopeViewId ? likec4model.findView(scopeViewId) : null
+  if (scope === 'view') {
+    invariant(
+      view,
+      'Scope view id is required when scope is "view"',
+    )
+    return computeScopedRelationshipsView(subjectId, view, likec4model)
+  }
+
+  const subject = likec4model.element(subjectId)
+  const subjectSiblings = toSet(subject.ascendingSiblings())
+  return computeRelationships(
+    subject,
+    subjectSiblings,
+    {
+      incoming: [...subject.incoming()],
+      outgoing: [...subject.outgoing()],
+    },
+  )
+}
+
+function computeScopedRelationshipsView<const M extends AnyAux>(
+  subjectId: NoInfer<M['Element']>,
+  view: LikeC4ViewModel<M>,
+  likec4model: LikeC4Model<M>,
+): RelationshipsViewData<M> {
+  const subject = likec4model.element(subjectId)
+  let relationships = {
+    incoming: toArray(ifilter(subject.incoming(), (r) => view.includesRelation(r.id))),
+    outgoing: toArray(ifilter(subject.outgoing(), (r) => view.includesRelation(r.id))),
+  }
+
+  const isDescendant = isDescendantOf(subject)
+
+  const others = new Set([
+    ...subject.ascendingSiblings(),
+    ...pipe(
+      view.elements(),
+      imap((e) => e.element),
+      ifilter((e): e is ElementModel<M> => e !== subject && isDescendant(e)),
+    ),
+  ])
 
-  // return {
-  //   id: `relationships-${subjectId}` as ViewId,
-  //   title: `Relationships of ${subject.title}`,
-  //   description: null,
-  //   autoLayout: {
-  //     direction: 'LR',
-  //   },
-  //   tags: null,
-  //   links: null,
-  //   hash: 'empty',
-  //   customColorDefinitions: {},
-  //   ...layoutRelationshipsView({
-  //     incomers,
-  //     incoming: new Set(relationships.incoming),
-  //     subjects,
-  //     outgoing: new Set(relationships.outgoing),
-  //     outgoers,
-  //   }),
-  // }
+  return computeRelationships(
+    subject,
+    others,
+    relationships,
+  )
 }

package/src/compute-view/relationships-view/index.ts

@@ -0,0 +1,3 @@
+export type { RelationshipsViewData } from './_types'
+export { computeRelationshipsView } from './compute'
+export { treeFromElements } from './utils'

package/src/compute-view/relationships-view/utils.ts

@@ -1,14 +1,14 @@
 import { nonNullable } from '../../errors'
 import type { ElementModel } from '../../model/ElementModel'
-import type { Fqn } from '../../types'
+import type { AnyAux } from '../../model/types'
 import { isAncestor, isDescendantOf, sortParentsFirst } from '../../utils/fqn'
 import { DefaultMap } from '../../utils/mnemonist'
 
-export function treeFromElements(elements: Iterable<ElementModel>) {
-  const sorted = sortParentsFirst([...elements]) as ReadonlyArray<ElementModel>
+export function treeFromElements<const M extends AnyAux>(elements: Iterable<ElementModel<M>>) {
+  const sorted = sortParentsFirst([...elements]) as ReadonlyArray<ElementModel<M>>
   const root = new Set(sorted)
-  const map = new Map(sorted.map(e => [e.id, e]))
-  const parents = new DefaultMap<ElementModel, ElementModel | null>(() => null)
+  const map = new Map(sorted.map(e => [e._literalId, e]))
+  const parents = new DefaultMap<ElementModel<M>, ElementModel<M> | null>(() => null)
   const children = sorted.reduce((acc, parent, index, all) => {
     acc.set(
       parent,
@@ -25,16 +25,49 @@ export function treeFromElements(elements: Iterable<ElementModel>) {
             parents.set(el, parent)
           }
           return acc
-        }, [] as ElementModel[]),
+        }, [] as ElementModel<M>[]),
     )
     return acc
-  }, new DefaultMap<ElementModel, ElementModel[]>(() => []))
+  }, new DefaultMap<ElementModel<M>, ElementModel<M>[]>(() => []))
 
   return {
     sorted,
-    byId: (id: string) => nonNullable(map.get(id as Fqn), `Element not found by id: ${id}`),
-    root: root as ReadonlySet<ElementModel>,
-    parent: (el: ElementModel) => parents.get(el),
-    children: (el: ElementModel): ReadonlyArray<ElementModel> => children.get(el),
+    byId: (id: M['Element']): ElementModel<M> => nonNullable(map.get(id), `Element not found by id: ${id}`),
+    root: root as ReadonlySet<ElementModel<M>>,
+    parent: (el: ElementModel<M>): ElementModel<M> | null => parents.get(el),
+    children: (el: ElementModel<M>): ReadonlyArray<ElementModel<M>> => children.get(el),
+    /**
+     * Flattens the tree structure by removing redundant hierarchy levels.
+     * @example
+     *   A
+     *   └── B
+     *       ├── C
+     *       │   └── D
+     *       │       └── E
+     *       └── F
+     *           └── G
+     * becomes
+     *   A
+     *   ├── C
+     *   │   └── E
+     *   └── F
+     *       └── G
+     */
+    flatten: (): Set<ElementModel<M>> => {
+      return new Set([
+        ...root,
+        ...sorted.reduce((acc, el) => {
+          const _children = children.get(el)
+          if (_children.length === 0) {
+            acc.push(el)
+            return acc
+          }
+          if (_children.length > 1) {
+            acc.push(..._children)
+          }
+          return acc
+        }, [] as ElementModel<M>[]),
+      ])
+    },
   }
 }

package/src/compute-view/utils/resolve-extended-views.ts

@@ -1,18 +1,19 @@
-import { values } from 'remeda'
-import { type ExtendsElementView, isElementView, isExtendsElementView, type LikeC4View } from '../../types/view'
+import { unique, values } from 'remeda'
+import { type ExtendsElementView, type LikeC4View, isElementView, isExtendsElementView } from '../../types/view'
 
 import Graph from 'graphology'
 import { topologicalSort } from 'graphology-dag/topological-sort'
 import willCreateCycle from 'graphology-dag/will-create-cycle'
+import { isNonEmptyArray } from '../../utils'
 /**
  * Resolve rules of extended views
  * (Removes invalid views)
  */
 export function resolveRulesExtendedViews<V extends Record<any, LikeC4View>>(
-  unresolvedViews: V
+  unresolvedViews: V,
 ): V {
   const g = new Graph<{ view: LikeC4View }>({
-    type: 'directed'
+    type: 'directed',
   })
   const extendedViews = [] as ExtendsElementView<any, any>[]
   for (const view of values(unresolvedViews)) {
@@ -53,10 +54,24 @@ export function resolveRulesExtendedViews<V extends Record<any, LikeC4View>>(
       return acc
     }
 
+    const tags = unique([
+      ...(extendsFrom.tags ?? []),
+      ...(view.tags ?? []),
+    ])
+
+    const links = [
+      ...(extendsFrom.links ?? []),
+      ...(view.links ?? []),
+    ]
+
     acc[view.id] = {
       ...extendsFrom,
       ...view,
-      rules: [...extendsFrom.rules, ...view.rules]
+      title: view.title ?? extendsFrom.title ?? null,
+      description: view.description ?? extendsFrom.description ?? null,
+      tags: isNonEmptyArray(tags) ? tags : null,
+      links: isNonEmptyArray(links) ? links : null,
+      rules: [...extendsFrom.rules, ...view.rules],
     }
     return acc
   }, {} as Record<string, LikeC4View>) as V

package/src/compute-view/utils/view-hash.ts

@@ -19,9 +19,6 @@ export function calcViewLayoutHash<V extends ComputedView>(view: SetOptional<V,
       mapToObj(({ source, target, ...edge }) => [`${source}:${target}`, edge]),
     ),
   }
-  view.hash = objectHash(tohash, {
-    ignoreUnknown: true,
-    respectType: false,
-  })
+  view.hash = objectHash(tohash)
   return view as unknown as V
 }

package/src/index.ts

@@ -36,9 +36,9 @@ export * from './utils'
 export * as Expr from './types/expression'
 
 export {
-  computeRelationshipsView,
   computeView,
   computeViews,
   unsafeComputeView,
 } from './compute-view'
+
 export type { ComputeViewResult } from './compute-view'

package/src/model/ElementModel.ts

@@ -25,6 +25,7 @@ export type ElementsIterator<M extends AnyAux> = IteratorLike<ElementModel<M>>
 
 export class ElementModel<M extends AnyAux = AnyAux> {
   readonly id: M['Fqn']
+  readonly _literalId: M['Element']
   readonly hierarchyLevel: number
 
   constructor(
@@ -32,6 +33,7 @@ export class ElementModel<M extends AnyAux = AnyAux> {
     public readonly $element: C4Element,
   ) {
     this.id = this.$element.id
+    this._literalId = this.$element.id
     this.hierarchyLevel = hierarchyLevel(this.id)
   }
 

package/src/model/view/NodeModel.ts

@@ -4,6 +4,7 @@ import {
   type DeploymentNodeKind,
   type DiagramView,
   type ElementShape as C4ElementShape,
+  type ElementStyle,
   type IconUrl,
   type IteratorLike,
   type Link,
@@ -114,6 +115,10 @@ export class NodeModel<M extends AnyAux, V extends ComputedView | DiagramView =
     return this.$node.navigateTo ? this.$view.$model.view(this.$node.navigateTo) : null
   }
 
+  get style(): ElementStyle {
+    return this.$node.style
+  }
+
   /**
    * Get all ancestor elements (i.e. parent, parent’s parent, etc.)
    * (from closest to root)