@likec4/generators 1.31.0 → 1.32.1

package/src/model/generate-aux.ts

@@ -0,0 +1,72 @@
+import {
+  compareNatural,
+  sortNaturalByFqn,
+} from '@likec4/core'
+import { type AnyLikeC4Model } from '@likec4/core/model'
+import { keys, map, pipe, values } from 'remeda'
+
+function toUnion(elements: string[]) {
+  if (elements.length === 0) {
+    return 'never'
+  }
+  let union = elements
+    .sort(compareNatural)
+    .map(v => `  | ${JSON.stringify(v)}`)
+  return union.join('\n').trimStart()
+}
+
+function elementIdToUnion(_elements: Record<string, { id: string }>) {
+  const elements = values(_elements)
+  if (elements.length === 0) {
+    return 'never'
+  }
+  let union = pipe(
+    elements,
+    sortNaturalByFqn,
+    map(v => `  | ${JSON.stringify(v.id)}`),
+  )
+  return union.join('\n').trimStart()
+}
+
+export function generateAux(model: AnyLikeC4Model) {
+  return `
+import type { Aux, SpecAux } from '@likec4/core/types';
+
+export type $Specs = SpecAux<
+  // Element kinds
+  ${toUnion(keys(model.specification.elements))},
+  // Deployment kinds
+  ${toUnion(keys(model.specification.deployments ?? {}))},
+  // Relationship kinds
+  ${toUnion(keys(model.specification.relationships ?? {}))},
+  // Tags
+  ${toUnion(keys(model.specification.tags ?? {}))},
+  // Metadata keys
+  ${toUnion(model.specification.metadataKeys ?? [])}
+>
+
+export type $Aux = Aux<
+  ${JSON.stringify(model.stage)},
+  // Elements
+  ${elementIdToUnion(model.$data.elements)},
+  // Deployments
+  ${elementIdToUnion(model.$data.deployments.elements)},
+  // Views
+  ${toUnion(keys(model.$data.views))},
+  // Project ID
+  ${JSON.stringify(model.projectId)},
+  $Specs
+>
+
+export type $ElementId = $Aux['ElementId']
+export type $DeploymentId = $Aux['DeploymentId']
+export type $ViewId = $Aux['ViewId']
+
+export type $ElementKind = $Aux['ElementKind']
+export type $RelationKind = $Aux['RelationKind']
+export type $DeploymentKind = $Aux['DeploymentKind']
+export type $Tag = $Aux['Tag']
+export type $Tags = readonly $Aux['Tag'][]
+export type $MetadataKey = $Aux['MetadataKey']
+`.trimStart()
+}

package/src/model/generate-likec4-model.spec.ts

@@ -1,6 +1,6 @@
-import { LikeC4Model } from '@likec4/core'
 import { Builder } from '@likec4/core/builder'
-import { computeViews, viewsWithReadableEdges } from '@likec4/core/compute-view'
+import { computeParsedModelData, viewsWithReadableEdges } from '@likec4/core/compute-view'
+import { LikeC4Model } from '@likec4/core/model'
 import { describe, it } from 'vitest'
 import { generateLikeC4Model } from './generate-likec4-model'
 
@@ -53,6 +53,11 @@ const {
       },
     },
   },
+  tags: {
+    internal: {},
+    external: {},
+  },
+  metadataKeys: ['key1'],
   deployments: {
     env: {},
     zone: {},
@@ -70,11 +75,17 @@ const builder = b
           mobile('mobile'),
         ),
         component('auth'),
-        component('backend').with(
+        component('backend', {
+          metadata: {
+            key1: 'value1',
+          },
+          tags: ['external'],
+        }).with(
           component('api'),
           component('graphql'),
         ),
         component('media', {
+          tags: ['internal'],
           shape: 'storage',
         }),
       ),
@@ -83,6 +94,9 @@ const builder = b
           shape: 'storage',
         }),
         component('s3', {
+          metadata: {
+            key1: 'value2',
+          },
           shape: 'storage',
         }),
       ),
@@ -103,7 +117,13 @@ const builder = b
       $m.rel('cloud.backend.api', 'aws.rds', 'reads/writes'),
       $m.rel('cloud.backend.api', 'email', 'sends emails'),
       $m.rel('cloud.media', 'aws.s3', 'uploads'),
-      $m.rel('email', 'customer', 'sends emails'),
+      $m.rel('email', 'customer', {
+        tags: ['external'],
+        title: 'sends emails',
+        metadata: {
+          key1: 'value3',
+        },
+      }),
     ),
     deployment(
       node('customer').with(
@@ -148,11 +168,17 @@ const builder = b
       ),
     ),
   )
-const computed = viewsWithReadableEdges(computeViews(builder.build()))
-const m = LikeC4Model.create(computed)
 
 describe('generateLikeC4Model', () => {
-  it('should generate', async ({ expect }) => {
-    await expect(generateLikeC4Model(m)).toMatchFileSnapshot('__snapshots__/likec4-model.snap')
+  it('parsed-model', async ({ expect }) => {
+    const parsed = builder.build()
+    const m = LikeC4Model.create(parsed)
+    await expect(generateLikeC4Model(m)).toMatchFileSnapshot('__snapshots__/likec4.parsed-model.snap')
+  })
+
+  it('computed-model', async ({ expect }) => {
+    const computed = viewsWithReadableEdges(computeParsedModelData(builder.build()))
+    const m = LikeC4Model.create(computed)
+    await expect(generateLikeC4Model(m)).toMatchFileSnapshot('__snapshots__/likec4.computed-model.snap')
   })
 })

package/src/model/generate-likec4-model.ts

@@ -1,9 +1,14 @@
-import { type LikeC4Model } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
 import JSON5 from 'json5'
 import { CompositeGeneratorNode, toString } from 'langium/generate'
+import { capitalize } from 'remeda'
+import { generateAux } from './generate-aux'
 
-export function generateLikeC4Model(model: LikeC4Model) {
+export function generateLikeC4Model(model: LikeC4Model<any>) {
   const out = new CompositeGeneratorNode()
+  const aux = generateAux(model)
+  const ModelData = capitalize(model.stage) + 'LikeC4ModelData'
+
   out.appendTemplate`
     /* prettier-ignore-start */
     /* eslint-disable */
@@ -13,19 +18,13 @@ export function generateLikeC4Model(model: LikeC4Model) {
      * DO NOT EDIT MANUALLY!
      ******************************************************************************/
 
-    import { LikeC4Model } from 'likec4/model'
-
-    export const likeC4Model = LikeC4Model.fromDump(${
-    JSON5.stringify(model.$model, {
-      space: 2,
-      quote: '\'',
-    })
-  })
+    import { LikeC4Model } from '@likec4/core/model'
+    import type { ${ModelData} } from '@likec4/core/types'
+    ${aux}
 
-    export type LikeC4ModelTypes = typeof likeC4Model.Aux
-    export type LikeC4ElementId = LikeC4ModelTypes['Fqn']
-    export type LikeC4DeploymentId = LikeC4ModelTypes['Deployment']
-    export type LikeC4ViewId = LikeC4ModelTypes['ViewId']
+    export const likec4model: LikeC4Model<$Aux> = new LikeC4Model(<${ModelData}<$Aux>>(${
+    JSON5.stringify(model.$data, { space: 2, quote: '\'' })
+  } as unknown))
 
     /* prettier-ignore-end */
   `

package/src/puml/__snapshots__/generate-puml.spec.ts.snap

@@ -0,0 +1,184 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generate puml - fakeComputedView 3 Levels 1`] = `
+"@startuml
+title "Context: Cloud"
+top to bottom direction
+
+hide stereotype
+skinparam ranksep 60
+skinparam nodesep 30
+skinparam {
+  arrowFontSize 10
+  defaultTextAlignment center
+  wrapWidth 200
+  maxMessageSize 100
+  shadowing false
+}
+
+skinparam rectangle<<Amazon>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+skinparam rectangle<<Customer>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+skinparam rectangle<<Support>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+skinparam rectangle<<CloudBackendGraphql>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+skinparam rectangle<<CloudBackendStorage>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+skinparam rectangle<<CloudFrontendAdminPanel>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+skinparam rectangle<<CloudFrontendDashboard>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+rectangle "==amazon" <<Amazon>> as Amazon
+rectangle "cloud" <<Cloud>> as Cloud {
+  skinparam RectangleBorderColor<<Cloud>> #3b82f6
+  skinparam RectangleFontColor<<Cloud>> #3b82f6
+  skinparam RectangleBorderStyle<<Cloud>> dashed
+
+  rectangle "backend" <<CloudBackend>> as CloudBackend {
+    skinparam RectangleBorderColor<<CloudBackend>> #3b82f6
+    skinparam RectangleFontColor<<CloudBackend>> #3b82f6
+    skinparam RectangleBorderStyle<<CloudBackend>> dashed
+
+    rectangle "==graphql" <<CloudBackendGraphql>> as CloudBackendGraphql
+    rectangle "==storage" <<CloudBackendStorage>> as CloudBackendStorage
+  }
+  rectangle "==adminPanel" <<CloudFrontendAdminPanel>> as CloudFrontendAdminPanel
+  rectangle "==dashboard" <<CloudFrontendDashboard>> as CloudFrontendDashboard
+}
+rectangle "==customer" <<Customer>> as Customer
+rectangle "==support" <<Support>> as Support
+
+CloudFrontendDashboard .[#777777,thickness=2].> CloudBackendGraphql
+CloudFrontendAdminPanel .[#777777,thickness=2].> CloudBackendGraphql
+CloudBackendStorage .[#777777,thickness=2].> Amazon
+CloudBackendGraphql .[#777777,thickness=2].> CloudBackendStorage
+Support .[#777777,thickness=2].> CloudFrontendAdminPanel
+Customer .[#777777,thickness=2].> CloudFrontendDashboard
+@enduml
+"
+`;
+
+exports[`generate puml - fakeDiagram 1`] = `
+"@startuml
+title "fakeView"
+top to bottom direction
+
+hide stereotype
+skinparam ranksep 60
+skinparam nodesep 30
+skinparam {
+  arrowFontSize 10
+  defaultTextAlignment center
+  wrapWidth 200
+  maxMessageSize 100
+  shadowing false
+}
+
+skinparam rectangle<<Amazon>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+skinparam rectangle<<Customer>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+skinparam rectangle<<Support>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+skinparam rectangle<<CloudBackend>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+skinparam rectangle<<CloudFrontend>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+rectangle "==amazon" <<Amazon>> as Amazon
+rectangle "cloud" <<Cloud>> as Cloud {
+  skinparam RectangleBorderColor<<Cloud>> #3b82f6
+  skinparam RectangleFontColor<<Cloud>> #3b82f6
+  skinparam RectangleBorderStyle<<Cloud>> dashed
+
+  rectangle "==backend" <<CloudBackend>> as CloudBackend
+  rectangle "==frontend" <<CloudFrontend>> as CloudFrontend
+}
+rectangle "==customer" <<Customer>> as Customer
+rectangle "==support" <<Support>> as Support
+
+CloudFrontend .[#777777,thickness=2].> CloudBackend : "<color:#777777>requests<color:#777777>"
+CloudBackend .[#777777,thickness=2].> Amazon
+Support .[#777777,thickness=2].> CloudFrontend
+Customer .[#777777,thickness=2].> CloudFrontend : "<color:#777777>opens<color:#777777>"
+@enduml
+"
+`;
+
+exports[`generate puml - fakeDiagram2 1`] = `
+"@startuml
+title "frontend"
+top to bottom direction
+
+hide stereotype
+skinparam ranksep 60
+skinparam nodesep 30
+skinparam {
+  arrowFontSize 10
+  defaultTextAlignment center
+  wrapWidth 200
+  maxMessageSize 100
+  shadowing false
+}
+
+skinparam rectangle<<Client>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+skinparam rectangle<<SystemBackend>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+skinparam rectangle<<SystemFrontend>>{
+  BackgroundColor #3b82f6
+  FontColor #FFFFFF
+  BorderColor #3b82f6
+}
+rectangle "==client" <<Client>> as Client
+rectangle "==backend" <<SystemBackend>> as SystemBackend
+rectangle "==frontend" <<SystemFrontend>> as SystemFrontend
+
+SystemFrontend .[#777777,thickness=2].> SystemBackend : "<color:#777777>requests<color:#777777>"
+Client .[#777777,thickness=2].> SystemFrontend : "<color:#777777>opens<color:#777777>"
+@enduml
+"
+`;

package/src/puml/generate-puml.spec.ts

@@ -0,0 +1,26 @@
+import type { LikeC4ViewModel } from '@likec4/core/model'
+import type { aux, ProcessedView } from '@likec4/core/types'
+import { expect, test, vi } from 'vitest'
+import { fakeComputedView3Levels, fakeDiagram, fakeDiagram2 } from '../__mocks__/data'
+import { generatePuml } from './generate-puml'
+
+const mockViewModel = vi.fn(function($view: ProcessedView) {
+  return {
+    $view,
+    $model: {
+      specification: {},
+    },
+  } as unknown as LikeC4ViewModel<aux.Unknown>
+})
+
+test('generate puml - fakeDiagram', () => {
+  expect(generatePuml(mockViewModel(fakeDiagram))).toMatchSnapshot()
+})
+
+test('generate puml - fakeDiagram2', () => {
+  expect(generatePuml(mockViewModel(fakeDiagram2))).toMatchSnapshot()
+})
+
+test('generate puml - fakeComputedView 3 Levels', () => {
+  expect(generatePuml(mockViewModel(fakeComputedView3Levels))).toMatchSnapshot()
+})

package/src/puml/generate-puml.ts

@@ -0,0 +1,264 @@
+import type { aux, LikeC4ViewModel } from '@likec4/core/model'
+import type {
+  ComputedEdge,
+  ComputedNode,
+  ElementThemeColorValues,
+  KeysOf,
+  NodeId,
+  ProcessedView,
+  RelationshipThemeColorValues,
+  ThemeColorValues,
+} from '@likec4/core/types'
+import { CompositeGeneratorNode, joinToNode, NL, toString } from 'langium/generate'
+import { isNullish as isNil } from 'remeda'
+
+const capitalizeFirstLetter = (value: string) => value.charAt(0).toLocaleUpperCase() + value.slice(1)
+
+const fqnName = (nodeId: string): string => nodeId.split('.').map(capitalizeFirstLetter).join('')
+
+const nodeName = (node: ComputedNode): string => {
+  return fqnName(node.parent ? node.id.slice(node.parent.length + 1) : node.id)
+}
+
+const pumlColor = (
+  color: string | undefined,
+  customColorProvider: (colorKey: string) => string | undefined,
+  defaultColor: string = '#3b82f6',
+) => {
+  switch (color) {
+    case 'blue':
+    case 'primary': {
+      return '#3b82f6'
+    }
+    case 'amber': {
+      return '#a35829'
+    }
+    case 'gray': {
+      return '#737373'
+    }
+    case 'green': {
+      return '#428a4f'
+    }
+    case 'indigo': {
+      return '#6366f1'
+    }
+    case 'slate':
+    case 'muted': {
+      return '#64748b'
+    }
+    case 'red': {
+      return '#ac4d39'
+    }
+    case 'sky':
+    case 'secondary': {
+      return '#0284c7'
+    }
+    case null:
+    case undefined: {
+      return defaultColor
+    }
+    default:
+      return customColorProvider(color) || color
+  }
+}
+
+const pumlDirection = ({ autoLayout }: ProcessedView) => {
+  switch (autoLayout.direction) {
+    case 'TB': {
+      return 'top to bottom'
+    }
+    case 'BT': {
+      console.warn('Bottom to top direction is not supported. Defaulting to top to bottom.')
+      return 'top to bottom'
+    }
+    case 'LR': {
+      return 'left to right'
+    }
+    case 'RL': {
+      console.warn('Right to left direction is not supported. Defaulting to left to right.')
+      return 'left to right'
+    }
+  }
+}
+
+const pumlShape = ({ shape }: ComputedNode) => {
+  switch (shape) {
+    case 'queue':
+    case 'rectangle':
+    case 'person': {
+      return shape
+    }
+    case 'storage':
+    case 'cylinder': {
+      return 'database' as const
+    }
+    case 'mobile':
+    case 'browser': {
+      return 'rectangle' as const
+    }
+  }
+}
+
+const escapeLabel = (label: string | null | undefined) => isNil(label) ? null : JSON.stringify(label).slice(1, -1)
+
+export function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>) {
+  const view = viewmodel.$view
+  const customColorDefinitions = viewmodel.$model.specification.customColors ?? {}
+  const { nodes, edges } = view
+  const customColors = new Map<string, ThemeColorValues>(Object.entries(customColorDefinitions))
+  const elemntColorProvider = (key: KeysOf<ElementThemeColorValues>) => (colorKey: string) =>
+    customColors.get(colorKey)?.elements[key]
+  const relationshipsColorProvider = (key: KeysOf<RelationshipThemeColorValues>) => (colorKey: string) =>
+    customColors.get(colorKey)?.relationships[key]
+  const names = new Map<NodeId, string>()
+
+  const printHeader = () => {
+    return new CompositeGeneratorNode()
+      .append('title "', view.title || view.id, '"', NL)
+      .append(pumlDirection(view), ' direction', NL)
+  }
+
+  const printTheme = () => {
+    return new CompositeGeneratorNode()
+      .append('hide stereotype', NL)
+      .append('skinparam ranksep ', '60', NL)
+      .append('skinparam nodesep ', '30', NL)
+      .append('skinparam {', NL)
+      .indent({
+        indentedChildren: indent =>
+          indent
+            .append('arrowFontSize ', '10', NL)
+            .append('defaultTextAlignment ', 'center', NL)
+            .append('wrapWidth ', '200', NL)
+            .append('maxMessageSize ', '100', NL)
+            .append('shadowing ', 'false', NL),
+        indentation: 2,
+      })
+      .append('}', NL)
+  }
+
+  const printStereotypes = (node: ComputedNode): CompositeGeneratorNode => {
+    const shape = pumlShape(node)
+    const fqn = fqnName(node.id)
+
+    return new CompositeGeneratorNode()
+      .append('skinparam ', shape, '<<', fqn, '>>', '{', NL)
+      .indent({
+        indentedChildren: indent =>
+          indent
+            .append('BackgroundColor ', pumlColor(node.color, elemntColorProvider('fill')), NL)
+            .append(
+              'FontColor ',
+              customColors.has(node.color)
+                ? pumlColor(node.color, elemntColorProvider('hiContrast'))
+                : '#FFFFFF',
+              NL,
+            )
+            .append('BorderColor ', pumlColor(node.color, elemntColorProvider('stroke')), NL),
+        indentation: 2,
+      })
+      .append('}', NL)
+  }
+
+  const printNode = (node: ComputedNode): CompositeGeneratorNode => {
+    const shape = pumlShape(node)
+    const fqn = fqnName(node.id)
+    const label = escapeLabel(node.title) || nodeName(node)
+    const tech = escapeLabel(node.technology)
+    names.set(node.id, fqn)
+
+    return new CompositeGeneratorNode()
+      .append(shape, ' ')
+      .append('"')
+      .append('==', label)
+      .appendIf(!!tech, '\\n', '<size:10>[', tech!, ']</size>')
+      .appendIf(!!node.description, '\\n\\n', escapeLabel(node.description)!)
+      .append('"', ' <<', fqn, '>> ', 'as ', fqn, NL)
+  }
+
+  const printBoundary = (node: ComputedNode): CompositeGeneratorNode => {
+    const label = escapeLabel(node.title) || nodeName(node)
+    const fqn = fqnName(node.id)
+    names.set(node.id, fqn)
+
+    return new CompositeGeneratorNode()
+      .append('rectangle "', label, '" <<', fqn, '>> as ', fqn, ' {', NL)
+      .indent({
+        indentedChildren: indent =>
+          indent
+            .append(
+              'skinparam ',
+              'RectangleBorderColor<<',
+              fqn,
+              '>> ',
+              pumlColor(node.color, elemntColorProvider('fill')),
+              NL,
+            )
+            .append(
+              'skinparam ',
+              'RectangleFontColor<<',
+              fqn,
+              '>> ',
+              pumlColor(node.color, elemntColorProvider('fill')),
+              NL,
+            )
+            .append('skinparam ', 'RectangleBorderStyle<<', fqn, '>> ', 'dashed', NL, NL)
+            .append(joinToNode(
+              nodes.filter(n => n.parent === node.id),
+              c => c.children.length > 0 ? printBoundary(c) : printNode(c),
+            )),
+        indentation: 2,
+      })
+      .append('}', NL)
+  }
+
+  const printEdge = (edge: ComputedEdge): CompositeGeneratorNode => {
+    const tech = escapeLabel(edge.technology) || ''
+    const label = escapeLabel(edge.label) || ''
+    const color = pumlColor(edge.color, relationshipsColorProvider('lineColor'), '#777777')
+
+    const colorTag = (color: string) => `<color:${color}>`
+
+    return new CompositeGeneratorNode()
+      .append(names.get(edge.source), ' .[', color, ',thickness=2].> ', names.get(edge.target))
+      .appendIf(!!(label || tech), ' : "', colorTag(color))
+      .appendIf(!!label, label, colorTag(color))
+      .appendIf(!!(label && tech), '\\n')
+      .appendIf(!!tech, colorTag(color), '<size:8>[', tech, ']</size>')
+      .appendIf(!!(label || tech), '"')
+      .append(NL)
+  }
+
+  return toString(
+    new CompositeGeneratorNode()
+      .append('@startuml', NL)
+      .append(printHeader(), NL)
+      .append(printTheme(), NL)
+      .append(
+        joinToNode(
+          nodes.filter(n => n.children.length == 0),
+          n => printStereotypes(n),
+          {
+            appendNewLineIfNotEmpty: true,
+          },
+        ),
+      )
+      .append(
+        joinToNode(
+          nodes.filter(n => isNil(n.parent)),
+          n => n.children.length > 0 ? printBoundary(n) : printNode(n),
+          {
+            appendNewLineIfNotEmpty: true,
+          },
+        ),
+      )
+      .appendIf(
+        edges.length > 0,
+        NL,
+        joinToNode(edges, e => printEdge(e), {
+          appendNewLineIfNotEmpty: true,
+        }),
+      )
+      .append(`@enduml`, NL),
+  )
+}

package/src/puml/index.ts

@@ -0,0 +1 @@
+export * from './generate-puml'