@diagrammo/dgmo 0.2.26 → 0.2.28

package/.claude/skills/dgmo-chart/SKILL.md

@@ -0,0 +1,107 @@
+---
+name: dgmo-chart
+description: Generate a DGMO data chart (bar, line, pie, scatter, heatmap, etc.) from data or metrics.
+argument-hint: <data description or chart type>
+allowed-tools: Read, Write, Bash, Glob, Grep
+---
+
+# Generate DGMO Data Chart
+
+Generate a data visualization chart from metrics, data, or a description.
+
+## Instructions
+
+1. Understand the data and visualization goal from `$ARGUMENTS`
+2. If referencing data files, read them to extract the values
+3. Choose the best chart type:
+   - Categorical comparisons → `bar` or `bar-stacked`
+   - Trends over time → `line` or `area`
+   - Proportions → `pie` or `doughnut`
+   - Multi-dimensional → `radar`
+   - Correlations → `scatter`
+   - Matrix data → `heatmap`
+   - Flows/allocations → `sankey`
+   - Conversion funnels → `funnel`
+   - Before/after → `slope`
+   - Math functions → `function`
+   - Set overlaps → `venn`
+   - Priority matrices → `quadrant`
+4. Generate valid DGMO syntax
+
+## Chart Syntax Examples
+
+**Bar chart**:
+```
+chart: bar
+title: Revenue by Region
+series: Revenue
+xlabel: Region
+ylabel: USD
+
+North: 850
+South: 620
+East: 1100
+```
+
+**Multi-series line**:
+```
+title: Quarterly Performance
+series: Sales(red), Costs(blue)
+
+Q1: 100, 50
+Q2: 120, 55
+Q3: 110, 60
+```
+
+**Pie chart**:
+```
+chart: pie
+title: Market Share
+labels: percent
+
+Company A: 40
+Company B: 35
+Company C: 25
+```
+
+**Scatter plot** (with categories):
+```
+chart: scatter
+title: Performance
+xlabel: Experience
+ylabel: Output
+
+## Senior(blue)
+Alice: 7, 92
+Bob: 9, 88
+
+## Junior(green)
+Carol: 2, 70
+```
+
+**Heatmap**:
+```
+chart: heatmap
+title: Activity
+columns: Mon, Tue, Wed, Thu, Fri
+
+Team A: 5, 4, 5, 3, 4
+Team B: 2, 3, 2, 4, 3
+```
+
+## Common patterns
+
+- `series: Name1(color1), Name2(color2)` — multi-series with colors
+- `Label(color): value` — per-item colors
+- `labels: percent` — show percentages on pie/doughnut
+- `orientation: horizontal` — rotate bar charts
+- Data is always `Label: value` or `Label: v1, v2, v3` for multi-series
+
+## Output
+
+Write to a descriptive `.dgmo` file, then check if `dgmo` CLI is available (`command -v dgmo`). If not installed, tell the user:
+- `brew install diagrammo/dgmo/dgmo` (macOS, recommended)
+- `npm install -g @diagrammo/dgmo`
+- Or: `npx @diagrammo/dgmo <file>.dgmo`
+
+If available, offer to render: `dgmo <file>.dgmo -o <file>.svg` or `dgmo <file>.dgmo -o url`

package/.claude/skills/dgmo-flowchart/SKILL.md

@@ -0,0 +1,61 @@
+---
+name: dgmo-flowchart
+description: Generate a DGMO flowchart from a process description, decision tree, or code logic.
+argument-hint: <process or logic to diagram>
+allowed-tools: Read, Write, Bash, Glob, Grep
+---
+
+# Generate DGMO Flowchart
+
+Analyze a process, decision tree, or code logic and generate a `.dgmo` flowchart.
+
+## Instructions
+
+1. Understand the process from `$ARGUMENTS`
+2. If referencing code, explore the codebase to understand the logic
+3. Generate a valid DGMO flowchart
+
+## Flowchart Syntax
+
+```
+chart: flowchart
+title: Process Name
+
+(Start) -> <Decision?>
+  -yes-> [Process A] -> [[Subroutine]]
+  -no-> /Get Input/ -> <Decision?>
+[[Subroutine]] -> [Document~] -> (Done)
+```
+
+**Node shapes**:
+- `(Terminal)` — oval (start/end)
+- `[Process]` — rectangle
+- `<Decision?>` — diamond
+- `/Input Output/` — parallelogram
+- `[[Subroutine]]` — double-bordered rectangle
+- `[Document~]` — document shape (wavy bottom, note the `~`)
+
+**Arrows**:
+- `-label-> Target` — labeled connection
+- `-yes->`, `-no->` — decision branches
+- `-(red)-> Target` — colored arrow
+- `-label(red)-> Target` — labeled + colored
+
+**Colors**: Append `(colorname)` to nodes: `[Process(blue)]`
+
+**Chaining**: Multiple nodes on one line: `(Start) -> [A] -> [B] -> (End)`
+
+**Key rules**:
+- Use indentation for decision branches
+- Each decision branch starts with `-label->`
+- Node names can contain spaces
+- Use named colors only (not hex)
+
+## Output
+
+Write to a descriptive `.dgmo` file, then check if `dgmo` CLI is available (`command -v dgmo`). If not installed, tell the user:
+- `brew install diagrammo/dgmo/dgmo` (macOS, recommended)
+- `npm install -g @diagrammo/dgmo`
+- Or: `npx @diagrammo/dgmo <file>.dgmo`
+
+If available, offer to render: `dgmo <file>.dgmo -o <file>.svg` or `dgmo <file>.dgmo -o url`

package/.claude/skills/dgmo-generate/SKILL.md

@@ -0,0 +1,58 @@
+---
+name: dgmo-generate
+description: Generate a DGMO diagram from a natural language description. Picks the best chart/diagram type automatically.
+argument-hint: <description of what to diagram>
+allowed-tools: Read, Write, Bash
+---
+
+# Generate DGMO Diagram
+
+Generate a `.dgmo` diagram file based on the user's description. Pick the best diagram type for what they're describing.
+
+## Instructions
+
+1. Read the user's description from `$ARGUMENTS`
+2. Read the full DGMO language reference at `docs/language-reference.md` (relative to the repo root of the `dgmo` package, or find it via `npm root -g`/`node_modules/@diagrammo/dgmo/docs/language-reference.md`)
+3. Choose the best chart/diagram type based on the description:
+   - Interactions between services/people → `sequence`
+   - Decision trees, processes → `flowchart`
+   - Hierarchies, org structures → `org`
+   - Database schemas → `er`
+   - Class/type hierarchies → `class`
+   - System architecture → `c4`
+   - Task boards → `kanban`
+   - Project roadmaps → `initiative-status`
+   - Comparisons, data → `bar`, `line`, `pie`, etc.
+   - Flows, allocations → `sankey`
+   - Relationships → `arc` or `chord`
+   - Timelines → `timeline`
+   - Set overlaps → `venn`
+   - Priority matrices → `quadrant`
+4. Generate valid DGMO syntax following the language reference exactly
+5. Write the output to a descriptive `.dgmo` file (e.g., `auth-flow.dgmo`, `db-schema.dgmo`)
+
+## After generating
+
+Check if `dgmo` CLI is available:
+```bash
+command -v dgmo 2>/dev/null
+```
+
+If **not installed**, tell the user how to install it:
+- `brew install diagrammo/dgmo/dgmo` (macOS, recommended)
+- `npm install -g @diagrammo/dgmo`
+- Or run without installing: `npx @diagrammo/dgmo <file>.dgmo`
+
+If available (or after install), offer to render:
+```bash
+dgmo <file>.dgmo -o <file>.svg
+dgmo <file>.dgmo -o url          # shareable link
+```
+
+## Common mistakes to avoid
+
+- Don't use `#` for comments — use `//`
+- Don't use `async` keyword — use `~>` for async messages
+- Don't use `end` in sequence blocks — indentation closes blocks
+- Don't use hex colors in section headers — use named colors
+- Always include `chart:` directive when the type can't be inferred from content

package/.claude/skills/dgmo-sequence/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: dgmo-sequence
+description: Generate a DGMO sequence diagram by analyzing a code flow, API interaction, or process description.
+argument-hint: <flow or module to diagram>
+allowed-tools: Read, Write, Bash, Glob, Grep
+---
+
+# Generate DGMO Sequence Diagram
+
+Analyze a code flow, API interaction, or process and generate a `.dgmo` sequence diagram.
+
+## Instructions
+
+1. Understand what to diagram from `$ARGUMENTS` — this could be:
+   - A description of an interaction ("the login flow")
+   - A reference to code ("trace the checkout process in src/")
+   - An API flow ("POST /orders end-to-end")
+2. If referencing code, explore the codebase to trace the actual flow
+3. Generate a valid DGMO sequence diagram
+
+## Sequence Diagram Syntax
+
+```
+chart: sequence
+title: Flow Title
+
+// Participant declarations (optional — auto-inferred from messages)
+User is an actor
+API is a service
+DB is a database
+Queue is a queue
+
+// Messages
+User -Login-> API
+API -Find user-> DB
+DB -> API: <- user record
+
+// Async messages
+API ~event~> Queue
+
+// Notes
+note on DB:
+  Indexed lookup on email column
+
+// Conditional blocks (indentation-scoped, no "end" needed)
+  if credentials valid
+    API -> User: <- 200 OK
+  else
+    API -> User: <- 401 Unauthorized
+
+// Loops
+  loop retry 3 times
+    API -> ExternalService: request
+
+// Sections (phase dividers)
+== Phase 2 ==
+
+// Visual groups
+## Authentication
+```
+
+**Participant types**: `actor`, `service`, `database`, `queue`, `cache`, `gateway`, `external`, `networking`, `frontend`
+
+**Arrow types**:
+- Sync: `A -> B: label` or `A -label-> B`
+- Async: `A ~> B: label` or `A ~label~> B`
+- Return: `B -> A: <- response`
+- Bidirectional: `A <-> B: label`
+
+**Key rules**:
+- Indentation closes blocks (no `end` keyword)
+- Use `//` for comments (not `#`)
+- `aka` for display names: `PaymentGW aka Payment Gateway`
+- `at position N` for ordering: `DB at position 3`
+
+## Output
+
+Write to a descriptive `.dgmo` file, then check if `dgmo` CLI is available (`command -v dgmo`). If not installed, tell the user:
+- `brew install diagrammo/dgmo/dgmo` (macOS, recommended)
+- `npm install -g @diagrammo/dgmo`
+- Or: `npx @diagrammo/dgmo <file>.dgmo`
+
+If available, offer to render: `dgmo <file>.dgmo -o <file>.svg` or `dgmo <file>.dgmo -o url`

package/.cursorrules

@@ -0,0 +1,117 @@
+# DGMO Diagram Language
+
+When the user asks for a diagram, visualization, or chart, generate a `.dgmo` file. DGMO is a text-based diagram markup language that renders to SVG/PNG.
+
+## When to suggest DGMO
+
+- Architecture diagrams, sequence diagrams, flowcharts
+- Data charts (bar, line, pie, scatter, heatmap, etc.)
+- ER diagrams, class diagrams, org charts
+- Project roadmaps, kanban boards, timelines
+
+## Quick syntax reference
+
+### Sequence diagram
+```
+chart: sequence
+title: Auth Flow
+
+User -Login-> API
+API -Find user-> DB
+DB -> API: <- user
+  if valid
+    API -> User: <- 200 OK
+  else
+    API -> User: <- 401
+```
+
+### Flowchart
+```
+chart: flowchart
+title: Process
+
+(Start) -> <Valid?>
+  -yes-> [Process] -> (Done)
+  -no-> /Get Input/ -> <Valid?>
+```
+
+### Bar chart
+```
+chart: bar
+title: Revenue
+series: USD
+
+North: 850
+South: 620
+East: 1100
+```
+
+### ER diagram
+```
+chart: er
+title: Schema
+
+users
+  id: int [pk]
+  email: varchar [unique]
+
+posts
+  id: int [pk]
+  user_id: int [fk]
+
+users 1--* posts : writes
+```
+
+### Org chart
+```
+chart: org
+
+CEO
+  VP Engineering
+    Team Lead A
+    Team Lead B
+  VP Marketing
+```
+
+### C4 architecture
+```
+chart: c4
+title: System
+
+person User
+system App | description: Main application
+  -Uses-> User
+```
+
+## All 29 chart types
+
+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, class, er, org, kanban, c4, initiative-status
+
+## Common patterns
+
+- `chart: type` — explicit chart type (auto-detected if unambiguous)
+- `title: text` — diagram title
+- `// comment` — only `//` comments (not `#`)
+- `(colorname)` — inline colors: `Label(red): 100`
+- `series: A(red), B(blue)` — multi-series with colors
+- `tag: Group alias g` — tag groups for metadata
+
+## Rendering
+
+```bash
+dgmo file.dgmo -o output.svg       # SVG
+dgmo file.dgmo -o url              # shareable link
+dgmo file.dgmo --json              # structured JSON output
+```
+
+Install: `brew install diagrammo/dgmo/dgmo` or `npm install -g @diagrammo/dgmo`
+
+## Mistakes to avoid
+
+- Don't use `#` for comments — use `//`
+- Don't use `end` to close sequence blocks — indentation closes them
+- Don't use hex colors in section headers — use named colors
+- Don't forget `chart:` directive when content is ambiguous
+- Sequence arrows: `->` (sync), `~>` (async), `<->` (bidirectional)
+
+Full reference: `docs/language-reference.md`

package/.github/copilot-instructions.md

@@ -0,0 +1,117 @@
+# DGMO Diagram Language
+
+When the user asks for a diagram, visualization, or chart, generate a `.dgmo` file. DGMO is a text-based diagram markup language that renders to SVG/PNG.
+
+## When to suggest DGMO
+
+- Architecture diagrams, sequence diagrams, flowcharts
+- Data charts (bar, line, pie, scatter, heatmap, etc.)
+- ER diagrams, class diagrams, org charts
+- Project roadmaps, kanban boards, timelines
+
+## Quick syntax reference
+
+### Sequence diagram
+```
+chart: sequence
+title: Auth Flow
+
+User -Login-> API
+API -Find user-> DB
+DB -> API: <- user
+  if valid
+    API -> User: <- 200 OK
+  else
+    API -> User: <- 401
+```
+
+### Flowchart
+```
+chart: flowchart
+title: Process
+
+(Start) -> <Valid?>
+  -yes-> [Process] -> (Done)
+  -no-> /Get Input/ -> <Valid?>
+```
+
+### Bar chart
+```
+chart: bar
+title: Revenue
+series: USD
+
+North: 850
+South: 620
+East: 1100
+```
+
+### ER diagram
+```
+chart: er
+title: Schema
+
+users
+  id: int [pk]
+  email: varchar [unique]
+
+posts
+  id: int [pk]
+  user_id: int [fk]
+
+users 1--* posts : writes
+```
+
+### Org chart
+```
+chart: org
+
+CEO
+  VP Engineering
+    Team Lead A
+    Team Lead B
+  VP Marketing
+```
+
+### C4 architecture
+```
+chart: c4
+title: System
+
+person User
+system App | description: Main application
+  -Uses-> User
+```
+
+## All 29 chart types
+
+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, class, er, org, kanban, c4, initiative-status
+
+## Common patterns
+
+- `chart: type` — explicit chart type (auto-detected if unambiguous)
+- `title: text` — diagram title
+- `// comment` — only `//` comments (not `#`)
+- `(colorname)` — inline colors: `Label(red): 100`
+- `series: A(red), B(blue)` — multi-series with colors
+- `tag: Group alias g` — tag groups for metadata
+
+## Rendering
+
+```bash
+dgmo file.dgmo -o output.svg       # SVG
+dgmo file.dgmo -o url              # shareable link
+dgmo file.dgmo --json              # structured JSON output
+```
+
+Install: `brew install diagrammo/dgmo/dgmo` or `npm install -g @diagrammo/dgmo`
+
+## Mistakes to avoid
+
+- Don't use `#` for comments — use `//`
+- Don't use `end` to close sequence blocks — indentation closes them
+- Don't use hex colors in section headers — use named colors
+- Don't forget `chart:` directive when content is ambiguous
+- Sequence arrows: `->` (sync), `~>` (async), `<->` (bidirectional)
+
+Full reference: `docs/language-reference.md`

package/.windsurfrules

@@ -0,0 +1,117 @@
+# DGMO Diagram Language
+
+When the user asks for a diagram, visualization, or chart, generate a `.dgmo` file. DGMO is a text-based diagram markup language that renders to SVG/PNG.
+
+## When to suggest DGMO
+
+- Architecture diagrams, sequence diagrams, flowcharts
+- Data charts (bar, line, pie, scatter, heatmap, etc.)
+- ER diagrams, class diagrams, org charts
+- Project roadmaps, kanban boards, timelines
+
+## Quick syntax reference
+
+### Sequence diagram
+```
+chart: sequence
+title: Auth Flow
+
+User -Login-> API
+API -Find user-> DB
+DB -> API: <- user
+  if valid
+    API -> User: <- 200 OK
+  else
+    API -> User: <- 401
+```
+
+### Flowchart
+```
+chart: flowchart
+title: Process
+
+(Start) -> <Valid?>
+  -yes-> [Process] -> (Done)
+  -no-> /Get Input/ -> <Valid?>
+```
+
+### Bar chart
+```
+chart: bar
+title: Revenue
+series: USD
+
+North: 850
+South: 620
+East: 1100
+```
+
+### ER diagram
+```
+chart: er
+title: Schema
+
+users
+  id: int [pk]
+  email: varchar [unique]
+
+posts
+  id: int [pk]
+  user_id: int [fk]
+
+users 1--* posts : writes
+```
+
+### Org chart
+```
+chart: org
+
+CEO
+  VP Engineering
+    Team Lead A
+    Team Lead B
+  VP Marketing
+```
+
+### C4 architecture
+```
+chart: c4
+title: System
+
+person User
+system App | description: Main application
+  -Uses-> User
+```
+
+## All 29 chart types
+
+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, class, er, org, kanban, c4, initiative-status
+
+## Common patterns
+
+- `chart: type` — explicit chart type (auto-detected if unambiguous)
+- `title: text` — diagram title
+- `// comment` — only `//` comments (not `#`)
+- `(colorname)` — inline colors: `Label(red): 100`
+- `series: A(red), B(blue)` — multi-series with colors
+- `tag: Group alias g` — tag groups for metadata
+
+## Rendering
+
+```bash
+dgmo file.dgmo -o output.svg       # SVG
+dgmo file.dgmo -o url              # shareable link
+dgmo file.dgmo --json              # structured JSON output
+```
+
+Install: `brew install diagrammo/dgmo/dgmo` or `npm install -g @diagrammo/dgmo`
+
+## Mistakes to avoid
+
+- Don't use `#` for comments — use `//`
+- Don't use `end` to close sequence blocks — indentation closes them
+- Don't use hex colors in section headers — use named colors
+- Don't forget `chart:` directive when content is ambiguous
+- Sequence arrows: `->` (sync), `~>` (async), `<->` (bidirectional)
+
+Full reference: `docs/language-reference.md`

package/README.md

@@ -197,7 +197,13 @@ renderSequenceDiagram(container, parsed, colors, false, (lineNum) => {
 **Sequence syntax:**
 
 - `A -> B: message` — synchronous call
+- `A -message-> B` — inline label (same result, label sits in the arrow)
 - `A ~> B: message` — async/fire-and-forget
+- `A ~message~> B` — async with inline label
+- `A <-> B: message` — bidirectional synchronous
+- `A <-message-> B` — bidirectional with inline label
+- `A <~> B: message` — bidirectional async
+- `A <~message~> B` — bidirectional async with inline label
 - `A -> B: method(): returnValue` — call with return
 - `B -> A: <- response` — explicit return
 - `if condition` / `else` / `end` — conditional blocks
@@ -303,7 +309,7 @@ const content = `
 chart: org
 title: Engineering
 
-## Location
+tag: Location
   NY(blue)
   SF(green)
 
@@ -359,16 +365,17 @@ Containers can nest and carry their own metadata (key: value pairs). Children ar
 **Tag groups** — define color coding for metadata values. Must appear before org content:
 
 ```
-## Location alias l
+tag: Location alias l
   NY(blue)
   SF(green)
   Remote(purple) default
 ```
 
-- `## GroupName` starts a tag group; `alias` provides a shorthand for metadata keys
+- `tag: GroupName` starts a tag group; `alias` provides a shorthand for metadata keys
 - `Value(color)` maps a metadata value to a color
 - `default` marks the fallback value for nodes without that metadata
 - Nodes whose metadata matches a tag group value get color-coded automatically
+- `##` syntax is deprecated but still accepted — use `tag:` for new diagrams
 
 **Options:**