@diagrammo/dgmo 0.8.4 → 0.8.6

package/docs/ai-integration.md

@@ -105,4 +105,4 @@ dgmo --chart-types --json        # Machine-readable chart type list
 
 Run `dgmo --chart-types` for the full list, or see `docs/language-reference.md`.
 
-29 types: bar, line, area, multi-line, pie, doughnut, radar, polar-area, bar-stacked, scatter, sankey, chord, function, heatmap, funnel, slope, wordcloud, arc, timeline, venn, quadrant, sequence, flowchart, class, er, org, kanban, c4, initiative-status, infra.
+34 types: bar, line, area, multi-line, pie, doughnut, radar, polar-area, bar-stacked, scatter, sankey, chord, function, heatmap, funnel, slope, wordcloud, arc, timeline, venn, quadrant, sequence, flowchart, state, class, er, org, kanban, c4, initiative-status, sitemap, infra, gantt, boxes-and-lines.

package/docs/language-reference.md

@@ -51,10 +51,11 @@ Syntax changes introduced in the consistency cleanup. Old forms now produce erro
 11. [Initiative-Status Diagrams](#11-initiative-status-diagrams)
 12. [Sitemap Diagrams](#12-sitemap-diagrams)
 13. [Gantt Charts](#13-gantt-charts)
-14. [Timeline Diagrams](#14-timeline-diagrams)
-15. [Data Charts](#15-data-charts)
-16. [Visualizations](#16-visualizations)
-17. [Colon Usage Summary](#17-colon-usage-summary)
+14. [Boxes and Lines Diagrams](#14-boxes-and-lines-diagrams)
+15. [Timeline Diagrams](#15-timeline-diagrams)
+16. [Data Charts](#16-data-charts)
+17. [Visualizations](#17-visualizations)
+18. [Colon Usage Summary](#18-colon-usage-summary)
 
 ---
 
@@ -95,7 +96,7 @@ tag GroupName [alias X]
 - First entry is default unless another is marked `default`
 - Must appear before diagram content
 
-**Diagram types that support tags**: sequence, infra, org, c4, er, kanban, gantt, initiative-status, sitemap, timeline
+**Diagram types that support tags**: sequence, infra, org, c4, er, kanban, gantt, initiative-status, sitemap, timeline, boxes-and-lines
 
 ### 1.4 Pipe Metadata
 
@@ -925,15 +926,86 @@ parallel
 
 ---
 
-## 14. Timeline Diagrams
+## 14. Boxes and Lines Diagrams
 
 ### 14.1 Declaration
 
+```
+boxes-and-lines [Title]
+```
+
+Requires explicit first line — no heuristic detection. Default layout direction is left-to-right.
+
+### 14.2 Nodes
+
+```
+NodeLabel
+NodeLabel | key: value, key2: value2
+NodeLabel | description: Some text here
+NodeLabel [type]
+NodeLabel [type] | key: value
+```
+
+Nodes are created explicitly or implicitly (when referenced in edges). Shape is inferred from the name unless overridden with `[type]`.
+
+Valid types: `service`, `database`, `actor`, `queue`, `cache`, `gateway`, `external`, `networking`, `frontend`, `default`.
+
+### 14.3 Edges
+
+```
+Source -> Target
+Source -> Target | key: value
+Source -label-> Target
+Source <-> Target
+Source <-label-> Target
+```
+
+Indented shorthand (source from preceding node):
+```
+API | description: Main gateway
+  -routes-> UserService
+  -routes-> ProductService
+```
+
+### 14.4 Groups
+
+```
+[Group Name]
+  indented nodes...
+```
+
+Nested groups (max depth 2):
+```
+[AWS]
+  [us-east-1]
+    API
+    DB
+```
+
+Group metadata cascades to children. Group-to-group edges:
+```
+[Region A] -> [Region B]
+[Region A] -VPN-> [Region B]
+```
+
+### 14.5 Options
+
+- `direction TB` — top-to-bottom layout (default: `LR`)
+- `mode shapes` — render as inferred shapes (default: `rectangles`)
+- `active-tag GroupName`
+- `hide team:Backend` (colon syntax for tag:value)
+
+---
+
+## 15. Timeline Diagrams
+
+### 15.1 Declaration
+
 ```
 timeline [Title]
 ```
 
-### 14.2 Events
+### 15.2 Events
 
 **Point event:**
 ```
@@ -958,7 +1030,7 @@ timeline [Title]
 Date formats: `YYYY`, `YYYY-MM`, `YYYY-MM-DD`, `YYYY-MM-DD HH:MM`
 Duration units: `min`, `h`, `d`, `w`, `m`, `y`
 
-### 14.3 Eras
+### 15.3 Eras
 
 **Flat form:**
 ```
@@ -972,7 +1044,7 @@ era
   1718 -> 1720 Woodes Rogers Era (orange)
 ```
 
-### 14.4 Markers
+### 15.4 Markers
 
 **Flat form:**
 ```
@@ -986,7 +1058,7 @@ marker
   1720-01 End of Golden Age (red)
 ```
 
-### 14.5 Groups
+### 15.5 Groups
 
 ```
 [Royal Navy]
@@ -995,9 +1067,9 @@ marker
 
 ---
 
-## 15. Data Charts
+## 16. Data Charts
 
-### 15.1 Simple Charts (bar, line, pie, doughnut, area, polar-area, radar, bar-stacked)
+### 16.1 Simple Charts (bar, line, pie, doughnut, area, polar-area, radar, bar-stacked)
 
 **Declaration:** `bar [Title]`, `line [Title]`, etc.
 
@@ -1043,7 +1115,7 @@ stacked
 era Day 1 -> Day 3 Rough Seas (red)
 ```
 
-### 15.2 Scatter / Bubble Charts
+### 16.2 Scatter / Bubble Charts
 
 **Data rows (space-separated, NO colon):**
 ```
@@ -1069,7 +1141,7 @@ no-labels
 
 Labels are on by default. Use `no-labels` to hide point names.
 
-### 15.3 Heatmap
+### 16.3 Heatmap
 
 **Columns:**
 ```
@@ -1085,7 +1157,7 @@ RowLabel 5 4 3
 
 Commas between values are optional. Thousands commas supported.
 
-### 15.4 Function Charts (Colon REQUIRED)
+### 16.4 Function Charts (Colon REQUIRED)
 
 ```
 function Trajectories
@@ -1102,7 +1174,7 @@ The colon between name and expression is **required** — both sides can contain
 **Options:**
 - `shade` (boolean; off by default, shades area below curves when enabled)
 
-### 15.5 Sankey Charts
+### 16.5 Sankey Charts
 
 **Tree structure (indented, space-separated):**
 ```
@@ -1119,7 +1191,7 @@ Source -- Target 2000
 
 `->` = directed, `--` = undirected. Thousands commas supported in values.
 
-### 15.6 Chord Charts
+### 16.6 Chord Charts
 
 ```
 Blackbeard -- Bonnet 150        // undirected
@@ -1128,7 +1200,7 @@ Roberts -> Rackham 20           // directed
 
 Thousands commas supported in values.
 
-### 15.7 Funnel Charts
+### 16.7 Funnel Charts
 
 **Data rows (space-separated, NO colon):**
 ```
@@ -1141,24 +1213,31 @@ Thousands commas supported.
 
 ---
 
-## 16. Visualizations
+## 17. Visualizations
 
-### 16.1 Slope Charts (Colon REQUIRED for data)
+### 17.1 Slope Charts
 
 ```
 slope Fleet Strength
 
-1715 1725
+period 1715 1725
 
-Blackbeard: 40 4
-Roberts: 12 52
+Blackbeard 40 4
+Roberts 12 52
 ```
 
-- Period labels on their own line, commas optional
-- Data rows: `Label: value1 value2` — colon required, commas between values optional
-- Thousands commas supported in values
+- Period directive required: `period Label1 Label2` (one-line) or indented block for multi-token labels:
+  ```
+  period
+    Before COVID
+    After COVID
+  ```
+- Data rows: `Label value1 value2` — space-separated, no colons, no commas between values
+- Thousands commas within values supported (e.g., `1,000`)
+- Color annotations: `Label (color) value1 value2`
+- Minimum 2 periods required
 
-### 16.2 Wordcloud
+### 17.2 Wordcloud
 
 ```
 wordcloud Pirate Skills
@@ -1173,7 +1252,7 @@ navigation 88
 - Data: space-separated only (`word value`)
 - Options: `rotate none|mixed|angled`, `max N`, `size min max`
 
-### 16.3 Arc Diagrams
+### 17.3 Arc Diagrams
 
 ```
 arc Pirate Alliances
@@ -1188,7 +1267,7 @@ order group
 - Link: `Source -> Target weight` — space before optional weight
 - Options: `order appearance|name|group|degree`
 
-### 16.4 Venn Diagrams
+### 17.4 Venn Diagrams
 
 ```
 venn Skill Overlap
@@ -1204,7 +1283,7 @@ sw + nav + lead Legendary Pirates
 - Set declaration: `Name(color) alias X`
 - Intersections: `Set1 + Set2 Label` — label follows the last set reference (no colon)
 
-### 16.5 Quadrant Diagrams
+### 17.5 Quadrant Diagrams
 
 ```
 quadrant Crew Assessment
@@ -1227,7 +1306,7 @@ Navigator 0.85, 0.8
 
 ---
 
-## 17. Colon Usage Summary
+## 18. Colon Usage Summary
 
 ### Constructs Where Colons Are REQUIRED
 
@@ -1239,7 +1318,6 @@ Navigator 0.85, 0.8
 | Class field types | class | `+ name: string` |
 | Class method returns | class | `+ sail(): void` |
 | Function expressions | function | `f(x): x^2 + 1` |
-| Slope data rows | slope | `Blackbeard: 40 4` |
 | Hide tag values | initiative-status | `hide phase:Planning` |
 
 ### Colons OPTIONAL
@@ -1265,13 +1343,15 @@ Navigator 0.85, 0.8
 | Section dividers | sequence | `== Phase ==` |
 | Comments | all | `// comment` |
 | Wordcloud data | wordcloud | `swordsmanship 95` |
+| Slope data rows | slope | `Blackbeard 40 4` |
+| Slope period directive | slope | `period 1715 1725` |
 | Venn intersections | venn | `sw + nav Sea Raiders` |
 
 ### The Rule
 
 **Colons appear in two contexts:**
 1. **Value assignment** — `key: value` in pipe metadata, indented tag/metadata assignment (org, c4), and hide directives
-2. **Type/expression separation** — where labels can contain spaces and a delimiter is needed (function expressions, slope data, class members)
+2. **Type/expression separation** — where labels can contain spaces and a delimiter is needed (function expressions, class members)
 
 **Exception**: Known-schema properties (infra node properties, ER columns) remain space-separated even though they are indented. The colon rule applies to open-ended metadata, not fixed property schemas.
 

package/gallery/fixtures/boxes-and-lines.dgmo

@@ -0,0 +1,64 @@
+boxes-and-lines E-Commerce Platform
+
+tag Team t Backend(blue), Frontend(green), Platform(purple)
+tag Priority p High(red), Medium(orange), Low(gray)
+
+active-tag Team
+hide priority:Low
+
+direction LR
+
+// --- Services ---
+API Gateway | t: Backend, description: Main entry point for all requests
+  -routes-> UserService
+  -routes-> ProductService
+  -routes-> OrderService
+
+UserService | t: Backend, description: Handles auth and profiles
+  -reads-> UserDB
+  -checks-> SessionCache
+
+ProductService | t: Frontend, description: Product catalog and search
+  -queries-> ProductDB
+  -invalidates-> ProductCache
+
+OrderService | t: Backend, description: Order processing pipeline
+  -writes-> OrderDB
+  -publishes-> OrderQueue
+
+// --- Data Stores ---
+UserDB | t: Platform
+ProductDB | t: Platform
+OrderDB | t: Platform
+SessionCache | t: Platform
+ProductCache | t: Platform
+OrderQueue | t: Platform
+
+// --- External ---
+PaymentGateway | t: Backend, description: Stripe integration
+OrderService -charges-> PaymentGateway
+
+// --- Consumer ---
+WebApp | t: Frontend
+WebApp -> API Gateway
+
+Admin | t: Backend
+Admin -> API Gateway
+
+// --- Groups ---
+[AWS us-east-1]
+  [Compute]
+    API Gateway
+    UserService
+    ProductService
+    OrderService
+  [Data]
+    UserDB
+    ProductDB
+    OrderDB
+
+// --- Group edge ---
+OrderQueue -> PaymentGateway
+
+// --- Bidirectional ---
+SessionCache <-syncs-> ProductCache | p: Medium

package/gallery/fixtures/slope.dgmo

@@ -1,8 +1,9 @@
 slope Programming Language Popularity
 
-2020, 2022, 2025
-Python (blue) 3, 1, 1
-JavaScript (yellow) 1, 2, 2
-TypeScript (cyan) 7, 4, 3
-Rust (orange) 18, 12, 5
-Go (green) 10, 8, 7
+period 2020 2022 2025
+
+Python (blue) 3 1 1
+JavaScript (yellow) 1 2 2
+TypeScript (cyan) 7 4 3
+Rust (orange) 18 12 5
+Go (green) 10 8 7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",
@@ -30,6 +30,16 @@
         "types": "./dist/editor.d.cts",
         "default": "./dist/editor.cjs"
       }
+    },
+    "./highlight": {
+      "import": {
+        "types": "./dist/highlight.d.ts",
+        "default": "./dist/highlight.js"
+      },
+      "require": {
+        "types": "./dist/highlight.d.cts",
+        "default": "./dist/highlight.cjs"
+      }
     }
   },
   "files": [
@@ -116,10 +126,20 @@
     "@lezer/lr": "^1.4.8"
   },
   "peerDependenciesMeta": {
-    "@codemirror/language": { "optional": true },
-    "@codemirror/state": { "optional": true },
-    "@lezer/common": { "optional": true },
-    "@lezer/highlight": { "optional": true },
-    "@lezer/lr": { "optional": true }
+    "@codemirror/language": {
+      "optional": true
+    },
+    "@codemirror/state": {
+      "optional": true
+    },
+    "@lezer/common": {
+      "optional": true
+    },
+    "@lezer/highlight": {
+      "optional": true
+    },
+    "@lezer/lr": {
+      "optional": true
+    }
   }
 }

package/src/boxes-and-lines/collapse.ts

@@ -0,0 +1,78 @@
+// ============================================================
+// Boxes and Lines — Collapse/Expand Transform
+// ============================================================
+
+import type { ParsedBoxesAndLines, BLGroup } from './types';
+
+export interface BLCollapseResult {
+  parsed: ParsedBoxesAndLines;
+  collapsedChildCounts: Map<string, number>;
+  originalGroups: BLGroup[];
+}
+
+/**
+ * Pure transform: returns a new ParsedBoxesAndLines with collapsed groups
+ * removed from the diagram content.
+ *
+ * - Children of collapsed groups removed from nodes
+ * - Edges redirected: endpoints in collapsed groups → group ID
+ * - Internal edges (both in same collapsed group) dropped
+ * - Duplicate edges (same source, target, label) deduplicated
+ * - Collapsed groups removed from groups[] (layout handles as nodes)
+ */
+export function collapseBoxesAndLines(
+  parsed: ParsedBoxesAndLines,
+  collapsedGroups: Set<string>
+): BLCollapseResult {
+  const originalGroups = parsed.groups;
+
+  if (collapsedGroups.size === 0) {
+    return { parsed, collapsedChildCounts: new Map(), originalGroups };
+  }
+
+  // Build group lookup by label
+  const groupByLabel = new Map<string, BLGroup>();
+  for (const group of parsed.groups) {
+    groupByLabel.set(group.label, group);
+  }
+
+  // Build node → collapsed group lookup
+  const nodeToGroup = new Map<string, string>();
+  const collapsedChildCounts = new Map<string, number>();
+
+  for (const groupLabel of collapsedGroups) {
+    const group = groupByLabel.get(groupLabel);
+    if (!group) continue;
+    const groupId = `__group_${groupLabel}`;
+
+    for (const child of group.children) {
+      nodeToGroup.set(child, groupId);
+    }
+    collapsedChildCounts.set(groupLabel, group.children.length);
+  }
+
+  // Filter nodes: remove children of collapsed groups
+  const nodes = parsed.nodes.filter((n) => !nodeToGroup.has(n.label));
+
+  // Remap and deduplicate edges
+  const edgeKeys = new Set<string>();
+  const edges: typeof parsed.edges = [];
+  for (const edge of parsed.edges) {
+    const src = nodeToGroup.get(edge.source) ?? edge.source;
+    const tgt = nodeToGroup.get(edge.target) ?? edge.target;
+    if (src === tgt) continue;
+    const key = `${src}|${tgt}|${edge.label ?? ''}`;
+    if (edgeKeys.has(key)) continue;
+    edgeKeys.add(key);
+    edges.push({ ...edge, source: src, target: tgt });
+  }
+
+  // Keep only groups that are not collapsed
+  const groups = parsed.groups.filter((g) => !collapsedGroups.has(g.label));
+
+  return {
+    parsed: { ...parsed, nodes, edges, groups },
+    collapsedChildCounts,
+    originalGroups,
+  };
+}