@likec4/core 1.32.1 → 1.33.0

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

@@ -317,7 +317,7 @@ export function layoutRelationshipsView(data: RelationshipsViewData): Pick<Diagr
       title: element.title,
       ...position,
       position: [position.x, position.y],
-      description: element.description,
+      description: element.description?.$source ?? null,
       technology: element.technology,
       tags: [],
       links: null,

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

@@ -47,6 +47,7 @@ export function applyCustomElementProperties<A extends AnyAux>(
       padding,
       size,
       textSize,
+      description,
       ...rest
     } = omitBy(props, isNullish)
     const notEmpty = !isEmpty(rest)
@@ -62,6 +63,13 @@ export function applyCustomElementProperties<A extends AnyAux>(
           ...rest,
         }
       }
+      if (description !== undefined) {
+        node = {
+          ...node,
+          isCustomized: true,
+          description: { txt: description },
+        }
+      }
 
       let styleOverride: ComputedNode['style'] | undefined
       if (border !== undefined) {

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

@@ -18,6 +18,7 @@ export function applyCustomRelationProperties<A extends AnyAux>(
       customRelation: {
         expr,
         title,
+        description,
         ...customprops
       },
     } of rules
@@ -44,6 +45,7 @@ export function applyCustomRelationProperties<A extends AnyAux>(
         edges[i] = {
           ...edge,
           ...props,
+          ...description && { description: { txt: description } },
           label: title ?? edge.label,
           isCustomized: true,
         }

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

@@ -29,8 +29,8 @@ function updateDepthOfAncestors(node: ComputedNode, nodes: ReadonlyMap<string, C
 }
 
 export type ComputedNodeSource<A extends AnyAux = Unknown> = Simplify<
-  & Pick<ComputedNode<A>, 'id' | 'title' | 'kind' | 'deploymentRef' | 'modelRef'>
-  & Partial<Omit<Element<A>, 'id' | 'title' | 'kind'>>
+  & Pick<ComputedNode<A>, 'id' | 'title' | 'description' | 'kind' | 'deploymentRef' | 'modelRef'>
+  & Partial<Omit<Element<A>, 'id' | 'title' | 'description' | 'kind'>>
 >
 
 export function elementModelToNodeSource<A extends AnyAux>(el: ElementModel<A>): ComputedNodeSource<A> {
@@ -86,7 +86,7 @@ export function buildComputedNodes<A extends AnyAux>(
   // Ensure that parent nodes are created before child nodes
   Array.from(elements)
     .sort(compareByFqnHierarchically)
-    .forEach(({ id, style, kind, title, color, shape, tags, ...el }) => {
+    .forEach(({ id, style, kind, title, color, shape, tags, notation, ...el }) => {
       let parent = parentFqn(id)
       let level = 0
       let parentNd: ComputedNode<A> | undefined
@@ -130,6 +130,7 @@ export function buildComputedNodes<A extends AnyAux>(
         children: [],
         inEdges: [],
         outEdges: [],
+        ...notation && { notation },
         ...el,
         style: {
           ...style,

package/src/compute-view/utils/merge-props-from-relationships.ts

@@ -1,4 +1,4 @@
-import { isTruthy, only, pickBy, pipe, reduce, unique } from 'remeda'
+import { isDeepEqual, isTruthy, only, pickBy, pipe, reduce, unique } from 'remeda'
 import type {
   AnyAux,
   aux,
@@ -9,12 +9,13 @@ import type {
   Relationship,
   RelationshipArrowType,
   RelationshipLineType,
+  scalar,
 } from '../../types'
 import { isNonEmptyArray } from '../../utils'
 
 function pickRelationshipProps<A extends AnyAux>(relation: Relationship<A> | DeploymentRelationship<A>): {
   title?: string
-  description?: string | null
+  description?: scalar.MarkdownOrString | null
   technology: string | null
   kind: aux.RelationKind<A> | null
   color: Color | null
@@ -52,7 +53,7 @@ function pickRelationshipProps<A extends AnyAux>(relation: Relationship<A> | Dep
 
 export type MergedRelationshipProps<A extends AnyAux> = {
   title?: string | null
-  description?: string
+  description?: scalar.MarkdownOrString | null
   technology?: string
   kind?: aux.RelationKind<A>
   color?: Color
@@ -80,7 +81,7 @@ export function mergePropsFromRelationships<A extends AnyAux>(
         if (isTruthy(r.title) && !acc.title.includes(r.title)) {
           acc.title.push(r.title)
         }
-        if (isTruthy(r.description) && !acc.description.includes(r.description)) {
+        if (isTruthy(r.description) && !acc.description.some(isDeepEqual(r.description))) {
           acc.description.push(r.description)
         }
         if (isTruthy(r.technology) && !acc.technology.includes(r.technology)) {
@@ -114,7 +115,7 @@ export function mergePropsFromRelationships<A extends AnyAux>(
       },
       {
         title: [] as string[],
-        description: [] as string[],
+        description: [] as scalar.MarkdownOrString[],
         technology: [] as string[],
         kind: [] as aux.RelationKind<A>[],
         head: [] as RelationshipArrowType[],

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

@@ -10,12 +10,33 @@ export function calcViewLayoutHash<V extends ComputedView>(view: SetOptional<V,
     autoLayout: view.autoLayout,
     nodes: pipe(
       view.nodes,
-      map(pick(['id', 'title', 'description', 'technology', 'shape', 'icon', 'children'])),
-      mapToObj(({ id, icon, ...node }) => [id, { ...node, icon: isTruthy(icon) ? 'Y' : 'N' }]),
+      map(n => ({
+        id: n.id,
+        icon: isTruthy(n.icon) ? 'Y' : 'N',
+        title: n.title,
+        description: n.description?.md ?? n.description?.txt ?? null,
+        technology: n.technology ?? null,
+        shape: n.shape,
+        size: n.style.size ?? null,
+        textSize: n.style.textSize ?? null,
+        padding: n.style.padding ?? null,
+        children: n.children,
+      })),
+      mapToObj(({ id, ...node }) => [id, node]),
     ),
     edges: pipe(
       view.edges,
-      map(pick(['source', 'target', 'label', 'description', 'technology', 'dir', 'head', 'tail', 'line'])),
+      map(e => ({
+        source: e.source,
+        target: e.target,
+        label: e.label,
+        description: e.description?.md ?? e.description?.txt ?? null,
+        technology: e.technology ?? null,
+        dir: e.dir,
+        head: e.head,
+        tail: e.tail,
+        line: e.line,
+      })),
       mapToObj(({ source, target, ...edge }) => [`${source}:${target}`, edge]),
     ),
   }

package/src/model/DeploymentElementModel.ts

@@ -1,4 +1,4 @@
-import { isTruthy, only, unique } from 'remeda'
+import { isEmpty, isTruthy, only, unique } from 'remeda'
 import type { SetRequired } from 'type-fest'
 import {
   type Any,
@@ -12,11 +12,13 @@ import {
   type IteratorLike,
   type Link,
   type RelationshipLineType,
+  type RichTextOrEmpty,
   type scalar,
   DefaultElementShape,
   DefaultLineStyle,
   DefaultShapeSize,
   DefaultThemeColor,
+  RichText,
 } from '../types'
 import * as aux from '../types/aux'
 import { commonAncestor, hierarchyLevel, memoizeProp, nonNullable } from '../utils'
@@ -24,7 +26,7 @@ import { difference, intersection, union } from '../utils/set'
 import type { LikeC4DeploymentModel } from './DeploymentModel'
 import type { ElementModel } from './ElementModel'
 import type { AnyRelationshipModel, RelationshipModel, RelationshipsIterator } from './RelationModel'
-import type { IncomingFilter, OutgoingFilter } from './types'
+import type { IncomingFilter, OutgoingFilter, WithMetadata, WithTags } from './types'
 import type { LikeC4ViewModel } from './view/LikeC4ViewModel'
 
 export type DeploymentElementsIterator<A extends Any> = IteratorLike<DeploymentElementModel<A>>
@@ -33,7 +35,7 @@ export type DeploymentNodesIterator<A extends Any> = IteratorLike<DeploymentNode
 
 export type DeploymentElementModel<A extends Any = Any> = DeploymentNodeModel<A> | DeployedInstanceModel<A>
 
-abstract class AbstractDeploymentElementModel<A extends Any> {
+abstract class AbstractDeploymentElementModel<A extends Any> implements WithTags<A>, WithMetadata<A> {
   abstract readonly id: aux.DeploymentFqn<A>
   abstract readonly _literalId: aux.DeploymentId<A>
   abstract readonly parent: DeploymentNodeModel<A> | null
@@ -61,8 +63,8 @@ abstract class AbstractDeploymentElementModel<A extends Any> {
     return this.$node.style?.color as Color ?? DefaultThemeColor
   }
 
-  get description(): string | null {
-    return this.$node.description ?? null
+  get description(): RichTextOrEmpty {
+    return RichText.memoize(this, this.$node.description)
   }
 
   get technology(): string | null {
@@ -199,6 +201,10 @@ abstract class AbstractDeploymentElementModel<A extends Any> {
       ))
   }
 
+  public hasMetadata(): boolean {
+    return !!this.$node.metadata && !isEmpty(this.$node.metadata)
+  }
+
   public getMetadata(): aux.Metadata<A>
   public getMetadata(field: aux.MetadataKey<A>): string | undefined
   public getMetadata(field?: aux.MetadataKey<A>) {
@@ -402,12 +408,12 @@ export class DeployedInstanceModel<A extends Any = Any> extends AbstractDeployme
     return this.element.kind
   }
 
-  override get description(): string | null {
-    return this.$instance.description ?? this.element.description
+  override get description(): RichTextOrEmpty {
+    return RichText.memoize(this, this.$instance.description ?? this.element.$element.description)
   }
 
   override get technology(): string | null {
-    return this.$instance.technology ?? this.element.technology
+    return this.$instance.technology ?? this.element.technology ?? null
   }
 
   override get links(): ReadonlyArray<Link> {
@@ -486,7 +492,7 @@ export class NestedElementOfDeployedInstanceModel<A extends Any = Any> {
     return this.element.title
   }
 
-  get description(): string | null {
+  get description(): RichTextOrEmpty {
     return this.element.description
   }
 
@@ -536,17 +542,11 @@ export class DeploymentRelationModel<A extends Any = Any> implements AnyRelation
   }
 
   get technology(): string | null {
-    if (!isTruthy(this.$relationship.technology)) {
-      return null
-    }
-    return this.$relationship.technology
+    return this.$relationship.technology ?? null
   }
 
-  get description(): string | null {
-    if (!isTruthy(this.$relationship.description)) {
-      return null
-    }
-    return this.$relationship.description
+  get description(): RichTextOrEmpty {
+    return RichText.memoize(this, this.$relationship.description)
   }
 
   get tags(): aux.Tags<A> {
@@ -590,6 +590,10 @@ export class DeploymentRelationModel<A extends Any = Any> implements AnyRelation
     return false
   }
 
+  public hasMetadata(): boolean {
+    return !!this.$relationship.metadata && !isEmpty(this.$relationship.metadata)
+  }
+
   public getMetadata(): aux.Metadata<A>
   public getMetadata(field: aux.MetadataKey<A>): string | undefined
   public getMetadata(field?: aux.MetadataKey<A>) {

package/src/model/ElementModel.ts

@@ -1,4 +1,4 @@
-import { isTruthy, unique } from 'remeda'
+import { isEmpty, isTruthy, unique } from 'remeda'
 import type { SetRequired } from 'type-fest'
 import type { Any, AnyAux, Color, IteratorLike } from '../types'
 import {
@@ -8,9 +8,11 @@ import {
   type IconUrl,
   type Link,
   type ProjectId,
+  type RichTextOrEmpty,
   DefaultElementShape,
   DefaultShapeSize,
   DefaultThemeColor,
+  RichText,
   splitGlobalFqn,
 } from '../types'
 import * as aux from '../types/aux'
@@ -18,12 +20,12 @@ import { commonAncestor, hierarchyLevel, ihead, isAncestor, memoizeProp, sortNat
 import { type DeployedInstancesIterator } from './DeploymentElementModel'
 import type { LikeC4Model } from './LikeC4Model'
 import type { RelationshipModel, RelationshipsIterator } from './RelationModel'
-import type { $ViewWithType, IncomingFilter, OutgoingFilter } from './types'
+import type { IncomingFilter, OutgoingFilter, WithMetadata, WithTags } from './types'
 import type { LikeC4ViewModel } from './view/LikeC4ViewModel'
 
 export type ElementsIterator<M extends AnyAux> = IteratorLike<ElementModel<M>>
 
-export class ElementModel<A extends AnyAux = Any> {
+export class ElementModel<A extends AnyAux = Any> implements WithTags<A>, WithMetadata<A> {
   readonly id: aux.Fqn<A>
   readonly _literalId: aux.ElementId<A>
   readonly hierarchyLevel: number
@@ -89,8 +91,8 @@ export class ElementModel<A extends AnyAux = Any> {
     return this.$element.title
   }
 
-  get description(): string | null {
-    return this.$element.description ?? null
+  get description(): RichTextOrEmpty {
+    return RichText.memoize(this, this.$element.description)
   }
 
   get technology(): string | null {
@@ -101,7 +103,7 @@ export class ElementModel<A extends AnyAux = Any> {
     return this.$element.links ?? []
   }
 
-  get defaultView(): LikeC4ViewModel<A, $ViewWithType<A, 'element'> & { viewOf: aux.StrictFqn<A> }> | null {
+  get defaultView(): LikeC4ViewModel.ScopedElementView<A> | null {
     return memoizeProp(this, Symbol.for('defaultView'), () => ihead(this.scopedViews()) ?? null)
   }
 
@@ -242,11 +244,9 @@ export class ElementModel<A extends AnyAux = Any> {
    * Iterate over all views that scope this element.
    * It is possible that element is not included in the view.
    */
-  public scopedViews(): ReadonlySet<
-    LikeC4ViewModel<A, $ViewWithType<A, 'element'> & { viewOf: aux.StrictFqn<A> }>
-  > {
+  public scopedViews(): ReadonlySet<LikeC4ViewModel.ScopedElementView<A>> {
     return memoizeProp(this, Symbol.for('scopedViews'), () => {
-      const views = new Set<LikeC4ViewModel<A, $ViewWithType<A, 'element'> & { viewOf: aux.StrictFqn<A> }>>()
+      const views = new Set<LikeC4ViewModel.ScopedElementView<A>>()
       for (const vm of this.$model.views()) {
         if (vm.isScopedElementView() && vm.viewOf.id === this.id) {
           views.add(vm)
@@ -267,6 +267,10 @@ export class ElementModel<A extends AnyAux = Any> {
     return this.$model.deployment.instancesOf(this)
   }
 
+  public hasMetadata(): boolean {
+    return !!this.$element.metadata && !isEmpty(this.$element.metadata)
+  }
+
   public getMetadata(): aux.Metadata<A>
   public getMetadata(field: aux.MetadataKey<A>): string | undefined
   public getMetadata(field?: aux.MetadataKey<A>) {

package/src/model/RelationModel.ts

@@ -1,11 +1,13 @@
-import { isTruthy } from 'remeda'
+import { isEmpty, isTruthy } from 'remeda'
 import type { AnyAux, Color, IteratorLike, Link, scalar } from '../types'
 import {
   type Relationship,
   type RelationshipLineType,
+  type RichTextOrEmpty,
   DefaultLineStyle,
   DefaultRelationshipColor,
   FqnRef,
+  RichText,
 } from '../types'
 import type * as aux from '../types/aux'
 import { commonAncestor } from '../utils/fqn'
@@ -13,6 +15,7 @@ import type { DeploymentRelationModel } from './DeploymentElementModel'
 import type { ElementModel } from './ElementModel'
 import type { isDeploymentRelationModel } from './guards'
 import type { LikeC4Model } from './LikeC4Model'
+import type { WithMetadata, WithTags } from './types'
 import type { LikeC4ViewModel, ViewsIterator } from './view/LikeC4ViewModel'
 
 export type RelationshipsIterator<A extends AnyAux> = IteratorLike<RelationshipModel<A>>
@@ -21,24 +24,20 @@ export type RelationshipsIterator<A extends AnyAux> = IteratorLike<RelationshipM
  * A relationship between two elements (in logical or deployment model)
  * use {@link isDeploymentRelationModel} guard to check if the relationship is a deployment relationship
  */
-export interface AnyRelationshipModel<A extends AnyAux> {
-  get id(): scalar.RelationId
-  get expression(): string
-  get title(): string | null
-  get technology(): string | null
-  get description(): string | null
-  get navigateTo(): LikeC4ViewModel<A> | null
-  get tags(): aux.Tags<A>
-  get kind(): aux.RelationKind<A> | null
-  get links(): ReadonlyArray<Link>
-  get color(): Color
-  get line(): RelationshipLineType
+export interface AnyRelationshipModel<A extends AnyAux> extends WithTags<A>, WithMetadata<A> {
+  readonly id: scalar.RelationId
+  readonly expression: string
+  readonly title: string | null
+  readonly technology: string | null
+  readonly description: RichTextOrEmpty
+  readonly navigateTo: LikeC4ViewModel<A> | null
+  readonly kind: aux.RelationKind<A> | null
+  readonly links: ReadonlyArray<Link>
+  readonly color: Color
+  readonly line: RelationshipLineType
   isDeploymentRelation(): this is DeploymentRelationModel<A>
   isModelRelation(): this is RelationshipModel<A>
-  getMetadata(): aux.Metadata<A>
-  getMetadata(field: aux.MetadataKey<A>): string | undefined
   views(): ViewsIterator<A>
-  isTagged(tag: aux.LooseTag<A>): boolean
 }
 
 export class RelationshipModel<A extends AnyAux = AnyAux> implements AnyRelationshipModel<A> {
@@ -83,11 +82,8 @@ export class RelationshipModel<A extends AnyAux = AnyAux> implements AnyRelation
     return this.$relationship.technology
   }
 
-  get description(): string | null {
-    if (!isTruthy(this.$relationship.description)) {
-      return null
-    }
-    return this.$relationship.description
+  get description(): RichTextOrEmpty {
+    return RichText.memoize(this, this.$relationship.description)
   }
 
   get navigateTo(): LikeC4ViewModel<A> | null {
@@ -134,6 +130,10 @@ export class RelationshipModel<A extends AnyAux = AnyAux> implements AnyRelation
     return true
   }
 
+  public hasMetadata(): boolean {
+    return !!this.$relationship.metadata && !isEmpty(this.$relationship.metadata)
+  }
+
   public getMetadata(): aux.Metadata<A>
   public getMetadata(field: aux.MetadataKey<A>): string | undefined
   public getMetadata(field?: aux.MetadataKey<A>) {

package/src/model/index.ts

@@ -45,6 +45,8 @@ export type {
   IncomingFilter,
   NodeOrId,
   OutgoingFilter,
+  WithMetadata,
+  WithTags,
 } from './types'
 
 export * from './guards'
@@ -58,3 +60,5 @@ export type {
   AuxFromLikeC4ModelData,
   SpecAux,
 } from '../types'
+
+export { RichText, type RichTextEmpty, type RichTextOrEmpty } from '../types'

package/src/model/types.ts

@@ -61,3 +61,14 @@ export type $ModelData<A extends AnyAux> = {
   computed: ComputedLikeC4ModelData<A>
   layouted: LayoutedLikeC4ModelData<A>
 }[aux.Stage<A>]
+
+export interface WithTags<A extends AnyAux> {
+  get tags(): aux.Tags<A>
+  isTagged(tag: aux.LooseTag<A>): boolean
+}
+
+export interface WithMetadata<A extends AnyAux> {
+  hasMetadata(): boolean
+  getMetadata(): aux.Metadata<A>
+  getMetadata(field: aux.MetadataKey<A>): string | undefined
+}

package/src/model/view/EdgeModel.ts

@@ -11,15 +11,16 @@ import {
   extractStep,
   isStepEdgeId,
 } from '../../types'
+import { type RichTextOrEmpty, RichText } from '../../types'
 import type { DeploymentRelationModel } from '../DeploymentElementModel'
 import type { RelationshipModel } from '../RelationModel'
-import type { $View } from '../types'
+import type { $View, WithTags } from '../types'
 import type { LikeC4ViewModel } from './LikeC4ViewModel'
 import type { NodeModel } from './NodeModel'
 
 export type EdgesIterator<A extends Any, V extends $View<A>> = IteratorLike<EdgeModel<A, V>>
 
-export class EdgeModel<A extends Any = Any, View extends $View<A> = $View<A>> {
+export class EdgeModel<A extends Any = Any, View extends $View<A> = $View<A>> implements WithTags<A> {
   #edge: ComputedEdge<A> | DiagramEdge<A>
   constructor(
     public readonly view: LikeC4ViewModel<A, View>,
@@ -39,11 +40,11 @@ export class EdgeModel<A extends Any = Any, View extends $View<A> = $View<A>> {
   }
 
   get label(): string | null {
-    return this.#edge.label
+    return this.#edge.label ?? null
   }
 
-  get description(): string | null {
-    return this.#edge.description ?? null
+  get description(): RichTextOrEmpty {
+    return RichText.memoize(this, this.#edge.description)
   }
 
   get technology(): string | null {

package/src/model/view/LikeC4ViewModel.ts

@@ -8,6 +8,7 @@ import type {
   ViewWithType,
 } from '../../types'
 import { _stage, _type } from '../../types'
+import { type RichTextOrEmpty, RichText } from '../../types'
 import type * as aux from '../../types/aux'
 import { DefaultMap, ifind, nonNullable } from '../../utils'
 import type { ElementModel } from '../ElementModel'
@@ -16,6 +17,7 @@ import {
   type $View,
   type EdgeOrId,
   type NodeOrId,
+  type WithTags,
   getId,
 } from '../types'
 import { type EdgesIterator, EdgeModel } from './EdgeModel'
@@ -25,7 +27,7 @@ export type ViewsIterator<A extends Any, V extends $View<A> = $View<A>> = Iterat
 
 export type InferViewType<V> = V extends AnyView<any> ? V[_type] : never
 
-export class LikeC4ViewModel<A extends Any = Any, V extends $View<A> = $View<A>> {
+export class LikeC4ViewModel<A extends Any = Any, V extends $View<A> = $View<A>> implements WithTags<A> {
   /**
    * Don't use in runtime, only for type inference
    */
@@ -91,6 +93,10 @@ export class LikeC4ViewModel<A extends Any = Any, V extends $View<A> = $View<A>>
     return this.$view.title
   }
 
+  get description(): RichTextOrEmpty {
+    return RichText.memoize(this, this.$view.description)
+  }
+
   get tags(): aux.Tags<A> {
     return this.$view.tags ?? []
   }
@@ -245,7 +251,7 @@ export class LikeC4ViewModel<A extends Any = Any, V extends $View<A> = $View<A>>
 
   public isScopedElementView(
     this: LikeC4ViewModel<any, any>,
-  ): this is LikeC4ViewModel.ScopedElementView<A, V> {
+  ): this is LikeC4ViewModel.ScopedElementView<A> {
     return this.$view[_type] === 'element' && isTruthy(this.$view.viewOf)
   }
 
@@ -264,8 +270,8 @@ export namespace LikeC4ViewModel {
   {
   }
 
-  export interface ScopedElementView<A extends Any, V extends $View<A> = $View<A>>
-    extends LikeC4ViewModel<A, ViewWithType<V, 'element'> & { viewOf: aux.StrictFqn<A> }>
+  export interface ScopedElementView<A extends Any>
+    extends LikeC4ViewModel<A, ViewWithType<$View<A>, 'element'> & { viewOf: aux.StrictFqn<A> }>
   {
     viewOf: ElementModel<A>
   }

package/src/model/view/NodeModel.ts

@@ -10,21 +10,23 @@ import {
   type IconUrl,
   type IteratorLike,
   type Link,
+  type RichTextOrEmpty,
   type scalar,
   GroupElementKind,
   isGroupElementKind,
+  RichText,
 } from '../../types'
 import type * as aux from '../../types/aux'
 import { memoizeProp } from '../../utils'
 import type { DeployedInstanceModel, DeploymentElementModel } from '../DeploymentElementModel'
 import type { ElementModel } from '../ElementModel'
-import type { $View, IncomingFilter, OutgoingFilter } from '../types'
+import type { $View, IncomingFilter, OutgoingFilter, WithTags } from '../types'
 import type { EdgesIterator } from './EdgeModel'
 import type { LikeC4ViewModel } from './LikeC4ViewModel'
 
 export type NodesIterator<M extends Any, V extends $View<M>> = IteratorLike<NodeModel<M, V>>
 
-export class NodeModel<A extends Any = Any, V extends $View<A> = $View<A>> {
+export class NodeModel<A extends Any = Any, V extends $View<A> = $View<A>> implements WithTags<A> {
   #node: ComputedNode<A> | DiagramNode<A>
 
   constructor(
@@ -46,8 +48,8 @@ export class NodeModel<A extends Any = Any, V extends $View<A> = $View<A>> {
     return this.#node.kind as any
   }
 
-  get description(): string | null {
-    return this.#node.description ?? null
+  get description(): RichTextOrEmpty {
+    return RichText.memoize(this, this.#node.description)
   }
 
   get technology(): string | null {

package/src/theme/index.ts

@@ -37,12 +37,19 @@ export const defaultTheme: LikeC4Theme = {
     lg: 24, // 1.5rem = 16px + 8px
     xl: 32, // 2rem
   },
+  /**
+   * Text sizes for titles
+   * https://typescale.com/
+   *
+   * Scale:  1.2
+   * Base:   16px
+   */
   textSizes: {
-    xs: 12,
-    sm: 14,
-    md: 19,
-    lg: 24,
-    xl: 32,
+    xs: 13.33,
+    sm: 16,
+    md: 19.2,
+    lg: 23.04,
+    xl: 27.65,
   },
 }