@likec4/generators 1.47.0 → 1.49.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/generators",
-  "version": "1.47.0",
+  "version": "1.49.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -9,9 +9,10 @@
   "files": [
     "dist",
     "src",
-    "!**/*.spec.ts",
-    "!**/__mocks__/*",
-    "!**/__snapshots__/*",
+    "**/package.json",
+    "!**/__*/**",
+    "!**/*.spec.*",
+    "!**/*.snap",
     "!**/*.map"
   ],
   "repository": {
@@ -25,9 +26,9 @@
     ".": {
       "sources": "./src/index.ts",
       "default": {
-        "types": "./dist/index.d.ts",
-        "import": "./dist/index.js",
-        "default": "./dist/index.js"
+        "types": "./dist/index.d.mts",
+        "import": "./dist/index.mjs",
+        "default": "./dist/index.mjs"
       }
     }
   },
@@ -36,27 +37,29 @@
     "access": "public"
   },
   "dependencies": {
+    "remeda": "^2.33.5",
     "json5": "^2.2.3",
     "langium": "3.5.0",
-    "remeda": "^2.32.0",
-    "@likec4/core": "1.47.0"
+    "@likec4/core": "1.49.0",
+    "@likec4/log": "1.49.0"
   },
   "devDependencies": {
-    "@types/node": "~22.19.3",
+    "@types/node": "~22.19.10",
     "typescript": "5.9.3",
-    "unbuild": "3.5.0",
-    "vitest": "4.0.16",
-    "@likec4/devops": "1.42.0",
-    "@likec4/tsconfig": "1.46.1"
+    "obuild": "^0.4.27",
+    "vitest": "4.0.18",
+    "@likec4/tsconfig": "1.49.0",
+    "@likec4/devops": "1.42.0"
   },
   "scripts": {
     "typecheck": "tsc -b --verbose",
-    "build": "unbuild",
+    "build": "obuild",
     "lint": "run -T eslint src/ --fix",
     "clean": "likec4ops clean",
+    "pack": "pnpm pack",
     "test": "vitest run --no-isolate",
     "test:watch": "vitest"
   },
-  "types": "dist/index.d.ts",
-  "module": "dist/index.js"
+  "types": "dist/index.d.mts",
+  "module": "dist/index.mjs"
 }

package/src/d2/generate-d2.ts

@@ -45,6 +45,7 @@ const d2shape = ({ shape }: Node) => {
     case 'storage': {
       return 'stored_data' as const
     }
+    case 'component':
     case 'bucket':
     case 'mobile':
     case 'browser': {

package/src/drawio/generate-drawio.ts

@@ -0,0 +1,219 @@
+import type { LikeC4ViewModel } from '@likec4/core/model'
+import type { aux, DiagramNode, NodeId, ProcessedView } from '@likec4/core/types'
+import { flattenMarkdownOrString } from '@likec4/core/types'
+import { isEmptyish, isNullish as isNil } from 'remeda'
+
+type View = ProcessedView<aux.Unknown>
+type Node = View['nodes'][number]
+type Edge = View['edges'][number]
+
+/** Default hex colors when view model has no $styles (e.g. in tests). Aligns with common theme colors. */
+const DEFAULT_ELEMENT_COLORS: Record<string, { fill: string; stroke: string }> = {
+  primary: { fill: '#3b82f6', stroke: '#2563eb' },
+  gray: { fill: '#6b7280', stroke: '#4b5563' },
+  green: { fill: '#22c55e', stroke: '#16a34a' },
+  red: { fill: '#ef4444', stroke: '#dc2626' },
+  blue: { fill: '#3b82f6', stroke: '#2563eb' },
+  indigo: { fill: '#6366f1', stroke: '#4f46e5' },
+  muted: { fill: '#9ca3af', stroke: '#6b7280' },
+}
+
+const DEFAULT_EDGE_COLOR = '#6b7280'
+
+function escapeXml(unsafe: string): string {
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;')
+}
+
+/**
+ * Map LikeC4 shape to DrawIO style. DrawIO uses shape=rectangle, ellipse, cylinder, etc.
+ */
+function drawioShape(shape: Node['shape']): string {
+  switch (shape) {
+    case 'person':
+      return 'shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;'
+    case 'rectangle':
+      return 'shape=rectangle;'
+    case 'browser':
+      return 'shape=rectangle;rounded=1;'
+    case 'mobile':
+      return 'shape=rectangle;rounded=1;'
+    case 'cylinder':
+      return 'shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;'
+    case 'queue':
+      return 'shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;'
+    case 'storage':
+      return 'shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;'
+    case 'bucket':
+      return 'shape=rectangle;rounded=1;'
+    case 'document':
+      return 'shape=document;whiteSpace=wrap;html=1;boundedLbl=1;'
+    case 'component':
+      return 'shape=component;'
+    default:
+      return 'shape=rectangle;'
+  }
+}
+
+function getElementColors(
+  viewmodel: LikeC4ViewModel<aux.Unknown>,
+  color: string,
+): { fill: string; stroke: string } | undefined {
+  const styles = '$styles' in viewmodel && viewmodel.$styles ? viewmodel.$styles : null
+  if (styles) {
+    try {
+      const values = styles.colors(color)
+      return {
+        fill: values.elements.fill as string,
+        stroke: values.elements.stroke as string,
+      }
+    } catch {
+      // custom color or missing
+    }
+  }
+  return DEFAULT_ELEMENT_COLORS[color] ?? DEFAULT_ELEMENT_COLORS['primary']
+}
+
+function getEdgeStrokeColor(viewmodel: LikeC4ViewModel<aux.Unknown>, color: string): string {
+  const styles = '$styles' in viewmodel && viewmodel.$styles ? viewmodel.$styles : null
+  if (styles) {
+    try {
+      const values = styles.colors(color)
+      return values.relationships.line as string
+    } catch {
+      // custom color or missing
+    }
+  }
+  return DEFAULT_EDGE_COLOR
+}
+
+/**
+ * Generate DrawIO (mxGraph) XML from a layouted LikeC4 view.
+ * Preserves positions, hierarchy, colors, descriptions and technology so the diagram
+ * can be opened and edited in draw.io with full compatibility.
+ *
+ * @param viewmodel - Layouted LikeC4 view model (from model.view(id))
+ * @returns DrawIO .drawio XML string
+ */
+export function generateDrawio(viewmodel: LikeC4ViewModel<aux.Unknown>): string {
+  const view = viewmodel.$view
+  const { nodes, edges } = view
+
+  const rootId = '0'
+  const defaultParentId = '1'
+
+  const nodeIds = new Map<NodeId, string>()
+  let cellId = 2
+
+  const getCellId = (nodeId: NodeId): string => {
+    let id = nodeIds.get(nodeId)
+    if (!id) {
+      id = String(cellId++)
+      nodeIds.set(nodeId, id)
+    }
+    return id
+  }
+
+  const vertexCells: string[] = []
+  const edgeCells: string[] = []
+
+  const sortedNodes = [...nodes].sort((a, b) => {
+    if (isNil(a.parent) && isNil(b.parent)) return 0
+    if (isNil(a.parent)) return -1
+    if (isNil(b.parent)) return 1
+    if (a.parent === b.parent) return 0
+    if (a.id.startsWith(b.id + '.')) return 1
+    if (b.id.startsWith(a.id + '.')) return -1
+    return 0
+  })
+
+  /** Support both BBox (x,y,width,height) and legacy position/size used in some mocks */
+  const getBBox = (n: View['nodes'][number]) => {
+    const d = n as DiagramNode & { position?: [number, number]; size?: { width: number; height: number } }
+    const x = typeof d.x === 'number' ? d.x : (Array.isArray(d.position) ? d.position[0] : 0)
+    const y = typeof d.y === 'number' ? d.y : (Array.isArray(d.position) ? d.position[1] : 0)
+    const width = typeof d.width === 'number' ? d.width : (d.size?.width ?? 120)
+    const height = typeof d.height === 'number' ? d.height : (d.size?.height ?? 60)
+    return { x, y, width, height }
+  }
+
+  for (const node of sortedNodes) {
+    const id = getCellId(node.id)
+    const parentId = node.parent ? getCellId(node.parent) : defaultParentId
+    const label = escapeXml(node.title)
+    const shapeStyle = drawioShape(node.shape)
+    const { x, y, width, height } = getBBox(node)
+
+    const elemColors = getElementColors(viewmodel, node.color)
+    const colorStyle = elemColors != null
+      ? `fillColor=${elemColors.fill};strokeColor=${elemColors.stroke};fontColor=${elemColors.stroke};`
+      : ''
+
+    const description = node.description && flattenMarkdownOrString(node.description)
+    const desc = isEmptyish(description) ? '' : escapeXml(description)
+    const technology = node.technology && flattenMarkdownOrString(node.technology)
+    const tech = isEmptyish(technology) ? '' : escapeXml(technology)
+    const userData = desc !== '' || tech !== ''
+      ? `<mxUserObject><data key="likec4Description">${desc}</data><data key="likec4Technology">${tech}</data></mxUserObject>\n  `
+      : ''
+
+    vertexCells.push(
+      `<mxCell id="${id}" value="${label}" style="${shapeStyle}${colorStyle}verticalAlign=middle;align=center;overflow=fill;spacingLeft=2;spacingRight=2;spacingTop=2;spacingBottom=2;" vertex="1" parent="${parentId}">
+  ${userData}<mxGeometry x="${Math.round(x)}" y="${Math.round(y)}" width="${Math.round(width)}" height="${
+        Math.round(height)
+      }" as="geometry" />
+</mxCell>`,
+    )
+  }
+
+  for (const edge of edges as Edge[]) {
+    const id = String(cellId++)
+    const sourceId = getCellId(edge.source)
+    const targetId = getCellId(edge.target)
+    const label = edge.label ? escapeXml(edge.label) : ''
+    const strokeColor = getEdgeStrokeColor(viewmodel, edge.color)
+    const dashStyle = edge.line === 'dashed' ? 'dashed=1;' : edge.line === 'dotted' ? 'dashed=1;dashPattern=1 1;' : ''
+    edgeCells.push(
+      `<mxCell id="${id}" value="${label}" style="endArrow=block;html=1;rounded=0;exitX=1;exitY=0.5;entryX=0;entryY=0.5;strokeColor=${strokeColor};${dashStyle}" edge="1" parent="${defaultParentId}" source="${sourceId}" target="${targetId}">
+  <mxGeometry relative="1" as="geometry" />
+</mxCell>`,
+    )
+  }
+
+  let bounds: { x: number; y: number; width: number; height: number } = {
+    x: 0,
+    y: 0,
+    width: 800,
+    height: 600,
+  }
+  try {
+    const b = viewmodel.bounds
+    if (b != null && typeof b.x === 'number') bounds = b
+  } catch {
+    // View not layouted (e.g. in tests); use default canvas size
+  }
+  const allCells = [
+    `<mxCell id="${defaultParentId}" vertex="1" parent="${rootId}">
+  <mxGeometry x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}" as="geometry" />
+</mxCell>`,
+    ...vertexCells,
+    ...edgeCells,
+  ].join('\n')
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<mxfile host="LikeC4" modified="${new Date().toISOString()}" agent="LikeC4" version="1.0" etag="" type="device">
+  <diagram name="${escapeXml(view.id)}" id="likec4-${escapeXml(view.id)}">
+    <mxGraphModel dx="800" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale=1 pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="${rootId}" />
+        ${allCells}
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
+`
+}

package/src/drawio/index.ts

@@ -0,0 +1,2 @@
+export { generateDrawio } from './generate-drawio'
+export { parseDrawioToLikeC4, type DrawioCell } from './parse-drawio'

package/src/drawio/parse-drawio.ts

@@ -0,0 +1,324 @@
+/**
+ * Parse DrawIO (mxGraph) XML and generate LikeC4 source code.
+ * Extracts vertices as elements and edges as relations; preserves colors, descriptions,
+ * technology and other compatible attributes for full bidirectional compatibility.
+ */
+
+export interface DrawioCell {
+  id: string
+  value?: string
+  parent?: string
+  source?: string
+  target?: string
+  vertex?: boolean
+  edge?: boolean
+  style?: string
+  x?: number
+  y?: number
+  width?: number
+  height?: number
+  /** From style fillColor= or mxUserObject */
+  fillColor?: string
+  strokeColor?: string
+  /** From mxUserObject data likec4Description / likec4Technology (exported by LikeC4) */
+  description?: string
+  technology?: string
+}
+
+function getAttr(attrs: string, name: string): string | undefined {
+  const re = new RegExp(`${name}="([^"]*)"`, 'i')
+  const m = attrs.match(re)
+  return m ? m[1] : undefined
+}
+
+function parseNum(s: string | undefined): number | undefined {
+  if (s === undefined || s === '') return undefined
+  const n = Number.parseFloat(s)
+  return Number.isNaN(n) ? undefined : n
+}
+
+/** Parse DrawIO style string (semicolon-separated key=value) into a map. */
+function parseStyle(style: string | undefined): Map<string, string> {
+  const map = new Map<string, string>()
+  if (!style) return map
+  for (const part of style.split(';')) {
+    const eq = part.indexOf('=')
+    if (eq > 0) {
+      const k = part.slice(0, eq).trim()
+      const v = part.slice(eq + 1).trim()
+      if (k && v) map.set(k.toLowerCase(), v)
+    }
+  }
+  return map
+}
+
+/** Extract LikeC4 custom data from mxUserObject/data inside cell XML. */
+function parseUserData(fullTag: string): { description?: string; technology?: string } {
+  const out: { description?: string; technology?: string } = {}
+  const descMatch = fullTag.match(/<data\s+key="likec4Description"[^>]*>([\s\S]*?)<\/data>/i)
+  if (descMatch?.[1]) out.description = decodeXmlEntities(descMatch[1].trim())
+  const techMatch = fullTag.match(/<data\s+key="likec4Technology"[^>]*>([\s\S]*?)<\/data>/i)
+  if (techMatch?.[1]) out.technology = decodeXmlEntities(techMatch[1].trim())
+  return out
+}
+
+/**
+ * Simple XML parser for DrawIO mxCell elements. Extracts cells with id, value, parent,
+ * source, target, vertex, edge, geometry, style colors and LikeC4 user data.
+ */
+function parseDrawioXml(xml: string): DrawioCell[] {
+  const cells: DrawioCell[] = []
+  const mxCellRe = /<mxCell\s+([^>]+?)(?:\s*\/>|>([\s\S]*?)<\/mxCell>)/gi
+  const geomAttr = (tag: string, name: string) => getAttr(tag, name)
+  let m
+  while ((m = mxCellRe.exec(xml)) !== null) {
+    const attrs = m[1] ?? ''
+    const inner = m[2] ?? ''
+    const id = getAttr(attrs, 'id')
+    if (!id) continue
+    const valueRaw = getAttr(attrs, 'value')
+    const parent = getAttr(attrs, 'parent')
+    const source = getAttr(attrs, 'source')
+    const target = getAttr(attrs, 'target')
+    const vertex = getAttr(attrs, 'vertex') === '1'
+    const edge = getAttr(attrs, 'edge') === '1'
+    const style = getAttr(attrs, 'style')
+    const fullTag = m[0]
+    const geomMatch = fullTag.match(/<mxGeometry[^>]*>/i)
+    const geomStr = geomMatch ? geomMatch[0] : ''
+    const styleMap = parseStyle(style ?? undefined)
+    const userData = parseUserData(inner)
+    const x = parseNum(geomAttr(geomStr, 'x'))
+    const y = parseNum(geomAttr(geomStr, 'y'))
+    const width = parseNum(geomAttr(geomStr, 'width'))
+    const height = parseNum(geomAttr(geomStr, 'height'))
+    const fillColor = styleMap.get('fillcolor') ?? styleMap.get('fillColor')
+    const strokeColor = styleMap.get('strokecolor') ?? styleMap.get('strokeColor')
+    const cell: DrawioCell = {
+      id,
+      ...(valueRaw != null && valueRaw !== '' ? { value: decodeXmlEntities(valueRaw) } : {}),
+      ...(parent != null && parent !== '' ? { parent } : {}),
+      ...(source != null && source !== '' ? { source } : {}),
+      ...(target != null && target !== '' ? { target } : {}),
+      vertex,
+      edge,
+      ...(style != null && style !== '' ? { style } : {}),
+      ...(x !== undefined ? { x } : {}),
+      ...(y !== undefined ? { y } : {}),
+      ...(width !== undefined ? { width } : {}),
+      ...(height !== undefined ? { height } : {}),
+      ...(fillColor !== undefined ? { fillColor } : {}),
+      ...(strokeColor !== undefined ? { strokeColor } : {}),
+      ...(userData.description != null ? { description: userData.description } : {}),
+      ...(userData.technology != null ? { technology: userData.technology } : {}),
+    }
+    cells.push(cell)
+  }
+  return cells
+}
+
+function decodeXmlEntities(s: string): string {
+  return s
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&apos;/g, '\'')
+    .replace(/&amp;/g, '&')
+}
+
+/**
+ * Infer LikeC4 element kind from DrawIO shape style.
+ */
+function inferKind(style: string | undefined): 'actor' | 'system' | 'container' | 'component' {
+  if (!style) return 'container'
+  const s = style.toLowerCase()
+  if (s.includes('umlactor') || s.includes('shape=person')) return 'actor'
+  if (s.includes('swimlane') || s.includes('shape=rectangle') && s.includes('rounded')) return 'system'
+  return 'container'
+}
+
+/**
+ * Sanitize a string for use as LikeC4 identifier (element name).
+ */
+function toId(name: string): string {
+  return name
+    .trim()
+    .replace(/\s+/g, '_')
+    .replace(/[^a-zA-Z0-9_.-]/g, '')
+    .replace(/^[0-9]/, '_$&') || 'element'
+}
+
+/**
+ * Convert DrawIO XML to LikeC4 source (.c4) string.
+ * - Vertices become model elements (actor/container); hierarchy from parent refs.
+ * - Edges become relations (->).
+ * - Root diagram cells (parent "1") are top-level; others are nested by parent.
+ */
+export function parseDrawioToLikeC4(xml: string): string {
+  const cells = parseDrawioXml(xml)
+  const byId = new Map<string, DrawioCell>()
+  for (const c of cells) {
+    byId.set(c.id, c)
+  }
+
+  const vertices = cells.filter(c => c.vertex && c.id !== '1')
+  const edges = cells.filter(c => c.edge && c.source && c.target)
+
+  // Build hierarchy: root is parent "1". Assign FQN by traversing parent chain.
+  const rootId = '1'
+  const idToFqn = new Map<string, string>()
+  const idToCell = new Map<string, DrawioCell>()
+  for (const v of vertices) {
+    idToCell.set(v.id, v)
+  }
+
+  // Assign FQNs: use value as base name, ensure uniqueness. Flatten for simplicity if no clear hierarchy.
+  const usedNames = new Set<string>()
+  function uniqueName(base: string): string {
+    let name = toId(base || 'element')
+    let n = name
+    let i = 0
+    while (usedNames.has(n)) {
+      n = `${name}_${++i}`
+    }
+    usedNames.add(n)
+    return n
+  }
+
+  for (const v of vertices) {
+    if (v.parent === rootId || !v.parent) {
+      const name = uniqueName(v.value ?? v.id)
+      idToFqn.set(v.id, name)
+    }
+  }
+
+  // If we have parent refs that are not root, build hierarchy (e.g. parent is another vertex)
+  let changed = true
+  while (changed) {
+    changed = false
+    for (const v of vertices) {
+      if (idToFqn.has(v.id)) continue
+      const parent = v.parent ? idToFqn.get(v.parent) : null
+      if (parent != null) {
+        const local = uniqueName(v.value ?? v.id)
+        idToFqn.set(v.id, `${parent}.${local}`)
+        changed = true
+      }
+    }
+  }
+
+  // Any remaining vertices (orphans) get top-level names
+  for (const v of vertices) {
+    if (!idToFqn.has(v.id)) {
+      idToFqn.set(v.id, uniqueName(v.value ?? v.id))
+    }
+  }
+
+  // Collect unique hex colors from vertices for specification customColors
+  const hexToCustomName = new Map<string, string>()
+  let customColorIndex = 0
+  for (const v of vertices) {
+    const fill = v.fillColor?.trim()
+    if (fill && /^#[0-9A-Fa-f]{3,8}$/.test(fill)) {
+      if (!hexToCustomName.has(fill)) {
+        hexToCustomName.set(fill, `drawio_color_${++customColorIndex}`)
+      }
+    }
+  }
+
+  const lines: string[] = []
+
+  if (hexToCustomName.size > 0) {
+    lines.push('specification {')
+    for (const [hex, name] of hexToCustomName) {
+      lines.push(`  color ${name} ${hex}`)
+    }
+    lines.push('}')
+    lines.push('')
+  }
+
+  lines.push('model {')
+  lines.push('')
+
+  const children = new Map<string, Array<{ cellId: string; fqn: string }>>()
+  const roots: Array<{ cellId: string; fqn: string }> = []
+  for (const [cellId, fqn] of idToFqn) {
+    const cell = idToCell.get(cellId)
+    if (!cell) continue
+    if (cell.parent === rootId || !cell.parent) {
+      roots.push({ cellId, fqn })
+    } else {
+      const parentFqn = idToFqn.get(cell.parent)
+      if (parentFqn != null) {
+        const list = children.get(parentFqn) ?? []
+        list.push({ cellId, fqn })
+        children.set(parentFqn, list)
+      } else {
+        roots.push({ cellId, fqn })
+      }
+    }
+  }
+
+  function emitElement(cellId: string, fqn: string, indent: number): void {
+    const cell = idToCell.get(cellId)
+    if (!cell) return
+    const kind = inferKind(cell.style)
+    const title = (cell.value && cell.value.trim()) || fqn.split('.').pop() || 'Element'
+    const name = fqn.split('.').pop()!
+    const pad = '  '.repeat(indent)
+    const desc = cell.description?.trim()
+    const tech = cell.technology?.trim()
+    const colorName = cell.fillColor && /^#[0-9A-Fa-f]{3,8}$/.test(cell.fillColor.trim())
+      ? hexToCustomName.get(cell.fillColor.trim())
+      : undefined
+
+    if (kind === 'actor') {
+      lines.push(`${pad}${name} = actor '${title.replace(/'/g, '\'\'')}'`)
+    } else if (kind === 'system') {
+      lines.push(`${pad}${name} = system '${title.replace(/'/g, '\'\'')}'`)
+    } else {
+      lines.push(`${pad}${name} = container '${title.replace(/'/g, '\'\'')}'`)
+    }
+    const childList = children.get(fqn)
+    const hasBody = (childList && childList.length > 0) || desc || tech || colorName
+    if (hasBody) {
+      lines.push(`${pad}{`)
+      if (colorName) lines.push(`${pad}  style { color ${colorName} }`)
+      if (desc) lines.push(`${pad}  description '${desc.replace(/'/g, '\'\'')}'`)
+      if (tech) lines.push(`${pad}  technology '${tech.replace(/'/g, '\'\'')}'`)
+      if (childList && childList.length > 0) {
+        for (const ch of childList) {
+          emitElement(ch.cellId, ch.fqn, indent + 1)
+        }
+      }
+      lines.push(`${pad}}`)
+    } else {
+      lines.push(`${pad}{`)
+      lines.push(`${pad}}`)
+    }
+    lines.push('')
+  }
+
+  for (const { cellId, fqn } of roots) {
+    emitElement(cellId, fqn, 1)
+  }
+
+  for (const e of edges) {
+    const src = idToFqn.get(e.source!)
+    const tgt = idToFqn.get(e.target!)
+    if (!src || !tgt) continue
+    const label = (e.value && e.value.trim()) ? ` '${e.value.replace(/'/g, '\'\'')}'` : ''
+    lines.push(`  ${src} -> ${tgt}${label}`)
+  }
+
+  lines.push('}')
+  lines.push('')
+  lines.push('views {')
+  lines.push('  view index {')
+  lines.push('    include *')
+  lines.push('  }')
+  lines.push('}')
+  lines.push('')
+
+  return lines.join('\n')
+}

package/src/index.ts

@@ -1,5 +1,7 @@
+export { generateDrawio } from './drawio/generate-drawio'
 export { generateD2 } from './d2/generate-d2'
 export { generateMermaid } from './mmd/generate-mmd'
+export { parseDrawioToLikeC4 } from './drawio/parse-drawio'
 export { generateLikeC4Model } from './model/generate-likec4-model'
 export { generatePuml } from './puml/generate-puml'
 export { generateReactNext } from './react-next/generate-react-next'

package/src/mmd/generate-mmd.ts

@@ -45,6 +45,9 @@ const mmdshape = ({ shape, title }: Node): string => {
     case 'document': {
       return `@{ shape: doc, ${label} }`
     }
+    case 'component': {
+      return `@{ shape: rectangle, ${label} }`
+    }
     default:
       nonexhaustive(shape)
   }

package/src/puml/generate-puml.ts

@@ -68,6 +68,9 @@ const pumlShape = ({ shape }: ComputedNode) => {
     case 'cylinder': {
       return 'database' as const
     }
+    case 'component': {
+      return 'component' as const
+    }
     case 'document':
     case 'mobile':
     case 'bucket':

package/src/react/generate-react-types.ts

@@ -19,7 +19,7 @@ export function generateReactTypes(model: AnyLikeC4Model, options: { useCorePack
 import type { PropsWithChildren } from 'react'
 import type { JSX } from 'react/jsx-runtime'
 import type { LikeC4Model } from '${useCorePackage ? '@likec4/core' : 'likec4'}/model'
-import type { DiagramView } from '${useCorePackage ? '@likec4/core/types' : 'likec4/model'}'
+import type { LayoutedView } from '${useCorePackage ? '@likec4/core/types' : 'likec4/model'}'
 import type {
   LikeC4ViewProps as GenericLikeC4ViewProps,
   ReactLikeC4Props as GenericReactLikeC4Props
@@ -31,7 +31,7 @@ declare function isLikeC4ViewId(value: unknown): value is $ViewId;
 
 declare const likec4model: LikeC4Model<$Aux>;
 declare function useLikeC4Model(): LikeC4Model<$Aux>;
-declare function useLikeC4View(viewId: $ViewId): DiagramView<$Aux>;
+declare function useLikeC4View(viewId: $ViewId): LayoutedView<$Aux>;
 
 declare function LikeC4ModelProvider(props: PropsWithChildren): JSX.Element;
 

package/dist/d2/generate-d2.d.ts

@@ -1,3 +0,0 @@
-import type { LikeC4ViewModel } from '@likec4/core/model';
-import type { aux } from '@likec4/core/types';
-export declare function generateD2(viewmodel: LikeC4ViewModel<aux.Unknown>): any;