@diagrammo/dgmo 0.8.4 → 0.8.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/.claude/commands/dgmo.md +300 -0
  2. package/.cursorrules +20 -2
  3. package/.github/copilot-instructions.md +20 -2
  4. package/.windsurfrules +20 -2
  5. package/AGENTS.md +23 -3
  6. package/dist/cli.cjs +191 -189
  7. package/dist/editor.cjs +5 -18
  8. package/dist/editor.cjs.map +1 -1
  9. package/dist/editor.js +5 -18
  10. package/dist/editor.js.map +1 -1
  11. package/dist/highlight.cjs +543 -0
  12. package/dist/highlight.cjs.map +1 -0
  13. package/dist/highlight.d.cts +32 -0
  14. package/dist/highlight.d.ts +32 -0
  15. package/dist/highlight.js +513 -0
  16. package/dist/highlight.js.map +1 -0
  17. package/dist/index.cjs +3253 -3356
  18. package/dist/index.cjs.map +1 -1
  19. package/dist/index.d.cts +77 -56
  20. package/dist/index.d.ts +77 -56
  21. package/dist/index.js +3247 -3349
  22. package/dist/index.js.map +1 -1
  23. package/docs/ai-integration.md +1 -1
  24. package/docs/language-reference.md +113 -33
  25. package/gallery/fixtures/boxes-and-lines.dgmo +64 -0
  26. package/gallery/fixtures/slope.dgmo +7 -6
  27. package/package.json +26 -6
  28. package/src/boxes-and-lines/collapse.ts +78 -0
  29. package/src/boxes-and-lines/layout.ts +319 -0
  30. package/src/boxes-and-lines/parser.ts +694 -0
  31. package/src/boxes-and-lines/renderer.ts +848 -0
  32. package/src/boxes-and-lines/types.ts +40 -0
  33. package/src/c4/parser.ts +10 -5
  34. package/src/c4/renderer.ts +232 -56
  35. package/src/chart.ts +9 -4
  36. package/src/cli.ts +49 -6
  37. package/src/completion.ts +25 -33
  38. package/src/d3.ts +187 -46
  39. package/src/dgmo-router.ts +3 -7
  40. package/src/echarts.ts +38 -2
  41. package/src/editor/highlight-api.ts +444 -0
  42. package/src/editor/keywords.ts +6 -19
  43. package/src/er/parser.ts +10 -4
  44. package/src/gantt/parser.ts +7 -4
  45. package/src/gantt/renderer.ts +3 -5
  46. package/src/index.ts +106 -50
  47. package/src/infra/parser.ts +7 -5
  48. package/src/infra/renderer.ts +2 -2
  49. package/src/kanban/parser.ts +7 -5
  50. package/src/kanban/renderer.ts +43 -18
  51. package/src/org/parser.ts +7 -4
  52. package/src/org/renderer.ts +40 -29
  53. package/src/sequence/parser.ts +11 -5
  54. package/src/sequence/renderer.ts +114 -45
  55. package/src/sitemap/parser.ts +8 -4
  56. package/src/sitemap/renderer.ts +137 -57
  57. package/src/utils/legend-svg.ts +44 -20
  58. package/src/utils/parsing.ts +1 -1
  59. package/src/utils/tag-groups.ts +21 -1
  60. package/gallery/fixtures/initiative-status-full.dgmo +0 -46
  61. package/gallery/fixtures/initiative-status-phases.dgmo +0 -29
  62. package/gallery/fixtures/initiative-status.dgmo +0 -9
  63. package/src/initiative-status/collapse.ts +0 -76
  64. package/src/initiative-status/filter.ts +0 -63
  65. package/src/initiative-status/layout.ts +0 -650
  66. package/src/initiative-status/parser.ts +0 -629
  67. package/src/initiative-status/renderer.ts +0 -1199
  68. package/src/initiative-status/types.ts +0 -57
@@ -98,6 +98,7 @@ For **examples** of real diagrams, call `mcp__dgmo__get_examples("<type>")` —
98
98
  - "states" / "lifecycle" / "transitions" → `state`
99
99
  - "org" / "team" / "hierarchy" → `org`
100
100
  - "roadmap" / "project status" → `initiative-status` or `gantt`
101
+ - "boxes" / "nodes and edges" / "general diagram" → `boxes-and-lines`
101
102
  - "compare" / "metrics" / "data" → `bar`, `line`, `pie`, etc.
102
103
  - If genuinely ambiguous, suggest your best guess with a one-line rationale.
103
104
  2. **Get syntax + examples** — call `mcp__dgmo__get_language_reference("<type>")` and `mcp__dgmo__get_examples("<type>")`.
@@ -257,6 +258,7 @@ Key options:
257
258
  | `sitemap` | Website / app navigation structure |
258
259
  | `infra` | Infrastructure traffic flow with rps computation |
259
260
  | `gantt` | Project scheduling with dependencies |
261
+ | `boxes-and-lines` | General-purpose node-edge diagrams with groups and tags |
260
262
 
261
263
  ## Key Syntax Patterns
262
264
 
@@ -379,6 +381,304 @@ API
379
381
  latency-ms 45
380
382
  ```
381
383
 
384
+ ### slope
385
+
386
+ ```
387
+ slope Fleet Strength
388
+
389
+ period 1715 1725
390
+
391
+ Blackbeard 40 4
392
+ Roberts 12 52
393
+ Anne Bonny (red) 8 15
394
+ ```
395
+
396
+ - `period` directive required before data rows (one-line or indented block for multi-token labels)
397
+ - Data rows: `Label value1 value2` — space-separated, no colons
398
+ - Right-scan: parser takes numeric values from the right, everything left is the label
399
+ - Color annotations: `Label (color) value1 value2`
400
+
401
+ ### timeline
402
+
403
+ ```
404
+ timeline Product Roadmap
405
+ sort tag:Team
406
+
407
+ tag Team alias t
408
+ Engineering(blue)
409
+ Design(purple)
410
+
411
+ era 2024-01 -> 2024-06 Phase 1
412
+ marker 2024-03 Beta Launch
413
+
414
+ 2024-01->2024-03 Core API | t: Engineering
415
+ 2024-02->2024-05 UX Research | t: Design
416
+ 2024-06 GA Release | t: Engineering
417
+ ```
418
+
419
+ - Dates: `YYYY`, `YYYY-MM`, `YYYY-MM-DD`. Ranges: `start->end`. Durations: `start->6m`, `->2w`, `->30d`
420
+ - Uncertain end: `2024-03?`. Point events: single date, no range
421
+ - `era start -> end Label` — background band. `marker date Label` — vertical line
422
+ - `## Group(color)` headers for manual grouping, or `tag` + `sort tag:Name` for swimlanes
423
+ - Pipe metadata: `| tagalias: Value`
424
+
425
+ ### gantt
426
+
427
+ ```
428
+ gantt Sprint Plan
429
+ start 2024-01-15
430
+ today-marker 2024-03-01
431
+ critical-path
432
+ dependencies
433
+
434
+ 10bd Design | 80%
435
+ parallel
436
+ [Backend]
437
+ 15bd API Layer
438
+ 5bd? Auth Module
439
+ -> Frontend.Integration | offset: -3bd
440
+ [Frontend]
441
+ 10bd Components
442
+ 5bd Integration
443
+ 5bd QA Testing
444
+ 0d Release
445
+ ```
446
+
447
+ - `start YYYY-MM-DD` — project start date (required)
448
+ - Duration: `10bd Task Name` (business days). Uncertain: `5bd?`. Milestone: `0d`
449
+ - `parallel` block for concurrent tracks. `[Group]` for named sections
450
+ - Progress: `| 80%` or trailing `80%`
451
+ - Dependencies: `-> Target.Task` or `-blocks-> Target.Task`. `offset: -3bd` for overlap
452
+ - `today-marker`, `critical-path`, `dependencies` — top-level directives
453
+ - Tags + eras + markers same as timeline
454
+
455
+ ### c4
456
+
457
+ ```
458
+ c4 Banking System
459
+
460
+ Customer is a person
461
+ description: A customer of the bank
462
+
463
+ Banking is a system
464
+ description: Online banking portal
465
+ containers
466
+ WebApp is a container | tech: React
467
+ API is a container | tech: Node.js
468
+ DB is a container is a database | tech: PostgreSQL
469
+
470
+ Email is a system
471
+ description: External email service
472
+
473
+ Customer -Uses-> Banking
474
+ Banking -Sends emails [SMTP]-> Email
475
+ ```
476
+
477
+ - Elements: `Name is a person|system|container|component`
478
+ - Metadata (pipe-delimited): `| description: text, tech: stack`
479
+ - Indented `description:` also works (no pipe needed)
480
+ - Sections: `containers` (inside system), `components` (inside container), `deployment`
481
+ - Deployment: `NodeName is a cloud|database|cache|queue`
482
+ - Arrows: sync `-label [tech]->`, async `~label [tech]~>`, bidirectional `<->`, `<~>`
483
+
484
+ ### class
485
+
486
+ ```
487
+ class Type Hierarchy
488
+
489
+ Drawable [interface]
490
+ + draw(): void
491
+
492
+ Shape implements Drawable [abstract]
493
+ # x: number
494
+ + area(): number
495
+ count: number {static}
496
+
497
+ Circle extends Shape
498
+ - radius: number
499
+
500
+ Color [enum]
501
+ Red
502
+ Green
503
+ Blue
504
+
505
+ Canvas
506
+ *-- Shape : contains
507
+ ..> Logger : uses
508
+ ```
509
+
510
+ - Modifiers: `[abstract]`, `[interface]`, `[enum]`
511
+ - Inheritance: `Child extends Parent`, `Child implements Interface`
512
+ - Visibility: `+` public, `#` protected, `-` private. Static: `{static}`
513
+ - Relationships: `A *-- B` (composition), `A o-- B` (aggregation), `A --|> B` (inheritance), `A ..|> B` (implementation), `A ..> B` (dependency), `A -> B` (association)
514
+ - Optional label: `A *-- B : description`
515
+
516
+ ### initiative-status
517
+
518
+ ```
519
+ initiative-status Q2 Roadmap
520
+
521
+ [Identity]
522
+ Auth Service | done
523
+ SSO Integration | doing
524
+ -> Auth Service | done
525
+ MFA Rollout | blocked
526
+ -> SSO Integration | doing
527
+
528
+ [Payments]
529
+ Payment Gateway | doing
530
+ Billing UI | todo
531
+ -> Payment Gateway | doing
532
+
533
+ Auth Service -> Payment Gateway: validates | done
534
+ ```
535
+
536
+ - Status values: `done`, `doing`, `todo`, `blocked`, `na`
537
+ - Dependencies: `-> Target | status` (indented) or `Source -> Target: label | status`
538
+ - Groups: `[Group Name]` with indented items
539
+ - Tags supported for phase/team coloring
540
+
541
+ ### venn
542
+
543
+ ```
544
+ venn Full-Stack Skills
545
+
546
+ Frontend(blue) alias fe
547
+ Backend(green) alias be
548
+ DevOps(orange) alias de
549
+
550
+ fe + be Web Systems
551
+ be + de Platform Ops
552
+ fe + be + de Full Stack
553
+ ```
554
+
555
+ - Sets: `Name(color) alias id` — declares a circle
556
+ - Overlaps: `id + id Label` — names the intersection region
557
+ - Option: `values on` to show sizes. Sized form: `id(color): 120 "Label"`
558
+
559
+ ### quadrant
560
+
561
+ ```
562
+ quadrant Feature Priorities
563
+
564
+ x-label Low Effort, High Effort
565
+ y-label Low Impact, High Impact
566
+
567
+ top-left Quick Wins(green)
568
+ top-right Major Projects
569
+ bottom-left Fill-ins
570
+ bottom-right Avoid(red)
571
+
572
+ Dark Mode (blue) 0.25, 0.85
573
+ API v2 0.8, 0.9
574
+ Fix Typos 0.1, 0.15
575
+ ```
576
+
577
+ - Axis labels: `x-label Low, High` and `y-label Low, High`
578
+ - Quadrant labels: `top-left`, `top-right`, `bottom-left`, `bottom-right`
579
+ - Data: `Label (color) x, y` where x,y are 0–1
580
+
581
+ ### sankey / chord
582
+
583
+ ```
584
+ // sankey — flow diagram
585
+ sankey Budget Allocation
586
+
587
+ Revenue (green)
588
+ Costs: 600
589
+ Profit (blue): 400
590
+
591
+ // arrow syntax also works
592
+ Revenue -> Marketing: 200
593
+
594
+ // chord — same syntax, circular layout
595
+ chord Team Collaboration
596
+ Engineering -> Design 85
597
+ Design -> Product 68
598
+ ```
599
+
600
+ - Indented syntax: parent → child with `Target: weight`
601
+ - Arrow syntax: `Source -> Target: weight` (sankey) or `Source -> Target weight` (chord)
602
+ - Node colors: `Name (color)`. Link colors: `Target: 600 (red)`
603
+
604
+ ### state
605
+
606
+ ```
607
+ state Order Lifecycle
608
+ direction LR
609
+
610
+ [*] -> Pending -submit-> Validating
611
+
612
+ Validating
613
+ -approved-> Processing
614
+ -rejected-> Cancelled(red)
615
+
616
+ ## Fulfillment(blue)
617
+ Processing -ship-> Shipped
618
+ Shipped -delivered-> Done
619
+
620
+ Cancelled -> [*]
621
+ Done -> [*]
622
+ ```
623
+
624
+ - `[*]` — start/end pseudostate (filled circle)
625
+ - Transitions: `A -> B`, `A -label-> B`, `A -(color)-> B`
626
+ - Chains: `A -> B -> C` on one line
627
+ - Indented transitions use parent as source
628
+ - Groups: `## GroupName(color)` with indented states
629
+ - Options: `direction LR` (left-right) or `TB` (top-bottom, default)
630
+
631
+ ### scatter
632
+
633
+ ```
634
+ scatter Funding vs Revenue
635
+ x-label Funding ($M)
636
+ y-label Revenue ($M)
637
+
638
+ [SaaS](blue)
639
+ Acme 12, 8.5
640
+ DataSync 5.2, 3.1
641
+
642
+ [Fintech](green)
643
+ PayFlow 45, 32
644
+ LendTech 18, 12.5
645
+ ```
646
+
647
+ - Data: `Label x, y` or `Label x, y, size` (bubble chart)
648
+ - Groups: `[Category](color)` headers
649
+ - Options: `labels on`, `xlabel`, `ylabel`, `sizelabel`
650
+
651
+ ### boxes-and-lines
652
+
653
+ ```
654
+ boxes-and-lines Architecture
655
+
656
+ tag Team t Backend(blue), Frontend(green), Platform(purple)
657
+ active-tag Team
658
+ direction LR
659
+
660
+ API Gateway | t: Backend
661
+ -routes-> AuthService
662
+ -queries-> DB
663
+
664
+ AuthService | t: Backend
665
+ DB | t: Platform
666
+
667
+ [Cloud]
668
+ API Gateway
669
+ AuthService
670
+
671
+ Redis <-syncs-> DB | t: Platform
672
+ ```
673
+
674
+ - Nodes: explicit `Name | metadata` or implicit from edges
675
+ - Edges: `A -label-> B` (directed), `A <-label-> B` (bidirectional)
676
+ - Indented edges use parent as source: `Parent` then ` -label-> Target`
677
+ - Groups: `[Name]` with indented children (max 2 levels deep)
678
+ - Tags: `tag Name alias Value1(color), Value2(color)` + `active-tag Name` + `hide alias:value`
679
+ - Options: `direction LR` (left-right) or `TB` (top-bottom, default)
680
+ - Shape inference: names containing DB/database → cylinder, Cache/Redis → diamond, Queue → hexagon, etc.
681
+
382
682
  ## Anti-Patterns
383
683
 
384
684
  ```
package/.cursorrules CHANGED
@@ -103,9 +103,27 @@ API
103
103
 
104
104
  Properties: `cache-hit`, `firewall-block`, `ratelimit-rps`, `max-rps`, `instances` (N or N-M), `latency-ms`, `cb-error-threshold`. Groups: `[Name]` with children. Roles are inferred from behavior.
105
105
 
106
- ## All 32 chart types
106
+ ### Boxes and lines
107
+ ```
108
+ boxes-and-lines Architecture
109
+ tag Team t Backend(blue), Frontend(green)
110
+ active-tag Team
111
+ direction LR
112
+
113
+ API Gateway | t: Backend
114
+ -routes-> AuthService
115
+ -queries-> DB
116
+
117
+ [Cloud]
118
+ API Gateway
119
+ AuthService
120
+ ```
121
+
122
+ Nodes: implicit from edges or explicit with `| metadata`. Edges: `A -label-> B`, `A <-label-> B` (bidi). Groups: `[Name]` with indented children (max 2 levels). Tags: `tag Name alias values`, `active-tag`, `hide`. Options: `direction LR|TB`.
123
+
124
+ ## All 34 chart types
107
125
 
108
- bar, line, multi-line, area, 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
126
+ bar, line, multi-line, area, 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
109
127
 
110
128
  ## Common patterns
111
129
 
@@ -107,9 +107,27 @@ API
107
107
 
108
108
  Properties: `cache-hit`, `firewall-block`, `ratelimit-rps`, `max-rps`, `instances` (N or N-M), `latency-ms`, `cb-error-threshold`. Groups: `[Name]` with children. Roles are inferred from behavior.
109
109
 
110
- ## All 32 chart types
110
+ ### Boxes and lines
111
+ ```
112
+ boxes-and-lines Architecture
113
+ tag Team t Backend(blue), Frontend(green)
114
+ active-tag Team
115
+ direction LR
116
+
117
+ API Gateway | t: Backend
118
+ -routes-> AuthService
119
+ -queries-> DB
120
+
121
+ [Cloud]
122
+ API Gateway
123
+ AuthService
124
+ ```
125
+
126
+ Nodes: implicit from edges or explicit with `| metadata`. Edges: `A -label-> B`, `A <-label-> B` (bidi). Groups: `[Name]` with indented children (max 2 levels). Tags: `tag Name alias values`, `active-tag`, `hide`. Options: `direction LR|TB`.
127
+
128
+ ## All 34 chart types
111
129
 
112
- bar, line, multi-line, area, 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
130
+ bar, line, multi-line, area, 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
113
131
 
114
132
  ## Common patterns
115
133
 
package/.windsurfrules CHANGED
@@ -103,9 +103,27 @@ API
103
103
 
104
104
  Properties: `cache-hit`, `firewall-block`, `ratelimit-rps`, `max-rps`, `instances` (N or N-M), `latency-ms`, `cb-error-threshold`. Groups: `[Name]` with children. Roles are inferred from behavior.
105
105
 
106
- ## All 32 chart types
106
+ ### Boxes and lines
107
+ ```
108
+ boxes-and-lines Architecture
109
+ tag Team t Backend(blue), Frontend(green)
110
+ active-tag Team
111
+ direction LR
112
+
113
+ API Gateway | t: Backend
114
+ -routes-> AuthService
115
+ -queries-> DB
116
+
117
+ [Cloud]
118
+ API Gateway
119
+ AuthService
120
+ ```
121
+
122
+ Nodes: implicit from edges or explicit with `| metadata`. Edges: `A -label-> B`, `A <-label-> B` (bidi). Groups: `[Name]` with indented children (max 2 levels). Tags: `tag Name alias values`, `active-tag`, `hide`. Options: `direction LR|TB`.
123
+
124
+ ## All 34 chart types
107
125
 
108
- bar, line, multi-line, area, 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
126
+ bar, line, multi-line, area, 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
109
127
 
110
128
  ## Common patterns
111
129
 
package/AGENTS.md CHANGED
@@ -19,7 +19,7 @@ When the `dgmo` MCP server is configured, use these tools directly:
19
19
  - `render_diagram` — renders to PNG or SVG, returns file path
20
20
  - `share_diagram` — creates a shareable diagrammo.app URL
21
21
  - `open_in_app` — opens diagram in Diagrammo desktop app (macOS)
22
- - `list_chart_types` — lists all 32 supported chart types with descriptions
22
+ - `list_chart_types` — lists all 34 supported chart types with descriptions
23
23
  - `get_language_reference` — fetches full syntax for any chart type (call this before generating an unfamiliar chart type)
24
24
  - `generate_report` — renders multiple diagrams into an HTML report with table of contents
25
25
 
@@ -113,9 +113,29 @@ API
113
113
  latency-ms: 45
114
114
  ```
115
115
 
116
- ## All 32 chart types
116
+ ## All 34 chart types
117
117
 
118
- bar, line, multi-line, area, 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
118
+ bar, line, multi-line, area, 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
119
+
120
+ ### Boxes and lines
121
+ ```
122
+ boxes-and-lines Architecture
123
+
124
+ tag Team t Backend(blue), Frontend(green)
125
+ active-tag Team
126
+ direction LR
127
+
128
+ API Gateway | t: Backend
129
+ -routes-> AuthService
130
+ -queries-> DB
131
+
132
+ AuthService | t: Backend
133
+ DB | t: Backend
134
+
135
+ [Cloud]
136
+ API Gateway
137
+ AuthService
138
+ ```
119
139
 
120
140
  ## Common patterns
121
141