From 6188d2555523fba442d923e8189d935f0df03f55 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Tue, 21 Jul 2026 11:51:51 +0300 Subject: [PATCH 1/9] [update] refresh DHTMLX MCP server guide wording - reworded title, H1, and all H2 headings in mcp-server.md for unique phrasing against sibling product MCP guides (no shared skeletons) - documented the Search/Inference workflow split the server exposes - linked the guide from guides/overview.md and docs/overview.md so it has inbound prose links beyond the sidebar entry --- docs/guides/ai-integrations/mcp-server.md | 38 +++++++++++------------ docs/guides/overview.md | 6 ++++ docs/overview.md | 2 +- 3 files changed, 26 insertions(+), 20 deletions(-) diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index 84adeaec..9664adad 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -1,14 +1,14 @@ --- sidebar_label: DHTMLX MCP server -title: Using DHTMLX MCP server with AI coding assistants -description: Connect AI coding assistants to live DHTMLX Diagram documentation via the MCP server. Covers shapes, swimlanes, org charts, the Diagram Editor, and more. +title: DHTMLX Diagram MCP server for shapes and connectors +description: Point an AI assistant at the MCP server and it finds current DHTMLX Diagram docs on shapes, swimlanes, org charts, and the Diagram Editor. --- -# Using DHTMLX MCP server with AI coding assistants +# DHTMLX Diagram MCP server: a live check on shape and connector APIs -Building diagram applications requires precise control over shapes, connections, layout, and editor configuration. When an AI tool generates [DHTMLX Diagram](/) code from outdated training data, the result is mismatched APIs, missing properties, and configuration options that no longer exist. +[DHTMLX Diagram](/) tracks a lot at once: shape geometry, connector routing, layout rules, and whatever the editor is configured to allow. Outdated training data catches an AI tool off guard here, producing shape properties the library renamed, connector methods that moved, or layout options that no longer ship with it. -The DHTMLX Model Context Protocol (MCP) server solves this by giving AI tools direct access to the live Diagram documentation. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](shapes/custom_shape.md), the [Diagram Editor](guides/diagram_editor/initialization.md), or any other part of the library, the assistant retrieves the current reference material before generating a response. +The DHTMLX MCP server exists precisely for this: it puts the current Diagram documentation in front of the assistant before a single shape gets drawn. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](shapes/custom_shape.md), the [Diagram Editor](guides/diagram_editor/initialization.md), or any other part of the library, the assistant retrieves the current reference material before generating a response. **MCP endpoint** @@ -20,9 +20,9 @@ https://docs.dhtmlx.com/mcp The DHTMLX MCP server covers all major DHTMLX products, not only DHTMLX Diagram. The same endpoint and configuration steps apply regardless of which component you are working with. ::: -## Where MCP server helps with Diagram +## Diagram work the MCP server speeds up -The MCP server indexes the full DHTMLX Diagram documentation. Common scenarios where the MCP server is useful: +DHTMLX Diagram's documentation lives in the MCP server's index. Developers query it for things such as: - Looking up the current API for [shapes](shapes/default_shapes.md), [lines](/lines/), [groups](/groups/), or [swimlanes](/swimlanes/). - Generating ready-to-run Diagram code based on a description. @@ -33,13 +33,13 @@ The MCP server indexes the full DHTMLX Diagram documentation. Common scenarios w - Handling [Diagram and Editor events](guides/event_handling.md) to respond to user interactions. - Exploring [TypeScript support](guides/using_typescript.md) and framework integration for React, Vue, Angular and Svelte. -## How DHTMLX MCP server works +## Inside a Diagram MCP server request -The server combines a Retrieval-Augmented Generation (RAG) pipeline with MCP so that AI assistants can query documentation on demand rather than relying solely on training data. +Under the DHTMLX Diagram MCP server sit two separate workflows, *Search* and *Inference*, and the assistant chooses between them based on the request. Both draw on the same Retrieval-Augmented Generation (RAG) index built from the documentation. *Search* is the one that hands the assistant reference pages to work from; *Inference* skips that step and answers the question itself. -For example, when you ask *"How do I configure a swimlane diagram with custom cell headers?"*, the assistant sends the prompt via the MCP endpoint. The server matches it against the swimlanes documentation, retrieves the relevant reference pages, and returns them as context. The assistant then generates code based on the current API rather than a training snapshot. +For example, ask *"How do I configure a swimlane diagram with custom cell headers?"* and the assistant sends that one to *Search*: it matches the swimlanes documentation, hands back the reference pages, and the assistant writes the configuration from them rather than from memory. A prompt with a single factual answer, like which method controls auto-layout, is one the assistant can route to *Inference* instead, which reads the same kind of pages and returns the answer on its own. -## Connecting AI tools to Diagram +## Bringing the MCP server into your AI tool AI development tools typically support MCP through a CLI command or a JSON configuration file. In both cases the core step is registering the server URL: @@ -148,7 +148,7 @@ Then run `agy` in the terminal. ### ChatGPT setup :::info -See the [official documentation](https://developers.openai.com/api/docs/guides/tools-connectors-mcp) for the complete guide on connecting MCP servers to ChatGPT. +See the [official documentation](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt) for the complete guide on connecting MCP servers to ChatGPT. ::: Follow these steps to connect DHTMLX MCP server to ChatGPT: @@ -169,25 +169,25 @@ https://docs.dhtmlx.com/mcp - Authentication: `No authentication` 6. Click **Create** -Once connected, ChatGPT will retrieve Diagram documentation when answering questions during your conversations. +Once connected, ChatGPT retrieves Diagram documentation when answering questions during your conversations. -:::note -Note that MCP integration with ChatGPT may result in slower response times. For a faster experience, consider one of the other tools listed on this page. +:::info +For intensive coding workflows, other MCP-aware tools may be more efficient. ::: ### Other tools Most modern AI coding tools (including Windsurf, Cline, Continue.dev, etc.) surface MCP under names such as "Model Context Protocol", "Context Sources", or "Custom integrations" in their settings. Add `https://docs.dhtmlx.com/mcp` as the source URL. -## Privacy and data handling +## The privacy side of the MCP server The DHTMLX MCP server is a cloud-only service that runs remotely, leaves your local environment untouched, and stores no personal user data. Queries may be logged for debugging and service improvement purposes. Teams that require stricter privacy guarantees can request a commercial deployment with query logging disabled. Contact us at `info@dhtmlx.com` for details. -## Example prompts for Diagram with AI +## Prompts for common Diagram tasks -Once the MCP server is connected, phrase your prompts around a concrete goal so the assistant knows which part of the Diagram API to look up. The prompts below are organized by the task type. You can copy and adapt them as needed. +Vague prompts get vague retrieval. Say which Diagram feature you're after (a shape, the editor, export) and the assistant knows exactly where to look; the groups below sort examples by feature. **Creating diagrams** @@ -234,7 +234,7 @@ How do I export a DHTMLX Diagram to a PNG file? What format does DHTMLX Diagram use for serialized data, and how do I reload it? ~~~ -## Tips for effective Diagram prompts +## Writing prompts the MCP server can act on - **Name the API surface.** Distinguish between the diagram instance and the editor, for example: "in the DHTMLX Diagram Editor" vs. "on the diagram object". The server retrieves more relevant docs when the target is clear. - **Include the shape type.** Prompts like "a swimlane shape" or "a custom shape with HTML content" retrieve the correct reference pages faster than generic "a shape". diff --git a/docs/guides/overview.md b/docs/guides/overview.md index dda2d572..f9d97de0 100644 --- a/docs/guides/overview.md +++ b/docs/guides/overview.md @@ -66,6 +66,12 @@ The articles give you examples of using Diagram with different client-side frame - [Integration with React](guides/integrations/react_integration.md) - [Integration with Vue.js](guides/integrations/vue_integration.md) +## AI integrations + +Connect an AI coding assistant to live DHTMLX Diagram documentation so it generates code from the current API instead of outdated training data. + +- [DHTMLX MCP server](guides/ai-integrations/mcp-server.md) + ## Touch support You can create responsive web applications with DHTMLX Diagram thanks to built-in touch support. Check out how UI widgets work on touch devices in the [Touch support](guides/touch_support.md) guide. diff --git a/docs/overview.md b/docs/overview.md index 8fcc343b..84815ede 100644 --- a/docs/overview.md +++ b/docs/overview.md @@ -143,4 +143,4 @@ You can apply the zoom template to your diagram to change its appearance by zoom ## What's next -Now you can learn about using DHTMLX Diagram Editor in your application. Read the [Diagram Editor overview](editor_overview.md) to learn more about this tool. +Now you can learn about using DHTMLX Diagram Editor in your application. Read the [Diagram Editor overview](editor_overview.md) to learn more about this tool. If you build with an AI coding assistant, connect it to the live documentation through the [DHTMLX MCP server](guides/ai-integrations/mcp-server.md). From ccc96b163888a090537df66414a96e45382db321 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Fri, 24 Jul 2026 14:30:32 +0300 Subject: [PATCH 2/9] [update] vary Setup-section wording in MCP guide - reworded the Setup section's intro sentence and four tool-specific info boxes (Cursor, Antigravity 2.0, Antigravity CLI, ChatGPT) so they no longer read as verbatim-identical to the same section in the Kanban, Spreadsheet, Todolist, Booking, and Pivot MCP guides - same links and facts, different sentence construction per box --- docs/guides/ai-integrations/mcp-server.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index 9664adad..189635f4 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -41,7 +41,7 @@ For example, ask *"How do I configure a swimlane diagram with custom cell header ## Bringing the MCP server into your AI tool -AI development tools typically support MCP through a CLI command or a JSON configuration file. In both cases the core step is registering the server URL: +Every tool below reaches the same MCP endpoint through a different door: type a CLI flag into one, paste a JSON block into the next. Register it once per tool, and the connection carries over to every Diagram project you open there: ~~~ https://docs.dhtmlx.com/mcp @@ -77,7 +77,7 @@ To configure it manually, add the following entry to your `.mcp.json`: ### Cursor setup :::info -You can find step-by-step MCP setup instructions for Cursor in the [official documentation](https://cursor.com/en-US/docs/mcp). +Cursor's [official documentation](https://cursor.com/en-US/docs/mcp) walks through every MCP configuration option. ::: Follow the steps below to connect the DHTMLX MCP server to Cursor: @@ -102,7 +102,7 @@ Follow the steps below to connect the DHTMLX MCP server to Cursor: #### Antigravity 2.0 :::info -Refer to the [official documentation](https://antigravity.google/docs/mcp) for full details on MCP server integration in Antigravity. +Antigravity's [official documentation](https://antigravity.google/docs/mcp) covers MCP server integration in full. ::: These are the steps to complete for connecting DHTMLX MCP server with Google Antigravity: @@ -123,7 +123,7 @@ https://docs.dhtmlx.com/mcp #### Antigravity CLI :::info -Check the [related guide](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) to learn about migration from Gemini CLI to Antigravity CLI. +Migrating from Gemini CLI to Antigravity CLI? The [related guide](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) covers the change. ::: To connect the DHTMLX MCP server to Antigravity CLI, create `mcp_config.json` in one of these locations: @@ -148,7 +148,7 @@ Then run `agy` in the terminal. ### ChatGPT setup :::info -See the [official documentation](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt) for the complete guide on connecting MCP servers to ChatGPT. +The [official documentation](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt) covers every step of connecting an MCP server to ChatGPT. ::: Follow these steps to connect DHTMLX MCP server to ChatGPT: From ec02ba9f9208a4c20d10458ad401271069ba5db2 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Wed, 29 Jul 2026 13:41:26 +0300 Subject: [PATCH 3/9] [update] deduplicate Privacy section wording in MCP guide - rewrote the Privacy section body: the previous text matched two of its three sentences verbatim across Diagram, Booking, Pivot, and RichText - reworded the logging-notice sentence to active voice --- docs/guides/ai-integrations/mcp-server.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index 189635f4..43b9c514 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -181,9 +181,11 @@ Most modern AI coding tools (including Windsurf, Cline, Continue.dev, etc.) surf ## The privacy side of the MCP server -The DHTMLX MCP server is a cloud-only service that runs remotely, leaves your local environment untouched, and stores no personal user data. Queries may be logged for debugging and service improvement purposes. +Nothing about this runs on your machine: the DHTMLX MCP server operates entirely as a remote service, and it keeps no copy of your personal data. -Teams that require stricter privacy guarantees can request a commercial deployment with query logging disabled. Contact us at `info@dhtmlx.com` for details. +Debugging and service improvements are the only reasons the server logs a query. + +Prefer logging off entirely? A commercial deployment supports that. Set it up through `info@dhtmlx.com`. ## Prompts for common Diagram tasks From 9673a2e09c696e6a3edb165c4b6336bdc7fb5374 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Thu, 30 Jul 2026 12:17:02 +0300 Subject: [PATCH 4/9] [update] warm up intro paragraph in MCP guide - reworded the intro's second sentence from a failure-list framing (outdated training data "catches an AI tool off guard") to a direct question comparing generated code against current APIs - added links to shape geometry, connector routing, and layout rules in the first sentence, which previously had none --- docs/guides/ai-integrations/mcp-server.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index 43b9c514..6e24e2e3 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -6,7 +6,7 @@ description: Point an AI assistant at the MCP server and it finds current DHTMLX # DHTMLX Diagram MCP server: a live check on shape and connector APIs -[DHTMLX Diagram](/) tracks a lot at once: shape geometry, connector routing, layout rules, and whatever the editor is configured to allow. Outdated training data catches an AI tool off guard here, producing shape properties the library renamed, connector methods that moved, or layout options that no longer ship with it. +[DHTMLX Diagram](/) gives you real control over [shape geometry](shapes/configuration_properties.md), [connector routing](/lines/), and [layout rules](guides/diagram/configuration.md), plus any options the editor is configured to allow. Does the generated code reflect current shape properties, connector methods, and layout options, or does it reflect the state of an earlier training snapshot? The DHTMLX MCP server exists precisely for this: it puts the current Diagram documentation in front of the assistant before a single shape gets drawn. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](shapes/custom_shape.md), the [Diagram Editor](guides/diagram_editor/initialization.md), or any other part of the library, the assistant retrieves the current reference material before generating a response. From 46702dd0b328e6a04c1f6ff3041968953a409eda Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Tue, 4 Aug 2026 18:05:01 +0300 Subject: [PATCH 5/9] [update] tighten Diagram MCP how-it-works section - merged the numbered steps with the search/inference example into one walkthrough - defined Search and Inference explicitly on first mention - removed em dashes, trimmed wording --- docs/guides/ai-integrations/mcp-server.md | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index 6e24e2e3..88a05524 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -1,16 +1,16 @@ --- sidebar_label: DHTMLX MCP server -title: DHTMLX Diagram MCP server for shapes and connectors +title: DHTMLX Diagram MCP server for shapes and connector APIs description: Point an AI assistant at the MCP server and it finds current DHTMLX Diagram docs on shapes, swimlanes, org charts, and the Diagram Editor. --- -# DHTMLX Diagram MCP server: a live check on shape and connector APIs +# DHTMLX Diagram MCP server: shapes, connectors, and editor APIs [DHTMLX Diagram](/) gives you real control over [shape geometry](shapes/configuration_properties.md), [connector routing](/lines/), and [layout rules](guides/diagram/configuration.md), plus any options the editor is configured to allow. Does the generated code reflect current shape properties, connector methods, and layout options, or does it reflect the state of an earlier training snapshot? The DHTMLX MCP server exists precisely for this: it puts the current Diagram documentation in front of the assistant before a single shape gets drawn. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](shapes/custom_shape.md), the [Diagram Editor](guides/diagram_editor/initialization.md), or any other part of the library, the assistant retrieves the current reference material before generating a response. -**MCP endpoint** +### MCP endpoint ~~~ https://docs.dhtmlx.com/mcp @@ -35,9 +35,16 @@ DHTMLX Diagram's documentation lives in the MCP server's index. Developers query ## Inside a Diagram MCP server request -Under the DHTMLX Diagram MCP server sit two separate workflows, *Search* and *Inference*, and the assistant chooses between them based on the request. Both draw on the same Retrieval-Augmented Generation (RAG) index built from the documentation. *Search* is the one that hands the assistant reference pages to work from; *Inference* skips that step and answers the question itself. +The DHTMLX MCP server runs a Retrieval-Augmented Generation (RAG) pipeline over the Model Context Protocol (MCP), routing each query to one of two workflows: *Search*, which retrieves matching reference pages for the assistant to work from, or *Inference*, which reads those pages and returns a finished answer directly. Here's how that plays out for the prompt *"How do I configure a swimlane diagram with custom cell headers?"*: -For example, ask *"How do I configure a swimlane diagram with custom cell headers?"* and the assistant sends that one to *Search*: it matches the swimlanes documentation, hands back the reference pages, and the assistant writes the configuration from them rather than from memory. A prompt with a single factual answer, like which method controls auto-layout, is one the assistant can route to *Inference* instead, which reads the same kind of pages and returns the answer on its own. +1. The assistant sends the query through MCP. +2. The server matches it to the swimlanes documentation. +3. Since the answer requires generated code, it routes to *Search* (a narrower factual question, like which method controls auto-layout, would go to *Inference*). +4. *Search* pulls the matching pages from a vector index built on the current Diagram docs. +5. Those pages return to the assistant as context. +6. The assistant writes the swimlane configuration from that context rather than from memory. + +This keeps generated Diagram code aligned with the documentation as it stands today, not a training-time snapshot. ## Bringing the MCP server into your AI tool From e1236128ec1bf7c57079a73f885c3881b1a2c5be Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Fri, 7 Aug 2026 10:44:51 +0300 Subject: [PATCH 6/9] [update] add request-splitting step to Diagram MCP guide - assistant now isolates only the doc-needing part of a compound prompt before querying MCP, handling the rest from its own knowledge - fixed intro referencing the HR API detail before it was introduced - split the example-prompt sentence into its own paragraph - varied wording to avoid repeating the same verb in intro and step 1 --- docs/guides/ai-integrations/mcp-server.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index 88a05524..704d6d36 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -35,16 +35,18 @@ DHTMLX Diagram's documentation lives in the MCP server's index. Developers query ## Inside a Diagram MCP server request -The DHTMLX MCP server runs a Retrieval-Augmented Generation (RAG) pipeline over the Model Context Protocol (MCP), routing each query to one of two workflows: *Search*, which retrieves matching reference pages for the assistant to work from, or *Inference*, which reads those pages and returns a finished answer directly. Here's how that plays out for the prompt *"How do I configure a swimlane diagram with custom cell headers?"*: +The DHTMLX MCP server runs a Retrieval-Augmented Generation (RAG) pipeline over the Model Context Protocol (MCP), routing each query to one of two workflows: *Search*, which retrieves matching reference pages for the assistant to work from, or *Inference*, which reads those pages and returns a finished answer directly. Which part of a request actually needs Diagram's documentation? The assistant extracts just that piece first and handles the rest on its own. -1. The assistant sends the query through MCP. -2. The server matches it to the swimlanes documentation. +Here's how that plays out for the prompt *"How do I build a DHTMLX Diagram org chart that pulls employee records from my internal HR API and auto-arranges them by department?"*: + +1. The assistant picks out the part that needs documentation: how to configure auto-layout for an org chart built from a JSON dataset. +2. The server matches it to the diagram configuration documentation. 3. Since the answer requires generated code, it routes to *Search* (a narrower factual question, like which method controls auto-layout, would go to *Inference*). 4. *Search* pulls the matching pages from a vector index built on the current Diagram docs. 5. Those pages return to the assistant as context. -6. The assistant writes the swimlane configuration from that context rather than from memory. +6. The assistant configures the auto-layout using that context, then writes the HR API fetch logic from its own knowledge instead of guessing at the Diagram API. -This keeps generated Diagram code aligned with the documentation as it stands today, not a training-time snapshot. +This keeps generated Diagram code aligned with the documentation as it stands today. ## Bringing the MCP server into your AI tool From 17cd5ab9c9f5fe335c57e8dc8a0eae9b8f6e5ad6 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Fri, 7 Aug 2026 14:25:51 +0300 Subject: [PATCH 7/9] [update] normalize links and quotes in MCP guide docs - convert relative doc links in mcp-server.md (en, ru, de, ko, zh) to root-relative absolute paths, fixing links broken in the zh build and making resolution consistent across locales - fix two links in zh whats_new.md that resolved incorrectly for the same reason - normalize stray curly quotes to straight quotes in zh mcp-server.md and 8 other zh docs, matching the straight-quote convention used elsewhere in the locale --- docs/guides/ai-integrations/mcp-server.md | 18 +++++----- .../guides/ai-integrations/mcp-server.md | 16 ++++----- .../guides/ai-integrations/mcp-server.md | 16 ++++----- .../guides/ai-integrations/mcp-server.md | 16 ++++----- .../current/api/diagram/addshape_method.md | 2 +- .../current/api/diagram/autoplace_method.md | 4 +-- .../api/diagram/autoplacement_property.md | 4 +-- .../copymanager/methods/paste_method.md | 2 +- .../editbar/basic_controls/combo.md | 2 +- .../editor/config/autoplacement_property.md | 4 +-- .../editor/events/zoomin_event.md | 2 +- .../editor/events/zoomout_event.md | 2 +- .../groups/configuration_properties.md | 4 +-- .../guides/ai-integrations/mcp-server.md | 34 +++++++++---------- .../current/whats_new.md | 6 ++-- 15 files changed, 66 insertions(+), 66 deletions(-) diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index 704d6d36..7c89e851 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -6,9 +6,9 @@ description: Point an AI assistant at the MCP server and it finds current DHTMLX # DHTMLX Diagram MCP server: shapes, connectors, and editor APIs -[DHTMLX Diagram](/) gives you real control over [shape geometry](shapes/configuration_properties.md), [connector routing](/lines/), and [layout rules](guides/diagram/configuration.md), plus any options the editor is configured to allow. Does the generated code reflect current shape properties, connector methods, and layout options, or does it reflect the state of an earlier training snapshot? +[DHTMLX Diagram](/) gives you real control over [shape geometry](/shapes/configuration_properties), [connector routing](/lines/), and [layout rules](/guides/diagram/configuration), plus any options the editor is configured to allow. Does the generated code reflect current shape properties, connector methods, and layout options, or does it reflect the state of an earlier training snapshot? -The DHTMLX MCP server exists precisely for this: it puts the current Diagram documentation in front of the assistant before a single shape gets drawn. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](shapes/custom_shape.md), the [Diagram Editor](guides/diagram_editor/initialization.md), or any other part of the library, the assistant retrieves the current reference material before generating a response. +The DHTMLX MCP server exists precisely for this: it puts the current Diagram documentation in front of the assistant before a single shape gets drawn. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](/shapes/custom_shape), the [Diagram Editor](/guides/diagram_editor/initialization), or any other part of the library, the assistant retrieves the current reference material before generating a response. ### MCP endpoint @@ -24,14 +24,14 @@ The DHTMLX MCP server covers all major DHTMLX products, not only DHTMLX Diagram. DHTMLX Diagram's documentation lives in the MCP server's index. Developers query it for things such as: -- Looking up the current API for [shapes](shapes/default_shapes.md), [lines](/lines/), [groups](/groups/), or [swimlanes](/swimlanes/). +- Looking up the current API for [shapes](/shapes/default_shapes), [lines](/lines/), [groups](/groups/), or [swimlanes](/swimlanes/). - Generating ready-to-run Diagram code based on a description. -- Exploring [Editor](guides/diagram_editor/initialization.md) configuration options, toolbar controls, and event handling. -- Checking [export](guides/data_export.md) options and understanding how to produce PDF or PNG output. -- Configuring auto-layout options for default-mode diagrams using the [diagram configuration](guides/diagram/configuration.md). -- Loading diagram data and serializing it back with the available [data methods](guides/loading_data.md). -- Handling [Diagram and Editor events](guides/event_handling.md) to respond to user interactions. -- Exploring [TypeScript support](guides/using_typescript.md) and framework integration for React, Vue, Angular and Svelte. +- Exploring [Editor](/guides/diagram_editor/initialization) configuration options, toolbar controls, and event handling. +- Checking [export](/guides/data_export) options and understanding how to produce PDF or PNG output. +- Configuring auto-layout options for default-mode diagrams using the [diagram configuration](/guides/diagram/configuration). +- Loading diagram data and serializing it back with the available [data methods](/guides/loading_data). +- Handling [Diagram and Editor events](/guides/event_handling) to respond to user interactions. +- Exploring [TypeScript support](/guides/using_typescript) and framework integration for React, Vue, Angular and Svelte. ## Inside a Diagram MCP server request diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md index 827c60fb..dcbede75 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md @@ -8,7 +8,7 @@ description: Verbinden Sie KI-Coding-Assistenten über den MCP-Server mit der ak Der Aufbau von Diagrammanwendungen erfordert präzise Kontrolle über Formen, Verbindungen, Layout und Editor-Konfiguration. Wenn ein KI-Tool anhand veralteter Trainingsdaten Code für [DHTMLX Diagram](/) generiert, entstehen inkompatible APIs, fehlende Eigenschaften und Konfigurationsoptionen, die es nicht mehr gibt. -Der DHTMLX Model Context Protocol (MCP)-Server löst dieses Problem, indem er KI-Tools direkten Zugriff auf die aktuelle Diagram-Dokumentation gibt. Egal, ob Sie mit [Swimlanes](/swimlanes/), [benutzerdefinierten Formen](shapes/custom_shape.md), dem [Diagram Editor](guides/diagram_editor/initialization.md) oder einem anderen Teil der Bibliothek arbeiten – der Assistent ruft das aktuelle Referenzmaterial ab, bevor er eine Antwort generiert. +Der DHTMLX Model Context Protocol (MCP)-Server löst dieses Problem, indem er KI-Tools direkten Zugriff auf die aktuelle Diagram-Dokumentation gibt. Egal, ob Sie mit [Swimlanes](/swimlanes/), [benutzerdefinierten Formen](/shapes/custom_shape), dem [Diagram Editor](/guides/diagram_editor/initialization) oder einem anderen Teil der Bibliothek arbeiten – der Assistent ruft das aktuelle Referenzmaterial ab, bevor er eine Antwort generiert. **MCP-Endpunkt** @@ -24,14 +24,14 @@ Der DHTMLX MCP-Server deckt alle wichtigen DHTMLX-Produkte ab, nicht nur DHTMLX Der MCP-Server indiziert die vollständige DHTMLX-Diagram-Dokumentation. Häufige Szenarien, in denen der MCP-Server nützlich ist: -- Nachschlagen der aktuellen API für [Formen](shapes/default_shapes.md), [Linien](/lines/), [Gruppen](/groups/) oder [Swimlanes](/swimlanes/). +- Nachschlagen der aktuellen API für [Formen](/shapes/default_shapes), [Linien](/lines/), [Gruppen](/groups/) oder [Swimlanes](/swimlanes/). - Generieren von sofort lauffähigem Diagram-Code auf Grundlage einer Beschreibung. -- Erkunden von [Editor](guides/diagram_editor/initialization.md)-Konfigurationsoptionen, Toolbar-Steuerelementen und Event-Handling. -- Prüfen der [Export](guides/data_export.md)-Optionen und Verstehen, wie PDF- oder PNG-Ausgaben erzeugt werden. -- Konfigurieren von Auto-Layout-Optionen für Diagramme im Standardmodus mithilfe der [Diagram-Konfiguration](guides/diagram/configuration.md). -- Laden von Diagrammdaten und deren Serialisierung mithilfe der verfügbaren [Datenmethoden](guides/loading_data.md). -- Verarbeiten von [Diagram- und Editor-Events](guides/event_handling.md), um auf Benutzerinteraktionen zu reagieren. -- Erkunden der [TypeScript-Unterstützung](guides/using_typescript.md) und der Framework-Integration für React, Vue, Angular und Svelte. +- Erkunden von [Editor](/guides/diagram_editor/initialization)-Konfigurationsoptionen, Toolbar-Steuerelementen und Event-Handling. +- Prüfen der [Export](/guides/data_export)-Optionen und Verstehen, wie PDF- oder PNG-Ausgaben erzeugt werden. +- Konfigurieren von Auto-Layout-Optionen für Diagramme im Standardmodus mithilfe der [Diagram-Konfiguration](/guides/diagram/configuration). +- Laden von Diagrammdaten und deren Serialisierung mithilfe der verfügbaren [Datenmethoden](/guides/loading_data). +- Verarbeiten von [Diagram- und Editor-Events](/guides/event_handling), um auf Benutzerinteraktionen zu reagieren. +- Erkunden der [TypeScript-Unterstützung](/guides/using_typescript) und der Framework-Integration für React, Vue, Angular und Svelte. ## Wie der DHTMLX MCP-Server funktioniert {#how-dhtmlx-mcp-server-works} diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md index 64bb4951..c66fae10 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md @@ -8,7 +8,7 @@ description: MCP 서버를 통해 AI 코딩 어시스턴트를 실시간 DHTMLX 다이어그램 애플리케이션을 구축하려면 도형, 연결, 레이아웃, 에디터 구성에 대한 정밀한 제어가 필요합니다. AI 도구가 오래된 학습 데이터를 기반으로 [DHTMLX Diagram](/) 코드를 생성하면 API가 일치하지 않거나 속성이 누락되거나 더 이상 존재하지 않는 구성 옵션이 사용되는 결과가 발생합니다. -DHTMLX Model Context Protocol(MCP) 서버는 AI 도구에 실시간 Diagram 문서에 대한 직접적인 액세스 권한을 부여하여 이 문제를 해결합니다. [스윔레인](/swimlanes/), [커스텀 도형](shapes/custom_shape.md), [Diagram Editor](guides/diagram_editor/initialization.md) 또는 라이브러리의 다른 어떤 부분을 다루든, 어시스턴트는 응답을 생성하기 전에 최신 참조 자료를 가져옵니다. +DHTMLX Model Context Protocol(MCP) 서버는 AI 도구에 실시간 Diagram 문서에 대한 직접적인 액세스 권한을 부여하여 이 문제를 해결합니다. [스윔레인](/swimlanes/), [커스텀 도형](/shapes/custom_shape), [Diagram Editor](/guides/diagram_editor/initialization) 또는 라이브러리의 다른 어떤 부분을 다루든, 어시스턴트는 응답을 생성하기 전에 최신 참조 자료를 가져옵니다. **MCP 엔드포인트** @@ -24,14 +24,14 @@ DHTMLX MCP 서버는 DHTMLX Diagram뿐만 아니라 모든 주요 DHTMLX 제품 MCP 서버는 전체 DHTMLX Diagram 문서를 인덱싱합니다. MCP 서버가 유용하게 사용되는 일반적인 시나리오는 다음과 같습니다. -- [도형](shapes/default_shapes.md), [선](/lines/), [그룹](/groups/), [스윔레인](/swimlanes/)의 최신 API 조회. +- [도형](/shapes/default_shapes), [선](/lines/), [그룹](/groups/), [스윔레인](/swimlanes/)의 최신 API 조회. - 설명을 기반으로 즉시 실행 가능한 Diagram 코드를 생성. -- [Editor](guides/diagram_editor/initialization.md) 구성 옵션, 툴바 컨트롤, 이벤트 처리 방식 탐색. -- [내보내기](guides/data_export.md) 옵션을 확인하고 PDF 또는 PNG 출력을 생성하는 방법을 이해. -- [다이어그램 구성](guides/diagram/configuration.md)을 사용하여 기본 모드 다이어그램의 자동 레이아웃 옵션을 구성. -- 사용 가능한 [데이터 메서드](guides/loading_data.md)를 사용하여 다이어그램 데이터를 로드하고 다시 직렬화. -- 사용자 상호작용에 대응하기 위해 [Diagram 및 Editor 이벤트](guides/event_handling.md)를 처리. -- React, Vue, Angular, Svelte에 대한 [TypeScript 지원](guides/using_typescript.md) 및 프레임워크 통합 탐색. +- [Editor](/guides/diagram_editor/initialization) 구성 옵션, 툴바 컨트롤, 이벤트 처리 방식 탐색. +- [내보내기](/guides/data_export) 옵션을 확인하고 PDF 또는 PNG 출력을 생성하는 방법을 이해. +- [다이어그램 구성](/guides/diagram/configuration)을 사용하여 기본 모드 다이어그램의 자동 레이아웃 옵션을 구성. +- 사용 가능한 [데이터 메서드](/guides/loading_data)를 사용하여 다이어그램 데이터를 로드하고 다시 직렬화. +- 사용자 상호작용에 대응하기 위해 [Diagram 및 Editor 이벤트](/guides/event_handling)를 처리. +- React, Vue, Angular, Svelte에 대한 [TypeScript 지원](/guides/using_typescript) 및 프레임워크 통합 탐색. ## DHTMLX MCP 서버의 작동 방식 {#how-dhtmlx-mcp-server-works} diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md index 13bd28f4..79c4f230 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md @@ -8,7 +8,7 @@ description: Подключите ИИ-ассистентов для напис Разработка приложений с диаграммами требует точного контроля над фигурами, соединениями, компоновкой и конфигурацией редактора. Когда ИИ-инструмент генерирует код [DHTMLX Diagram](/) на основе устаревших данных обучения, результатом становятся несоответствующие API, отсутствующие свойства и параметры конфигурации, которых больше не существует. -MCP-сервер DHTMLX (Model Context Protocol) решает эту проблему, предоставляя ИИ-инструментам прямой доступ к актуальной документации Diagram. Работаете ли вы с [дорожками](/swimlanes/), [пользовательскими фигурами](shapes/custom_shape.md), [Diagram Editor](guides/diagram_editor/initialization.md) или любой другой частью библиотеки — ассистент получает актуальные справочные материалы перед формированием ответа. +MCP-сервер DHTMLX (Model Context Protocol) решает эту проблему, предоставляя ИИ-инструментам прямой доступ к актуальной документации Diagram. Работаете ли вы с [дорожками](/swimlanes/), [пользовательскими фигурами](/shapes/custom_shape), [Diagram Editor](/guides/diagram_editor/initialization) или любой другой частью библиотеки — ассистент получает актуальные справочные материалы перед формированием ответа. **Конечная точка MCP** @@ -24,14 +24,14 @@ MCP-сервер DHTMLX охватывает все основные проду MCP-сервер индексирует полную документацию DHTMLX Diagram. Вот распространённые сценарии, в которых MCP-сервер оказывается полезен: -- Поиск актуального API для [фигур](shapes/default_shapes.md), [линий](/lines/), [групп](/groups/) или [дорожек](/swimlanes/). +- Поиск актуального API для [фигур](/shapes/default_shapes), [линий](/lines/), [групп](/groups/) или [дорожек](/swimlanes/). - Генерация готового к запуску кода Diagram на основе описания. -- Изучение параметров конфигурации [Editor](guides/diagram_editor/initialization.md), элементов управления панели инструментов и обработки событий. -- Проверка параметров [экспорта](guides/data_export.md) и понимание того, как получить PDF- или PNG-файл. -- Настройка параметров автоматического размещения элементов (auto-layout) для диаграмм в режиме по умолчанию с помощью [конфигурации диаграммы](guides/diagram/configuration.md). -- Загрузка данных диаграммы и их обратная сериализация с помощью доступных [методов работы с данными](guides/loading_data.md). -- Обработка [событий Diagram и Editor](guides/event_handling.md) для реакции на действия пользователя. -- Изучение [поддержки TypeScript](guides/using_typescript.md) и интеграции с фреймворками React, Vue, Angular и Svelte. +- Изучение параметров конфигурации [Editor](/guides/diagram_editor/initialization), элементов управления панели инструментов и обработки событий. +- Проверка параметров [экспорта](/guides/data_export) и понимание того, как получить PDF- или PNG-файл. +- Настройка параметров автоматического размещения элементов (auto-layout) для диаграмм в режиме по умолчанию с помощью [конфигурации диаграммы](/guides/diagram/configuration). +- Загрузка данных диаграммы и их обратная сериализация с помощью доступных [методов работы с данными](/guides/loading_data). +- Обработка [событий Diagram и Editor](/guides/event_handling) для реакции на действия пользователя. +- Изучение [поддержки TypeScript](/guides/using_typescript) и интеграции с фреймворками React, Vue, Angular и Svelte. ## Как работает MCP-сервер DHTMLX {#how-dhtmlx-mcp-server-works} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md index 0b3b06e2..fed7550d 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/addshape_method.md @@ -28,7 +28,7 @@ addShape( - `template: function` - （必需）该函数以形状的配置对象作为参数，并返回 HTML 或 SVG 模板 - [`defaults: object`](shapes/custom_shape.md) - （可选）已创建形状的默认配置。请参阅[形状配置属性的完整列表](shapes/configuration_properties.md) - [`eventHandlers: object`](shapes/custom_shape.md#event-handlers-for-custom-shapes) - （可选）为形状模板的 HTML 元素添加自定义事件处理程序。`eventHandlers` 对象包含一组 `key:value` 键值对，其中： - - `key: string` - 事件的名称。请注意，事件名称的开头使用 “on” 前缀（onclick、onmouseover） + - `key: string` - 事件的名称。请注意，事件名称的开头使用 "on" 前缀（onclick、onmouseover） - `value: object` - 一个包含 `key:value` 键值对的对象，其中 - `key` 是将应用该处理程序的 CSS 类名 - `value` 是一个接受两个参数的函数： diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/autoplace_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/autoplace_method.md index 6b760d4e..9319e5f8 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/autoplace_method.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/autoplace_method.md @@ -45,13 +45,13 @@ diagram.autoPlace({ ### "direct" 模式 {#direct-mode} -无箭头连接线按“从中心到中心”对齐；线条为直线且呈对角线状。 +无箭头连接线按"从中心到中心"对齐；线条为直线且呈对角线状。 ![](/img/direct_mode.png) ### "edges" 模式 {#edges-mode} -连接线按“从边到边”对齐。 +连接线按"从边到边"对齐。 :::note 如果在连接线上设置了 `fromSide` 和 `toSide`，自动布局算法将保留这些值，但在计算排列时不会使用它们。定义连接线的关键属性是 `from` 和 `to`，而 `fromSide` 和 `toSide` 由算法自动计算。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/autoplacement_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/autoplacement_property.md index 514907ac..377f14f1 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/autoplacement_property.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram/autoplacement_property.md @@ -72,13 +72,13 @@ diagram.autoPlace(); ### "direct" 模式 {#direct-mode} -无箭头连接线按“从中心到中心”对齐。线条为直线且呈对角线状。 +无箭头连接线按"从中心到中心"对齐。线条为直线且呈对角线状。 ![](/img/direct_mode.png) ### "edges" 模式 {#edges-mode} -连接线按“从边到边”对齐。 +连接线按"从边到边"对齐。 :::info 要为线条添加箭头，请在[线对象](lines/configuration_properties.md)的配置中指定 `forwardArrow: "filled"` 或 `backArrow: "filled"`。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/copymanager/methods/paste_method.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/copymanager/methods/paste_method.md index f1b9f4a6..98ef4af2 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/copymanager/methods/paste_method.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/copymanager/methods/paste_method.md @@ -8,7 +8,7 @@ description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解 Copy m ### 描述 {#description} -@short: 创建与通过 “copy()” 方法传递的元素相同的新元素 +@short: 创建与通过 "copy()" 方法传递的元素相同的新元素 :::note 仅当 Diagram Editor 以 `default` 模式初始化时，`paste()` 方法才能正常工作。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/combo.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/combo.md index 852d17fc..4560fd06 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/combo.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editbar/basic_controls/combo.md @@ -88,7 +88,7 @@ Combo 内部的选项配置对象： - `multiselection` -（可选）在 Combo 中启用多选功能。默认值为 *false* - `placeholder` -（可选）在 Combo 的输入框中设置占位符 - `readOnly` -（可选）使 Combo 变为只读（只能从列表中选择选项，不能在输入框中输入文字）。默认值为 *false* -- `selectAllButton` -（可选）定义是否显示“全选”按钮。默认值为 *false* +- `selectAllButton` -（可选）定义是否显示"全选"按钮。默认值为 *false* - `template` -（可选）设置弹出列表中选项的显示模板 - `virtual` -（可选）在滚动选项列表时启用数据的动态加载。默认值为 *false* - `label` -（可选）为控件指定标签 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md index 2e8fec1b..bced03cc 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/config/autoplacement_property.md @@ -68,13 +68,13 @@ editor.parse(data); ### "direct" 模式 {#direct-mode} -无箭头的连接线按“从中心到中心”对齐，呈直线和对角线状。 +无箭头的连接线按"从中心到中心"对齐，呈直线和对角线状。 ![](/img/direct_mode.png) ### "edges" 模式 {#edges-mode} -连接线按“从边到边”的方式对齐。 +连接线按"从边到边"的方式对齐。 :::info 若要为线条添加箭头，请在[线条对象](lines/configuration_properties.md)的配置中指定 `forwardArrow: "filled"` 或 `backArrow: "filled"`。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md index 29f2a180..b54dbe37 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomin_event.md @@ -8,7 +8,7 @@ description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑 ### 描述 {#description} -@short: 在点击“放大”按钮或调用 zoomIn() 方法后触发 +@short: 在点击"放大"按钮或调用 zoomIn() 方法后触发 ### 用法 {#usage} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md index 4fd4e101..dde538e9 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/api/diagram_editor/editor/events/zoomout_event.md @@ -8,7 +8,7 @@ description: 您可以在 DHTMLX JavaScript Diagram 库的文档中了解编辑 ### 描述 {#description} -@short: 在点击“缩小”按钮或调用 `zoomOut()` 方法后触发 +@short: 在点击"缩小"按钮或调用 `zoomOut()` 方法后触发 ### 用法 {#usage} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/groups/configuration_properties.md b/i18n/zh/docusaurus-plugin-content-docs/current/groups/configuration_properties.md index 41bcd20b..f13a87cd 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/groups/configuration_properties.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/groups/configuration_properties.md @@ -139,9 +139,9 @@ const data = [ **相关文章**：[配置 Group](/groups/) -## “项目”对象特有的属性 {#properties-specific-for-project-object} +## "项目"对象特有的属性 {#properties-specific-for-project-object} -“项目”对象用作任务和里程碑的容器，其工作方式类似于 [group](/groups/)，支持创建具有多种嵌套级别的 PERT 图表，并提供可视化分组。 +"项目"对象用作任务和里程碑的容器，其工作方式类似于 [group](/groups/)，支持创建具有多种嵌套级别的 PERT 图表，并提供可视化分组。 ### 用法 {#usage-1} diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md index eca6c471..155ca9e6 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/ai-integrations/mcp-server.md @@ -8,7 +8,7 @@ description: 通过 MCP 服务器将 AI 编程助手连接到实时的 DHTMLX Di 构建图表应用程序需要对形状、连接、布局和编辑器配置进行精确控制。当 AI 工具根据过时的训练数据生成 [DHTMLX Diagram](/) 代码时，结果往往是 API 不匹配、属性缺失，以及已不存在的配置选项。 -DHTMLX 模型上下文协议（Model Context Protocol，MCP）服务器通过让 AI 工具直接访问实时的 Diagram 文档来解决这一问题。无论您使用的是[泳道](/swimlanes/)、[自定义形状](shapes/custom_shape.md)、[Diagram Editor](guides/diagram_editor/initialization.md)，还是库的其他任何部分，助手都会在生成响应之前检索最新的参考资料。 +DHTMLX 模型上下文协议（Model Context Protocol，MCP）服务器通过让 AI 工具直接访问实时的 Diagram 文档来解决这一问题。无论您使用的是[泳道](/swimlanes/)、[自定义形状](/shapes/custom_shape)、[Diagram Editor](/guides/diagram_editor/initialization)，还是库的其他任何部分，助手都会在生成响应之前检索最新的参考资料。 **MCP 端点** @@ -24,20 +24,20 @@ DHTMLX MCP 服务器涵盖所有主要的 DHTMLX 产品，而不仅仅是 DHTMLX MCP 服务器会为完整的 DHTMLX Diagram 文档建立索引。以下是 MCP 服务器常见的实用场景： -- 查询[形状](shapes/default_shapes.md)、[线条](/lines/)、[分组](/groups/)或[泳道](/swimlanes/)的最新 API。 +- 查询[形状](/shapes/default_shapes)、[线条](/lines/)、[分组](/groups/)或[泳道](/swimlanes/)的最新 API。 - 根据描述生成可直接运行的 Diagram 代码。 -- 浏览[编辑器](guides/diagram_editor/initialization.md)的配置选项、工具栏控件和事件处理方式。 -- 查看[导出](guides/data_export.md)选项，了解如何生成 PDF 或 PNG 输出。 -- 通过[图表配置](guides/diagram/configuration.md)为默认模式的图表设置自动布局选项。 -- 使用可用的[数据方法](guides/loading_data.md)加载图表数据并将其重新序列化。 -- 处理 [Diagram 和编辑器事件](guides/event_handling.md)以响应用户交互。 -- 了解 [TypeScript 支持](guides/using_typescript.md)情况，以及与 React、Vue、Angular 和 Svelte 的框架集成。 +- 浏览[编辑器](/guides/diagram_editor/initialization)的配置选项、工具栏控件和事件处理方式。 +- 查看[导出](/guides/data_export)选项，了解如何生成 PDF 或 PNG 输出。 +- 通过[图表配置](/guides/diagram/configuration)为默认模式的图表设置自动布局选项。 +- 使用可用的[数据方法](/guides/loading_data)加载图表数据并将其重新序列化。 +- 处理 [Diagram 和编辑器事件](/guides/event_handling)以响应用户交互。 +- 了解 [TypeScript 支持](/guides/using_typescript)情况，以及与 React、Vue、Angular 和 Svelte 的框架集成。 ## DHTMLX MCP 服务器的工作原理 {#how-dhtmlx-mcp-server-works} 该服务器将检索增强生成（Retrieval-Augmented Generation，RAG）流程与 MCP 相结合，使 AI 助手能够按需查询文档，而不必仅依赖训练数据。 -例如，当您提问 *“如何配置带有自定义单元格表头的泳道图？”* 时，助手会通过 MCP 端点发送该提示。服务器会将其与泳道相关文档进行匹配，检索出相关的参考页面，并将其作为上下文返回。随后，助手会基于当前的 API（而非训练时的快照）生成代码。 +例如，当您提问 *"如何配置带有自定义单元格表头的泳道图？"* 时，助手会通过 MCP 端点发送该提示。服务器会将其与泳道相关文档进行匹配，检索出相关的参考页面，并将其作为上下文返回。随后，助手会基于当前的 API（而非训练时的快照）生成代码。 ## 将 AI 工具连接到 Diagram {#connecting-ai-tools-to-diagram} @@ -108,8 +108,8 @@ claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp 以下是将 DHTMLX MCP 服务器连接到 Google Antigravity 需要完成的步骤： 1. 打开命令面板 -2. 输入 “mcp add” -3. 选择 “HTTP” +2. 输入 "mcp add" +3. 选择 "HTTP" 4. 提供以下值： - 名称： ~~~ @@ -156,7 +156,7 @@ https://docs.dhtmlx.com/mcp 1. 进入 **Settings** → **Apps & Connectors** 2. 点击 **Advanced settings** 3. 启用 **Developer mode** -4. 返回 **Apps & Connectors** 界面并点击 “Create” +4. 返回 **Apps & Connectors** 界面并点击 "Create" 5. 配置连接器： - 名称： ~~~ @@ -177,7 +177,7 @@ https://docs.dhtmlx.com/mcp ### 其他工具 {#other-tools} -大多数现代 AI 编程工具（包括 Windsurf、Cline、Continue.dev 等）会在其设置中以 “Model Context Protocol”、“Context Sources” 或 “Custom integrations” 等名称提供 MCP 功能。请将 `https://docs.dhtmlx.com/mcp` 添加为源 URL。 +大多数现代 AI 编程工具（包括 Windsurf、Cline、Continue.dev 等）会在其设置中以 "Model Context Protocol"、"Context Sources" 或 "Custom integrations" 等名称提供 MCP 功能。请将 `https://docs.dhtmlx.com/mcp` 添加为源 URL。 ## 隐私与数据处理 {#privacy-and-data-handling} @@ -236,7 +236,7 @@ What format does DHTMLX Diagram use for serialized data, and how do I reload it? ## 编写高效 Diagram 提示词的技巧 {#tips-for-effective-diagram-prompts} -- **明确 API 范围。** 区分 diagram 实例和 editor，例如 “in the DHTMLX Diagram Editor” 与 “on the diagram object” 这两种表述的区别。目标越明确，服务器检索到的文档就越贴切。 -- **注明具体的形状类型。** 类似 “a swimlane shape” 或 “a custom shape with HTML content” 这样的提示词，比笼统的 “a shape” 能更快检索到正确的参考页面。 -- **在提示词中加入 “Use the docs”。** 这样的措辞会向助手表明应触发 MCP 查询，而不是仅依据训练数据作答。 -- **明确说明您期望的版本行为。** 如果生成的代码与文档中的内容不一致，请添加 “based on the current DHTMLX Diagram documentation” 以强制触发新的检索。 +- **明确 API 范围。** 区分 diagram 实例和 editor，例如 "in the DHTMLX Diagram Editor" 与 "on the diagram object" 这两种表述的区别。目标越明确，服务器检索到的文档就越贴切。 +- **注明具体的形状类型。** 类似 "a swimlane shape" 或 "a custom shape with HTML content" 这样的提示词，比笼统的 "a shape" 能更快检索到正确的参考页面。 +- **在提示词中加入 "Use the docs"。** 这样的措辞会向助手表明应触发 MCP 查询，而不是仅依据训练数据作答。 +- **明确说明您期望的版本行为。** 如果生成的代码与文档中的内容不一致，请添加 "based on the current DHTMLX Diagram documentation" 以强制触发新的检索。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/whats_new.md b/i18n/zh/docusaurus-plugin-content-docs/current/whats_new.md index 37a79a7b..639a416a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/whats_new.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/whats_new.md @@ -70,7 +70,7 @@ description: 您可以在此了解 DHTMLX JavaScript Diagram 库的最新资讯 ### 新功能 {#new-functionality} - 支持根据 Gantt 数据集创建 Diagram PERT 图： - - [新的 PERT 模式](/#diagram-in-the-pert-mode)，通过[新增类型：`"pert"`](api/diagram/type_property.md)设置 + - [新的 PERT 模式](/#diagram-in-the-pert-mode)，通过[新增类型：`"pert"`](/api/diagram/type_property)设置 - [新增形状类型：`"task"` 和 `"milestone"`](shapes/default_shapes.md#shapes-in-the-pert-mode) - [新增分组类型：`"project"`](/groups/#grouping-shapes-in-the-pert-mode)（用于对任务和里程碑进行分组） - Diagram Editor。支持在编辑器内管理键盘快捷键（热键）： @@ -494,7 +494,7 @@ description: 您可以在此了解 DHTMLX JavaScript Diagram 库的最新资讯 ### 新功能 {#new-functionality} - [TypeScript 支持](guides/using_typescript.md) -- DHTMLX Diagram 新增思维导图模式（[type:"mindmap"](api/diagram/type_property.md)） +- DHTMLX Diagram 新增思维导图模式（[type:"mindmap"](/api/diagram/type_property)） - 支持通过图表对象的 [typeConfig](api/diagram/typeconfig_property.md) 配置属性[配置 Diagram 思维导图模式中子形状相对于根形状的方向](guides/diagram/configuration.md#arranging-shapes-in-the-mindmap-mode-of-diagram) - 支持通过 [addShape()](api/diagram/addshape_method.md) 方法的 "eventHandlers" 属性[为自定义形状添加自定义事件处理程序](shapes/custom_shape.md#event-handlers-for-custom-shapes) - 支持通过 Editor 对象的 [shapeToolbar](api/diagram_editor/editor/config/shapetoolbar_property.md) 属性自定义[网格区域](guides/diagram_editor/grid_area.md)中用于编辑项目的个人工具栏 @@ -503,7 +503,7 @@ description: 您可以在此了解 DHTMLX JavaScript Diagram 库的最新资讯 ### 更新 {#updates} -- 更新了图表对象的 [type](api/diagram/type_property.md) 配置属性：新增了 "default" 和 "mindmap" 取值 +- 更新了图表对象的 [type](/api/diagram/type_property) 配置属性：新增了 "default" 和 "mindmap" 取值 - 更新了 [collapseItem()](api/diagram/collapseitem_method.md) 和 [expandItem()](api/diagram/expanditem_method.md) 方法：新增了第二个参数 "dir" - 更新了 [beforeCollapse](api/diagram/beforecollapse_event.md)、[afterCollapse](api/diagram/aftercollapse_event.md)、[beforeExpand](api/diagram/beforeexpand_event.md) 和 [afterExpand](api/diagram/afterexpand_event.md) 事件：新增了第二个参数 "dir" From bfb26b7e6859e8dbf6c52103a573364dd0f128dd Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Fri, 7 Aug 2026 16:23:01 +0300 Subject: [PATCH 8/9] [update] rewrite rhetorical questions as narrative in Diagram guide - intro and how-it-works sections used questions ("Does the generated code reflect...?", "Which part... needs Diagram's documentation?") - rephrased both as declarative statements for a more direct tone --- docs/guides/ai-integrations/mcp-server.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index 7c89e851..453f61ff 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -6,7 +6,7 @@ description: Point an AI assistant at the MCP server and it finds current DHTMLX # DHTMLX Diagram MCP server: shapes, connectors, and editor APIs -[DHTMLX Diagram](/) gives you real control over [shape geometry](/shapes/configuration_properties), [connector routing](/lines/), and [layout rules](/guides/diagram/configuration), plus any options the editor is configured to allow. Does the generated code reflect current shape properties, connector methods, and layout options, or does it reflect the state of an earlier training snapshot? +[DHTMLX Diagram](/) gives you real control over [shape geometry](/shapes/configuration_properties), [connector routing](/lines/), and [layout rules](/guides/diagram/configuration), plus any options the editor is configured to allow. Generated code needs to reflect current shape properties, connector methods, and layout options, not the state of an earlier training snapshot. The DHTMLX MCP server exists precisely for this: it puts the current Diagram documentation in front of the assistant before a single shape gets drawn. Whether you are working with [swimlanes](/swimlanes/), [custom shapes](/shapes/custom_shape), the [Diagram Editor](/guides/diagram_editor/initialization), or any other part of the library, the assistant retrieves the current reference material before generating a response. @@ -35,7 +35,7 @@ DHTMLX Diagram's documentation lives in the MCP server's index. Developers query ## Inside a Diagram MCP server request -The DHTMLX MCP server runs a Retrieval-Augmented Generation (RAG) pipeline over the Model Context Protocol (MCP), routing each query to one of two workflows: *Search*, which retrieves matching reference pages for the assistant to work from, or *Inference*, which reads those pages and returns a finished answer directly. Which part of a request actually needs Diagram's documentation? The assistant extracts just that piece first and handles the rest on its own. +The DHTMLX MCP server runs a Retrieval-Augmented Generation (RAG) pipeline over the Model Context Protocol (MCP), routing each query to one of two workflows: *Search*, which retrieves matching reference pages for the assistant to work from, or *Inference*, which reads those pages and returns a finished answer directly. Only part of a request actually needs Diagram's documentation, and the assistant extracts just that piece first, handling the rest on its own. Here's how that plays out for the prompt *"How do I build a DHTMLX Diagram org chart that pulls employee records from my internal HR API and auto-arranges them by department?"*: From 16b83e65a382d281d5ed1a4bbd1468d25abec2e5 Mon Sep 17 00:00:00 2001 From: Masha_Rudenko Date: Fri, 7 Aug 2026 16:48:09 +0300 Subject: [PATCH 9/9] [update] tone down marketing language in Diagram MCP guide - reworded the setup-section intro away from the "different door" metaphor - rewrote the prompt-tips intro as a plain statement instead of a soundbite --- docs/guides/ai-integrations/mcp-server.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guides/ai-integrations/mcp-server.md b/docs/guides/ai-integrations/mcp-server.md index 453f61ff..b410c115 100644 --- a/docs/guides/ai-integrations/mcp-server.md +++ b/docs/guides/ai-integrations/mcp-server.md @@ -50,7 +50,7 @@ This keeps generated Diagram code aligned with the documentation as it stands to ## Bringing the MCP server into your AI tool -Every tool below reaches the same MCP endpoint through a different door: type a CLI flag into one, paste a JSON block into the next. Register it once per tool, and the connection carries over to every Diagram project you open there: +Each tool below connects to the same MCP endpoint using its own method: a CLI flag for some, a JSON configuration block for others. Register it once per tool, and the connection carries over to every Diagram project you open there: ~~~ https://docs.dhtmlx.com/mcp @@ -198,7 +198,7 @@ Prefer logging off entirely? A commercial deployment supports that. Set it up th ## Prompts for common Diagram tasks -Vague prompts get vague retrieval. Say which Diagram feature you're after (a shape, the editor, export) and the assistant knows exactly where to look; the groups below sort examples by feature. +A prompt that names the specific Diagram feature you need (a shape, the editor, export) retrieves more relevant results than a vague one. The groups below sort examples by feature. **Creating diagrams**