@diagrammo/dgmo 0.8.21 → 0.8.22

package/src/c4/layout.ts

@@ -689,7 +689,7 @@ export function computeC4NodeDimensions(
     // (no type label — containers are the default in container view)
     let height = CARD_V_PAD + NAME_HEIGHT;
 
-    const desc = el.metadata['description'];
+    const desc = el.description?.join('\n');
     if (desc) {
       const contentWidth = width - CARD_H_PAD * 2;
       const lines = wrapText(desc, contentWidth, DESC_CHAR_WIDTH);
@@ -719,7 +719,7 @@ export function computeC4NodeDimensions(
   // Context card layout: type + name | divider | description
   let height = CARD_V_PAD + TYPE_LABEL_HEIGHT + DIVIDER_GAP + NAME_HEIGHT;
 
-  const desc = el.metadata['description'];
+  const desc = el.description?.join('\n');
   if (desc) {
     const contentWidth = width - CARD_H_PAD * 2;
     const lines = wrapText(desc, contentWidth, DESC_CHAR_WIDTH);
@@ -887,7 +887,7 @@ export function layoutC4Context(
       id: el.name,
       name: el.name,
       type: el.type as 'person' | 'system',
-      description: el.metadata['description'],
+      description: el.description?.join('\n'),
       metadata: el.metadata,
       lineNumber: el.lineNumber,
       color,
@@ -1241,7 +1241,7 @@ export function layoutC4Containers(
       id: el.name,
       name: el.name,
       type: 'container',
-      description: el.metadata['description'],
+      description: el.description?.join('\n'),
       metadata: el.metadata,
       lineNumber: el.lineNumber,
       color,
@@ -1267,7 +1267,7 @@ export function layoutC4Containers(
       id: el.name,
       name: el.name,
       type: el.type as 'person' | 'system',
-      description: el.metadata['description'],
+      description: el.description?.join('\n'),
       metadata: el.metadata,
       lineNumber: el.lineNumber,
       color,
@@ -1787,7 +1787,7 @@ export function layoutC4Components(
       id: el.name,
       name: el.name,
       type: 'component',
-      description: el.metadata['description'],
+      description: el.description?.join('\n'),
       metadata: el.metadata,
       lineNumber: el.lineNumber,
       color,
@@ -1813,7 +1813,7 @@ export function layoutC4Components(
       id: el.name,
       name: el.name,
       type: el.type as 'person' | 'system' | 'container',
-      description: el.metadata['description'],
+      description: el.description?.join('\n'),
       metadata: el.metadata,
       lineNumber: el.lineNumber,
       color,
@@ -2236,7 +2236,7 @@ export function layoutC4Deployment(
       id: r.element.name,
       name: r.element.name,
       type: 'container',
-      description: r.element.metadata['description'],
+      description: r.element.description?.join('\n'),
       metadata: r.element.metadata,
       lineNumber: r.element.lineNumber,
       color,

package/src/c4/parser.ts

@@ -20,6 +20,7 @@ import {
   parseFirstLine,
   OPTION_NOCOLON_RE,
 } from '../utils/parsing';
+import { tryStripDescriptionKeyword } from '../utils/description-helpers';
 import type {
   ParsedC4,
   C4Element,
@@ -695,11 +696,20 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
         explicitShape ??
         inferC4Shape(namePart, metadata.tech ?? metadata.technology);
 
+      // Extract description from pipe metadata into dedicated field
+      let isADescription: string[] | undefined;
+      if ('description' in metadata) {
+        const descVal = metadata['description'].trim();
+        if (descVal) isADescription = [descVal];
+        delete metadata['description'];
+      }
+
       const element: C4Element = {
         name: namePart,
         type: elementType,
         shape,
         metadata,
+        description: isADescription,
         children: [],
         groups: [],
         relationships: [],
@@ -762,11 +772,20 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
         explicitShape ??
         inferC4Shape(namePart, metadata.tech ?? metadata.technology);
 
+      // Extract description from pipe metadata into dedicated field
+      let prefixDescription: string[] | undefined;
+      if ('description' in metadata) {
+        const descVal = metadata['description'].trim();
+        if (descVal) prefixDescription = [descVal];
+        delete metadata['description'];
+      }
+
       const element: C4Element = {
         name: namePart,
         type: elementType,
         shape,
         metadata,
+        description: prefixDescription,
         children: [],
         groups: [],
         relationships: [],
@@ -805,6 +824,15 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
 
         const key = aliasMap.get(rawKey) ?? rawKey;
         const value = metadataMatch[2].trim();
+
+        // Extract description into dedicated field
+        if (key === 'description') {
+          if (!parentEntry.element.description)
+            parentEntry.element.description = [];
+          parentEntry.element.description.push(value);
+          continue;
+        }
+
         parentEntry.element.metadata[key] = value;
         continue;
       }
@@ -821,9 +849,14 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
       }
     }
 
-    // If inside a parent, could be an unkeyed description or misc text — ignore gracefully
+    // If inside a parent, try as keyword-based or keywordless description
     const parent = findParentElement(indent, stack);
-    if (!parent) {
+    if (parent) {
+      const descResult = tryStripDescriptionKeyword(trimmed);
+      const descText = descResult.isKeyword ? descResult.text : trimmed;
+      if (!parent.element.description) parent.element.description = [];
+      parent.element.description.push(descText);
+    } else {
       pushError(lineNumber, `Unexpected content: "${trimmed}"`);
     }
   }

package/src/c4/renderer.ts

@@ -8,6 +8,7 @@ import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import { renderInlineText } from '../utils/inline-markdown';
+import { preprocessDescriptionLine } from '../utils/description-helpers';
 import type { ParsedC4 } from './types';
 import type { C4LayoutResult, C4LayoutEdge } from './layout';
 import { parseC4 } from './parser';
@@ -572,7 +573,12 @@ export function renderC4Context(
           .attr('dominant-baseline', 'central')
           .attr('fill', palette.textMuted)
           .attr('font-size', DESC_FONT_SIZE);
-        renderInlineText(textEl, line, palette, DESC_FONT_SIZE);
+        renderInlineText(
+          textEl,
+          preprocessDescriptionLine(line),
+          palette,
+          DESC_FONT_SIZE
+        );
         yPos += DESC_LINE_HEIGHT;
       }
     }
@@ -1641,7 +1647,12 @@ export function renderC4Containers(
             .attr('dominant-baseline', 'central')
             .attr('fill', palette.textMuted)
             .attr('font-size', DESC_FONT_SIZE);
-          renderInlineText(textEl, line, palette, DESC_FONT_SIZE);
+          renderInlineText(
+            textEl,
+            preprocessDescriptionLine(line),
+            palette,
+            DESC_FONT_SIZE
+          );
           yPos += DESC_LINE_HEIGHT;
         }
       }
@@ -1720,7 +1731,12 @@ export function renderC4Containers(
             .attr('dominant-baseline', 'central')
             .attr('fill', palette.textMuted)
             .attr('font-size', DESC_FONT_SIZE);
-          renderInlineText(textEl, line, palette, DESC_FONT_SIZE);
+          renderInlineText(
+            textEl,
+            preprocessDescriptionLine(line),
+            palette,
+            DESC_FONT_SIZE
+          );
           yPos += DESC_LINE_HEIGHT;
         }
       }

package/src/c4/types.ts

@@ -53,6 +53,7 @@ export interface C4Element {
   type: C4ElementType;
   shape: C4Shape;
   metadata: Record<string, string>;
+  description?: string[];
   children: C4Element[];
   groups: C4Group[];
   relationships: C4Relationship[];

package/src/chart.ts

@@ -64,6 +64,7 @@ import type { PaletteColors } from './palettes';
 import { makeDgmoError, formatDgmoError, suggest } from './diagnostics';
 import {
   extractColor,
+  normalizeNumericToken,
   parseFirstLine,
   parseSeriesNames,
 } from './utils/parsing';
@@ -528,7 +529,8 @@ export function parseDataRowValues(
     // Find how many trailing comma-separated parts are numeric
     let numericCount = 0;
     for (let j = commaParts.length - 1; j >= 0; j--) {
-      const part = commaParts[j].trim();
+      const part =
+        normalizeNumericToken(commaParts[j].trim()) ?? commaParts[j].trim();
       if (part && !isNaN(parseFloat(part)) && isFinite(Number(part))) {
         numericCount++;
       } else {
@@ -545,7 +547,9 @@ export function parseDataRowValues(
       // Split firstPart from the right: last space-separated token must be numeric
       const lastSpaceIdx = firstPart.lastIndexOf(' ');
       if (lastSpaceIdx >= 0) {
-        const possibleFirstVal = firstPart.substring(lastSpaceIdx + 1).trim();
+        const rawFirstVal = firstPart.substring(lastSpaceIdx + 1).trim();
+        const possibleFirstVal =
+          normalizeNumericToken(rawFirstVal) ?? rawFirstVal;
         if (
           possibleFirstVal &&
           !isNaN(parseFloat(possibleFirstVal)) &&
@@ -555,7 +559,8 @@ export function parseDataRowValues(
           if (label) {
             const values = [parseFloat(possibleFirstVal)];
             for (const p of extraValueParts) {
-              values.push(parseFloat(p.trim()));
+              const normP = normalizeNumericToken(p.trim()) ?? p.trim();
+              values.push(parseFloat(normP));
             }
             return { label, values };
           }
@@ -577,8 +582,9 @@ export function parseDataRowValues(
     let idx = tokens.length - 1;
     while (idx >= 1 && values.length < limit) {
       const tok = tokens[idx];
-      const num = parseFloat(tok);
-      if (isNaN(num) || !isFinite(Number(tok))) break;
+      const normTok = normalizeNumericToken(tok) ?? tok;
+      const num = parseFloat(normTok);
+      if (isNaN(num) || !isFinite(Number(normTok))) break;
       values.unshift(num);
       idx--;
     }
@@ -590,8 +596,9 @@ export function parseDataRowValues(
 
   // Single-value mode: only the last space-separated token
   const lastToken = tokens[tokens.length - 1];
-  const num = parseFloat(lastToken);
-  if (isNaN(num) || !isFinite(Number(lastToken))) return null;
+  const normalizedLast = normalizeNumericToken(lastToken) ?? lastToken;
+  const num = parseFloat(normalizedLast);
+  if (isNaN(num) || !isFinite(Number(normalizedLast))) return null;
 
   const label = tokens.slice(0, -1).join(' ');
   if (!label) return null;

package/src/completion.ts

@@ -349,6 +349,38 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       'active-tag': { description: 'Active tag group name' },
     }),
   ],
+  [
+    'tech-radar',
+    withGlobals({
+      rings: { description: 'Ring names block (innermost to outermost)' },
+      quadrant: {
+        description:
+          'Quadrant position (top-left, top-right, bottom-left, bottom-right)',
+      },
+      ring: { description: 'Ring assignment for a blip' },
+      trend: { description: 'Blip trend (new, up, down, stable)' },
+      color: { description: 'Override quadrant color' },
+    }),
+  ],
+  [
+    'cycle',
+    withGlobals({
+      'direction-counterclockwise': {
+        description: 'Reverse cycle direction to counterclockwise',
+      },
+      'hide-descriptions': { description: 'Hide node and edge descriptions' },
+      'circle-nodes': {
+        description: 'Render nodes as circles instead of rectangles',
+      },
+    }),
+  ],
+  [
+    'journey-map',
+    withGlobals({
+      'no-legend': { description: 'Hide the score legend' },
+      persona: { description: 'Define the journey persona' },
+    }),
+  ],
 ]);
 
 // ============================================================
@@ -394,6 +426,9 @@ const CHART_TYPE_DESCRIPTIONS: Record<string, string> = {
   'boxes-and-lines': 'Boxes and lines diagram',
   mindmap: 'Mindmap diagram',
   wireframe: 'UI wireframe diagram',
+  'tech-radar': 'Technology adoption radar (ThoughtWorks style)',
+  cycle: 'Cycle diagram (circular process flow)',
+  'journey-map': 'User journey map with emotion curve',
 };
 
 /** All chart types with descriptions, for chart type autocomplete. Excludes `multi-line` alias. */
@@ -537,6 +572,38 @@ export const PIPE_METADATA = new Map<
       edge: {},
     },
   ],
+  [
+    'tech-radar',
+    {
+      node: {
+        quadrant: {
+          description: 'Quadrant position',
+          values: ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
+        },
+        ring: { description: 'Ring assignment for blip' },
+        trend: {
+          description: 'Blip trend indicator',
+          values: ['new', 'up', 'down', 'stable'],
+        },
+        color: { description: 'Override quadrant color' },
+      },
+      edge: {},
+    },
+  ],
+  [
+    'cycle',
+    {
+      node: {
+        color: { description: 'Node fill color (palette name)' },
+        span: { description: 'Relative arc distance to next node' },
+        description: { description: 'Node description text' },
+      },
+      edge: {
+        color: { description: 'Edge stroke color (palette name)' },
+        width: { description: 'Edge stroke width in pixels' },
+      },
+    },
+  ],
 ]);
 
 // ============================================================
@@ -1035,3 +1102,163 @@ registerExtractor('sitemap', extractSitemapSymbols);
 registerExtractor('c4', extractC4Symbols);
 registerExtractor('gantt', extractGanttSymbols);
 registerExtractor('boxes-and-lines', extractBoxesAndLinesSymbols);
+registerExtractor('tech-radar', extractTechRadarSymbols);
+registerExtractor('cycle', extractCycleSymbols);
+registerExtractor('journey-map', extractJourneyMapSymbols);
+
+function extractTechRadarSymbols(docText: string): DiagramSymbols {
+  const entities: string[] = [];
+  const keywords: string[] = [
+    'rings',
+    'quadrant',
+    'ring',
+    'trend',
+    'new',
+    'up',
+    'down',
+    'stable',
+    'top-left',
+    'top-right',
+    'bottom-left',
+    'bottom-right',
+    'alias',
+    'aka',
+    'color',
+  ];
+
+  // Extract ring names and aliases from the rings block
+  const lines = docText.split('\n');
+  let inRings = false;
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (trimmed.toLowerCase() === 'rings') {
+      inRings = true;
+      continue;
+    }
+    if (inRings) {
+      if (!trimmed || (line[0] !== ' ' && line[0] !== '\t')) {
+        inRings = false;
+        continue;
+      }
+      // Parse ring name (and alias)
+      const aliasMatch = trimmed.match(/^(.+?)\s+(?:alias|aka)\s+(\S+)\s*$/i);
+      if (aliasMatch) {
+        entities.push(aliasMatch[1].trim());
+        entities.push(aliasMatch[2].trim());
+      } else {
+        entities.push(trimmed);
+      }
+    }
+  }
+
+  return { kind: 'tech-radar', entities, keywords };
+}
+
+// ============================================================
+// Cycle extractor
+// ============================================================
+
+function extractCycleSymbols(docText: string): DiagramSymbols {
+  const lines = docText.split('\n');
+  const entities: string[] = [];
+  let pastFirstLine = false;
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('//')) continue;
+
+    if (!pastFirstLine) {
+      pastFirstLine = true;
+      continue;
+    }
+
+    // Skip directives/metadata
+    const firstToken = trimmed.split(/\s+/)[0].toLowerCase();
+    if (METADATA_KEY_SET.has(firstToken)) continue;
+    if (
+      firstToken === 'direction-counterclockwise' ||
+      firstToken === 'circle-nodes' ||
+      firstToken === 'hide-descriptions'
+    )
+      continue;
+
+    // Skip indented lines (descriptions, edges)
+    if (line[0] === ' ' || line[0] === '\t') continue;
+
+    // Node label (strip pipe metadata)
+    const label = trimmed.split('|')[0].trim();
+    if (label && !entities.includes(label)) entities.push(label);
+  }
+
+  return {
+    kind: 'cycle',
+    entities,
+    keywords: [
+      'direction-counterclockwise',
+      'hide-descriptions',
+      'circle-nodes',
+    ],
+  };
+}
+
+function extractJourneyMapSymbols(docText: string): DiagramSymbols {
+  const lines = docText.split('\n');
+  const entities: string[] = [];
+  let pastFirstLine = false;
+
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith('//')) continue;
+
+    if (!pastFirstLine) {
+      pastFirstLine = true;
+      continue;
+    }
+
+    // Skip directives/metadata at indent 0
+    const firstToken = trimmed.split(/\s+/)[0].toLowerCase();
+    if (METADATA_KEY_SET.has(firstToken)) continue;
+    if (
+      firstToken === 'persona' ||
+      firstToken === 'tag' ||
+      firstToken === 'no-legend'
+    )
+      continue;
+
+    const isIndented = line[0] === ' ' || line[0] === '\t';
+
+    // Skip deep-indented lines (annotations, descriptions under steps)
+    // but keep singly-indented lines (steps within phases)
+    if (isIndented) {
+      // Annotation/description keywords — skip
+      if (/^(pain|opportunity|thought|description)\s*:/i.test(trimmed))
+        continue;
+      // Tag group entries — skip
+      if (/^\S+\([^)]+\)/.test(trimmed)) continue;
+    }
+
+    // Phase header
+    const phaseMatch = trimmed.match(/^\[(.+?)\]$/);
+    if (phaseMatch) {
+      entities.push(phaseMatch[1].trim());
+      continue;
+    }
+
+    // Step label (strip pipe metadata) — works for both indent 0 and indented steps
+    const label = trimmed.split('|')[0].trim();
+    if (label && !entities.includes(label)) entities.push(label);
+  }
+
+  return {
+    kind: 'journey-map',
+    entities,
+    keywords: [
+      'persona',
+      'no-legend',
+      'pain',
+      'opportunity',
+      'thought',
+      'description',
+    ],
+  };
+}