@diagrammo/dgmo 0.8.22 → 0.8.23

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
@@ -381,56 +382,20 @@ export const COMPLETION_REGISTRY = new Map<string, DirectiveSpec>([
       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',
-  '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. */
 export const CHART_TYPES: ReadonlyArray<{ name: string; description: string }> =
   [...ALL_CHART_TYPES]

package/src/cycle/layout.ts

@@ -2,11 +2,14 @@
 // Cycle Diagram — Layout Engine
 // ============================================================
 
-import type {
-  ParsedCycle,
-  CycleLayoutNode,
-  CycleLayoutEdge,
-  CycleLayoutResult,
+import {
+  DEFAULT_EDGE_WIDTH,
+  MIN_EDGE_WIDTH,
+  arrowHeadLength,
+  type ParsedCycle,
+  type CycleLayoutNode,
+  type CycleLayoutEdge,
+  type CycleLayoutResult,
 } from './types';
 
 /** Minimum arc angle in radians (~15°) to keep arcs readable. */
@@ -519,11 +522,6 @@ function circleRectExitAngle(
   return (insideAngle + outsideAngle) / 2;
 }
 
-/** Default edge stroke width (must match renderer). */
-const DEFAULT_EDGE_WIDTH = 3;
-/** Arrowhead marker width in stroke-width units (must match renderer). */
-const ARROWHEAD_MARKER_W = 8;
-
 /** Compute edge paths for all edges in the parsed diagram. */
 function computeEdgePaths(
   layoutNodes: CycleLayoutNode[],
@@ -536,9 +534,13 @@ function computeEdgePaths(
   return parsed.edges.map((edge) => {
     const src = layoutNodes[edge.sourceIndex];
     const tgt = layoutNodes[edge.targetIndex];
-    const strokeWidth = edge.width ?? DEFAULT_EDGE_WIDTH;
-    // Arrowhead rendered length in pixels (markerUnits = strokeWidth)
-    const arrowLen = ARROWHEAD_MARKER_W * strokeWidth;
+    const strokeWidth = Math.max(
+      edge.width ?? DEFAULT_EDGE_WIDTH,
+      MIN_EDGE_WIDTH
+    );
+    // Arrowhead effective reach: full length minus the 10% overlap that
+    // slides the marker back to cover the stroke/arrowhead junction line.
+    const arrowLen = arrowHeadLength(strokeWidth) * 0.9;
     const { path, labelX, labelY, labelAngle } = buildEdgeArc(
       src,
       tgt,
@@ -578,7 +580,7 @@ function fitToCanvas(
   height: number,
   _isClockwise: boolean
 ): { radius: number } | null {
-  const PADDING = 10;
+  const PADDING = 30;
   let contentMinX = Infinity,
     contentMaxX = -Infinity;
   let contentMinY = Infinity,
@@ -672,20 +674,9 @@ function buildEdgeArc(
 ): { path: string; labelX: number; labelY: number; labelAngle: number } {
   const dir = isClockwise ? 1 : -1;
 
-  // Find where the cycle circle exits the source node
-  const startAngle = src.isCircle
-    ? circleNodeExitAngle(src.width / 2, radius, src.angle, dir)
-    : circleRectExitAngle(
-        src.x,
-        src.y,
-        src.width / 2,
-        src.height / 2,
-        cx,
-        cy,
-        radius,
-        src.angle,
-        dir
-      );
+  // Start arc from the source node's center angle — the node renders on top
+  // of the edge, so the overlap is hidden and there's no visible gap.
+  const startAngle = src.angle;
 
   // Find where the cycle circle exits the target node
   const nodeEndAngle = tgt.isCircle

package/src/cycle/renderer.ts

@@ -23,13 +23,15 @@ import { renderInlineText } from '../utils/inline-markdown';
 import type { PaletteColors } from '../palettes';
 import type { D3ExportDimensions } from '../utils/d3-types';
 import type { CompactViewState } from '../sharing';
-import type { ParsedCycle } from './types';
+import {
+  DEFAULT_EDGE_WIDTH,
+  MIN_EDGE_WIDTH,
+  arrowHeadLength,
+  type ParsedCycle,
+} from './types';
 import { computeCycleLayout } from './layout';
 
 // ── Constants ────────────────────────────────────────────────
-const DEFAULT_EDGE_WIDTH = 3;
-const ARROWHEAD_W = 8;
-const ARROWHEAD_H = 8;
 const NODE_FONT_SIZE = 13;
 const DESC_FONT_SIZE = 11;
 const EDGE_LABEL_FONT_SIZE = 11;
@@ -183,22 +185,28 @@ export function renderCycle(
   // Resolve default node color: first palette color (uniform)
   const defaultNodeColor = palette.primary;
 
-  // ── Arrowhead markers ──
-  const arrowColors = new Set<string>();
-  for (let i = 0; i < parsed.edges.length; i++) {
-    const edge = parsed.edges[i];
+  // ── Arrowhead markers (per color+width, markerUnits=strokeWidth) ──
+  const markerKeys = new Set<string>();
+  for (const edge of parsed.edges) {
     const color = resolveEdgeColor(edge, parsed, palette, defaultNodeColor);
-    arrowColors.add(color);
+    const sw = Math.max(edge.width ?? DEFAULT_EDGE_WIDTH, MIN_EDGE_WIDTH);
+    const key = `${color}|${sw}`;
+    if (!markerKeys.has(key)) {
+      markerKeys.add(key);
+      ensureArrowMarker(defs, color, sw);
+    }
   }
-  ensureArrowMarkers(defs, arrowColors);
 
   // ── Render edges (below nodes) ──
   for (let i = 0; i < layout.edges.length; i++) {
     const le = layout.edges[i];
     const edge = parsed.edges[i];
     const color = resolveEdgeColor(edge, parsed, palette, defaultNodeColor);
-    const strokeWidth = edge.width ?? DEFAULT_EDGE_WIDTH;
-    const markerId = `cycle-arrow-${color.replace('#', '')}`;
+    const strokeWidth = Math.max(
+      edge.width ?? DEFAULT_EDGE_WIDTH,
+      MIN_EDGE_WIDTH
+    );
+    const markerId = arrowMarkerId(color, strokeWidth);
 
     const edgeG = g.append('g').attr('class', 'cycle-edge');
 
@@ -514,26 +522,45 @@ function resolveEdgeColor(
   return defaultNodeColor;
 }
 
-function ensureArrowMarkers(
+/** Stable marker ID for a (color, strokeWidth) pair. */
+function arrowMarkerId(color: string, strokeWidth: number): string {
+  return `cycle-arrow-${color.replace('#', '')}-w${strokeWidth}`;
+}
+
+/**
+ * Create an arrowhead marker using markerUnits="strokeWidth" (SVG default)
+ * with per-edge dimensions.  The marker base automatically equals the stroke
+ * width — no gaps or lollipop effects.  Marker dimensions are computed so
+ * the rendered arrowhead length follows a sublinear formula:
+ *
+ *   rendered length = markerWidth × strokeWidth = arrowHeadLength(sw)
+ *   → markerWidth = arrowHeadLength(sw) / sw
+ *
+ * The height is fixed at 1 strokeWidth unit so the base = stroke width.
+ */
+function ensureArrowMarker(
   defs: d3Selection.Selection<SVGDefsElement, unknown, null, undefined>,
-  colors: Set<string>
+  color: string,
+  strokeWidth: number
 ): void {
-  for (const color of colors) {
-    const id = `cycle-arrow-${color.replace('#', '')}`;
-    defs
-      .append('marker')
-      .attr('id', id)
-      .attr('viewBox', `0 0 ${ARROWHEAD_W * 2} ${ARROWHEAD_H * 2}`)
-      .attr('refX', 0)
-      .attr('refY', ARROWHEAD_H)
-      .attr('markerWidth', ARROWHEAD_W)
-      .attr('markerHeight', ARROWHEAD_H)
-      .attr('orient', 'auto')
-      .append('polygon')
-      .attr(
-        'points',
-        `0,0 ${ARROWHEAD_W * 2},${ARROWHEAD_H} 0,${ARROWHEAD_H * 2}`
-      )
-      .attr('fill', color);
-  }
+  const id = arrowMarkerId(color, strokeWidth);
+  // Marker dimensions in strokeWidth units.
+  // Rendered size = mw × sw  (length)  and  mh × sw  (height).
+  const mw = arrowHeadLength(strokeWidth) / strokeWidth;
+  // Height proportional to length (½ ratio) but at least 1.5× stroke width
+  // so the arrowhead is always visibly wider than the stroke.
+  const mh = Math.max(1.5, mw * 0.5);
+
+  defs
+    .append('marker')
+    .attr('id', id)
+    .attr('viewBox', `0 0 ${mw} ${mh}`)
+    .attr('refX', mw * 0.1)
+    .attr('refY', mh / 2)
+    .attr('markerWidth', mw)
+    .attr('markerHeight', mh)
+    .attr('orient', 'auto')
+    .append('polygon')
+    .attr('points', `0,0 ${mw},${mh / 2} 0,${mh}`)
+    .attr('fill', color);
 }

package/src/cycle/types.ts

@@ -64,6 +64,27 @@ export interface CycleLayoutEdge {
   label?: string;
 }
 
+// ============================================================
+// Shared arrow-sizing helpers (used by both layout + renderer)
+// ============================================================
+
+/** Default edge stroke width. */
+export const DEFAULT_EDGE_WIDTH = 3;
+/** Minimum rendered stroke width — thinner strokes produce unusable arrowheads. */
+export const MIN_EDGE_WIDTH = 2;
+
+/**
+ * Compute the desired arrowhead length in user-space pixels using sublinear
+ * scaling.  The renderer uses markerUnits="strokeWidth" with computed marker
+ * dimensions so the arrowhead base always matches the stroke width (no gaps,
+ * no lollipop effect) while the rendered length follows this formula.
+ */
+const BASE_ARROW_SIZE = 8;
+const ARROW_SCALE = 6;
+export function arrowHeadLength(strokeWidth: number): number {
+  return BASE_ARROW_SIZE + ARROW_SCALE * Math.sqrt(strokeWidth);
+}
+
 export interface CycleLayoutResult {
   nodes: CycleLayoutNode[];
   edges: CycleLayoutEdge[];

package/src/d3.ts

@@ -21,7 +21,8 @@ export type VisualizationType =
   | 'quadrant'
   | 'sequence'
   | 'tech-radar'
-  | 'cycle';
+  | 'cycle'
+  | 'pyramid';
 
 interface D3DataItem {
   label: string;
@@ -7120,6 +7121,25 @@ export async function renderForExport(
     return finalizeSvgExport(container, theme, effectivePalette);
   }
 
+  if (detectedType === 'pyramid') {
+    const { parsePyramid } = await import('./pyramid/parser');
+    const { renderPyramidForExport } = await import('./pyramid/renderer');
+
+    const effectivePalette = await resolveExportPalette(theme, palette);
+    const pyramidParsed = parsePyramid(content);
+    if (pyramidParsed.error || pyramidParsed.layers.length === 0) return '';
+
+    const container = createExportContainer(EXPORT_WIDTH, EXPORT_HEIGHT);
+    renderPyramidForExport(
+      container,
+      pyramidParsed,
+      effectivePalette,
+      theme === 'dark',
+      { width: EXPORT_WIDTH, height: EXPORT_HEIGHT }
+    );
+    return finalizeSvgExport(container, theme, effectivePalette);
+  }
+
   const parsed = parseVisualization(content, palette);
   // Allow sequence diagrams through even if parseVisualization errors —
   // sequence is parsed by its own dedicated parser (parseSequenceDgmo)

package/src/dgmo-router.ts

@@ -22,6 +22,7 @@ import { parseWireframe } from './wireframe/parser';
 import { parseTechRadar } from './tech-radar/parser';
 import { parseCycle } from './cycle/parser';
 import { parseJourneyMap } from './journey-map/parser';
+import { parsePyramid } from './pyramid/parser';
 import { parseFirstLine } from './utils/parsing';
 import { makeDgmoError, suggest } from './diagnostics';
 import type { DgmoError } from './diagnostics';
@@ -142,6 +143,7 @@ const VISUALIZATION_TYPES = new Set([
   'quadrant',
   'tech-radar',
   'cycle',
+  'pyramid',
 ]);
 const DIAGRAM_TYPES = new Set([
   'sequence',
@@ -211,6 +213,63 @@ export function getAllChartTypes(): string[] {
   return [...DATA_CHART_TYPES, ...VISUALIZATION_TYPES, ...DIAGRAM_TYPES];
 }
 
+/**
+ * Canonical descriptions for every supported chart type. Shared by the CLI
+ * `--chart-types` flag, the editor autocomplete popup, and the MCP
+ * `list_chart_types` tool so all three surfaces stay in sync.
+ */
+export const CHART_TYPE_DESCRIPTIONS: Record<string, string> = {
+  bar: 'Bar chart — categorical comparisons',
+  line: 'Line chart — trends over time; supports era bands (era start -> end Label (color)) for annotating named periods',
+  'multi-line':
+    'Multi-line chart — multiple series trends over time; supports era bands',
+  area: 'Area chart — filled line chart; supports era bands',
+  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',
+  'tech-radar':
+    'Tech radar — technology adoption quadrants (adopt/trial/assess/hold)',
+  cycle:
+    'Cycle diagram — cyclical process visualization (PDCA, OODA, DevOps loops)',
+  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)',
+  state: 'State diagram — state machine / lifecycle transitions',
+  sitemap:
+    'Sitemap — navigable UI structure with pages, groups, and cross-link arrows',
+  infra:
+    'Infrastructure diagram — traffic flow with RPS computation, capacity modeling, and latency analysis',
+  gantt:
+    'Gantt chart — project scheduling with task dependencies and milestones',
+  'boxes-and-lines':
+    'Boxes and lines — general-purpose node-edge diagrams with nested groups, tags, and shape inference',
+  mindmap: 'Mindmap — radial hierarchy of ideas branching from a central topic',
+  wireframe:
+    'Wireframe — low-fidelity UI layout with panels, controls, and annotations',
+  'journey-map':
+    'Journey map — user experience flow with emotion scores, phases, and annotations',
+  pyramid:
+    'Pyramid — hierarchical layered pyramid (Maslow, DIKW, learning pyramid); inverted for funnel-of-learning style',
+};
+
 // ECharts-native types parsed by parseExtendedChart
 const ECHART_TYPES = new Set([
   'scatter',
@@ -243,6 +302,7 @@ const PARSE_DISPATCH = new Map<
   ['tech-radar', (c) => parseTechRadar(c)],
   ['cycle', (c) => parseCycle(c)],
   ['journey-map', (c) => parseJourneyMap(c)],
+  ['pyramid', (c) => parsePyramid(c)],
 ]);
 
 /**
@@ -260,7 +320,10 @@ const ALL_KNOWN_TYPES = new Set([
  * Parse DGMO content and return diagnostics without rendering.
  * Useful for the CLI and editor to surface all errors before attempting render.
  */
-export function parseDgmo(content: string): { diagnostics: DgmoError[] } {
+export function parseDgmo(content: string): {
+  diagnostics: DgmoError[];
+  chartType: string | null;
+} {
   const chartType = parseDgmoChartType(content);
 
   if (!chartType) {
@@ -268,11 +331,14 @@ export function parseDgmo(content: string): { diagnostics: DgmoError[] } {
     const colonDiag = detectColonChartType(content);
     if (colonDiag) {
       const fallback = parseVisualization(content).diagnostics;
-      return { diagnostics: [colonDiag, ...fallback] };
+      return { diagnostics: [colonDiag, ...fallback], chartType: null };
     }
 
     // No chart type detected — try visualization parser as fallback
-    return { diagnostics: parseVisualization(content).diagnostics };
+    return {
+      diagnostics: parseVisualization(content).diagnostics,
+      chartType: null,
+    };
   }
 
   const directParser = PARSE_DISPATCH.get(chartType);
@@ -280,6 +346,7 @@ export function parseDgmo(content: string): { diagnostics: DgmoError[] } {
     const result = directParser(content);
     return {
       diagnostics: [...result.diagnostics, ...detectEmptyContent(content)],
+      chartType,
     };
   }
 
@@ -287,12 +354,14 @@ export function parseDgmo(content: string): { diagnostics: DgmoError[] } {
     const result = parseChart(content);
     return {
       diagnostics: [...result.diagnostics, ...detectEmptyContent(content)],
+      chartType,
     };
   }
   if (ECHART_TYPES.has(chartType)) {
     const result = parseExtendedChart(content);
     return {
       diagnostics: [...result.diagnostics, ...detectEmptyContent(content)],
+      chartType,
     };
   }
 
@@ -300,6 +369,7 @@ export function parseDgmo(content: string): { diagnostics: DgmoError[] } {
   const result = parseVisualization(content);
   return {
     diagnostics: [...result.diagnostics, ...detectEmptyContent(content)],
+    chartType,
   };
 }
 

package/src/echarts.ts

@@ -1913,7 +1913,7 @@ function buildFunnelOption(
     bottom: 20,
     width: '60%',
     sort: 'descending' as const,
-    gap: 2,
+    gap: 0,
     minSize: '8%',
   };
 

package/src/editor/keywords.ts

@@ -17,6 +17,7 @@ export const CHART_TYPES = new Set([
   'tech-radar',
   'mindmap',
   'journey-map',
+  'pyramid',
   // Data chart types
   'bar',
   'line',
@@ -158,6 +159,8 @@ export const DIRECTIVE_KEYWORDS = new Set([
   // Layout
   'direction-tb',
   'direction-lr',
+  // Pyramid
+  'inverted',
   // Data chart metadata
   'title',
   'series',

package/src/index.ts

@@ -32,6 +32,8 @@ export {
   parseDgmo,
   getRenderCategory,
   isExtendedChartType,
+  getAllChartTypes,
+  CHART_TYPE_DESCRIPTIONS,
 } from './dgmo-router';
 export type { RenderCategory } from './dgmo-router';
 
@@ -63,6 +65,7 @@ export type {
 
 export {
   parseSequenceDgmo,
+  parseSequenceDgmo as parseSequenceDiagram,
   looksLikeSequence,
   isSequenceBlock,
   isSequenceNote,
@@ -331,8 +334,12 @@ export type {
   ResolvedGroup,
 } from './gantt/types';
 
-export { collapseOrgTree } from './org/collapse';
-export type { CollapsedOrgResult } from './org/collapse';
+export { collapseOrgTree, focusOrgTree } from './org/collapse';
+export type {
+  CollapsedOrgResult,
+  FocusOrgResult,
+  AncestorInfo,
+} from './org/collapse';
 
 export { parseMindmap } from './mindmap/parser';
 export type {
@@ -407,6 +414,10 @@ export type {
 } from './journey-map/types';
 export type { JourneyMapInteractiveOptions } from './journey-map/renderer';
 
+export { parsePyramid } from './pyramid/parser';
+export { renderPyramid, renderPyramidForExport } from './pyramid/renderer';
+export type { ParsedPyramid, PyramidLayer } from './pyramid/types';
+
 export { resolveOrgImports } from './org/resolver';
 export type {
   ReadFileFn,

package/src/infra/parser.ts

@@ -113,8 +113,8 @@ function extractPipeMetadata(rest: string): {
   const tags: Record<string, string> = {};
   let clean = rest;
   let match: RegExpExecArray | null;
-  const re = new RegExp(PIPE_META_RE.source, 'g');
-  while ((match = re.exec(rest)) !== null) {
+  PIPE_META_RE.lastIndex = 0;
+  while ((match = PIPE_META_RE.exec(rest)) !== null) {
     tags[match[1].trim()] = match[2].trim();
     clean = clean.replace(match[0], '');
   }

package/src/internal.ts

@@ -0,0 +1,16 @@
+// ============================================================
+// @diagrammo/dgmo/internal — internal helpers for app consumers.
+// Not part of the public API; may change between versions.
+// ============================================================
+
+export { parseDataRowValues } from './chart';
+export {
+  computeCardArchive,
+  computeCardMove,
+  isArchiveColumn,
+} from './kanban/mutations';
+export {
+  groupMessagesBySection,
+  buildNoteMessageMap,
+  collectNoteLineNumbers,
+} from './sequence/renderer';