@diagrammo/dgmo 0.6.2 → 0.6.3

package/src/infra/renderer.ts

@@ -7,12 +7,10 @@ import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
 import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
-import type { ParsedInfra, InfraTagGroup } from './types';
+import type { InfraTagGroup } from './types';
 import { resolveColor } from '../colors';
-import type { ComputedInfraModel } from './types';
 import type { InfraLayoutResult, InfraLayoutNode, InfraLayoutEdge, InfraLayoutGroup } from './layout';
 import { inferRoles, collectDiagramRoles, collectFanoutSourceIds, FANOUT_ROLE } from './roles';
-import type { InfraRole } from './roles';
 import { parseInfra } from './parser';
 import { computeInfra } from './compute';
 import { layoutInfra } from './layout';
@@ -34,11 +32,9 @@ import {
 // Constants
 // ============================================================
 
-const DIAGRAM_PADDING = 20;
 const NODE_FONT_SIZE = 13;
 const META_FONT_SIZE = 10;
 const META_LINE_HEIGHT = 14;
-const RPS_FONT_SIZE = 11;
 const EDGE_LABEL_FONT_SIZE = 11;
 const GROUP_LABEL_FONT_SIZE = 14;
 const NODE_BORDER_RADIUS = 8;
@@ -58,8 +54,6 @@ const LEGEND_FIXED_GAP = 16; // gap between fixed legend and scaled diagram —
 const COLOR_HEALTHY = '#22c55e';
 const COLOR_WARNING = '#eab308';
 const COLOR_OVERLOADED = '#ef4444';
-const COLOR_NEUTRAL = '#94a3b8';
-
 /** SLO thresholds resolved for a single node (chart-level + per-node override). */
 interface NodeSlo {
   availThreshold: number | null; // fraction e.g. 0.999
@@ -106,11 +100,8 @@ interface ComputedRow {
 }
 
 // Animation constants
-const FLOW_DASH = '8 6';          // dash-array for animated edges
-const FLOW_DASH_LEN = 14;         // sum of dash + gap (for offset keyframe)
 const FLOW_SPEED_MIN = 2.5;       // seconds at max RPS
 const FLOW_SPEED_MAX = 6;         // seconds at min RPS
-const OVERLOAD_PULSE_SPEED = 0.8; // seconds for overload pulse cycle
 const PARTICLE_R = 5;             // particle circle radius
 const PARTICLE_COUNT_MIN = 1;     // min particles per edge
 const PARTICLE_COUNT_MAX = 4;     // max particles per edge (at max RPS)
@@ -742,11 +733,6 @@ function getDisplayProps(node: InfraLayoutNode, expanded: boolean, diagramOption
 }
 
 
-function formatRps(rps: number): string {
-  if (rps >= 1000) return `${(rps / 1000).toFixed(1)}k rps`;
-  return `${Math.round(rps)} rps`;
-}
-
 /** RPS value without "rps" suffix — for key-value rows where the key already says "RPS". */
 function formatRpsShort(rps: number): string {
   if (rps >= 1000) return `${(rps / 1000).toFixed(1)}k`;

package/src/initiative-status/renderer.ts

@@ -5,11 +5,12 @@
 import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
+import { runInExportContainer, extractExportSvg } from '../utils/export-container';
 import { contrastText, mix } from '../palettes/color-utils';
 import type { PaletteColors } from '../palettes';
 import type { ParsedInitiativeStatus, InitiativeStatus } from './types';
 import type { ParticipantType } from '../sequence/parser';
-import type { ISLayoutResult, ISLayoutNode, ISLayoutEdge, ISLayoutGroup } from './layout';
+import type { ISLayoutResult } from './layout';
 import { parseInitiativeStatus } from './parser';
 import { layoutInitiativeStatus } from './layout';
 
@@ -436,7 +437,6 @@ export function renderInitiativeStatus(
   const scale = Math.min(MAX_SCALE, scaleX, scaleY);
 
   const scaledW = diagramW * scale;
-  const scaledH = diagramH * scale;
   const offsetX = (width - scaledW) / 2;
   const offsetY = titleHeight + DIAGRAM_PADDING;
 
@@ -850,14 +850,7 @@ export function renderInitiativeStatusForExport(
   const exportWidth = layout.width + DIAGRAM_PADDING * 2;
   const exportHeight = layout.height + DIAGRAM_PADDING * 2 + titleOffset;
 
-  const container = document.createElement('div');
-  container.style.width = `${exportWidth}px`;
-  container.style.height = `${exportHeight}px`;
-  container.style.position = 'absolute';
-  container.style.left = '-9999px';
-  document.body.appendChild(container);
-
-  try {
+  return runInExportContainer(exportWidth, exportHeight, (container) => {
     renderInitiativeStatus(
       container,
       parsed,
@@ -867,19 +860,6 @@ export function renderInitiativeStatusForExport(
       undefined,
       { width: exportWidth, height: exportHeight }
     );
-
-    const svgEl = container.querySelector('svg');
-    if (!svgEl) return '';
-
-    if (theme === 'transparent') {
-      svgEl.style.background = 'none';
-    }
-
-    svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    svgEl.style.fontFamily = FONT_FAMILY;
-
-    return svgEl.outerHTML;
-  } finally {
-    document.body.removeChild(container);
-  }
+    return extractExportSvg(container, theme);
+  });
 }

package/src/kanban/parser.ts

@@ -1,5 +1,4 @@
 import type { PaletteColors } from '../palettes';
-import type { DgmoError } from '../diagnostics';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
 import { resolveColor } from '../colors';
 import { matchTagBlockHeading } from '../utils/tag-groups';
@@ -15,7 +14,6 @@ import type {
   KanbanColumn,
   KanbanCard,
   KanbanTagGroup,
-  KanbanTagEntry,
 } from './types';
 
 // ============================================================

package/src/org/layout.ts

@@ -81,8 +81,6 @@ export interface OrgLayoutResult {
 // ============================================================
 
 const CHAR_WIDTH = 7.5;
-const LABEL_FONT_SIZE = 13;
-const META_FONT_SIZE = 11;
 const META_LINE_HEIGHT = 16;
 const HEADER_HEIGHT = 28;
 const SEPARATOR_GAP = 6;
@@ -1128,8 +1126,6 @@ export function layoutOrg(
   const allExpanded = expandAllLegend && activeTagGroup == null;
   const effectiveW = (g: OrgLegendGroup) =>
     activeTagGroup != null || allExpanded ? g.width : g.minifiedWidth;
-  const effectiveH = (g: OrgLegendGroup) =>
-    activeTagGroup != null || allExpanded ? g.height : g.minifiedHeight;
 
   if (visibleGroups.length > 0) {
     if (legendPosition === 'bottom') {

package/src/org/renderer.ts

@@ -4,10 +4,11 @@
 
 import * as d3Selection from 'd3-selection';
 import { FONT_FAMILY } from '../fonts';
+import { runInExportContainer, extractExportSvg } from '../utils/export-container';
 import type { PaletteColors } from '../palettes';
 import { mix } from '../palettes/color-utils';
 import type { ParsedOrg } from './parser';
-import type { OrgLayoutResult, OrgLayoutNode } from './layout';
+import type { OrgLayoutResult } from './layout';
 import { parseOrg } from './parser';
 import { layoutOrg } from './layout';
 import {
@@ -687,38 +688,16 @@ export function renderOrgForExport(
   const layout = layoutOrg(parsed, undefined, undefined, exportHidden);
   const isDark = theme === 'dark';
 
-  // Create offscreen container
-  const container = document.createElement('div');
   const titleOffset = parsed.title ? TITLE_HEIGHT : 0;
   const exportWidth = layout.width + DIAGRAM_PADDING * 2;
-  const exportHeight =
-    layout.height + DIAGRAM_PADDING * 2 + titleOffset;
+  const exportHeight = layout.height + DIAGRAM_PADDING * 2 + titleOffset;
 
-  container.style.width = `${exportWidth}px`;
-  container.style.height = `${exportHeight}px`;
-  container.style.position = 'absolute';
-  container.style.left = '-9999px';
-  document.body.appendChild(container);
-
-  try {
-    // No hiddenAttributes passed to renderOrg — export never shows eye icons
+  // No hiddenAttributes passed to renderOrg — export never shows eye icons
+  return runInExportContainer(exportWidth, exportHeight, (container) => {
     renderOrg(container, parsed, layout, palette, isDark, undefined, {
       width: exportWidth,
       height: exportHeight,
     });
-
-    const svgEl = container.querySelector('svg');
-    if (!svgEl) return '';
-
-    if (theme === 'transparent') {
-      svgEl.style.background = 'none';
-    }
-
-    svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
-    svgEl.style.fontFamily = FONT_FAMILY;
-
-    return svgEl.outerHTML;
-  } finally {
-    document.body.removeChild(container);
-  }
+    return extractExportSvg(container, theme);
+  });
 }

package/src/sequence/parser.ts

@@ -153,12 +153,14 @@ export interface ParsedSequenceDgmo {
   error: string | null;
 }
 
-// "Name is a type" pattern — e.g. "AuthService is a service"
+// "Name is a type" pattern — e.g. "Auth Server is a service"
+// Participant names may contain spaces; [^:]+? stops at colons so that
+// note lines like "note right of A: this is a service" are not falsely matched.
 // Remainder after type is parsed separately for aka/position modifiers
-const IS_A_PATTERN = /^(\S+)\s+is\s+an?\s+(\w+)(?:\s+(.+))?$/i;
+const IS_A_PATTERN = /^([^:]+?)\s+is\s+an?\s+(\w+)(?:\s+(.+))?$/i;
 
 // Standalone "Name position N" pattern — e.g. "DB position -1"
-const POSITION_ONLY_PATTERN = /^(\S+)\s+position\s+(-?\d+)$/i;
+const POSITION_ONLY_PATTERN = /^([^:]+?)\s+position\s+(-?\d+)$/i;
 
 // Colored participant declaration — e.g. "Tapin2(green)", "API(blue)"
 const COLORED_PARTICIPANT_PATTERN = /^(\S+?)\(([^)]+)\)\s*$/;
@@ -174,9 +176,10 @@ const SECTION_PATTERN = /^==\s+(.+?)(?:\s*==)?\s*$/;
 // Arrow pattern for sequence inference — detects any arrow form
 const ARROW_PATTERN = /\S+\s*(?:<-\S+-|<~\S+~|-\S+->|~\S+~>|->|~>|<-|<~)\s*\S+/;
 
-// Note patterns — "note: text", "note right of API: text", "note left of User"
-const NOTE_SINGLE = /^note(?:\s+(right|left)\s+of\s+(\S+))?\s*:\s*(.+)$/i;
-const NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+([^\s:]+))?\s*:?\s*$/i;
+// Note patterns — "note: text", "note right of Auth Server: text"
+// Participant names may contain spaces; the colon acts as the delimiter.
+const NOTE_SINGLE = /^note(?:\s+(right|left)\s+of\s+(.+?))?\s*:\s*(.+)$/i;
+const NOTE_MULTI = /^note(?:\s+(right|left)\s+of\s+(.+?))?\s*:?\s*$/i;
 
 /**
  * Parse a .dgmo file with `chart: sequence` into a structured representation.
@@ -673,7 +676,7 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
 
     // ---- Error: plain bidirectional arrows (A <-> B, A <~> B) ----
     const bidiPlainMatch = arrowCore.match(
-      /^(\S+)\s*(?:<->|<~>)\s*(\S+)/
+      /^(.+?)\s*(?:<->|<~>)\s*(.+)/
     );
     if (bidiPlainMatch) {
       pushError(
@@ -684,8 +687,8 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     }
 
     // ---- Deprecated bare return arrows: A <- B, A <~ B ----
-    const bareReturnSync = arrowCore.match(/^(\S+)\s+<-\s+(\S+)$/);
-    const bareReturnAsync = arrowCore.match(/^(\S+)\s+<~\s+(\S+)$/);
+    const bareReturnSync = arrowCore.match(/^(.+?)\s+<-\s+(.+)$/);
+    const bareReturnAsync = arrowCore.match(/^(.+?)\s+<~\s+(.+)$/);
     const bareReturn = bareReturnSync || bareReturnAsync;
     if (bareReturn) {
       const to = bareReturn[1];
@@ -698,8 +701,8 @@ export function parseSequenceDgmo(content: string): ParsedSequenceDgmo {
     }
 
     // ---- Bare (unlabeled) call arrows: A -> B, A ~> B ----
-    const bareCallSync = arrowCore.match(/^(\S+)\s*->\s*(\S+)$/);
-    const bareCallAsync = arrowCore.match(/^(\S+)\s*~>\s*(\S+)$/);
+    const bareCallSync = arrowCore.match(/^(.+?)\s*->\s*(.+)$/);
+    const bareCallAsync = arrowCore.match(/^(.+?)\s*~>\s*(.+)$/);
     const bareCall = bareCallSync || bareCallAsync;
     if (bareCall) {
       contentStarted = true;

package/src/sequence/renderer.ts

@@ -10,7 +10,6 @@ import {
   truncateBareUrl,
   renderInlineText,
 } from '../utils/inline-markdown';
-export type { InlineSpan } from '../utils/inline-markdown';
 export { parseInlineMarkdown, truncateBareUrl };
 import { FONT_FAMILY } from '../fonts';
 import { resolveColor } from '../colors';
@@ -2129,7 +2128,6 @@ export function renderSequenceDiagram(
     // IMPORTANT: only the <g> carries data-line-number / data-section —
     // children must NOT have them, otherwise the click walk-up resolves
     // to a line-number navigation before reaching data-section-toggle.
-    const HIT_AREA_HEIGHT = 36;
     const sectionG = svg
       .append('g')
       .attr('data-section-toggle', '')

package/src/sequence/tag-resolution.ts

@@ -5,7 +5,6 @@
 // Resolves effective tag values for participants and messages
 // using the priority chain: explicit > group > receiver-inherit > default > neutral
 
-import type { TagGroup } from '../utils/tag-groups';
 import type {
   ParsedSequenceDgmo,
   SequenceParticipant,

package/src/sitemap/layout.ts

@@ -3,7 +3,7 @@
 // ============================================================
 
 import dagre from '@dagrejs/dagre';
-import type { ParsedSitemap, SitemapNode, SitemapEdge } from './types';
+import type { ParsedSitemap, SitemapNode } from './types';
 import type { TagGroup } from '../utils/tag-groups';
 import { resolveTagColor, injectDefaultTagMetadata } from '../utils/tag-groups';
 
@@ -89,8 +89,6 @@ export interface SitemapLayoutResult {
 // ============================================================
 
 const CHAR_WIDTH = 7.5;
-const LABEL_FONT_SIZE = 13;
-const META_FONT_SIZE = 11;
 const META_LINE_HEIGHT = 16;
 const HEADER_HEIGHT = 28;
 const SEPARATOR_GAP = 6;
@@ -105,7 +103,6 @@ const CONTAINER_LABEL_HEIGHT = 28;
 const CONTAINER_META_LINE_HEIGHT = 16;
 
 // Legend (kanban-style pills)
-const LEGEND_GAP = 30;
 const LEGEND_HEIGHT = 28;
 const LEGEND_PILL_PAD = 16;
 const LEGEND_PILL_FONT_W = 11 * 0.6;
@@ -162,16 +159,6 @@ function resolveNodeColor(
 
 const OVERLAP_GAP = 20;
 
-function countDescendantNodes(node: SitemapNode, hiddenCounts?: Map<string, number>): number {
-  let count = 0;
-  for (const child of node.children) {
-    count += (child.isContainer ? 0 : 1) + countDescendantNodes(child, hiddenCounts);
-    const hc = hiddenCounts?.get(child.id);
-    if (hc) count += hc;
-  }
-  return count;
-}
-
 // ============================================================
 // Legend
 // ============================================================

package/src/sitemap/parser.ts

@@ -5,7 +5,7 @@
 import type { PaletteColors } from '../palettes';
 import { resolveColor } from '../colors';
 import { makeDgmoError, formatDgmoError, suggest } from '../diagnostics';
-import type { TagGroup, TagEntry } from '../utils/tag-groups';
+import type { TagGroup } from '../utils/tag-groups';
 import { isTagBlockHeading, matchTagBlockHeading, validateTagValues } from '../utils/tag-groups';
 import {
   measureIndent,
@@ -17,7 +17,6 @@ import {
 } from '../utils/parsing';
 import type {
   SitemapNode,
-  SitemapEdge,
   SitemapDirection,
   ParsedSitemap,
 } from './types';

package/src/sitemap/renderer.ts

@@ -10,9 +10,6 @@ import { mix } from '../palettes/color-utils';
 import type { ParsedSitemap } from './types';
 import type {
   SitemapLayoutResult,
-  SitemapLayoutNode,
-  SitemapLayoutEdge,
-  SitemapContainerBounds,
   SitemapLegendGroup,
 } from './layout';
 import {

package/src/utils/arrows.ts

@@ -13,15 +13,15 @@ export interface ParsedArrow {
   async: boolean;
 }
 
-// Forward (call) patterns
-const SYNC_LABELED_RE = /^(\S+)\s+-(.+)->\s+(\S+)$/;
-const ASYNC_LABELED_RE = /^(\S+)\s+~(.+)~>\s+(\S+)$/;
+// Forward (call) patterns — participant names may contain spaces, so use non-greedy (.+?)
+const SYNC_LABELED_RE = /^(.+?)\s+-(.+)->\s+(.+)$/;
+const ASYNC_LABELED_RE = /^(.+?)\s+~(.+)~>\s+(.+)$/;
 
 // Deprecated patterns — produce errors
-const RETURN_SYNC_LABELED_RE = /^(\S+)\s+<-(.+)-\s+(\S+)$/;
-const RETURN_ASYNC_LABELED_RE = /^(\S+)\s+<~(.+)~\s+(\S+)$/;
-const BIDI_SYNC_RE = /^(\S+)\s+<-(.+)->\s+(\S+)$/;
-const BIDI_ASYNC_RE = /^(\S+)\s+<~(.+)~>\s+(\S+)$/;
+const RETURN_SYNC_LABELED_RE = /^(.+?)\s+<-(.+)-\s+(.+)$/;
+const RETURN_ASYNC_LABELED_RE = /^(.+?)\s+<~(.+)~\s+(.+)$/;
+const BIDI_SYNC_RE = /^(.+?)\s+<-(.+)->\s+(.+)$/;
+const BIDI_ASYNC_RE = /^(.+?)\s+<~(.+)~>\s+(.+)$/;
 
 const ARROW_CHARS = ['->', '~>'];
 

package/src/utils/export-container.ts

@@ -0,0 +1,40 @@
+import { FONT_FAMILY } from '../fonts';
+
+/**
+ * Creates an offscreen DOM container at the given dimensions, runs `fn` inside it,
+ * then removes it (try/finally). Returns whatever `fn` returns.
+ */
+export function runInExportContainer<T>(
+  width: number,
+  height: number,
+  fn: (container: HTMLDivElement) => T,
+): T {
+  const container = document.createElement('div');
+  container.style.width = `${width}px`;
+  container.style.height = `${height}px`;
+  container.style.position = 'absolute';
+  container.style.left = '-9999px';
+  document.body.appendChild(container);
+  try {
+    return fn(container);
+  } finally {
+    document.body.removeChild(container);
+  }
+}
+
+/**
+ * Extracts the SVG element from an export container, applies required export attributes
+ * (xmlns, fontFamily, transparent background if requested), and returns its outerHTML.
+ * Returns '' if no SVG element is found.
+ */
+export function extractExportSvg(
+  container: HTMLElement,
+  theme: 'light' | 'dark' | 'transparent',
+): string {
+  const svgEl = container.querySelector('svg');
+  if (!svgEl) return '';
+  if (theme === 'transparent') svgEl.style.background = 'none';
+  svgEl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  svgEl.style.fontFamily = FONT_FAMILY;
+  return svgEl.outerHTML;
+}