@likec4/generators 1.5.0 → 1.29.0

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

@@ -0,0 +1,55 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`generate mermaid - fakeComputedView 3 Levels 1`] = `
+"---
+title: "Context: Cloud"
+---
+graph TB
+  Amazon[amazon]
+  subgraph Cloud["cloud"]
+    subgraph Cloud.Backend["backend"]
+      Cloud.Backend.Graphql[graphql]
+      Cloud.Backend.Storage[storage]
+    end
+    Cloud.FrontendAdminPanel[adminPanel]
+    Cloud.FrontendDashboard[dashboard]
+  end
+  Customer[customer]
+  Support[support]
+  Cloud.FrontendDashboard -.-> Cloud.Backend.Graphql
+  Cloud.FrontendAdminPanel -.-> Cloud.Backend.Graphql
+  Cloud.Backend.Storage -.-> Amazon
+  Cloud.Backend.Graphql -.-> Cloud.Backend.Storage
+  Support -.-> Cloud.FrontendAdminPanel
+  Customer -.-> Cloud.FrontendDashboard
+"
+`;
+
+exports[`generate mermaid - fakeDiagram 1`] = `
+"graph TB
+  Amazon[amazon]
+  subgraph Cloud["cloud"]
+    Cloud.Backend[backend]
+    Cloud.Frontend[frontend]
+  end
+  Customer[customer]
+  Support[support]
+  Cloud.Frontend -. "requests" .-> Cloud.Backend
+  Cloud.Backend -.-> Amazon
+  Support -.-> Cloud.Frontend
+  Customer -. "opens" .-> Cloud.Frontend
+"
+`;
+
+exports[`generate mermaid - fakeDiagram2 1`] = `
+"---
+title: "frontend"
+---
+graph TB
+  Client[client]
+  SystemBackend[backend]
+  SystemFrontend[frontend]
+  SystemFrontend -. "requests" .-> SystemBackend
+  Client -. "opens" .-> SystemFrontend
+"
+`;

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

@@ -0,0 +1,15 @@
+import { expect, test } from 'vitest'
+import { fakeComputedView3Levels, fakeDiagram, fakeDiagram2 } from '../__mocks__/data'
+import { generateMermaid } from './generate-mmd'
+
+test('generate mermaid - fakeDiagram', () => {
+  expect(generateMermaid(fakeDiagram)).toMatchSnapshot()
+})
+
+test('generate mermaid - fakeDiagram2', () => {
+  expect(generateMermaid(fakeDiagram2)).toMatchSnapshot()
+})
+
+test('generate mermaid - fakeComputedView 3 Levels', () => {
+  expect(generateMermaid(fakeComputedView3Levels)).toMatchSnapshot()
+})

package/src/mmd/generate-mmd.ts

@@ -0,0 +1,110 @@
+import type { ComputedEdge, ComputedNode, ComputedView, NodeId } from '@likec4/core'
+import { CompositeGeneratorNode, expandToNode, joinToNode, NL, NLEmpty, 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 mmdshape = ({ shape }: ComputedNode): [start: string, end: string] => {
+  switch (shape) {
+    case 'queue':
+    case 'cylinder':
+      return ['[(', ')]']
+    case 'person': {
+      return ['[fa:fa-user ', ']']
+    }
+    case 'storage':
+      return ['([', '])']
+    case 'mobile':
+    case 'browser':
+    case 'rectangle': {
+      return ['[', ']']
+    }
+  }
+}
+
+export function generateMermaid<V extends ComputedView>(view: V) {
+  const { nodes, edges } = view
+  const names = new Map<NodeId, string>()
+
+  const printNode = (node: ComputedNode, parentName?: string): CompositeGeneratorNode => {
+    const name = nodeName(node)
+    const fqnName = (parentName ? parentName + '.' : '') + name
+    names.set(node.id, fqnName)
+
+    const label = node.title.replaceAll('\n', '\\n')
+    const shape = mmdshape(node)
+
+    const baseNode = new CompositeGeneratorNode()
+    if (node.children.length > 0) {
+      baseNode
+        .append('subgraph ', fqnName, '[', JSON.stringify(node.title), ']', NL)
+        .indent({
+          indentedChildren: [
+            joinToNode(
+              nodes.filter(n => n.parent === node.id),
+              n => printNode(n, fqnName),
+              {
+                appendNewLineIfNotEmpty: true
+              }
+            )
+          ],
+          indentation: 2
+        })
+        .append('end', NL)
+    } else {
+      baseNode.append(fqnName, shape[0], label, shape[1])
+    }
+    return baseNode
+  }
+  //     return `${names.get(edge.source)} -> ${names.get(edge.target)}${edge.label ? ': ' + edge.label : ''}`
+  const printEdge = (edge: ComputedEdge): CompositeGeneratorNode => {
+    return new CompositeGeneratorNode().append(
+      names.get(edge.source),
+      ' -.',
+      edge.label ? ' "' + edge.label.replaceAll('\n', '\\n') + '" .-' : '-',
+      '> ',
+      names.get(edge.target)
+    )
+  }
+
+  return toString(
+    new CompositeGeneratorNode()
+      .appendIf(
+        view.title !== null && view.title.length > 0,
+        '---',
+        NL,
+        `title: ${JSON.stringify(view.title)}`,
+        NL,
+        '---',
+        NL
+      )
+      .append('graph ', view.autoLayout.direction, NL)
+      .indent({
+        indentedChildren: indent => {
+          indent
+            .append(
+              joinToNode(
+                nodes.filter(n => isNil(n.parent)),
+                n => printNode(n),
+                {
+                  appendNewLineIfNotEmpty: true
+                }
+              )
+            )
+            .appendIf(
+              edges.length > 0,
+              joinToNode(edges, e => printEdge(e), {
+                appendNewLineIfNotEmpty: true
+              })
+            )
+        },
+        indentation: 2
+      })
+  )
+}

package/src/mmd/index.ts

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