@likec4/language-server 1.7.3 → 1.8.0

package/src/like-c4.langium

@@ -42,18 +42,30 @@ SpecificationRule:
 
 SpecificationElementKind:
   'element' kind=ElementKind ('{'
-    style=StyleProperties?
+    props+=(
+      SpecificationElementStringProperty |
+      ElementStyleProperty
+    )*
   '}')?;
 
+SpecificationElementStringProperty:
+  key=('technology' | 'notation') ':'? value=String ';'?;
+
 SpecificationTag:
   'tag' tag=Tag;
 
 SpecificationRelationshipKind:
   'relationship' kind=RelationshipKind ('{'
-    props+=RelationshipStyleProperty*
+    props+=(
+      RelationshipStyleProperty |
+      SpecificationRelationshipStringProperty
+    )*
   '}')?
 ;
 
+SpecificationRelationshipStringProperty:
+  key=('technology' | 'notation') ':'? value=String ';'?;
+
 // Model -------------------------------------
 
 Model:
@@ -92,7 +104,7 @@ ElementBody: '{'
 ;
 
 ElementProperty:
-  ElementStringProperty | StyleProperties | LinkProperty | IconProperty;
+  ElementStringProperty | ElementStyleProperty | LinkProperty | IconProperty | MetadataProperty;
 
 ElementStringProperty:
   key=('title' | 'technology' | 'description') ':'? value=String ';'?;
@@ -133,6 +145,7 @@ fragment RelationFragment:
   ('->' | '-[' kind=[RelationshipKind] ']->' | kind=[RelationshipKind:DotId] )
   target=ElementRef
   title=String?
+  technology=String?
   tags=Tags?
   body=RelationBody?
 ;
@@ -144,7 +157,7 @@ RelationBody: '{'
 ;
 
 RelationProperty:
-  RelationStringProperty | RelationStyleProperty |  LinkProperty;
+  RelationStringProperty | RelationStyleProperty |  LinkProperty | MetadataProperty;
 
 RelationStringProperty:
   key=('title' | 'technology' | 'description') ':'? value=String ';'?;
@@ -155,6 +168,18 @@ RelationStyleProperty:
   '}'
 ;
 
+MetadataProperty:
+  'metadata' MetadataBody
+;
+
+MetadataBody: '{'
+  props+=(MetadataAttribute)*
+'}'
+;
+
+MetadataAttribute:
+  key=IdTerminal value=String
+;
 
 // Views -------------------------------------
 
@@ -200,7 +225,15 @@ DynamicViewBody: '{'
 ;
 
 
-type StringProperty = ElementStringProperty | ViewStringProperty | RelationStringProperty;
+type StringProperty =
+  ElementStringProperty |
+  ViewStringProperty |
+  RelationStringProperty |
+  MetadataAttribute |
+  SpecificationElementStringProperty |
+  SpecificationRelationshipStringProperty |
+  NotationProperty
+;
 
 ViewProperty:
   ViewStringProperty | LinkProperty
@@ -376,16 +409,24 @@ DynamicViewPredicateIterator:
 
 ViewRuleStyle:
   'style' target=ElementExpressionsIterator '{'
-    props+=StyleProperty*
+    props+=(
+      StyleProperty |
+      NotationProperty
+    )*
   '}';
 
 ViewRuleAutoLayout:
   'autoLayout' direction=ViewLayoutDirection;
 
+NotationProperty:
+  key='notation' ':'? value=String ';'?
+;
+
 CustomElementProperties: '{'
   props+=(
     NavigateToProperty |
     ElementStringProperty |
+    NotationProperty |
     StyleProperty
   )*
 '}'
@@ -394,6 +435,7 @@ CustomElementProperties: '{'
 CustomRelationProperties: '{'
   props+=(
     RelationStringProperty |
+    NotationProperty |
     RelationshipStyleProperty
   )*
 '}'
@@ -405,7 +447,7 @@ NavigateToProperty:
 // Common properties -------------------------------------
 
 LinkProperty:
-  key='link' ':'? value=Uri ';'?;
+  key='link' ':'? value=Uri title=String? ';'?;
 ColorProperty:
   key='color' ':'? value=ThemeColor ';'?;
 
@@ -433,7 +475,7 @@ StyleProperty:
   OpacityProperty |
   IconProperty;
 
-StyleProperties:
+ElementStyleProperty:
   key='style' '{'
     props+=StyleProperty*
   '}';

package/src/lsp/SemanticTokenProvider.ts

@@ -146,7 +146,7 @@ export class LikeC4SemanticTokenProvider extends AbstractSemanticTokenProvider {
     }
     if (
       ast.isRelationStyleProperty(node)
-      || (ast.isStyleProperties(node) && ast.isElementBody(node.$container))
+      || (ast.isElementStyleProperty(node) && ast.isElementBody(node.$container))
     ) {
       acceptor({
         node,
@@ -177,7 +177,7 @@ export class LikeC4SemanticTokenProvider extends AbstractSemanticTokenProvider {
         property: 'key',
         type: SemanticTokenTypes.property
       })
-      if ('value' in node) {
+      if ('value' in node && node.value) {
         acceptor({
           node,
           property: 'value',

package/src/model/model-builder.ts

@@ -40,7 +40,7 @@ import type { LikeC4Services } from '../module'
 import { printDocs } from '../utils/printDocs'
 import { assignNavigateTo, resolveRelativePaths, resolveRulesExtendedViews } from '../view-utils'
 
-function buildModel(services: LikeC4Services, docs: ParsedLikeC4LangiumDocument[]) {
+function buildModel(services: LikeC4Services, docs: ParsedLikeC4LangiumDocument[]): c4.LikeC4Model {
   const c4Specification: ParsedAstSpecification = {
     kinds: {},
     relationships: {}
@@ -49,8 +49,11 @@ function buildModel(services: LikeC4Services, docs: ParsedLikeC4LangiumDocument[
     Object.assign(c4Specification.kinds, spec.kinds)
     Object.assign(c4Specification.relationships, spec.relationships)
   })
-  const resolveLinks = (doc: LangiumDocument, links: c4.NonEmptyArray<string>) => {
-    return links.map(l => services.lsp.DocumentLinkProvider.resolveLink(doc, l)) as c4.NonEmptyArray<string>
+  const resolveLinks = (doc: LangiumDocument, links: c4.NonEmptyArray<c4.Link>) => {
+    return links.map(l => ({
+      url: services.lsp.DocumentLinkProvider.resolveLink(doc, l.url),
+      ...(l.title && { title: l.title })
+    })) as c4.NonEmptyArray<c4.Link>
   }
 
   const toModelElement = (doc: LangiumDocument) => {
@@ -68,7 +71,8 @@ function buildModel(services: LikeC4Services, docs: ParsedLikeC4LangiumDocument[
       kind,
       title,
       description,
-      technology
+      technology,
+      metadata
     }: ParsedAstElement): c4.Element | null => {
       try {
         const __kind = c4Specification.kinds[kind]
@@ -76,15 +80,18 @@ function buildModel(services: LikeC4Services, docs: ParsedLikeC4LangiumDocument[
           logger.warn(`No kind '${kind}' found for ${id}`)
           return null
         }
-        color ??= __kind.color
-        shape ??= __kind.shape
-        icon ??= __kind.icon
-        opacity ??= __kind.opacity
-        border ??= __kind.border
+        color ??= __kind.style.color
+        shape ??= __kind.style.shape
+        icon ??= __kind.style.icon
+        opacity ??= __kind.style.opacity
+        border ??= __kind.style.border
+        technology ??= __kind.technology
         return {
           ...(color && { color }),
           ...(shape && { shape }),
           ...(icon && { icon }),
+          ...(metadata && { metadata }),
+          ...(__kind.notation && { notation: __kind.notation }),
           style: {
             ...(border && { border }),
             ...(isNumber(opacity) && { opacity })
@@ -281,11 +288,14 @@ export class LikeC4ModelBuilder {
   }
 
   public async buildModel(cancelToken?: Cancellation.CancellationToken): Promise<c4.LikeC4Model | null> {
+    const cache = this.services.WorkspaceCache as WorkspaceCache<string, c4.LikeC4Model | null>
+    if (cache.has(RAW_MODEL_CACHE)) {
+      return cache.get(RAW_MODEL_CACHE)!
+    }
     return await this.services.shared.workspace.WorkspaceLock.read(async () => {
       if (cancelToken) {
         await interruptAndCheck(cancelToken)
       }
-      const cache = this.services.WorkspaceCache as WorkspaceCache<string, c4.LikeC4Model | null>
       return cache.get(RAW_MODEL_CACHE, () => {
         const docs = this.documents()
         if (docs.length === 0) {
@@ -303,6 +313,10 @@ export class LikeC4ModelBuilder {
   public async buildComputedModel(
     cancelToken?: Cancellation.CancellationToken
   ): Promise<c4.LikeC4ComputedModel | null> {
+    const cache = this.services.WorkspaceCache as WorkspaceCache<string, c4.LikeC4ComputedModel | null>
+    if (cache.has(MODEL_CACHE)) {
+      return cache.get(MODEL_CACHE)!
+    }
     const model = await this.buildModel(cancelToken)
     if (!model) {
       return null
@@ -311,7 +325,6 @@ export class LikeC4ModelBuilder {
       if (cancelToken) {
         await interruptAndCheck(cancelToken)
       }
-      const cache = this.services.WorkspaceCache as WorkspaceCache<string, c4.LikeC4ComputedModel | null>
       const viewsCache = this.services.WorkspaceCache as WorkspaceCache<string, c4.ComputedView | null>
       return cache.get(MODEL_CACHE, () => {
         const index = new LikeC4ModelGraph(model)
@@ -346,6 +359,11 @@ export class LikeC4ModelBuilder {
     viewId: ViewID,
     cancelToken?: Cancellation.CancellationToken
   ): Promise<c4.ComputedView | null> {
+    const cache = this.services.WorkspaceCache as WorkspaceCache<string, c4.ComputedView | null>
+    const cacheKey = computedViewKey(viewId)
+    if (cache.has(cacheKey)) {
+      return cache.get(cacheKey)!
+    }
     const model = await this.buildModel(cancelToken)
     const view = model?.views[viewId]
     if (!view) {
@@ -356,8 +374,7 @@ export class LikeC4ModelBuilder {
       if (cancelToken) {
         await interruptAndCheck(cancelToken)
       }
-      const cache = this.services.WorkspaceCache as WorkspaceCache<string, c4.ComputedView | null>
-      return cache.get(computedViewKey(viewId), () => {
+      return cache.get(cacheKey, () => {
         const index = new LikeC4ModelGraph(model)
         const result = isElementView(view) ? computeView(view, index) : computeDynamicView(view, index)
         if (!result.isSuccess) {

package/src/model/model-parser.ts

@@ -1,7 +1,7 @@
 import { type c4, InvalidModelError, invariant, isNonEmptyArray, nonexhaustive } from '@likec4/core'
 import type { AstNode, LangiumDocument } from 'langium'
 import { AstUtils, CstUtils } from 'langium'
-import { isDefined, isTruthy, mapToObj } from 'remeda'
+import { filter, flatMap, isDefined, isNonNullish, isTruthy, mapToObj, pipe } from 'remeda'
 import stripIndent from 'strip-indent'
 import type { Writable } from 'type-fest'
 import type {
@@ -11,7 +11,8 @@ import type {
   ParsedAstElement,
   ParsedAstElementView,
   ParsedAstRelation,
-  ParsedLikeC4LangiumDocument
+  ParsedLikeC4LangiumDocument,
+  ParsedLink
 } from '../ast'
 import {
   ast,
@@ -38,12 +39,12 @@ const { getDocument } = AstUtils
 
 export type ModelParsedListener = () => void
 
-function toSingleLine<T extends string | undefined>(str: T): T {
-  return (isTruthy(str) ? removeIndent(str).split('\n').join(' ') : undefined) as T
+function toSingleLine<T extends string | undefined | null>(str: T): T {
+  return (isNonNullish(str) ? removeIndent(str).split('\n').join(' ') : undefined) as T
 }
 
-function removeIndent<T extends string | undefined>(str: T): T {
-  return (isTruthy(str) ? stripIndent(str).trim() : undefined) as T
+function removeIndent<T extends string | undefined | null>(str: T): T {
+  return (isNonNullish(str) ? stripIndent(str).trim() : undefined) as T
 }
 
 export type IsValidFn = ChecksFromDiagnostics['isValid']
@@ -86,12 +87,23 @@ export class LikeC4ModelParser {
 
     const specifications = parseResult.value.specifications.filter(isValid)
     const element_specs = specifications.flatMap(s => s.elements.filter(isValid))
-    for (const { kind, style } of element_specs) {
+    for (const { kind, props } of element_specs) {
       try {
+        const style = props.find(ast.isElementStyleProperty)
         const kindName = kind.name as c4.ElementKind
+        if (kindName in c4Specification.kinds) {
+          logger.warn(`Element kind "${kindName}" is already defined`)
+          continue
+        }
+        const bodyProps = mapToObj(
+          props.filter(ast.isSpecificationElementStringProperty).filter(p => isNonNullish(p.value)) ?? [],
+          p => [p.key, removeIndent(p.value)]
+        )
         c4Specification.kinds[kindName] = {
-          ...c4Specification.kinds[kindName],
-          ...toElementStyle(style?.props)
+          ...bodyProps,
+          style: {
+            ...toElementStyle(style?.props)
+          }
         }
       } catch (e) {
         logWarnError(e)
@@ -102,8 +114,16 @@ export class LikeC4ModelParser {
     for (const { kind, props } of relations_specs) {
       try {
         const kindName = kind.name as c4.RelationshipKind
+        if (kindName in c4Specification.relationships) {
+          logger.warn(`Relationship kind "${kindName}" is already defined`)
+          continue
+        }
+        const bodyProps = mapToObj(
+          props.filter(ast.isSpecificationRelationshipStringProperty).filter(p => isNonNullish(p.value)) ?? [],
+          p => [p.key, p.value]
+        )
         c4Specification.relationships[kindName] = {
-          ...c4Specification.relationships[kindName],
+          ...bodyProps,
           ...toRelationshipStyleExcludeDefaults(props)
         }
       } catch (e) {
@@ -138,8 +158,9 @@ export class LikeC4ModelParser {
     const id = this.resolveFqn(astNode)
     const kind = astNode.kind.$refText as c4.ElementKind
     const tags = this.convertTags(astNode.body)
-    const stylePropsAst = astNode.body?.props.find(ast.isStyleProperties)?.props
+    const stylePropsAst = astNode.body?.props.find(ast.isElementStyleProperty)?.props
     const style = toElementStyle(stylePropsAst)
+    const metadata = this.getMetadata(astNode.body?.props.find(ast.isMetadataProperty))
     const astPath = this.getAstNodePath(astNode)
 
     let [title, description, technology] = astNode.props ?? []
@@ -153,7 +174,7 @@ export class LikeC4ModelParser {
     description = removeIndent(bodyProps.description ?? description)
     technology = toSingleLine(bodyProps.technology ?? technology)
 
-    const links = astNode.body?.props.filter(ast.isLinkProperty).map(p => p.value)
+    const links = this.convertLinks(astNode.body)
 
     // Property has higher priority than from style
     const iconProp = astNode.body?.props.find(ast.isIconProperty)
@@ -169,6 +190,7 @@ export class LikeC4ModelParser {
       kind,
       astPath,
       title: title ?? astNode.name,
+      ...(metadata && { metadata }),
       ...(tags && { tags }),
       ...(links && isNonEmptyArray(links) && { links }),
       ...(isTruthy(technology) && { technology }),
@@ -182,18 +204,19 @@ export class LikeC4ModelParser {
     const target = this.resolveFqn(coupling.target)
     const source = this.resolveFqn(coupling.source)
     const tags = this.convertTags(astNode) ?? this.convertTags(astNode.body)
-    const links = astNode.body?.props.filter(ast.isLinkProperty).map(p => p.value)
+    const links = this.convertLinks(astNode.body)
     const kind = astNode.kind?.ref?.name as (c4.RelationshipKind | undefined)
+    const metadata = this.getMetadata(astNode.body?.props.find(ast.isMetadataProperty))
     const astPath = this.getAstNodePath(astNode)
 
     const bodyProps = mapToObj(
-      astNode.body?.props.filter(ast.isRelationStringProperty) ?? [],
-      p => [p.key, p.value || undefined]
+      astNode.body?.props.filter(ast.isRelationStringProperty).filter(p => isNonNullish(p.value)) ?? [],
+      p => [p.key, p.value]
     )
 
     const title = removeIndent(astNode.title ?? bodyProps.title) ?? ''
     const description = removeIndent(bodyProps.description)
-    const technology = toSingleLine(bodyProps.technology)
+    const technology = removeIndent(astNode.technology) ?? toSingleLine(bodyProps.technology)
 
     const styleProp = astNode.body?.props.find(ast.isRelationStyleProperty)
     const id = stringHash(
@@ -207,6 +230,7 @@ export class LikeC4ModelParser {
       source,
       target,
       title,
+      ...(metadata && { metadata }),
       ...(isTruthy(technology) && { technology }),
       ...(isTruthy(description) && { description }),
       ...(kind && { kind }),
@@ -391,7 +415,12 @@ export class LikeC4ModelParser {
           }
           return acc
         }
-
+        if (ast.isNotationProperty(prop)) {
+          if (isTruthy(prop.value)) {
+            acc.custom[prop.key] = removeIndent(prop.value)
+          }
+          return acc
+        }
         nonexhaustive(prop)
       },
       {
@@ -475,6 +504,12 @@ export class LikeC4ModelParser {
           }
           return acc
         }
+        if (ast.isNotationProperty(prop)) {
+          if (isTruthy(prop.value)) {
+            acc.customRelation[prop.key] = removeIndent(prop.value)
+          }
+          return acc
+        }
         nonexhaustive(prop)
       },
       {
@@ -516,9 +551,12 @@ export class LikeC4ModelParser {
       return this.parseViewRulePredicate(astRule, isValid)
     }
     if (ast.isViewRuleStyle(astRule)) {
-      const styleProps = toElementStyle(astRule.props)
+      const styleProps = toElementStyle(astRule.props.filter(ast.isStyleProperty))
+      const notation = removeIndent(astRule.props.find(ast.isNotationProperty)?.value)
+      const targets = this.parseElementExpressionsIterator(astRule.target)
       return {
-        targets: this.parseElementExpressionsIterator(astRule.target),
+        targets,
+        ...(notation && { notation }),
         style: {
           ...styleProps
         }
@@ -601,6 +639,12 @@ export class LikeC4ModelParser {
             step[prop.key] = prop.value
             continue
           }
+          if (ast.isNotationProperty(prop)) {
+            if (isTruthy(prop.value)) {
+              step[prop.key] = prop.value
+            }
+            continue
+          }
           nonexhaustive(prop)
         }
         catch (e) {
@@ -640,7 +684,7 @@ export class LikeC4ModelParser {
     const description = removeIndent(body.props.find(p => p.key === 'description')?.value) ?? null
 
     const tags = this.convertTags(body)
-    const links = body.props.filter(ast.isLinkProperty).map(p => p.value)
+    const links = this.convertLinks(body)
 
     const manualLayout = this.parseViewManualLaout(astNode)
 
@@ -695,7 +739,7 @@ export class LikeC4ModelParser {
     const description = removeIndent(props.find(p => p.key === 'description')?.value) ?? null
 
     const tags = this.convertTags(body)
-    const links = props.filter(ast.isLinkProperty).map(p => p.value)
+    const links = this.convertLinks(body)
 
     ViewOps.writeId(astNode, id as c4.ViewID)
 
@@ -734,11 +778,13 @@ export class LikeC4ModelParser {
             return acc
           }
           if (ast.isViewRuleStyle(n)) {
-            const styleProps = toElementStyle(n.props)
+            const styleProps = toElementStyle(n.props.filter(ast.isStyleProperty))
+            const notation = removeIndent(n.props.find(ast.isNotationProperty)?.value)
             const targets = this.parseElementExpressionsIterator(n.target)
             if (targets.length > 0) {
               acc.push({
                 targets,
+                ...(notation && { notation }),
                 style: {
                   ...styleProps
                 }
@@ -785,6 +831,12 @@ export class LikeC4ModelParser {
     return this.services.workspace.AstNodeLocator.getAstNodePath(node)
   }
 
+  private getMetadata(metadataAstNode: ast.MetadataProperty | undefined): { [key: string]: string } | undefined {
+    return metadataAstNode?.props != null
+      ? mapToObj(metadataAstNode.props, (p) => [p.key, removeIndent(p.value)])
+      : undefined
+  }
+
   private convertTags<E extends { tags?: ast.Tags }>(withTags?: E) {
     let iter = withTags?.tags
     if (!iter) {
@@ -804,4 +856,22 @@ export class LikeC4ModelParser {
     }
     return isNonEmptyArray(tags) ? tags : null
   }
+
+  private convertLinks(source?: ast.LinkProperty['$container']): ParsedLink[] | undefined {
+    if (!source?.props || source.props.length === 0) {
+      return undefined
+    }
+    return pipe(
+      source.props,
+      filter(ast.isLinkProperty),
+      flatMap(p => {
+        const url = p.value
+        if (isTruthy(url)) {
+          const title = isTruthy(p.title) ? toSingleLine(p.title) : undefined
+          return title ? { url, title } : { url }
+        }
+        return []
+      })
+    )
+  }
 }

package/src/model-graph/compute-view/compute.ts

@@ -29,13 +29,14 @@ import {
   parentFqn,
   whereOperatorAsPredicate
 } from '@likec4/core'
-import { first, flatMap, hasAtLeast, isTruthy, unique } from 'remeda'
+import { first, flatMap, hasAtLeast, isTruthy, map, omit, unique } from 'remeda'
 import { calcViewLayoutHash } from '../../view-utils/view-hash'
 import type { LikeC4ModelGraph } from '../LikeC4ModelGraph'
 import { applyCustomElementProperties } from '../utils/applyCustomElementProperties'
 import { applyCustomRelationProperties } from '../utils/applyCustomRelationProperties'
 import { applyViewRuleStyles } from '../utils/applyViewRuleStyles'
 import { buildComputeNodes } from '../utils/buildComputeNodes'
+import { buildElementNotations } from '../utils/buildElementNotations'
 import { sortNodes } from '../utils/sortNodes'
 import {
   type ElementPredicateFn,
@@ -161,18 +162,25 @@ export class ComputeCtx {
         })
       )
     )
-
     const sortedEdges = new Set([
       ...nodes.flatMap(n => n.children.length === 0 ? n.outEdges.flatMap(id => edgesMap.get(id) ?? []) : []),
       ...edges
     ])
 
     const autoLayoutRule = this.view.rules.findLast(isViewRuleAutoLayout)
+
+    const elementNotations = buildElementNotations(nodes)
+
     return calcViewLayoutHash({
       ...view,
       autoLayout: autoLayoutRule?.autoLayout ?? 'TB',
-      nodes,
-      edges: applyCustomRelationProperties(rules, nodes, sortedEdges)
+      nodes: map(nodes, omit(['notation'])),
+      edges: applyCustomRelationProperties(rules, nodes, sortedEdges),
+      ...(elementNotations.length > 0 && {
+        notation: {
+          elements: elementNotations
+        }
+      })
     })
   }
 
@@ -263,7 +271,7 @@ export class ComputeCtx {
 
       return Object.assign(
         edge,
-        isTruthy(relation.title) && { label: relation.title },
+        this.getEdgeLabel(relation),
         isTruthy(relation.description) && { description: relation.description },
         isTruthy(relation.technology) && { description: relation.technology },
         isTruthy(relation.kind) && { kind: relation.kind },
@@ -529,5 +537,19 @@ export class ComputeCtx {
       return this
     }
     nonexhaustive(expr)
+  }  
+
+  protected getEdgeLabel(relation: { title: String | undefined, technology?: String | undefined }): { label: String } | false {
+    const labelParts: String[] = []
+
+    if(isTruthy(relation.title)) {
+      labelParts.push(relation.title)
+    }
+
+    if(isTruthy(relation.technology)) {
+      labelParts.push(`[${relation.technology}]`)
+    }
+
+    return labelParts.length > 0 && { label: labelParts.join('\n') }
   }
 }

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

@@ -22,12 +22,13 @@ import {
   parentFqn,
   StepEdgeId
 } from '@likec4/core'
-import { hasAtLeast, isTruthy, map, unique } from 'remeda'
+import { hasAtLeast, isTruthy, map, omit, unique } from 'remeda'
 import { calcViewLayoutHash } from '../../view-utils/view-hash'
 import type { LikeC4ModelGraph } from '../LikeC4ModelGraph'
 import { applyCustomElementProperties } from '../utils/applyCustomElementProperties'
 import { applyViewRuleStyles } from '../utils/applyViewRuleStyles'
 import { buildComputeNodes } from '../utils/buildComputeNodes'
+import { buildElementNotations } from '../utils/buildElementNotations'
 import { elementExprToPredicate } from '../utils/elementExpressionToPredicate'
 
 export namespace DynamicViewComputeCtx {
@@ -162,11 +163,18 @@ export class DynamicViewComputeCtx {
 
     const autoLayoutRule = rules.findLast(isViewRuleAutoLayout)
 
+    const elementNotations = buildElementNotations(nodes)
+
     return calcViewLayoutHash({
       ...view,
       autoLayout: autoLayoutRule?.autoLayout ?? 'LR',
-      nodes,
-      edges
+      nodes: map(nodes, omit(['notation'])),
+      edges,
+      ...(elementNotations.length > 0 && {
+        notation: {
+          elements: elementNotations
+        }
+      })
     })
   }
 

package/src/model-graph/utils/applyCustomElementProperties.ts

@@ -1,6 +1,6 @@
 import type { ComputedNode, ViewRule } from '@likec4/core'
-import { Expr, nonNullable } from '@likec4/core'
-import { isEmpty, isNonNullish, isNullish, omitBy, pickBy } from 'remeda'
+import { Expr } from '@likec4/core'
+import { isEmpty, isNullish, omitBy } from 'remeda'
 import { elementExprToPredicate } from './elementExpressionToPredicate'
 
 export function applyCustomElementProperties(_rules: ViewRule[], _nodes: ComputedNode[]) {
@@ -15,12 +15,13 @@ export function applyCustomElementProperties(_rules: ViewRule[], _nodes: Compute
     } of rules
   ) {
     const { border, opacity, ...rest } = omitBy(props, isNullish)
+    const notEmpty = !isEmpty(rest)
     const satisfies = elementExprToPredicate(expr)
     nodes.forEach((node, i) => {
       if (!satisfies(node)) {
         return
       }
-      if (!isEmpty(rest)) {
+      if (notEmpty) {
         node = {
           ...node,
           isCustomized: true,

package/src/model-graph/utils/applyViewRuleStyles.ts

@@ -25,6 +25,9 @@ export function applyViewRuleStyles(_rules: ViewRule[], nodes: ComputedNode[]) {
       if (isDefined(rule.style.icon)) {
         n.icon = rule.style.icon
       }
+      if (isDefined(rule.notation)) {
+        n.notation = rule.notation
+      }
       let styleOverride: ComputedNode['style'] | undefined
       if (isDefined(rule.style.border)) {
         styleOverride = { border: rule.style.border }