@diagrammo/dgmo 0.15.1 → 0.17.0

package/gallery/fixtures/gantt-full.dgmo

@@ -5,20 +5,20 @@ critical-path
 dependencies
 
 tag Team as t
-  Engineering(blue)
-  Design(purple)
-  QA(orange)
-  Marketing(green)
+  Engineering blue
+  Design purple
+  QA orange
+  Marketing green
 
 tag Phase as p
-  Foundation(green)
-  Growth(orange)
-  Launch(red)
+  Foundation green
+  Growth orange
+  Launch red
 
 era 2024-01-15 -> 2024-02-15 Investor Review
-era 2024-03-10 -> 2024-03-14 GDC 2024 (purple)
+era 2024-03-10 -> 2024-03-14 GDC 2024 purple
 marker 2024-02-26 Board Meeting
-marker 2024-04-08 Trade Show Demo (orange)
+marker 2024-04-08 Trade Show Demo orange
 
 // Independent task with offset — starts 8bd after project start
 10bd Brand Guidelines | t: Design, p: Foundation, offset: 8bd

package/gallery/fixtures/gantt.dgmo

@@ -5,18 +5,18 @@ critical-path
 dependencies
 
 tag Team as t
-  Engineering(blue)
-  Design(purple)
-  QA(orange)
+  Engineering blue
+  Design purple
+  QA orange
 
 tag Phase as p
-  Foundation(green)
-  Growth(orange)
+  Foundation green
+  Growth orange
 
 era 2024-01-15 -> 2024-02-15 Investor Review
-era 2024-03-10 -> 2024-03-14 GDC 2024 (purple)
+era 2024-03-10 -> 2024-03-14 GDC 2024 purple
 marker 2024-02-26 Board Meeting
-marker 2024-04-08 Trade Show Demo (orange)
+marker 2024-04-08 Trade Show Demo orange
 
 // Independent task with offset — starts 8bd after project start
 10bd Brand Guidelines | t: Design, p: Foundation, offset: 8bd

package/gallery/fixtures/infra-full.dgmo

@@ -1,14 +1,14 @@
 infra E-Commerce Platform — Full Infrastructure
 
 tag Team as t
-  Backend(blue)
-  Platform(teal)
-  Data(purple)
+  Backend blue
+  Platform teal
+  Data purple
 
 tag Tier as r
-  Edge(green)
-  Core(blue)
-  Storage(orange)
+  Edge green
+  Core blue
+  Storage orange
 
 edge
   rps: 15000

package/gallery/fixtures/infra.dgmo

@@ -1,8 +1,8 @@
 infra Production Traffic Flow
 
 tag Team as t
-  Backend(blue)
-  Platform(teal)
+  Backend blue
+  Platform teal
 
 edge
   rps: 10000

package/gallery/fixtures/kanban.dgmo

@@ -1,27 +1,27 @@
 kanban Plunder Sprint 7
 
 tag Priority
-  Low(green)
-  Urgent(red)
-  High(orange)
+  Low green
+  Urgent red
+  High orange
 
 tag Crew as c
-  Blackbeard(red)
-  Anne Bonny(purple)
-  Calico Jack(teal)
+  Blackbeard red
+  Anne Bonny purple
+  Calico Jack teal
 
-[Awaiting Orders](red)
+[Awaiting Orders] red
   Recruit gunners at Tortuga | priority: High, c: Calico Jack
   Chart new trade route | priority: Urgent, c: Anne Bonny
     Scout the Windward Passage
     Avoid Royal Navy patrols
   Resupply rum and powder | priority: Low, c: Calico Jack
 
-[Underway](orange) | wip: 2
+[Underway] orange | wip: 2
   Forge letters of marque | priority: High, c: Anne Bonny
   Raid merchant convoy | priority: Urgent, c: Blackbeard
     Three ships spotted off Nassau
 
-[Done](green)
+[Done] green
   Bribe the harbour master | priority: High, c: Anne Bonny
   Repair hull damage | priority: Low, c: Blackbeard

package/gallery/fixtures/line.dgmo

@@ -2,8 +2,8 @@ line Daily Active Users (Q1 2025)
 x-label Week
 y-label Users (thousands)
 
-era Week 1 -> Week 6 Phase 1 (blue)
-era Week 6 -> Week 12 Phase 2 (green)
+era Week 1 -> Week 6 Phase 1 blue
+era Week 6 -> Week 12 Phase 2 green
 
 Week 1 12.4
 Week 2 13.1

package/gallery/fixtures/multi-line.dgmo

@@ -3,9 +3,9 @@ x-label Quarter
 y-label Amount ($M)
 
 series
-  Revenue (blue)
-  Operating Cost (red)
-  Net Profit (green)
+  Revenue blue
+  Operating Cost red
+  Net Profit green
 
 Q1 2023 4.2 3.1 1.1
 Q2 2023 4.8 3.3 1.5

package/gallery/fixtures/org-full.dgmo

@@ -1,14 +1,14 @@
 org Acme Corp
 
 tag Location
-  NY(blue)
-  LA(yellow)
-  CO(green)
-  Remote(purple)
+  NY blue
+  LA yellow
+  CO green
+  Remote purple
 
 tag Status
-  FTE(green)
-  Contractor(orange)
+  FTE green
+  Contractor orange
 
 Jane Smith
   role: CEO

package/gallery/fixtures/quadrant.dgmo

@@ -8,8 +8,8 @@ top-right Major Projects
 bottom-left Fill-ins
 bottom-right Avoid
 
-Dark Mode (blue) 0.25 0.85
-API v2 (red) 0.8 0.9
+Dark Mode blue 0.25 0.85
+API v2 red 0.8 0.9
 Fix Typos 0.1 0.15
 SSO Integration 0.75 0.7
 Export CSV 0.3 0.6

package/gallery/fixtures/sankey.dgmo

@@ -1,22 +1,22 @@
 sankey Website Traffic Flow
 
 // Source channels — colored by type
-Organic Search (green)
+Organic Search green
   Landing Page 450
-Paid Ads (orange)
+Paid Ads orange
   Landing Page 280
-Social Media (blue)
+Social Media blue
   Landing Page 180
-Email (purple)
+Email purple
   Landing Page 120
-Direct (teal)
+Direct teal
   Landing Page 90
 
 // Engagement & Conversion
 Landing Page
   Sign Up 340
   Browse Products 520
-  Bounce 260 (red)
+  Bounce 260 red
 
 Sign Up
   Free Trial 240
@@ -24,8 +24,8 @@ Sign Up
 
 Browse Products
   Add to Cart 310
-  Exit 210 (red)
+  Exit 210 red
 
 Add to Cart
-  Purchase (green) 220
-  Abandon 90 (red)
+  Purchase green 220
+  Abandon 90 red

package/gallery/fixtures/scatter.dgmo

@@ -2,20 +2,20 @@ scatter Startup Funding vs Revenue
 x-label Funding ($M)
 y-label Annual Revenue ($M)
 
-[SaaS](blue)
+[SaaS] blue
   Acme Cloud 12 8.5
   DataSync 5.2 3.1
   CloudOps 25 18.4
   PlatformX 8 5.7
   NexGen 3.5 1.2
 
-[Fintech](green)
+[Fintech] green
   PayFlow 45 32
   LendTech 18 12.5
   CoinBase+ 60 41
   QuickPay 9 6.8
 
-[HealthTech](red)
+[HealthTech] red
   MediScan 15 7.2
   HealthAI 22 14.1
   CareLink 7 3.8

package/gallery/fixtures/sequence-tags-protocols.dgmo

@@ -2,21 +2,21 @@ sequence Order Fulfillment — Protocols & Ownership
 active-tag Protocol
 
 tag Protocol as p
-  REST(blue)
-  gRPC(green)
-  Async(orange)
-  SQL(purple)
+  REST blue
+  gRPC green
+  Async orange
+  SQL purple
 
 tag Owner as o
-  Checkout(teal)
-  Fulfillment(orange)
-  Payments(red)
-  Data(blue)
+  Checkout teal
+  Fulfillment orange
+  Payments red
+  Data blue
 
 Buyer is an actor
-CheckoutSvc is a service | o: Checkout
-InventorySvc is a service | o: Fulfillment
-PaymentSvc is a service | o: Payments
+CheckoutSvc | o: Checkout
+InventorySvc | o: Fulfillment
+PaymentSvc | o: Payments
 OrderDB is a database | o: Data
 EventBus is a queue
 

package/gallery/fixtures/sequence-tags.dgmo

@@ -2,23 +2,23 @@ sequence API Gateway — Infrastructure Concerns
 active-tag Concern
 
 tag Concern as c
-  Caching(blue)
-  Auth(green)
-  RateLimiting(orange)
-  BusinessLogic(purple) default
+  Caching blue
+  Auth green
+  RateLimiting orange
+  BusinessLogic purple default
 
 tag Team as t
-  Platform(teal)
-  Product(orange)
-  Security(red)
+  Platform teal
+  Product orange
+  Security red
 
 Mobile is an actor
-Gateway is a gateway | t: Platform
+Gateway | t: Platform
 Redis is a cache | c: Caching, t: Platform
 
 [Backend] | t: Product
-  UserAPI is a service
-  OrderAPI is a service
+  UserAPI
+  OrderAPI
   DB is a database
 
 == Authentication ==

package/gallery/fixtures/sequence.dgmo

@@ -1,10 +1,10 @@
 sequence E-Commerce Checkout
 
 User is an actor
-App is a frontend
-API is a gateway
-Orders is a service
-Payments is an external
+App
+API
+Orders
+Payments
 DB is a database
 
 [Place Order]

package/gallery/fixtures/sitemap-full.dgmo

@@ -2,15 +2,15 @@ sitemap Grand Slam Tickets
 direction-tb
 
 tag Auth
-  Public(green)
-  Required(blue)
-  Admin(red)
+  Public green
+  Required blue
+  Admin red
 
 tag Type
-  Landing(purple)
-  Form(orange)
-  Content(cyan)
-  Transactional(yellow)
+  Landing purple
+  Form orange
+  Content cyan
+  Transactional yellow
 
 Home
   Auth: Public

package/gallery/fixtures/slope.dgmo

@@ -2,8 +2,8 @@ slope Programming Language Popularity
 
 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
+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/gallery/fixtures/spr-eras.dgmo

@@ -1,15 +1,15 @@
 line U.S. Strategic Petroleum Reserve
 y-label Million Barrels
 
-era '77 -> '81 Carter (blue)
-era '81 -> '89 Reagan (red)
-era '89 -> '93 Bush (red)
-era '93 -> '01 Clinton (blue)
-era '01 -> '09 Bush (red)
-era '09 -> '17 Obama (blue)
-era '17 -> '21 Trump (red)
-era '21 -> '25 Biden (blue)
-era '25 -> '25 Trump (red)
+era '77 -> '81 Carter blue
+era '81 -> '89 Reagan red
+era '89 -> '93 Bush red
+era '93 -> '01 Clinton blue
+era '01 -> '09 Bush red
+era '09 -> '17 Obama blue
+era '17 -> '21 Trump red
+era '21 -> '25 Biden blue
+era '25 -> '25 Trump red
 
 '77 7
 '78 67

package/gallery/fixtures/timeline.dgmo

@@ -2,9 +2,9 @@ timeline Product Roadmap 2024-2025
 sort tag:Team
 
 tag Team as t
-  Engineering(blue)
-  Design(purple)
-  Product(green)
+  Engineering blue
+  Design purple
+  Product green
 
 era 2024-01 -> 2024-06 Phase 1 - Foundation
 era 2024-07 -> 2024-12 Phase 2 - Growth

package/gallery/fixtures/venn.dgmo

@@ -1,8 +1,8 @@
 venn Full-Stack Developer Skills
 
-Frontend(blue) as fe
-Backend(green) as be
-DevOps(orange) as de
+Frontend blue as fe
+Backend green as be
+DevOps orange as de
 
 fe + be Web Systems
 be + de Platform Ops

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.15.1",
+  "version": "0.17.0",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "repository": {
@@ -117,6 +117,7 @@
     "prebuild": "rm -rf dist && pnpm codegen",
     "build": "tsup",
     "typecheck": "tsc --noEmit",
+    "typecheck:strict": "tsc --noEmit -p tsconfig.strict.json",
     "dev": "tsup --watch",
     "pretest": "pnpm codegen",
     "test": "vitest run --coverage",
@@ -130,12 +131,14 @@
     "lint:fix": "eslint . --fix",
     "format": "prettier --write src/",
     "format:check": "prettier --check src/",
+    "check:api": "pnpm build && bash scripts/check-api.sh check",
+    "check:api:update": "pnpm build && bash scripts/check-api.sh update",
     "check:duplication": "jscpd ./src",
     "check:deadcode": "knip",
     "check:spelling": "cspell \"src/**/*.ts\" \"tests/**/*.ts\"",
-    "check:all": "pnpm check:deadcode && pnpm check:spelling && pnpm check:duplication && pnpm check:circular && pnpm check:deps && pnpm check:security && pnpm build && pnpm check:publish && pnpm check:types",
+    "check:all": "pnpm check:deadcode && pnpm check:spelling && pnpm check:duplication && pnpm check:circular && pnpm check:deps && pnpm check:security && pnpm build && bash scripts/check-api.sh check && pnpm check:publish && pnpm check:types",
     "check:circular": "madge --circular --extensions ts src/ --json | node -e \"const c=JSON.parse(require('fs').readFileSync('/dev/stdin','utf8')); const n=c.length; if(n>4){console.error('New circular deps found ('+n+' > 4 known type-only cycles)');process.exit(1)}else if(n>0){console.log(n+' known type-only/dynamic cycles (safe)')}else{console.log('No circular dependencies')}\"",
-    "check:deps": "depcheck --ignores='@codemirror/language,@lezer/*,husky,lint-staged,tsup,axe-core'",
+    "check:deps": "depcheck --ignores='@codemirror/language,@lezer/*,husky,lint-staged,tsup,axe-core,type-coverage'",
     "check:security": "pnpm audit --prod",
     "check:publish": "publint",
     "check:size": "pnpm build && du -sh dist/ && echo '---' && ls -lh dist/*.js dist/*.cjs",
@@ -185,6 +188,7 @@
     "prettier": "^3.8.2",
     "publint": "^0.3.18",
     "tsup": "^8.5.1",
+    "type-coverage": "^2.29.7",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.58.1",
     "vitest": "^4.1.4"

package/src/advanced.ts

@@ -28,7 +28,6 @@ export type { DgmoError, DgmoSeverity } from './diagnostics';
 export {
   parseInArrowLabel,
   validateLabelCharacters,
-  matchColorParens,
   ARROW_DIAGNOSTIC_CODES,
 } from './utils/arrows';
 export type { ParseInArrowLabelResult } from './utils/arrows';

package/src/auto/index.ts

@@ -279,7 +279,7 @@ export function resolveTheme(
 function ensureStyles(): void {
   if (typeof document === 'undefined') return;
   const html = document.documentElement;
-  if (html && html.dataset && html.dataset[STYLE_FLAG] === '1') return;
+  if (html?.dataset?.[STYLE_FLAG] === '1') return;
 
   // If a <link rel="stylesheet"> for our css is already linked, skip inline.
   const linked = document.querySelector(
@@ -509,7 +509,7 @@ function determineReplaceTarget(matched: Element): Element {
   // If matched is a <code> whose only child of <pre> is itself, replace <pre>.
   if (matched.tagName === 'CODE') {
     const parent = matched.parentElement;
-    if (parent && parent.tagName === 'PRE') {
+    if (parent?.tagName === 'PRE') {
       const meaningfulChildren = Array.from(parent.childNodes).filter(
         (n) =>
           n.nodeType === 1 ||

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

@@ -636,8 +636,7 @@ export async function layoutBoxesAndLines(
       const edge = parsed.edges[i];
       if (edgeParallelCounts[i] === 0) continue;
       const elkEdge = edgeById.get(`e${i}`);
-      if (!elkEdge || !elkEdge.sections || elkEdge.sections.length === 0)
-        continue;
+      if (!elkEdge?.sections || elkEdge.sections.length === 0) continue;
       const container = elkEdge.container ?? 'root';
       const off = containerAbs.get(container) ?? { x: 0, y: 0 };
       const s = elkEdge.sections[0];

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

@@ -309,6 +309,7 @@ interface BLRenderOptions {
   controlsExpanded?: boolean;
   onToggleDescriptions?: (active: boolean) => void;
   onToggleControlsExpand?: () => void;
+  exportMode?: boolean;
 }
 
 export function renderBoxesAndLines(
@@ -328,6 +329,7 @@ export function renderBoxesAndLines(
     controlsExpanded,
     onToggleDescriptions,
     onToggleControlsExpand,
+    exportMode = false,
   } = options ?? {};
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -974,7 +976,7 @@ export function renderBoxesAndLines(
     const legendConfig: LegendConfig = {
       groups: parsed.tagGroups,
       position: { placement: 'top-center', titleRelation: 'below-title' },
-      mode: 'fixed',
+      mode: exportMode ? 'export' : 'preview',
       controlsGroup,
     };
     const legendState: LegendState = {
@@ -1017,11 +1019,13 @@ export function renderBoxesAndLinesForExport(
     exportDims?: { width: number; height: number };
     activeTagGroup?: string | null;
     hiddenTagValues?: Map<string, Set<string>>;
+    exportMode?: boolean;
   }
 ): void {
   renderBoxesAndLines(container, parsed, layout, palette, isDark, {
     exportDims: options?.exportDims,
     activeTagGroup: options?.activeTagGroup,
     hiddenTagValues: options?.hiddenTagValues,
+    exportMode: options?.exportMode,
   });
 }

package/src/c4/parser.ts

@@ -232,7 +232,7 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
     return result;
   };
 
-  if (!content || !content.trim()) {
+  if (!content?.trim()) {
     return fail(0, 'No content provided');
   }
 
@@ -350,7 +350,7 @@ export function parseC4(content: string, palette?: PaletteColors): ParsedC4 {
         if (!color) {
           pushError(
             lineNumber,
-            `Expected 'Value(color)' in tag group '${currentTagGroup.name}'`
+            `Expected 'Value color' in tag group '${currentTagGroup.name}'`
           );
           continue;
         }

package/src/c4/renderer.ts

@@ -232,7 +232,8 @@ export function renderC4Context(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  exportMode?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -636,7 +637,8 @@ export function renderC4Context(
       palette,
       isDark,
       activeTagGroup,
-      fixedLegend ? width : null
+      fixedLegend ? width : null,
+      exportMode
     );
   }
 }
@@ -1259,7 +1261,8 @@ function renderLegend(
   palette: PaletteColors,
   isDark: boolean,
   activeTagGroup?: string | null,
-  fixedWidth?: number | null
+  fixedWidth?: number | null,
+  exportMode?: boolean
 ): void {
   const groups = layout.legend.map((g) => ({
     name: g.name,
@@ -1268,7 +1271,7 @@ function renderLegend(
   const legendConfig: LegendConfig = {
     groups,
     position: { placement: 'top-center', titleRelation: 'below-title' },
-    mode: 'fixed',
+    mode: exportMode ? 'export' : 'preview',
   };
   const legendState: LegendState = { activeGroup: activeTagGroup ?? null };
   const containerWidth = fixedWidth ?? layout.width;
@@ -1300,7 +1303,8 @@ export function renderC4Containers(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  exportMode?: boolean
 ): void {
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
 
@@ -1805,7 +1809,8 @@ export function renderC4Containers(
       palette,
       isDark,
       activeTagGroup,
-      fixedLegend ? width : null
+      fixedLegend ? width : null,
+      exportMode
     );
   }
 }
@@ -1933,7 +1938,8 @@ export function renderC4Deployment(
   isDark: boolean,
   onClickItem?: (lineNumber: number) => void,
   exportDims?: { width?: number; height?: number },
-  activeTagGroup?: string | null
+  activeTagGroup?: string | null,
+  exportMode?: boolean
 ): void {
   renderC4Containers(
     container,
@@ -1943,7 +1949,8 @@ export function renderC4Deployment(
     isDark,
     onClickItem,
     exportDims,
-    activeTagGroup
+    activeTagGroup,
+    exportMode
   );
 }