@likec4/generators 1.46.3 → 1.47.0

package/dist/d2/generate-d2.js

@@ -26,12 +26,16 @@ const d2shape = ({ shape }) => {
     case "queue":
     case "cylinder":
     case "rectangle":
-    case "person": {
+    case "document": {
       return shape;
     }
+    case "person": {
+      return "c4-person";
+    }
     case "storage": {
       return "stored_data";
     }
+    case "bucket":
     case "mobile":
     case "browser": {
       return "rectangle";

package/dist/mmd/generate-mmd.js

@@ -1,3 +1,4 @@
+import { nonexhaustive } from "@likec4/core";
 import { CompositeGeneratorNode, joinToNode, NL, toString } from "langium/generate";
 import { isNullish as isNil } from "remeda";
 const capitalizeFirstLetter = (value) => value.charAt(0).toLocaleUpperCase() + value.slice(1);
@@ -5,21 +6,37 @@ const fqnName = (nodeId) => nodeId.split(".").map(capitalizeFirstLetter).join(""
 const nodeName = (node) => {
   return fqnName(node.parent ? node.id.slice(node.parent.length + 1) : node.id);
 };
-const mmdshape = ({ shape }) => {
+const toSingleQuotes = (str) => str.replace(/\\?"/g, `'`);
+const mmdshape = ({ shape, title }) => {
+  const label = `label: ${JSON.stringify(title)}`;
   switch (shape) {
-    case "queue":
-    case "cylinder":
-      return ["[(", ")]"];
+    case "queue": {
+      return `@{ shape: horizontal-cylinder, ${label} }`;
+    }
     case "person": {
-      return ["[fa:fa-user ", "]"];
+      return `@{ icon: "fa:user", shape: rounded, ${label} }`;
+    }
+    case "storage": {
+      return `@{ shape: disk, ${label} }`;
+    }
+    case "cylinder": {
+      return `@{ shape: cylinder, ${label} }`;
     }
-    case "storage":
-      return ["([", "])"];
     case "mobile":
-    case "browser":
+    case "browser": {
+      return `@{ shape: rounded, ${label} }`;
+    }
+    case "bucket": {
+      return `@{ shape: trap-t, ${label} }`;
+    }
     case "rectangle": {
-      return ["[", "]"];
+      return `@{ shape: rectangle, ${label} }`;
+    }
+    case "document": {
+      return `@{ shape: doc, ${label} }`;
     }
+    default:
+      nonexhaustive(shape);
   }
 };
 export function generateMermaid(viewmodel) {
@@ -30,11 +47,10 @@ export function generateMermaid(viewmodel) {
     const name = nodeName(node);
     const fqnName2 = (parentName ? parentName + "." : "") + name;
     names.set(node.id, fqnName2);
-    const label = node.title.replaceAll("\n", "\\n");
-    const shape = mmdshape(node);
     const baseNode = new CompositeGeneratorNode();
     if (node.children.length > 0) {
-      baseNode.append("subgraph ", fqnName2, "[", JSON.stringify(node.title), "]", NL).indent({
+      const label = toSingleQuotes(node.title);
+      baseNode.append("subgraph ", fqnName2, '["`', label, '`"]', NL).indent({
         indentedChildren: [
           joinToNode(
             nodes.filter((n) => n.parent === node.id),
@@ -47,7 +63,7 @@ export function generateMermaid(viewmodel) {
         indentation: 2
       }).append("end", NL);
     } else {
-      baseNode.append(fqnName2, shape[0], label, shape[1]);
+      baseNode.append(fqnName2, mmdshape(node));
     }
     return baseNode;
   };
@@ -55,17 +71,16 @@ export function generateMermaid(viewmodel) {
     return new CompositeGeneratorNode().append(
       names.get(edge.source),
       " -.",
-      edge.label ? ' "' + edge.label.replaceAll("\n", "\\n") + '" .-' : "-",
+      edge.label ? ' "`' + toSingleQuotes(edge.label) + '`" .-' : "-",
       "> ",
       names.get(edge.target)
     );
   };
   return toString(
-    new CompositeGeneratorNode().appendIf(
-      view.title !== null && view.title.length > 0,
+    new CompositeGeneratorNode().append(
       "---",
       NL,
-      `title: ${JSON.stringify(view.title)}`,
+      `title: ${JSON.stringify(toSingleQuotes(viewmodel.titleOrId))}`,
       NL,
       "---",
       NL

package/dist/puml/generate-puml.js

@@ -1,8 +1,11 @@
+import { nonexhaustive } from "@likec4/core";
 import { RichText } from "@likec4/core/types";
 import { CompositeGeneratorNode, joinToNode, NL, toString } from "langium/generate";
-import { isNullish as isNil } from "remeda";
+import { isEmptyish, isNullish as isNil } from "remeda";
 const capitalizeFirstLetter = (value) => value.charAt(0).toLocaleUpperCase() + value.slice(1);
-const fqnName = (nodeId) => nodeId.split(".").map(capitalizeFirstLetter).join("");
+const fqnName = (nodeId) => {
+  return nodeId.split(/[.-]/).map(capitalizeFirstLetter).join("");
+};
 const nodeName = (node) => {
   return fqnName(node.parent ? node.id.slice(node.parent.length + 1) : node.id);
 };
@@ -41,13 +44,17 @@ const pumlShape = ({ shape }) => {
     case "cylinder": {
       return "database";
     }
+    case "document":
     case "mobile":
+    case "bucket":
     case "browser": {
       return "rectangle";
     }
+    default:
+      nonexhaustive(shape);
   }
 };
-const escapeLabel = (label) => isNil(label) ? null : JSON.stringify(label).slice(1, -1);
+const escapeLabel = (label) => isEmptyish(label) ? null : JSON.stringify(label).slice(1, -1).replace(/\\"/g, '"');
 export function generatePuml(viewmodel) {
   const view = viewmodel.$view;
   const colors = viewmodel.$model.$styles.theme.colors;
@@ -56,7 +63,7 @@ export function generatePuml(viewmodel) {
   const relationshipsColorProvider = (key) => (colorKey) => colorKey in colors ? colors[colorKey].relationships[key] : void 0;
   const names = /* @__PURE__ */ new Map();
   const printHeader = () => {
-    return new CompositeGeneratorNode().append('title "', view.title || view.id, '"', NL).append(pumlDirection(view), " direction", NL);
+    return new CompositeGeneratorNode().append('title "', viewmodel.titleOrId, '"', 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({
@@ -83,7 +90,7 @@ export function generatePuml(viewmodel) {
     const tech = escapeLabel(node.technology);
     names.set(node.id, fqn);
     const description = RichText.from(node.description);
-    return new CompositeGeneratorNode().append(shape, " ").append('"').append("==", label).appendIf(!!tech, "\\n", "<size:10>[", tech, "]</size>").appendIf(description.nonEmpty, "\\n\\n", escapeLabel(description.text)).append('"', " <<", fqn, ">> ", "as ", fqn, NL);
+    return new CompositeGeneratorNode().append(shape, " ").append('"').append("==", label).appendIf(!!tech, `\\n<size:10>[`, tech, "]</size>").appendIf(description.nonEmpty, `\\n\\n`, escapeLabel(description.text)).append('"', " <<", fqn, ">> ", "as ", fqn, NL);
   };
   const printBoundary = (node) => {
     const label = escapeLabel(node.title) || nodeName(node);
@@ -112,11 +119,28 @@ export function generatePuml(viewmodel) {
     }).append("}", NL);
   };
   const printEdge = (edge) => {
-    const tech = escapeLabel(edge.technology) || "";
-    const label = escapeLabel(edge.label) || "";
+    const tech = edge.technology || "";
+    const label = edge.label || tech;
     const color = pumlColor(edge.color, relationshipsColorProvider("line"), "#777777");
-    const colorTag = (color2) => `<color:${color2}>`;
-    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);
+    const withColor = (text) => `<color:${color}>${text.replaceAll('"', `'`)}`;
+    const out = new CompositeGeneratorNode().append(
+      names.get(edge.source),
+      " .[",
+      color,
+      ",thickness=2].> ",
+      names.get(edge.target)
+    );
+    if (label || tech) {
+      out.append(
+        " : ",
+        // Prepend color to each line
+        label.split("\n").map((l) => isEmptyish(l) ? l : withColor(l)).join("\\n")
+      );
+      if (tech && tech !== label) {
+        out.append("\\n<size:8>[", withColor(tech), "]</size>");
+      }
+    }
+    return out.append(NL);
   };
   return toString(
     new CompositeGeneratorNode().append("@startuml", NL).append(printHeader(), NL).append(printTheme(), NL).append(

package/dist/puml/index.d.ts

@@ -1 +1 @@
-export * from './generate-puml';
+export { generatePuml } from './generate-puml';

package/dist/puml/index.js

@@ -1 +1 @@
-export * from "./generate-puml.js";
+export { generatePuml } from "./generate-puml.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/generators",
-  "version": "1.46.3",
+  "version": "1.47.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -39,15 +39,15 @@
     "json5": "^2.2.3",
     "langium": "3.5.0",
     "remeda": "^2.32.0",
-    "@likec4/core": "1.46.3"
+    "@likec4/core": "1.47.0"
   },
   "devDependencies": {
     "@types/node": "~22.19.3",
     "typescript": "5.9.3",
     "unbuild": "3.5.0",
     "vitest": "4.0.16",
-    "@likec4/tsconfig": "1.46.1",
-    "@likec4/devops": "1.42.0"
+    "@likec4/devops": "1.42.0",
+    "@likec4/tsconfig": "1.46.1"
   },
   "scripts": {
     "typecheck": "tsc -b --verbose",

package/src/d2/generate-d2.ts

@@ -36,12 +36,16 @@ const d2shape = ({ shape }: Node) => {
     case 'queue':
     case 'cylinder':
     case 'rectangle':
-    case 'person': {
+    case 'document': {
       return shape
     }
+    case 'person': {
+      return 'c4-person' as const
+    }
     case 'storage': {
       return 'stored_data' as const
     }
+    case 'bucket':
     case 'mobile':
     case 'browser': {
       return 'rectangle' as const

package/src/mmd/generate-mmd.ts

@@ -1,3 +1,4 @@
+import { nonexhaustive } from '@likec4/core'
 import type { LikeC4ViewModel } from '@likec4/core/model'
 import type { aux, NodeId, ProcessedView as AnyView } from '@likec4/core/types'
 import { CompositeGeneratorNode, joinToNode, NL, toString } from 'langium/generate'
@@ -14,21 +15,38 @@ const nodeName = (node: Node): string => {
   return fqnName(node.parent ? node.id.slice(node.parent.length + 1) : node.id)
 }
 
-const mmdshape = ({ shape }: Node): [start: string, end: string] => {
+const toSingleQuotes = (str: string): string => str.replace(/\\?"/g, `'`)
+
+const mmdshape = ({ shape, title }: Node): string => {
+  const label = `label: ${JSON.stringify(title)}`
   switch (shape) {
-    case 'queue':
-    case 'cylinder':
-      return ['[(', ')]']
+    case 'queue': {
+      return `@{ shape: horizontal-cylinder, ${label} }`
+    }
     case 'person': {
-      return ['[fa:fa-user ', ']']
+      return `@{ icon: "fa:user", shape: rounded, ${label} }`
+    }
+    case 'storage': {
+      return `@{ shape: disk, ${label} }`
+    }
+    case 'cylinder': {
+      return `@{ shape: cylinder, ${label} }`
     }
-    case 'storage':
-      return ['([', '])']
     case 'mobile':
-    case 'browser':
+    case 'browser': {
+      return `@{ shape: rounded, ${label} }`
+    }
+    case 'bucket': {
+      return `@{ shape: trap-t, ${label} }`
+    }
     case 'rectangle': {
-      return ['[', ']']
+      return `@{ shape: rectangle, ${label} }`
     }
+    case 'document': {
+      return `@{ shape: doc, ${label} }`
+    }
+    default:
+      nonexhaustive(shape)
   }
 }
 
@@ -42,13 +60,11 @@ export function generateMermaid(viewmodel: LikeC4ViewModel<aux.Unknown>) {
     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) {
+      const label = toSingleQuotes(node.title)
       baseNode
-        .append('subgraph ', fqnName, '[', JSON.stringify(node.title), ']', NL)
+        .append('subgraph ', fqnName, '["`', label, '`"]', NL)
         .indent({
           indentedChildren: [
             joinToNode(
@@ -63,7 +79,7 @@ export function generateMermaid(viewmodel: LikeC4ViewModel<aux.Unknown>) {
         })
         .append('end', NL)
     } else {
-      baseNode.append(fqnName, shape[0], label, shape[1])
+      baseNode.append(fqnName, mmdshape(node))
     }
     return baseNode
   }
@@ -72,7 +88,7 @@ export function generateMermaid(viewmodel: LikeC4ViewModel<aux.Unknown>) {
     return new CompositeGeneratorNode().append(
       names.get(edge.source),
       ' -.',
-      edge.label ? ' "' + edge.label.replaceAll('\n', '\\n') + '" .-' : '-',
+      edge.label ? ' "`' + toSingleQuotes(edge.label) + '`" .-' : '-',
       '> ',
       names.get(edge.target),
     )
@@ -80,11 +96,10 @@ export function generateMermaid(viewmodel: LikeC4ViewModel<aux.Unknown>) {
 
   return toString(
     new CompositeGeneratorNode()
-      .appendIf(
-        view.title !== null && view.title.length > 0,
+      .append(
         '---',
         NL,
-        `title: ${JSON.stringify(view.title)}`,
+        `title: ${JSON.stringify(toSingleQuotes(viewmodel.titleOrId))}`,
         NL,
         '---',
         NL,

package/src/puml/generate-puml.ts

@@ -1,3 +1,4 @@
+import { nonexhaustive } from '@likec4/core'
 import type { LikeC4ViewModel } from '@likec4/core/model'
 import type {
   aux,
@@ -13,11 +14,14 @@ import type {
 } from '@likec4/core/types'
 import { RichText } from '@likec4/core/types'
 import { CompositeGeneratorNode, joinToNode, NL, toString } from 'langium/generate'
-import { isNullish as isNil } from 'remeda'
+import { isEmptyish, 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 fqnName = (nodeId: string): string => {
+  // Split on both '.' and '-' to handle dashed identifiers (e.g., payment-gateway -> PaymentGateway)
+  return nodeId.split(/[.-]/).map(capitalizeFirstLetter).join('')
+}
 
 const nodeName = (node: ComputedNode): string => {
   return fqnName(node.parent ? node.id.slice(node.parent.length + 1) : node.id)
@@ -64,14 +68,21 @@ const pumlShape = ({ shape }: ComputedNode) => {
     case 'cylinder': {
       return 'database' as const
     }
+    case 'document':
     case 'mobile':
+    case 'bucket':
     case 'browser': {
       return 'rectangle' as const
     }
+    default:
+      nonexhaustive(shape)
   }
 }
 
-const escapeLabel = (label: string | null | undefined) => isNil(label) ? null : JSON.stringify(label).slice(1, -1)
+const escapeLabel = (label: string | null | undefined) =>
+  isEmptyish(label) ? null : JSON.stringify(label)
+    .slice(1, -1)
+    .replace(/\\"/g, '"') // Unescape double quotes - PUML does not support escaped double quotes
 
 export function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>) {
   const view = viewmodel.$view
@@ -87,7 +98,7 @@ export function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>) {
 
   const printHeader = () => {
     return new CompositeGeneratorNode()
-      .append('title "', view.title || view.id, '"', NL)
+      .append('title "', viewmodel.titleOrId, '"', NL)
       .append(pumlDirection(view), ' direction', NL)
   }
 
@@ -144,8 +155,8 @@ export function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>) {
       .append(shape, ' ')
       .append('"')
       .append('==', label)
-      .appendIf(!!tech, '\\n', '<size:10>[', tech!, ']</size>')
-      .appendIf(description.nonEmpty, '\\n\\n', escapeLabel(description.text)!)
+      .appendIf(!!tech, `\\n<size:10>[`, tech!, ']</size>')
+      .appendIf(description.nonEmpty, `\\n\\n`, escapeLabel(description.text)!)
       .append('"', ' <<', fqn, '>> ', 'as ', fqn, NL)
   }
 
@@ -186,20 +197,37 @@ export function generatePuml(viewmodel: LikeC4ViewModel<aux.Unknown>) {
   }
 
   const printEdge = (edge: ComputedEdge): CompositeGeneratorNode => {
-    const tech = escapeLabel(edge.technology) || ''
-    const label = escapeLabel(edge.label) || ''
+    const tech = edge.technology || ''
+    const label = edge.label || tech
     const color = pumlColor(edge.color, relationshipsColorProvider('line'), '#777777')
 
-    const colorTag = (color: string) => `<color:${color}>`
+    const withColor = (text: string) => `<color:${color}>${text.replaceAll('"', `'`)}`
 
-    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)
+    const out = new CompositeGeneratorNode()
+      .append(
+        names.get(edge.source),
+        ' .[',
+        color,
+        ',thickness=2].> ',
+        names.get(edge.target),
+      )
+
+    if (label || tech) {
+      out.append(
+        ' : ',
+        // Prepend color to each line
+        label
+          .split('\n')
+          .map(l => isEmptyish(l) ? l : withColor(l))
+          .join('\\n'),
+      )
+      // Append technology if it exists and is different from the label
+      if (tech && tech !== label) {
+        out.append('\\n<size:8>[', withColor(tech), ']</size>')
+      }
+    }
+
+    return out.append(NL)
   }
 
   return toString(

package/src/puml/index.ts

@@ -1 +1 @@
-export * from './generate-puml'
+export { generatePuml } from './generate-puml'