@diagrammo/dgmo 0.8.21 → 0.8.23

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/cli.ts

@@ -6,7 +6,11 @@ import { resolve, join, basename, extname } from 'node:path';
 import { createInterface } from 'node:readline';
 import { Resvg } from '@resvg/resvg-js';
 import { render } from './render';
-import { parseDgmo, getAllChartTypes } from './dgmo-router';
+import {
+  parseDgmo,
+  getAllChartTypes,
+  CHART_TYPE_DESCRIPTIONS,
+} from './dgmo-router';
 import { parseDgmoChartType } from './dgmo-router';
 import { formatDgmoError } from './diagnostics';
 import { getPalette, getAvailablePalettes } from './palettes';
@@ -19,40 +23,6 @@ const PALETTES = getAvailablePalettes().map((p) => p.id);
 
 const THEMES = ['light', 'dark', 'transparent'] as const;
 
-const CHART_TYPE_DESCRIPTIONS: Record<string, string> = {
-  bar: 'Bar chart — categorical comparisons',
-  line: 'Line chart — trends over time',
-  'multi-line': 'Multi-line chart — multiple series trends',
-  area: 'Area chart — filled line chart',
-  pie: 'Pie chart — part-to-whole proportions',
-  doughnut: 'Doughnut chart — ring-style pie chart',
-  radar: 'Radar chart — multi-dimensional metrics',
-  'polar-area': 'Polar area chart — radial bar chart',
-  'bar-stacked': 'Stacked bar chart — multi-series categorical',
-  scatter: 'Scatter plot — 2D data points or bubble chart',
-  sankey: 'Sankey diagram — flow/allocation visualization',
-  chord: 'Chord diagram — circular flow relationships',
-  function: 'Function plot — mathematical expressions',
-  heatmap: 'Heatmap — matrix intensity visualization',
-  funnel: 'Funnel chart — conversion pipeline',
-  slope: 'Slope chart — change between two periods',
-  wordcloud: 'Word cloud — term frequency visualization',
-  arc: 'Arc diagram — network relationships',
-  timeline: 'Timeline — events, eras, and date ranges',
-  venn: 'Venn diagram — set overlaps',
-  quadrant: 'Quadrant chart — 2x2 positioning matrix',
-  sequence: 'Sequence diagram — message/interaction flows',
-  flowchart: 'Flowchart — decision trees and process flows',
-  class: 'Class diagram — UML class hierarchies',
-  er: 'ER diagram — database schemas and relationships',
-  org: 'Org chart — hierarchical tree structures',
-  kanban: 'Kanban board — task/workflow columns',
-  c4: 'C4 diagram — system architecture (context, container, component, deployment)',
-  infra: 'Infra chart — infrastructure traffic flow with rps computation',
-  'boxes-and-lines':
-    'Boxes and lines — general-purpose node-edge diagrams with groups and tags',
-};
-
 const CLAUDE_SKILL_CONTENT = `# dgmo — Diagrammo Diagram Assistant
 
 You are helping the user author, render, and share diagrams using the \`dgmo\` CLI and \`.dgmo\` file format.

package/src/completion.ts

@@ -16,6 +16,7 @@ import { extractSymbols as extractFlowchartSymbols } from './graph/flowchart-par
 import { extractSymbols as extractInfraSymbols } from './infra/parser';
 import { extractSymbols as extractClassSymbols } from './class/parser';
 import { parseFirstLine, ALL_CHART_TYPES } from './utils/parsing';
+import { CHART_TYPE_DESCRIPTIONS } from './dgmo-router';
 
 // ============================================================
 // Symbol extraction
@@ -349,53 +350,52 @@ 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' },
+    }),
+  ],
+  [
+    'pyramid',
+    withGlobals({
+      inverted: { description: 'Flip apex to the bottom (funnel orientation)' },
+      color: { description: 'Override layer color (pipe metadata)' },
+      description: { description: 'Layer description (pipe or indented body)' },
+    }),
+  ],
 ]);
 
 // ============================================================
 // Chart types array (for chart type completion popup)
 // ============================================================
 
-const CHART_TYPE_DESCRIPTIONS: Record<string, string> = {
-  // Data charts
-  bar: 'Bar chart',
-  line: 'Line chart',
-  pie: 'Pie chart',
-  doughnut: 'Doughnut chart',
-  area: 'Area chart',
-  'polar-area': 'Polar area chart',
-  radar: 'Radar chart',
-  'bar-stacked': 'Stacked bar chart',
-  // Extended charts
-  scatter: 'Scatter plot',
-  heatmap: 'Heatmap',
-  sankey: 'Sankey flow diagram',
-  chord: 'Chord diagram',
-  funnel: 'Funnel chart',
-  function: 'Mathematical function plot',
-  // Visualizations
-  slope: 'Slope chart',
-  wordcloud: 'Word cloud',
-  arc: 'Arc diagram',
-  timeline: 'Timeline',
-  venn: 'Venn diagram',
-  quadrant: 'Quadrant chart',
-  // Diagrams
-  sequence: 'Sequence diagram',
-  flowchart: 'Flowchart',
-  class: 'Class diagram',
-  er: 'Entity-relationship diagram',
-  org: 'Organization chart',
-  kanban: 'Kanban board',
-  c4: 'C4 architecture diagram',
-  state: 'State diagram',
-  sitemap: 'Sitemap diagram',
-  infra: 'Infrastructure diagram',
-  gantt: 'Gantt chart',
-  'boxes-and-lines': 'Boxes and lines diagram',
-  mindmap: 'Mindmap diagram',
-  wireframe: 'UI wireframe diagram',
-};
-
 /** All chart types with descriptions, for chart type autocomplete. Excludes `multi-line` alias. */
 export const CHART_TYPES: ReadonlyArray<{ name: string; description: string }> =
   [...ALL_CHART_TYPES]
@@ -537,6 +537,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 +1067,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',
+    ],
+  };
+}