@diagrammo/dgmo 0.8.23 → 0.8.26

package/.claude/commands/dgmo.md

@@ -89,25 +89,18 @@ For **examples** of real diagrams, call `mcp__dgmo__get_examples("<type>")` —
 
 ### Creating a new diagram
 
-1. **Pick the right chart type** — don't ask the user. Use these heuristics:
-   - "show our API" / "how does X work" → `sequence`
-   - "architecture" / "system overview" → `c4`
-   - "database" / "schema" / "models" → `er`
-   - "infrastructure" / "deployment" / "traffic" → `infra`
-   - "process" / "decision" / "flow" → `flowchart`
-   - "states" / "lifecycle" / "transitions" → `state`
-   - "org" / "team" / "hierarchy" → `org`
-   - "roadmap" / "project status" → `gantt`
-   - "boxes" / "nodes and edges" / "general diagram" → `boxes-and-lines`
-   - "compare" / "metrics" / "data" → `bar`, `line`, `pie`, etc.
-   - If genuinely ambiguous, suggest your best guess with a one-line rationale.
+1. **Pick the right chart type** — always call `mcp__dgmo__suggest_chart_type({ prompt: <user's request> })` first. It returns up to 3 ranked candidates with a confidence banner and matched trigger phrases. Use the top match unless you have a strong reason to override it. If the MCP tool is unavailable (Setup Check fallback path), run `dgmo --chart-types` in a terminal to list supported types and pick from that list.
 2. **Get syntax + examples** — call `mcp__dgmo__get_language_reference("<type>")` and `mcp__dgmo__get_examples("<type>")`.
 3. **Write the `.dgmo` content** — compose the markup.
 4. **Validate first** — call `mcp__dgmo__validate_diagram(dgmo)` to catch syntax errors before rendering. If errors come back, fix them and validate again.
-5. **Open in browser** — call `mcp__dgmo__preview_diagram([{dgmo, title}])` without asking. This is always the right default.
+5. **Open on online.diagrammo.app** — the **default** visual output. Call `mcp__dgmo__share_diagram(dgmo)` to get a URL, then immediately run `open <url>` in the shell. This lands the user on the web editor where they see the chart AND the code side-by-side, can tweak the markup interactively, and can share the link as-is. Do NOT just print the URL — always `open` it.
+
+   **Exception — image-output intent detected:** if the user's prompt explicitly asks for an image or saved file (phrases like "save as PNG", "export to SVG", "make an image", "render to a file", "give me a png", "I need an SVG"), skip the share URL and go straight to `mcp__dgmo__render_diagram` (see "Image output" below). The detection is intent-based, not keyword-strict — if in doubt, default to share URL and offer "Want me to save as PNG/SVG instead?"
+
+   **Side-by-side variants** still use `mcp__dgmo__preview_diagram` (multi-diagram preview is its killer feature). See "Side-by-side variants" below.
 6. **Save the source file** (if working in a project) — write it to `<name>.dgmo` so the user has an editable copy.
 
-Do not ask the user how they want to view the diagram. Just open it. They can ask for other formats if they want.
+Do not ask the user how they want to view the diagram. Just open the share URL. They can ask for other formats if they want.
 
 ### Editing an existing diagram
 
@@ -117,7 +110,7 @@ When the user asks to modify a `.dgmo` file or says "update this diagram":
 2. **Understand it** — identify the chart type, key elements, and structure.
 3. **Make the change** — edit the file using the Edit tool. Preserve the user's style and organization.
 4. **Validate** — call `mcp__dgmo__validate_diagram(dgmo)` on the updated content.
-5. **Preview** — call `mcp__dgmo__preview_diagram` so the user sees the result immediately.
+5. **Preview** — call `mcp__dgmo__share_diagram(dgmo)` and `open <url>` so the user sees the result on online.diagrammo.app. (Image-output intent exception applies — if the user asked for a PNG/SVG file explicitly, render to file instead.)
 
 Keep the diff minimal — don't rewrite the whole file when adding one element.
 
@@ -142,7 +135,7 @@ When `validate_diagram` or `render_diagram` returns errors:
 1. **Read the error messages** — they include line numbers and descriptions.
 2. **Fix the specific issues** — don't regenerate from scratch unless there are many errors.
 3. **Validate again** — loop until clean.
-4. **Then render** — only call `preview_diagram` or `render_diagram` after validation passes.
+4. **Then render** — only call `share_diagram` (default), `preview_diagram` (variants), or `render_diagram` (files) after validation passes.
 
 Common fixes:
 - "Unknown directive" → check spelling, remove colons from directives
@@ -165,17 +158,26 @@ This opens a single page with both diagrams. Use this for:
 - Different levels of detail
 - Alternative structures for the same data
 
-### Other output options (only when explicitly requested)
+### Image output (when the user explicitly asks for an image/file)
 
-| What the user wants | How to do it |
+Trigger phrases: "save as PNG", "export to SVG", "make an image", "render to a file", "give me a PNG", "I need an SVG", "generate an image". For these, skip the share URL and go straight to file output:
+
+| Intent | How to do it |
 |---|---|
-| **Quick look in the desktop app** | `mcp__dgmo__open_in_app(dgmo)` — opens directly in Diagrammo (macOS) |
-| **View in macOS Preview** | `mcp__dgmo__render_diagram(dgmo, format:"png", theme:"dark", palette:"nord")` → get temp path → `open <path>` |
 | **Save as PNG** | `mcp__dgmo__render_diagram(dgmo, format:"png", theme:"dark", palette:"nord")` → returns temp path; offer to copy to their preferred location. Or CLI: `dgmo file.dgmo -o out.png --theme dark --palette nord` |
 | **Save as SVG** | `mcp__dgmo__render_diagram(dgmo, format:"svg", theme:"dark", palette:"nord")` returns SVG text — write it to the desired path. Or CLI: `dgmo file.dgmo -o out.svg --theme dark --palette nord` |
-| **Shareable URL** | `mcp__dgmo__share_diagram(dgmo)` → returns a URL; immediately run `open <url>` — do NOT just display the URL |
+| **View in macOS Preview** | `mcp__dgmo__render_diagram(dgmo, format:"png", theme:"dark", palette:"nord")` → get temp path → `open <path>` |
+
+### Other output options (when explicitly requested)
+
+| What the user wants | How to do it |
+|---|---|
+| **Quick look in the desktop app** | `mcp__dgmo__open_in_app(dgmo)` — opens directly in Diagrammo (macOS) |
+| **Local HTML preview (not online.diagrammo.app)** | `mcp__dgmo__preview_diagram([{dgmo, title}])` — useful when the user specifically wants a local file or is offline |
 | **Copy markup to clipboard** | Run `echo '<dgmo markup>' \| pbcopy` |
 
+(The share URL — `mcp__dgmo__share_diagram` + `open` — is the DEFAULT visual output, not an alternative. See "Creating a new diagram → step 5" above.)
+
 ### Embedding diagrams in docs
 
 When the user wants a diagram in a README, PR description, or markdown file:
@@ -199,15 +201,15 @@ for f in diagrams/*.dgmo; do dgmo "$f" -o "${f%.dgmo}.png" --theme dark --palett
 
 Or for SVG: replace `.png` with `.svg` in the output.
 
-### Share link to clipboard
+### Share link to clipboard (when the user asks for the URL without opening)
 
-After generating a share link, always copy it to the clipboard automatically:
+If the user wants the link in clipboard rather than opened (e.g., they want to paste it into Slack themselves), after generating the share link:
 
 ```bash
 echo '<url>' | pbcopy
 ```
 
-Then tell the user it's been copied.
+Then tell the user it's been copied. Otherwise, the default is always `open <url>` — that's what step 5 of the main workflow does.
 
 ## CLI Reference
 
@@ -222,42 +224,11 @@ Key options:
 - `--theme <theme>` — `light` (default), `dark`, `transparent`
 - `--palette <name>` — `nord` (default), `solarized`, `catppuccin`, `rose-pine`, `gruvbox`, `tokyo-night`, `one-dark`, `bold`
 - `--copy` — copy the URL to clipboard (use with `-o url`)
-- `--no-branding` — omit diagrammo.app branding from exports
 - `--chart-types` — list all supported chart types
 
 ## Supported Chart Types
 
-| Type | Use case |
-|------|----------|
-| `bar` | Categorical comparisons |
-| `line` / `multi-line` / `area` | Trends over time |
-| `pie` / `doughnut` | Part-to-whole |
-| `radar` / `polar-area` | Multi-dimensional metrics |
-| `bar-stacked` | Multi-series categorical |
-| `scatter` | 2D data points or bubble chart |
-| `sankey` | Flow / allocation |
-| `chord` | Circular flow relationships |
-| `function` | Mathematical expressions |
-| `heatmap` | Matrix intensity |
-| `funnel` | Conversion pipeline |
-| `slope` | Change between two periods |
-| `wordcloud` | Term frequency |
-| `arc` | Network relationships |
-| `timeline` | Events, eras, date ranges |
-| `venn` | Set overlaps |
-| `quadrant` | 2x2 positioning matrix |
-| `sequence` | Message / interaction flows |
-| `flowchart` | Decision trees, process flows |
-| `state` | State machine / lifecycle |
-| `class` | UML class hierarchies |
-| `er` | Database schemas |
-| `org` | Hierarchical tree structures |
-| `kanban` | Task / workflow columns |
-| `c4` | System architecture (context → container → component → deployment) |
-| `sitemap` | Website / app navigation structure |
-| `infra` | Infrastructure traffic flow with rps computation |
-| `gantt` | Project scheduling with dependencies |
-| `boxes-and-lines` | General-purpose node-edge diagrams with groups and tags |
+Call `mcp__dgmo__list_chart_types` to see every supported type with descriptions, or `dgmo --chart-types` in a terminal as a CLI fallback. When picking for a new diagram, use `mcp__dgmo__suggest_chart_type` — it scores the full list against the user's prompt (see "Creating a new diagram → step 1").
 
 ## Key Syntax Patterns
 
@@ -273,385 +244,16 @@ palette catppuccin     // directives are space-separated (no colon)
 Inline colors on most elements: append `(colorname)` — e.g. `North(red) 850`, `[Process(blue)]`.
 Named colors: `red`, `orange`, `yellow`, `green`, `blue`, `purple`, `teal`, `cyan`, `gray`.
 
-### sequence (most commonly used)
-
-```
-sequence Auth Flow
-
-User -Login-> API
-API -Find user-> DB
-DB -user record-> API
-note
-  Indexed lookup on email column
-
-if credentials valid
-  API -200 OK + token-> User
-else
-  API -401 Unauthorized-> User
-
-== Logout ==
-
-note session cleanup
-User -Logout-> API
-API -Delete session-> DB
-```
-
-- Sync: `A -label-> B` · Async: `A ~label~> B` · Unlabeled: `A -> B`
-- Blocks: `if` / `else`, `loop`, `parallel` — closed by indentation (no `end` keyword)
-- Notes: place `note text` after a message — it naturally associates with that position.
-  - Single-line: `note text`
-  - Multi-line: `note` then indent continuation lines beneath it
-  - Anchored: `note right of API` then indent continuation lines
-- Sections: `== Title ==`
-- Groups: `[Group Name]` with indented participants
-
-### flowchart
-
-```
-(Start) -> <Valid Input?>
-  -yes-> [Process Data] -> (Done)
-  -no-> /Get Input/ -> <Valid Input?>
-```
-
-Shapes: `(oval)` `[rect]` `<diamond>` `/parallelogram/` `[[subroutine]]` `[document~]`
-
-### bar / line / pie (data charts)
-
-```
-// bar
-bar Revenue by Region
-series Revenue
-North 850
-South 620
-
-// line (multi-series)
-series Sales(red), Costs(blue)
-Q1 100, 50
-Q2 120, 55
-
-// pie
-pie Market Share
-labels percent
-Company A 40
-Company B 35
-```
-
-### er
-
-```
-users
-  id int [pk]
-  email varchar [unique]
-  1-writes-* posts
-
-posts
-  id int [pk]
-  author_id int [fk]
-```
-
-### org
-
-```
-CEO
-  VP Engineering
-    [Platform Team]
-      Lead
-        Dev 1
-        Dev 2
-  VP Marketing
-```
-
-### infra
-
-```
-infra
-
-edge
-  rps 10000
-  -> CDN
-
-CDN
-  cache-hit 80%
-  -> API
-
-API
-  instances 3
-  max-rps 500
-  latency-ms 45
-```
-
-### slope
-
-```
-slope Fleet Strength
-
-period 1715 1725
-
-Blackbeard 40 4
-Roberts 12 52
-Anne Bonny (red) 8 15
-```
-
-- `period` directive required before data rows (one-line or indented block for multi-token labels)
-- Data rows: `Label value1 value2` — space-separated, no colons
-- Right-scan: parser takes numeric values from the right, everything left is the label
-- Color annotations: `Label (color) value1 value2`
-
-### timeline
-
-```
-timeline Product Roadmap
-sort tag:Team
-
-tag Team alias t
-  Engineering(blue)
-  Design(purple)
-
-era 2024-01 -> 2024-06 Phase 1
-marker 2024-03 Beta Launch
-
-2024-01->2024-03 Core API | t: Engineering
-2024-02->2024-05 UX Research | t: Design
-2024-06 GA Release | t: Engineering
-```
-
-- Dates: `YYYY`, `YYYY-MM`, `YYYY-MM-DD`. Ranges: `start->end`. Durations: `start->6m`, `->2w`, `->30d`
-- Uncertain end: `2024-03?`. Point events: single date, no range
-- `era start -> end Label` — background band. `marker date Label` — vertical line
-- `## Group(color)` headers for manual grouping, or `tag` + `sort tag:Name` for swimlanes
-- Pipe metadata: `| tagalias: Value`
-
-### gantt
-
-```
-gantt Sprint Plan
-start 2024-01-15
-today-marker 2024-03-01
-critical-path
-dependencies
-
-10bd Design | 80%
-parallel
-  [Backend]
-    15bd API Layer
-    5bd? Auth Module
-      -> Frontend.Integration | offset: -3bd
-  [Frontend]
-    10bd Components
-    5bd Integration
-5bd QA Testing
-0d Release
-```
-
-- `start YYYY-MM-DD` — project start date (required)
-- Duration: `10bd Task Name` (business days). Uncertain: `5bd?`. Milestone: `0d`
-- `parallel` block for concurrent tracks. `[Group]` for named sections
-- Progress: `| 80%` or trailing `80%`
-- Dependencies: `-> Target.Task` or `-blocks-> Target.Task`. `offset: -3bd` for overlap
-- `today-marker`, `critical-path`, `dependencies` — top-level directives
-- Tags + eras + markers same as timeline
-
-### c4
+### Per-chart-type syntax
 
-```
-c4 Banking System
-
-Customer is a person
-  description: A customer of the bank
-
-Banking is a system
-  description: Online banking portal
-  containers
-    WebApp is a container | tech: React
-    API is a container | tech: Node.js
-    DB is a container is a database | tech: PostgreSQL
-
-Email is a system
-  description: External email service
-
-Customer -Uses-> Banking
-Banking -Sends emails [SMTP]-> Email
-```
-
-- Elements: `Name is a person|system|container|component`
-- Metadata (pipe-delimited): `| description: text, tech: stack`
-- Indented `description:` also works (no pipe needed)
-- Sections: `containers` (inside system), `components` (inside container), `deployment`
-- Deployment: `NodeName is a cloud|database|cache|queue`
-- Arrows: sync `-label [tech]->`, async `~label [tech]~>`, bidirectional `<->`, `<~>`
-
-### class
-
-```
-class Type Hierarchy
-
-Drawable [interface]
-  + draw(): void
-
-Shape implements Drawable [abstract]
-  # x: number
-  + area(): number
-  count: number {static}
-
-Circle extends Shape
-  - radius: number
-
-Color [enum]
-  Red
-  Green
-  Blue
-
-Canvas
-  *-- Shape : contains
-  ..> Logger : uses
-```
-
-- Modifiers: `[abstract]`, `[interface]`, `[enum]`
-- Inheritance: `Child extends Parent`, `Child implements Interface`
-- Visibility: `+` public, `#` protected, `-` private. Static: `{static}`
-- Relationships: `A *-- B` (composition), `A o-- B` (aggregation), `A --|> B` (inheritance), `A ..|> B` (implementation), `A ..> B` (dependency), `A -> B` (association)
-- Optional label: `A *-- B : description`
-
-### venn
-
-```
-venn Full-Stack Skills
-
-Frontend(blue) alias fe
-Backend(green) alias be
-DevOps(orange) alias de
-
-fe + be Web Systems
-be + de Platform Ops
-fe + be + de Full Stack
-```
-
-- Sets: `Name(color) alias id` — declares a circle
-- Overlaps: `id + id Label` — names the intersection region
-- Option: `values on` to show sizes. Sized form: `id(color): 120 "Label"`
-
-### quadrant
-
-```
-quadrant Feature Priorities
-
-x-label Low Effort, High Effort
-y-label Low Impact, High Impact
-
-top-left Quick Wins(green)
-top-right Major Projects
-bottom-left Fill-ins
-bottom-right Avoid(red)
-
-Dark Mode (blue) 0.25, 0.85
-API v2 0.8, 0.9
-Fix Typos 0.1, 0.15
-```
-
-- Axis labels: `x-label Low, High` and `y-label Low, High`
-- Quadrant labels: `top-left`, `top-right`, `bottom-left`, `bottom-right`
-- Data: `Label (color) x, y` where x,y are 0–1
-
-### sankey / chord
+For every specific chart type (sequence, flowchart, bar/line/pie, scatter, er, org, infra, slope, timeline, gantt, c4, class, venn, quadrant, sankey/chord, state, boxes-and-lines, and the rest), do not guess from prior knowledge — call the MCP tools:
 
 ```
-// sankey — flow diagram
-sankey Budget Allocation
-
-Revenue (green)
-  Costs: 600
-  Profit (blue): 400
-
-// arrow syntax also works
-Revenue -> Marketing: 200
-
-// chord — same syntax, circular layout
-chord Team Collaboration
-Engineering -> Design 85
-Design -> Product 68
+mcp__dgmo__get_language_reference("<type>")   // authoritative grammar + directives
+mcp__dgmo__get_examples("<type>")             // real starter templates from the gallery
 ```
 
-- Indented syntax: parent → child with `Target: weight`
-- Arrow syntax: `Source -> Target: weight` (sankey) or `Source -> Target weight` (chord)
-- Node colors: `Name (color)`. Link colors: `Target: 600 (red)`
-
-### state
-
-```
-state Order Lifecycle
-direction LR
-
-[*] -> Pending -submit-> Validating
-
-Validating
-  -approved-> Processing
-  -rejected-> Cancelled(red)
-
-## Fulfillment(blue)
-  Processing -ship-> Shipped
-  Shipped -delivered-> Done
-
-Cancelled -> [*]
-Done -> [*]
-```
-
-- `[*]` — start/end pseudostate (filled circle)
-- Transitions: `A -> B`, `A -label-> B`, `A -(color)-> B`
-- Chains: `A -> B -> C` on one line
-- Indented transitions use parent as source
-- Groups: `## GroupName(color)` with indented states
-- Options: `direction LR` (left-right) or `TB` (top-bottom, default)
-
-### scatter
-
-```
-scatter Funding vs Revenue
-x-label Funding ($M)
-y-label Revenue ($M)
-
-[SaaS](blue)
-  Acme 12, 8.5
-  DataSync 5.2, 3.1
-
-[Fintech](green)
-  PayFlow 45, 32
-  LendTech 18, 12.5
-```
-
-- Data: `Label x, y` or `Label x, y, size` (bubble chart)
-- Groups: `[Category](color)` headers
-- Options: `labels on`, `xlabel`, `ylabel`, `sizelabel`
-
-### boxes-and-lines
-
-```
-boxes-and-lines Architecture
-
-tag Team t Backend(blue), Frontend(green), Platform(purple)
-active-tag Team
-direction LR
-
-API Gateway | t: Backend
-  -routes-> AuthService
-  -queries-> DB
-
-AuthService | t: Backend
-DB | t: Platform
-
-[Cloud]
-  API Gateway
-  AuthService
-
-Redis <-syncs-> DB | t: Platform
-```
-
-- Nodes: explicit `Name | metadata` or implicit from edges
-- Edges: `A -label-> B` (directed), `A <-label-> B` (bidirectional)
-- Indented edges use parent as source: `Parent` then `  -label-> Target`
-- Groups: `[Name]` with indented children (max 2 levels deep)
-- Tags: `tag Name alias Value1(color), Value2(color)` + `active-tag Name` + `hide alias:value`
-- Options: `direction LR` (left-right) or `TB` (top-bottom, default)
-- Shape inference: names containing DB/database → cylinder, Cache/Redis → diamond, Queue → hexagon, etc.
+Both ship inside `@diagrammo/dgmo` and always reflect the installed version, so they never drift from the actual parsers. This replaces the per-type sections that used to live here and went stale every time a chart type's syntax evolved.
 
 ## Anti-Patterns
 
@@ -671,13 +273,23 @@ tag: Group         ❌  use `tag Group` (no colon)
 note: text         ❌  use `note text` (no colon)
 ```
 
+**Data-chart style (back-compat tolerated, but not idiomatic — don't generate these):**
+
+```
+Q1 100, 200, 300                     ⚠  prefer space-separated: `Q1 100 200 300`
+series A (red), B (blue), C (green)  ⚠  for ≥2 series, prefer the indented block:
+                                         series
+                                           A (red)
+                                           B (blue)
+                                           C (green)
+```
+
 ## Tips
 
 - Default theme: `dark`, default palette: `nord` — use these unless the user requests otherwise.
 - Always validate before rendering — `validate_diagram` is much faster than a failed render.
 - Always call `get_examples` before generating an unfamiliar chart type — real examples beat guessing.
 - Stdin mode for quick renders: `echo "..." | dgmo -o out.png`
-- For C4, `--c4-level` drills from context → containers → components → deployment.
 - When auto-detection picks the wrong chart type, add an explicit type as the first word on the first line.
 - `mcp__dgmo__preview_diagram` accepts multiple diagrams at once — useful for showing variants side by side.
 - When the user says "diagram this" while looking at code, read the code first and pick the chart type yourself — don't ask.

package/.cursorrules

@@ -121,9 +121,9 @@ API Gateway | t: Backend
 
 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`.
 
-## All 33 chart types
+## Supported 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, state, class, er, org, kanban, c4, sitemap, infra, gantt, boxes-and-lines
+If the dgmo MCP server is configured, call `list_chart_types` for the authoritative list (with descriptions) and `suggest_chart_type({ prompt })` to pick the best match for a request. Otherwise run `dgmo --chart-types` in a terminal. The static list previously here drifted with every new chart type — the MCP tool / CLI is the source of truth.
 
 ## Common patterns
 

package/.windsurfrules

@@ -121,9 +121,9 @@ API Gateway | t: Backend
 
 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`.
 
-## All 33 chart types
+## Supported 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, state, class, er, org, kanban, c4, sitemap, infra, gantt, boxes-and-lines
+If the dgmo MCP server is configured, call `list_chart_types` for the authoritative list (with descriptions) and `suggest_chart_type({ prompt })` to pick the best match for a request. Otherwise run `dgmo --chart-types` in a terminal. The static list previously here drifted with every new chart type — the MCP tool / CLI is the source of truth.
 
 ## Common patterns
 

package/AGENTS.md

@@ -15,12 +15,15 @@ This installs the MCP server and writes the dgmo config to `.codex/config.toml`.
 ## MCP Tools
 
 When the `dgmo` MCP server is configured, use these tools directly:
-- `preview_diagram` — renders diagram(s) and opens a live HTML preview in the browser (default for showing diagrams)
+- `suggest_chart_type` — first call when creating a new diagram; ranks the best chart types for a plain-English prompt
+- `list_chart_types` — lists every supported chart type with descriptions
+- `get_language_reference` — fetches full syntax for any chart type (call this before generating an unfamiliar chart type)
+- `get_examples` — real example diagrams from the gallery; useful as few-shot references
+- `validate_diagram` — fast syntax check before rendering (much cheaper than a failed render)
 - `render_diagram` — renders to PNG or SVG, returns file path
+- `preview_diagram` — renders diagram(s) and opens a live HTML preview in the browser
 - `share_diagram` — creates a shareable diagrammo.app URL
 - `open_in_app` — opens diagram in Diagrammo desktop app (macOS)
-- `list_chart_types` — lists all 34 supported chart types with descriptions
-- `get_language_reference` — fetches full syntax for any chart type (call this before generating an unfamiliar chart type)
 - `generate_report` — renders multiple diagrams into an HTML report with table of contents
 
 ## When to use dgmo
@@ -113,9 +116,9 @@ API
   latency-ms: 45
 ```
 
-## All 33 chart types
+## Supported 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, state, class, er, org, kanban, c4, sitemap, infra, gantt, boxes-and-lines
+Call `list_chart_types` for the authoritative list with descriptions, or `suggest_chart_type({ prompt })` to rank candidates against a user request. The static list previously here drifted with every new chart type — the MCP tool is the source of truth.
 
 ### Boxes and lines
 ```