diff --git a/i18n/de/docusaurus-plugin-content-docs/current/.sync b/i18n/de/docusaurus-plugin-content-docs/current/.sync index 86c803d2..dec82a30 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/de/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -e701fd4fb0da070ae0a7ac499675e323d66f4858 +6bfc2997d624dbe1965af8799c866a0c4a6df1b6 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 dcbede75..a859556c 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 @@ -1,16 +1,16 @@ --- sidebar_label: DHTMLX MCP-Server -title: Verwendung des DHTMLX MCP-Servers mit KI-Coding-Assistenten -description: Verbinden Sie KI-Coding-Assistenten über den MCP-Server mit der aktuellen DHTMLX-Diagram-Dokumentation. Behandelt Formen, Swimlanes, Organigramme, den Diagram Editor und mehr. +title: DHTMLX Diagram MCP-Server für Formen- und Verbindungs-APIs +description: Richten Sie einen KI-Assistenten auf den MCP-Server aus, und er findet die aktuelle DHTMLX-Diagram-Dokumentation zu Formen, Swimlanes, Organigrammen und dem Diagram Editor. --- -# Verwendung des DHTMLX MCP-Servers mit KI-Coding-Assistenten +# DHTMLX Diagram MCP-Server: Formen, Verbindungen und Editor-APIs {#dhtmlx-diagram-mcp-server-shapes-connectors-and-editor-apis} -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. +[DHTMLX Diagram](/) gibt Ihnen echte Kontrolle über [Formgeometrie](/shapes/configuration_properties), [Verbindungs-Routing](/lines/) und [Layout-Regeln](/guides/diagram/configuration) sowie über jede Option, die der Editor zulässt. Generierter Code muss die aktuellen Formeigenschaften, Verbindungsmethoden und Layout-Optionen widerspiegeln – nicht den Stand eines früheren Trainings-Snapshots. -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. +Genau dafür gibt es den DHTMLX MCP-Server: Er stellt dem Assistenten die aktuelle Diagram-Dokumentation bereit, noch bevor auch nur eine einzige Form gezeichnet wird. 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** +### MCP-Endpunkt {#mcp-endpoint} ~~~ https://docs.dhtmlx.com/mcp @@ -20,9 +20,9 @@ https://docs.dhtmlx.com/mcp Der DHTMLX MCP-Server deckt alle wichtigen DHTMLX-Produkte ab, nicht nur DHTMLX Diagram. Derselbe Endpunkt und dieselben Konfigurationsschritte gelten unabhängig davon, mit welcher Komponente Sie arbeiten. ::: -## Wo der MCP-Server bei Diagram hilft {#where-mcp-server-helps-with-diagram} +## Diagram-Aufgaben, die der MCP-Server beschleunigt {#diagram-work-the-mcp-server-speeds-up} -Der MCP-Server indiziert die vollständige DHTMLX-Diagram-Dokumentation. Häufige Szenarien, in denen der MCP-Server nützlich ist: +Die Dokumentation von DHTMLX Diagram ist im Index des MCP-Servers erfasst. Entwickler fragen ihn zum Beispiel für Folgendes ab: - 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. @@ -33,15 +33,24 @@ Der MCP-Server indiziert die vollständige DHTMLX-Diagram-Dokumentation. Häufig - 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} +## Innerhalb einer Diagram-MCP-Server-Anfrage {#inside-a-diagram-mcp-server-request} -Der Server kombiniert eine Retrieval-Augmented-Generation-(RAG)-Pipeline mit MCP, sodass KI-Assistenten die Dokumentation bei Bedarf abfragen können, anstatt sich ausschließlich auf Trainingsdaten zu verlassen. +Der DHTMLX MCP-Server führt eine Retrieval-Augmented-Generation-(RAG)-Pipeline über das Model Context Protocol (MCP) aus und leitet jede Anfrage an einen von zwei Workflows weiter: *Search*, der passende Referenzseiten abruft, mit denen der Assistent weiterarbeitet, oder *Inference*, der diese Seiten liest und direkt eine fertige Antwort liefert. Nur ein Teil einer Anfrage benötigt tatsächlich die Diagram-Dokumentation, und der Assistent extrahiert zunächst genau diesen Teil – den Rest übernimmt er selbst. -Wenn Sie zum Beispiel fragen: *„Wie konfiguriere ich ein Swimlane-Diagramm mit benutzerdefinierten Zellenüberschriften?“*, sendet der Assistent den Prompt über den MCP-Endpunkt. Der Server gleicht ihn mit der Swimlanes-Dokumentation ab, ruft die relevanten Referenzseiten ab und gibt sie als Kontext zurück. Der Assistent generiert daraufhin Code auf Grundlage der aktuellen API und nicht anhand eines Trainings-Snapshots. +So läuft das für den Prompt *„Wie baue ich mit DHTMLX Diagram ein Organigramm, das Mitarbeiterdaten aus meiner internen HR-API bezieht und automatisch nach Abteilung anordnet?“* ab: -## KI-Tools mit Diagram verbinden {#connecting-ai-tools-to-diagram} +1. Der Assistent identifiziert den Teil, der Dokumentation erfordert: wie das Auto-Layout für ein aus einem JSON-Datensatz erstelltes Organigramm konfiguriert wird. +2. Der Server gleicht ihn mit der Dokumentation zur Diagram-Konfiguration ab. +3. Da die Antwort generierten Code erfordert, wird die Anfrage an *Search* weitergeleitet (eine engere Sachfrage – etwa welche Methode das Auto-Layout steuert – würde an *Inference* gehen). +4. *Search* ruft die passenden Seiten aus einem Vektorindex ab, der auf der aktuellen Diagram-Dokumentation basiert. +5. Diese Seiten gehen als Kontext an den Assistenten zurück. +6. Der Assistent konfiguriert das Auto-Layout anhand dieses Kontexts und schreibt die Logik für den HR-API-Abruf anschließend aus eigenem Wissen, statt bei der Diagram-API zu raten. -KI-Entwicklungstools unterstützen MCP in der Regel über einen CLI-Befehl oder eine JSON-Konfigurationsdatei. In beiden Fällen besteht der zentrale Schritt darin, die Server-URL zu registrieren: +So bleibt generierter Diagram-Code stets mit dem aktuellen Stand der Dokumentation im Einklang. + +## Den MCP-Server in Ihr KI-Tool einbinden {#bringing-the-mcp-server-into-your-ai-tool} + +Jedes der folgenden Tools verbindet sich auf seine eigene Weise mit demselben MCP-Endpunkt: bei einigen über ein CLI-Flag, bei anderen über einen JSON-Konfigurationsblock. Registrieren Sie den Server einmal pro Tool – die Verbindung gilt danach für jedes Diagram-Projekt, das Sie dort öffnen: ~~~ https://docs.dhtmlx.com/mcp @@ -77,7 +86,7 @@ Um ihn manuell zu konfigurieren, fügen Sie den folgenden Eintrag zu Ihrer `.mcp ### Cursor-Einrichtung {#cursor-setup} :::info -Schrittweise Anleitungen zur MCP-Einrichtung für Cursor finden Sie in der [offiziellen Dokumentation](https://cursor.com/en-US/docs/mcp). +Die [offizielle Dokumentation](https://cursor.com/en-US/docs/mcp) von Cursor behandelt jede MCP-Konfigurationsoption. ::: Folgen Sie den nachstehenden Schritten, um den DHTMLX MCP-Server mit Cursor zu verbinden: @@ -102,7 +111,7 @@ Folgen Sie den nachstehenden Schritten, um den DHTMLX MCP-Server mit Cursor zu v #### Antigravity 2.0 {#antigravity-20} :::info -Weitere Details zur MCP-Server-Integration in Antigravity finden Sie in der [offiziellen Dokumentation](https://antigravity.google/docs/mcp). +Die [offizielle Dokumentation](https://antigravity.google/docs/mcp) von Antigravity behandelt die MCP-Server-Integration vollständig. ::: Führen Sie die folgenden Schritte aus, um den DHTMLX MCP-Server mit Google Antigravity zu verbinden: @@ -123,7 +132,7 @@ https://docs.dhtmlx.com/mcp #### Antigravity CLI {#antigravity-cli} :::info -Weitere Informationen zur Migration von Gemini CLI zu Antigravity CLI finden Sie im [zugehörigen Leitfaden](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes). +Sie migrieren von Gemini CLI zu Antigravity CLI? Der [zugehörige Leitfaden](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) beschreibt die Änderung. ::: Um den DHTMLX MCP-Server mit Antigravity CLI zu verbinden, erstellen Sie `mcp_config.json` an einem der folgenden Speicherorte: @@ -148,7 +157,7 @@ Führen Sie anschließend `agy` im Terminal aus. ### ChatGPT-Einrichtung {#chatgpt-setup} :::info -Die vollständige Anleitung zum Verbinden von MCP-Servern mit ChatGPT finden Sie in der [offiziellen Dokumentation](https://developers.openai.com/api/docs/guides/tools-connectors-mcp). +Die [offizielle Dokumentation](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt) behandelt jeden Schritt der Verbindung eines MCP-Servers mit ChatGPT. ::: Folgen Sie diesen Schritten, um den DHTMLX MCP-Server mit ChatGPT zu verbinden: @@ -171,23 +180,25 @@ https://docs.dhtmlx.com/mcp Sobald die Verbindung besteht, ruft ChatGPT die Diagram-Dokumentation ab, wenn es während Ihrer Unterhaltungen Fragen beantwortet. -:::note -Beachten Sie, dass die MCP-Integration mit ChatGPT zu langsameren Antwortzeiten führen kann. Für eine schnellere Erfahrung sollten Sie eines der anderen auf dieser Seite aufgeführten Tools in Betracht ziehen. +:::info +Für intensive Coding-Workflows können andere MCP-fähige Tools effizienter sein. ::: ### Weitere Tools {#other-tools} Die meisten modernen KI-Coding-Tools (darunter Windsurf, Cline, Continue.dev usw.) zeigen MCP in ihren Einstellungen unter Bezeichnungen wie „Model Context Protocol“, „Context Sources“ oder „Custom integrations“ an. Fügen Sie `https://docs.dhtmlx.com/mcp` als Quell-URL hinzu. -## Datenschutz und Datenverarbeitung {#privacy-and-data-handling} +## Datenschutz beim MCP-Server {#the-privacy-side-of-the-mcp-server} + +Nichts davon läuft auf Ihrem Rechner: Der DHTMLX MCP-Server arbeitet vollständig als Remote-Dienst und speichert keine Kopie Ihrer persönlichen Daten. -Der DHTMLX MCP-Server ist ein reiner Cloud-Dienst, der remote ausgeführt wird, Ihre lokale Umgebung unverändert lässt und keine persönlichen Nutzerdaten speichert. Abfragen können zu Zwecken der Fehlerbehebung und Serviceverbesserung protokolliert werden. +Der Server protokolliert Abfragen ausschließlich zur Fehlerbehebung und Serviceverbesserung. -Teams, die strengere Datenschutzgarantien benötigen, können ein kommerzielles Deployment mit deaktivierter Abfrageprotokollierung anfragen. Kontaktieren Sie uns für Details unter `info@dhtmlx.com`. +Möchten Sie die Protokollierung lieber vollständig deaktivieren? Ein kommerzielles Deployment ermöglicht das. Richten Sie es über `info@dhtmlx.com` ein. -## Beispiel-Prompts für Diagram mit KI {#example-prompts-for-diagram-with-ai} +## Prompts für gängige Diagram-Aufgaben {#prompts-for-common-diagram-tasks} -Sobald der MCP-Server verbunden ist, formulieren Sie Ihre Prompts rund um ein konkretes Ziel, damit der Assistent weiß, welchen Teil der Diagram-API er nachschlagen soll. Die folgenden Prompts sind nach Aufgabentyp gegliedert. Sie können sie nach Bedarf kopieren und anpassen. +Ein Prompt, der die konkrete Diagram-Funktion benennt, die Sie benötigen (eine Form, den Editor, den Export), liefert relevantere Ergebnisse als ein vager Prompt. Die folgenden Gruppen ordnen Beispiele nach Funktion. **Diagramme erstellen** @@ -234,7 +245,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? ~~~ -## Tipps für effektive Diagram-Prompts {#tips-for-effective-diagram-prompts} +## Prompts formulieren, die der MCP-Server verarbeiten kann {#writing-prompts-the-mcp-server-can-act-on} - **Benennen Sie die API-Oberfläche.** Unterscheiden Sie zwischen der Diagramminstanz und dem Editor, zum Beispiel: „in the DHTMLX Diagram Editor“ vs. „on the diagram object“. Der Server ruft relevantere Dokumentation ab, wenn das Ziel eindeutig ist. - **Geben Sie den Formtyp an.** Prompts wie „a swimlane shape“ oder „a custom shape with HTML content“ rufen die passenden Referenzseiten schneller ab als das allgemeine „a shape“. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/guides/overview.md b/i18n/de/docusaurus-plugin-content-docs/current/guides/overview.md index 0367296a..f27bb500 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/guides/overview.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/guides/overview.md @@ -65,6 +65,12 @@ Die Artikel zeigen Ihnen Beispiele für die Verwendung von Diagram mit verschied - [Integration mit React](guides/integrations/react_integration.md) - [Integration mit Vue.js](guides/integrations/vue_integration.md) +## KI-Integrationen {#ai-integrations} + +Verbinden Sie einen KI-Coding-Assistenten mit der Live-Dokumentation von DHTMLX Diagram, damit er Code auf Basis der aktuellen API statt veralteter Trainingsdaten generiert. + +- [DHTMLX MCP-Server](guides/ai-integrations/mcp-server.md) + ## Touch-Unterstützung {#touch-support} Dank der integrierten Touch-Unterstützung können Sie mit DHTMLX Diagram responsive Webanwendungen erstellen. Erfahren Sie in der Anleitung [Touch-Unterstützung](guides/touch_support.md), wie UI-Widgets auf Touch-Geräten funktionieren. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/overview.md b/i18n/de/docusaurus-plugin-content-docs/current/overview.md index 53f57f31..8edf90ab 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/overview.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/overview.md @@ -143,4 +143,4 @@ Sie können die Zoom-Vorlage auf Ihr Diagramm anwenden, um dessen Erscheinungsbi ## Wie geht es weiter {#whats-next} -Jetzt können Sie sich mit der Verwendung von DHTMLX Diagram Editor in Ihrer Anwendung vertraut machen. Lesen Sie die [Diagram-Editor-Übersicht](editor_overview.md), um mehr über dieses Tool zu erfahren. +Jetzt können Sie sich mit der Verwendung von DHTMLX Diagram Editor in Ihrer Anwendung vertraut machen. Lesen Sie die [Diagram-Editor-Übersicht](editor_overview.md), um mehr über dieses Tool zu erfahren. Wenn Sie mit einem KI-Coding-Assistenten entwickeln, verbinden Sie ihn über den [DHTMLX MCP-Server](guides/ai-integrations/mcp-server.md) mit der Live-Dokumentation. diff --git a/i18n/de/docusaurus-plugin-content-docs/current/whats_new.md b/i18n/de/docusaurus-plugin-content-docs/current/whats_new.md index e71b324b..64c50985 100644 --- a/i18n/de/docusaurus-plugin-content-docs/current/whats_new.md +++ b/i18n/de/docusaurus-plugin-content-docs/current/whats_new.md @@ -8,11 +8,27 @@ description: Erfahren Sie Neuigkeiten zur JavaScript-Bibliothek DHTMLX Diagram. Wenn Sie Diagram von einer älteren Version aktualisieren, finden Sie Details unter [Migration zu einer neueren Version](migration.md). +## Version 6.1.7 {#version-617} + +Veröffentlicht am 5. August 2026 + +### Fehlerbehebungen {#fixes} + +- Diagram Editor. Behoben: Verbindungslinien verloren ihre visuellen Steuerelemente, nachdem ein Shape in eine Gruppe oder eine Swimlane verschoben wurde +- Diagram Editor. Behoben: das Einrasten neuer Konnektoren an Verbindungspunkten auf gedrehten Shapes +- Diagram Editor. Behoben: Verbindungslinien wurden beim Drehen eines Shapes innerhalb einer Gruppe unterbrochen oder verschoben +- Diagram Editor. Behoben: das Verhalten der `dhx_slide`-Schieberegler, sodass diese korrekt funktionieren, wenn sowohl horizontale als auch vertikale Schieberegler angezeigt werden +- Diagram Editor. Behoben: die Sichtbarkeit von `dhx_slide`-Elementen bei Zoomstufen ungleich 100 % +- Diagram Editor. Behoben: die Positionierung des Vorschau-Platzhalters der Linie, sodass er korrekt am Verbindungspunkt ausgerichtet wird +- Diagram Editor. Behoben: Eingeklappte Shapebar-Abschnitte wurden beim Klicken in den Diagrammbereich automatisch ausgeklappt +- Diagram. Behoben: Ein Standardwert `true` in einer Eigenschaft eines benutzerdefinierten Shapes überschrieb einen explizit festgelegten `false`-Wert +- Diagram. Behoben: Ein Klick auf die Scrollbar hob die aktuelle Auswahl der Elemente auf + ## Version 6.1.6 {#version-616} Veröffentlicht am 1. Juli 2026 -### Fehlerbehebungen {#fixes} +### Fehlerbehebungen {#fixes-1} - Diagram. Ein Fehler behoben, der beim Laden von Daten in Diagram über `ShapeCollection` (`DataCollection`) im `mindmap`-Modus auftrat @@ -24,7 +40,7 @@ Veröffentlicht am 17. Juni 2026 - Diagram Editor. Verbesserte Texteditierung mit neuen Tastenkombinationen: Ctrl+Enter zum Starten der Bearbeitung, Shift+Enter für neue Zeilen, Enter zum Bestätigen und Escape zum Verwerfen von Änderungen -### Fehlerbehebungen {#fixes-1} +### Fehlerbehebungen {#fixes-2} - Diagram Editor. Behoben: Linien, die durch Swimlane-Gruppen verliefen, waren nicht auswählbar - Diagram Editor. Automatisches Scrollen hinzugefügt, wenn Verbindungslinien auf Shapes außerhalb des aktuellen Bildschirmbereichs gezogen werden. @@ -39,7 +55,7 @@ Veröffentlicht am 21. Mai 2026 - Diagram / Diagram Editor. Verbesserungen an der Autoplatzierungslogik. Die Möglichkeit hinzugefügt, den Abstand zwischen Shapes und Ebenen über die neuen Eigenschaften `itemPadding` und `levelPadding` in der Diagram-Methode [`autoPlace()`](api/diagram/autoplace_method.md) und im Konfigurationsobjekt [`autoplacement`](api/diagram/autoplacement_property.md) zu steuern -### Fehlerbehebungen {#fixes-2} +### Fehlerbehebungen {#fixes-3} - Diagram. Behoben: Die Anwendung der Autoplatzierung führte zu falschen Abständen zwischen Shapes - Diagram. Behoben: Der Aufruf von [`autoPlace()`](api/diagram/autoplace_method.md) ignorierte die Linienwerte [`fromSide` und `toSide`](lines/configuration_properties.md), wodurch nun die Konsistenz der Diagrammstruktur gewährleistet ist @@ -49,7 +65,7 @@ Veröffentlicht am 21. Mai 2026 Veröffentlicht am 2. April 2026 -### Fehlerbehebungen {#fixes-3} +### Fehlerbehebungen {#fixes-4} - Diagram Editor. Das Problem bei der Erstellung von Konnektoren für Shapes mit negativen Koordinaten ist behoben - Diagram Editor. Das Problem, dass das Drücken der Taste Backspace während der Inline-Textbearbeitung das Shape oder den Linientitel löschte, ist behoben @@ -59,7 +75,7 @@ Veröffentlicht am 2. April 2026 Veröffentlicht am 5. Februar 2026 -### Fehlerbehebungen {#fixes-4} +### Fehlerbehebungen {#fixes-5} - Diagram Editor. Unmöglichkeit, die Zeichenfläche beim Verschieben von Elementen nach unten und rechts automatisch zu scrollen @@ -95,7 +111,7 @@ Veröffentlicht am 25. November 2025 - ein neuer Parameter `connectType` für die Konfigurationseigenschaft [`lineConfig`](api/diagram_editor/editor/config/lineconfig_property.md) von Diagram Editor - Export-API. Die Exportfunktionen [`pdf()`](api/export/pdf_method.md) und [`png()`](api/export/png_method.md) geben nun ein Promise des Datenexports zurück -### Fehlerbehebungen {#fixes-5} +### Fehlerbehebungen {#fixes-6} - Diagram Editor. Der Skriptfehler, der nach dem Hovern über ein Shape im Safari-Browser auftrat - Diagram Editor. Die Konsolenwarnungen, die nach dem Entfernen von Elementen auftraten @@ -129,7 +145,7 @@ Veröffentlicht am 25. November 2025 Veröffentlicht am 18. Juni 2025 -### Fehlerbehebungen {#fixes-6} +### Fehlerbehebungen {#fixes-7} - Diagram Editor. Fehlerhaftes Verschieben von Shapes beim Zoomen @@ -137,7 +153,7 @@ Veröffentlicht am 18. Juni 2025 Veröffentlicht am 10. März 2025 -### Fehlerbehebungen {#fixes-7} +### Fehlerbehebungen {#fixes-8} - Diagram. Das Problem mit der Anpassung der Pfeilgröße der Linien-Shape beim Bearbeiten der Linienbreite @@ -145,7 +161,7 @@ Veröffentlicht am 10. März 2025 Veröffentlicht am 4. Februar 2025 -### Fehlerbehebungen {#fixes-8} +### Fehlerbehebungen {#fixes-9} - Diagram Editor. Ein Problem beim Verschieben einer Gruppe mit Elementen sowie beim Verschieben von Elementen in bzw. aus einer Gruppe - Diagram. Die Events `itemMouseOver` und `itemMouseOut` werden für ein ausgewähltes Shape nicht ausgelöst @@ -167,7 +183,7 @@ Veröffentlicht am 27. November 2024 Veröffentlicht am 1. Oktober 2024 -### Fehlerbehebungen {#fixes-9} +### Fehlerbehebungen {#fixes-10} - Diagram Editor. Der Aufruf der Methode `destructor()` löst einen Fehler aus @@ -175,7 +191,7 @@ Veröffentlicht am 1. Oktober 2024 Veröffentlicht am 28. August 2024 -### Fehlerbehebungen {#fixes-10} +### Fehlerbehebungen {#fixes-11} - Diagram Editor. Anwendung unterschiedlicher Locales für `calendar`, `combobox`, `colorpicker`, `form`, `timepicker` der Editbar - Diagram Editor. Hinzufügen von Diagram Editor in eine Layout-Zelle @@ -187,7 +203,7 @@ Veröffentlicht am 28. August 2024 Veröffentlicht am 16. Juli 2024 -### Fehlerbehebungen {#fixes-11} +### Fehlerbehebungen {#fixes-12} - Diagram. Autoplatzierung. Ein Shape verbirgt sich unter einem anderen Shape @@ -195,7 +211,7 @@ Veröffentlicht am 16. Juli 2024 Veröffentlicht am 24. Juni 2024 -### Fehlerbehebungen {#fixes-12} +### Fehlerbehebungen {#fixes-13} - Diagram Editor. Speicherleck - Diagram Editor. Skriptfehler beim Klicken auf vertikale und horizontale Verteilung über die Toolbar @@ -277,7 +293,7 @@ Das neue Update führt bedeutende Änderungen an der Struktur und Funktionalitä - Die folgenden Events von Diagram Editor sind veraltet und werden nicht mehr unterstützt, da es keine entsprechenden Schaltflächen mehr in der Toolbar gibt: `resetButton`, `applyButton`, `visibility`, `exportData`, `importData`, `autoLayout` - Das Event `changeGridStep` von Diagram Editor ist veraltet und wird nicht mehr unterstützt -### Fehlerbehebungen {#fixes-13} +### Fehlerbehebungen {#fixes-14} - Diagram Editor. Behebt einen Konsolenfehler, der durch das erneute Klicken auf die Schaltfläche „Daten importieren" nach einem Datenimport ohne Dateiauswahl verursacht wurde - Diagram Editor. Behebt die Blockierung beim Hinzufügen eines neuen Shapes @@ -300,7 +316,7 @@ Das neue Update führt bedeutende Änderungen an der Struktur und Funktionalitä Veröffentlicht am 12. Juli 2023 -### Fehlerbehebungen {#fixes-14} +### Fehlerbehebungen {#fixes-15} - Behebt das Problem, dass der Aufruf der Methode [autoPlace()](api/diagram/autoplace_method.md) nach dem Daten-Parsing einen Fehler verursachte @@ -308,7 +324,7 @@ Veröffentlicht am 12. Juli 2023 Veröffentlicht am 30. Mai 2023 -### Fehlerbehebungen {#fixes-15} +### Fehlerbehebungen {#fixes-16} - Diagram Editor. Behebt das Problem, dass benutzerdefinierte Punkte sich bei einer Mehrfachauswahl-Verschiebung nicht mitbewegten - Diagram Editor. Behebt die Unmöglichkeit, ein Shape mit sich selbst zu verknüpfen @@ -321,7 +337,7 @@ Veröffentlicht am 30. Mai 2023 Veröffentlicht am 19. Januar 2023 -### Fehlerbehebungen {#fixes-16} +### Fehlerbehebungen {#fixes-17} - Diagram Editor. Behebt das Problem, dass Linien nicht immer an ihrer Position gezeichnet wurden, wenn Daten exportiert und anschließend erneut geladen wurden - Nun ist es möglich, die Koordinaten für Linien im `default`-Modus festzulegen (neue Eigenschaft [`points`](lines/configuration_properties.md#properties-specific-for-the-default-mode) des Linienobjekts) @@ -365,7 +381,7 @@ Die neue Version führt einige Änderungen an der Eigenschaft `lineGap` ein. Wei - der Parameter `tooltip` des Symbolobjekts wurde zur Eigenschaft [`shapeToolbar`](api/diagram_editor/editor/config/shapetoolbar_property.md) hinzugefügt - Verbessertes Design des [Rasterbereichs](guides/diagram_editor/grid_area.md). Nun hängt der Abstand zwischen den Punkten im Rasterbereich vom Wert der Rasterschrittweite ab -### Fehlerbehebungen {#fixes-17} +### Fehlerbehebungen {#fixes-18} - Behebt das Problem, dass ein Ladesymbol nach dem Laden einer Datei nicht aus dem rechten Panel des Editors verschwand @@ -424,7 +440,7 @@ Veröffentlicht am 7. Dezember 2021 - Aktualisierte Events der [Selection-API](/api/selection/#events): Der Parameter *subId* wurde hinzugefügt - Der Standardtyp des Shapes im `default`-Modus wurde in [*"rectangle"*](shapes/configuration_properties.md#common-properties) geändert -### Fehlerbehebungen {#fixes-18} +### Fehlerbehebungen {#fixes-19} - Die Leistung wurde für alle Diagrammtypen verbessert - Behebung der fehlerhaften Funktion der Schaltflächen *Rückgängig/Wiederholen* in der Toolbar des Editors @@ -433,7 +449,7 @@ Veröffentlicht am 7. Dezember 2021 Veröffentlicht am 16. September 2021 -### Fehlerbehebungen {#fixes-19} +### Fehlerbehebungen {#fixes-20} - Behebt die Anzeige von Konnektoren beim Drehen des Shapes - Behebt die minifizierten Stile des Diagramms @@ -477,7 +493,7 @@ Veröffentlicht am 7. September 2021 - Aktualisierte Events des Editor-Objekts: [beforeShapeMove](api/diagram_editor/editor/events/beforeshapemove_event.md) und [afterShapeMove](api/diagram_editor/editor/events/aftershapemove_event.md) - Aktualisierte Struktur der Shape-Collection-API -### Fehlerbehebungen {#fixes-20} +### Fehlerbehebungen {#fixes-21} - Behebt die fehlerhafte Funktion der TypeScript-Typdefinitionen im Editor - Behebt das Problem, dass die gedrückte Toolbar-Schaltfläche im Editor, der sich innerhalb eines HTML-Formulars befindet, das Absenden des Formulars auslöste @@ -504,7 +520,7 @@ Veröffentlicht am 15. April 2021 - Die Methoden [collapseItem()](api/diagram/collapseitem_method.md) und [expandItem()](api/diagram/expanditem_method.md) wurden aktualisiert: der zweite Parameter "dir" wurde hinzugefügt - Die Events [beforeCollapse](api/diagram/beforecollapse_event.md), [afterCollapse](api/diagram/aftercollapse_event.md), [beforeExpand](api/diagram/beforeexpand_event.md) und [afterExpand](api/diagram/afterexpand_event.md) wurden aktualisiert: der zweite Parameter "dir" wurde hinzugefügt -### Fehlerbehebungen {#fixes-21} +### Fehlerbehebungen {#fixes-22} - Behebt das Problem mit dem Auswahlmodul für alle Typen von DHTMLX Diagram - Behebt das Problem mit dem Scrollen des Diagramms, das im `default`-Modus initialisiert wurde, bei Anwendung der Methode "showItem()" auf das skalierte Diagramm @@ -528,7 +544,7 @@ Veröffentlicht am 15. April 2021 Veröffentlicht am 27. Januar 2021 -### Fehlerbehebungen {#fixes-22} +### Fehlerbehebungen {#fixes-23} - Behebt das fehlerhafte Verhalten des im Editor ausgewählten Shapes, der im `default`-Modus initialisiert wurde, bei der Arbeit mit dem Eingabefeld auf der Seite - Behebt das Problem, dass ein eingeklapptes/ausgeklapptes Element nicht mit seinem übergeordneten Element funktionierte @@ -538,7 +554,7 @@ Veröffentlicht am 27. Januar 2021 Veröffentlicht am 23. Dezember 2020 -### Fehlerbehebungen {#fixes-23} +### Fehlerbehebungen {#fixes-24} - Behebt das Problem mit dem Diagram-Exportdienst @@ -546,7 +562,7 @@ Veröffentlicht am 23. Dezember 2020 Veröffentlicht am 14. Juli 2020 -### Fehlerbehebungen {#fixes-24} +### Fehlerbehebungen {#fixes-25} - Behebt das Problem beim Importieren von Daten aus JSON in den Editor, der im Org-Chart-Modus initialisiert wurde - Behebt die fehlerhafte Funktion der Methode [addShape()](api/diagram/addshape_method.md) bei der Konfiguration des rechten Panels des Editors @@ -556,7 +572,7 @@ Veröffentlicht am 14. Juli 2020 Veröffentlicht am 29. Mai 2020 -### Fehlerbehebungen {#fixes-25} +### Fehlerbehebungen {#fixes-26} - Behebt das Problem mit der Methode [autoPlace()](api/diagram/autoplace_method.md) - Behebt das Problem mit den PNG/PDF-Exportmodulen @@ -598,7 +614,7 @@ Das neue Update führt einige Änderungen und Verbesserungen ein. Weitere Inform Veröffentlicht am 30. Dezember 2019 -### Fehlerbehebungen {#fixes-26} +### Fehlerbehebungen {#fixes-27} - Problem mit der IE-Unterstützung für den Bildlader im Diagram Editor @@ -613,7 +629,7 @@ Veröffentlicht am 27. November 2019 - Die Möglichkeit, Daten aus dem Diagram Editor über die Schaltfläche „Daten exportieren" der [Toolbar](guides/diagram_editor/toolbar.md) in das JSON-Format zu exportieren - Die Option [showExport](migration.md#toolbar-buttons-in-editor) und das Event `exportData` wurden in Diagram Editor hinzugefügt -### Fehlerbehebungen {#fixes-27} +### Fehlerbehebungen {#fixes-28} - Behebt das Problem beim Exportieren eines Diagramms in die Formate PDF und PNG - Behebt die fehlerhafte Funktion der Mausereignisse @@ -625,7 +641,7 @@ Veröffentlicht am 27. November 2019 Veröffentlicht am 11. Oktober 2019 -### Fehlerbehebungen {#fixes-28} +### Fehlerbehebungen {#fixes-29} - Probleme mit einer img-card im IE ## Version 2.1 {#version-21} diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/.sync b/i18n/ko/docusaurus-plugin-content-docs/current/.sync index 8289040d..dec82a30 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/ko/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -c2c721544fcd090090f99a1a5f1755359dbfe007 +6bfc2997d624dbe1965af8799c866a0c4a6df1b6 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 c66fae10..bbca0c49 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 @@ -1,16 +1,16 @@ --- sidebar_label: DHTMLX MCP 서버 -title: AI 코딩 어시스턴트와 DHTMLX MCP 서버 사용하기 -description: MCP 서버를 통해 AI 코딩 어시스턴트를 실시간 DHTMLX Diagram 문서와 연결합니다. 도형, 스윔레인, 조직도, Diagram Editor 등을 다룹니다. +title: 도형 및 커넥터 API를 위한 DHTMLX Diagram MCP 서버 +description: AI 어시스턴트를 MCP 서버에 연결하면 도형, 스윔레인, 조직도, Diagram Editor에 관한 최신 DHTMLX Diagram 문서를 찾습니다. --- -# AI 코딩 어시스턴트와 DHTMLX MCP 서버 사용하기 {#using-dhtmlx-mcp-server-with-ai-coding-assistants} +# DHTMLX Diagram MCP 서버: 도형, 커넥터, 에디터 API {#dhtmlx-diagram-mcp-server-shapes-connectors-and-editor-apis} -다이어그램 애플리케이션을 구축하려면 도형, 연결, 레이아웃, 에디터 구성에 대한 정밀한 제어가 필요합니다. AI 도구가 오래된 학습 데이터를 기반으로 [DHTMLX Diagram](/) 코드를 생성하면 API가 일치하지 않거나 속성이 누락되거나 더 이상 존재하지 않는 구성 옵션이 사용되는 결과가 발생합니다. +[DHTMLX Diagram](/)은 [도형 지오메트리](/shapes/configuration_properties), [커넥터 라우팅](/lines/), [레이아웃 규칙](/guides/diagram/configuration)에 대한 실질적인 제어 권한을 제공하며, 에디터가 허용하도록 구성된 모든 옵션까지 포함합니다. 생성된 코드는 이전 학습 스냅샷 상태가 아니라 최신 도형 속성, 커넥터 메서드, 레이아웃 옵션을 반영해야 합니다. -DHTMLX Model Context Protocol(MCP) 서버는 AI 도구에 실시간 Diagram 문서에 대한 직접적인 액세스 권한을 부여하여 이 문제를 해결합니다. [스윔레인](/swimlanes/), [커스텀 도형](/shapes/custom_shape), [Diagram Editor](/guides/diagram_editor/initialization) 또는 라이브러리의 다른 어떤 부분을 다루든, 어시스턴트는 응답을 생성하기 전에 최신 참조 자료를 가져옵니다. +DHTMLX MCP 서버는 바로 이 문제를 해결하기 위한 것으로, 도형을 하나라도 그리기 전에 최신 Diagram 문서를 어시스턴트에게 제공합니다. [스윔레인](/swimlanes/), [커스텀 도형](/shapes/custom_shape), [Diagram Editor](/guides/diagram_editor/initialization) 또는 라이브러리의 다른 어떤 부분을 다루든, 어시스턴트는 응답을 생성하기 전에 최신 참조 자료를 가져옵니다. -**MCP 엔드포인트** +### MCP 엔드포인트 {#mcp-endpoint} ~~~ https://docs.dhtmlx.com/mcp @@ -20,9 +20,9 @@ https://docs.dhtmlx.com/mcp DHTMLX MCP 서버는 DHTMLX Diagram뿐만 아니라 모든 주요 DHTMLX 제품을 지원합니다. 어떤 구성 요소로 작업하든 동일한 엔드포인트와 구성 단계가 적용됩니다. ::: -## Diagram 작업에서 MCP 서버가 유용한 부분 {#where-mcp-server-helps-with-diagram} +## MCP 서버로 더 빨라지는 Diagram 작업 {#diagram-work-the-mcp-server-speeds-up} -MCP 서버는 전체 DHTMLX Diagram 문서를 인덱싱합니다. MCP 서버가 유용하게 사용되는 일반적인 시나리오는 다음과 같습니다. +DHTMLX Diagram 문서는 MCP 서버의 인덱스에 저장되어 있습니다. 개발자는 다음과 같은 작업을 위해 이를 조회합니다. - [도형](/shapes/default_shapes), [선](/lines/), [그룹](/groups/), [스윔레인](/swimlanes/)의 최신 API 조회. - 설명을 기반으로 즉시 실행 가능한 Diagram 코드를 생성. @@ -33,15 +33,24 @@ MCP 서버는 전체 DHTMLX Diagram 문서를 인덱싱합니다. MCP 서버가 - 사용자 상호작용에 대응하기 위해 [Diagram 및 Editor 이벤트](/guides/event_handling)를 처리. - React, Vue, Angular, Svelte에 대한 [TypeScript 지원](/guides/using_typescript) 및 프레임워크 통합 탐색. -## DHTMLX MCP 서버의 작동 방식 {#how-dhtmlx-mcp-server-works} +## Diagram MCP 서버 요청 내부 살펴보기 {#inside-a-diagram-mcp-server-request} -서버는 검색 증강 생성(Retrieval-Augmented Generation, RAG) 파이프라인과 MCP를 결합하여 AI 어시스턴트가 학습 데이터에만 의존하지 않고 필요에 따라 문서를 조회할 수 있도록 합니다. +DHTMLX MCP 서버는 Model Context Protocol(MCP) 위에서 검색 증강 생성(Retrieval-Augmented Generation, RAG) 파이프라인을 실행하며, 각 쿼리를 두 가지 워크플로 중 하나로 라우팅합니다. 하나는 어시스턴트가 참고할 관련 참조 페이지를 가져오는 *Search*이고, 다른 하나는 해당 페이지를 읽고 완성된 답변을 바로 반환하는 *Inference*입니다. 요청 중 실제로 Diagram 문서가 필요한 부분은 일부에 불과하며, 어시스턴트는 먼저 그 부분만 추출한 뒤 나머지는 스스로 처리합니다. -예를 들어 *"커스텀 셀 헤더로 스윔레인 다이어그램을 구성하려면 어떻게 해야 하나요?"*라고 질문하면, 어시스턴트는 MCP 엔드포인트를 통해 프롬프트를 전송합니다. 서버는 이를 스윔레인 문서와 매칭하여 관련 참조 페이지를 가져오고 이를 컨텍스트로 반환합니다. 이후 어시스턴트는 학습 시점의 스냅샷이 아니라 최신 API를 기반으로 코드를 생성합니다. +예를 들어 *"내부 HR API에서 직원 기록을 가져와 부서별로 자동 배치하는 DHTMLX Diagram 조직도를 어떻게 만드나요?"*라는 프롬프트에서는 다음과 같은 과정을 거칩니다. -## AI 도구를 Diagram에 연결하기 {#connecting-ai-tools-to-diagram} +1. 어시스턴트는 문서가 필요한 부분, 즉 JSON 데이터 세트로 구성된 조직도의 자동 레이아웃을 설정하는 방법을 찾아냅니다. +2. 서버는 이를 다이어그램 구성 문서와 매칭합니다. +3. 답변에 생성된 코드가 필요하므로 *Search*로 라우팅됩니다(자동 레이아웃을 제어하는 메서드가 무엇인지와 같은 더 좁은 범위의 사실 확인 질문이라면 *Inference*로 라우팅됩니다). +4. *Search*는 최신 Diagram 문서로 구축된 벡터 인덱스에서 일치하는 페이지를 가져옵니다. +5. 이 페이지들은 컨텍스트로 어시스턴트에게 반환됩니다. +6. 어시스턴트는 해당 컨텍스트를 사용해 자동 레이아웃을 구성한 다음, Diagram API를 추측하는 대신 자체 지식을 바탕으로 HR API 가져오기 로직을 작성합니다. -AI 개발 도구는 일반적으로 CLI 명령이나 JSON 구성 파일을 통해 MCP를 지원합니다. 두 경우 모두 핵심 단계는 서버 URL을 등록하는 것입니다. +이러한 과정을 통해 생성된 Diagram 코드는 현재 문서 상태와 일치하게 유지됩니다. + +## AI 도구에 MCP 서버 연결하기 {#bringing-the-mcp-server-into-your-ai-tool} + +아래의 각 도구는 저마다의 방식으로 동일한 MCP 엔드포인트에 연결합니다. 일부는 CLI 플래그를 사용하고, 다른 일부는 JSON 구성 블록을 사용합니다. 도구별로 한 번만 등록하면 이후 해당 도구에서 여는 모든 Diagram 프로젝트에 연결이 유지됩니다. ~~~ https://docs.dhtmlx.com/mcp @@ -77,7 +86,7 @@ claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp ### Cursor 설정 {#cursor-setup} :::info -Cursor의 단계별 MCP 설정 방법은 [공식 문서](https://cursor.com/en-US/docs/mcp)에서 확인할 수 있습니다. +Cursor의 [공식 문서](https://cursor.com/en-US/docs/mcp)에서 모든 MCP 구성 옵션을 단계별로 확인할 수 있습니다. ::: 다음 단계에 따라 DHTMLX MCP 서버를 Cursor에 연결합니다. @@ -102,7 +111,7 @@ Cursor의 단계별 MCP 설정 방법은 [공식 문서](https://cursor.com/en-U #### Antigravity 2.0 {#antigravity-20} :::info -Antigravity에서 MCP 서버 통합에 대한 자세한 내용은 [공식 문서](https://antigravity.google/docs/mcp)를 참고하세요. +Antigravity의 [공식 문서](https://antigravity.google/docs/mcp)에서 MCP 서버 통합에 대한 모든 내용을 확인할 수 있습니다. ::: 다음은 DHTMLX MCP 서버를 Google Antigravity에 연결하기 위해 완료해야 하는 단계입니다. @@ -123,7 +132,7 @@ https://docs.dhtmlx.com/mcp #### Antigravity CLI {#antigravity-cli} :::info -Gemini CLI에서 Antigravity CLI로의 마이그레이션에 대해 알아보려면 [관련 가이드](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes)를 확인하세요. +Gemini CLI에서 Antigravity CLI로 마이그레이션하시나요? [관련 가이드](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes)에서 변경 사항을 확인할 수 있습니다. ::: DHTMLX MCP 서버를 Antigravity CLI에 연결하려면 다음 위치 중 한 곳에 `mcp_config.json`을 생성합니다. @@ -148,7 +157,7 @@ DHTMLX MCP 서버를 Antigravity CLI에 연결하려면 다음 위치 중 한 ### ChatGPT 설정 {#chatgpt-setup} :::info -ChatGPT에 MCP 서버를 연결하는 전체 가이드는 [공식 문서](https://developers.openai.com/api/docs/guides/tools-connectors-mcp)를 참고하세요. +[공식 문서](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt)에서 ChatGPT에 MCP 서버를 연결하는 모든 단계를 확인할 수 있습니다. ::: 다음 단계에 따라 DHTMLX MCP 서버를 ChatGPT에 연결합니다. @@ -171,23 +180,25 @@ https://docs.dhtmlx.com/mcp 연결되면 ChatGPT는 대화 중 질문에 답할 때 Diagram 문서를 가져옵니다. -:::note -ChatGPT와의 MCP 통합은 응답 시간이 느려질 수 있다는 점에 유의하세요. 더 빠른 환경을 원한다면 이 페이지에 나열된 다른 도구 중 하나를 사용하는 것을 고려하세요. +:::info +집중적인 코딩 작업에는 다른 MCP 지원 도구가 더 효율적일 수 있습니다. ::: ### 기타 도구 {#other-tools} 대부분의 최신 AI 코딩 도구(Windsurf, Cline, Continue.dev 등 포함)는 설정에서 "Model Context Protocol", "Context Sources", "Custom integrations" 등의 이름으로 MCP를 제공합니다. 소스 URL로 `https://docs.dhtmlx.com/mcp`를 추가하세요. -## 개인정보 보호 및 데이터 처리 {#privacy-and-data-handling} +## MCP 서버와 개인정보 보호 {#the-privacy-side-of-the-mcp-server} + +이 서비스는 사용자의 컴퓨터에서 전혀 실행되지 않습니다. DHTMLX MCP 서버는 완전히 원격 서비스로만 작동하며, 개인 데이터의 사본을 전혀 보관하지 않습니다. -DHTMLX MCP 서버는 원격으로 실행되는 클라우드 전용 서비스로, 로컬 환경에 영향을 주지 않으며 개인 사용자 데이터를 저장하지 않습니다. 쿼리는 디버깅 및 서비스 개선 목적으로 기록될 수 있습니다. +서버가 쿼리를 기록하는 목적은 디버깅과 서비스 개선뿐입니다. -보다 엄격한 개인정보 보호가 필요한 팀은 쿼리 로깅이 비활성화된 상용 배포를 요청할 수 있습니다. 자세한 내용은 `info@dhtmlx.com`으로 문의하세요. +로깅을 완전히 끄고 싶으신가요? 상용 배포에서는 이를 지원합니다. `info@dhtmlx.com`으로 문의하여 설정하세요. -## AI와 함께 사용하는 Diagram 예제 프롬프트 {#example-prompts-for-diagram-with-ai} +## 일반적인 Diagram 작업을 위한 프롬프트 {#prompts-for-common-diagram-tasks} -MCP 서버가 연결되면 어시스턴트가 Diagram API의 어느 부분을 조회해야 하는지 알 수 있도록 구체적인 목표를 중심으로 프롬프트를 작성하세요. 아래 프롬프트는 작업 유형별로 정리되어 있습니다. 필요에 따라 복사하여 수정해서 사용할 수 있습니다. +필요한 특정 Diagram 기능(도형, 에디터, 내보내기 등)을 명시한 프롬프트는 모호한 프롬프트보다 더 관련성 높은 결과를 가져옵니다. 아래 그룹은 기능별로 예시를 정리한 것입니다. **다이어그램 생성하기** @@ -234,7 +245,7 @@ DHTMLX Diagram을 PNG 파일로 어떻게 내보내나요? DHTMLX Diagram은 직렬화된 데이터에 어떤 형식을 사용하며, 이를 다시 로드하려면 어떻게 해야 하나요? ~~~ -## 효과적인 Diagram 프롬프트 작성 팁 {#tips-for-effective-diagram-prompts} +## MCP 서버가 활용할 수 있는 프롬프트 작성하기 {#writing-prompts-the-mcp-server-can-act-on} - **API 대상을 명확히 하세요.** 다이어그램 인스턴스와 에디터를 구분하세요. 예를 들어 "DHTMLX Diagram Editor에서"와 "다이어그램 객체에서"를 구분합니다. 대상이 명확할수록 서버가 더 관련성 높은 문서를 가져옵니다. - **도형 유형을 포함하세요.** "스윔레인 도형" 또는 "HTML 콘텐츠가 있는 커스텀 도형"과 같은 프롬프트는 일반적인 "도형"보다 올바른 참조 페이지를 더 빠르게 가져옵니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/guides/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/guides/overview.md index aedb2da4..247cdc66 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/guides/overview.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/guides/overview.md @@ -66,6 +66,12 @@ Diagram을 다양한 언어에 맞게 조정하고 텍스트 요소를 편집하 - [React와의 통합](guides/integrations/react_integration.md) - [Vue.js와의 통합](guides/integrations/vue_integration.md) +## AI 통합 {#ai-integrations} + +AI 코딩 어시스턴트를 최신 DHTMLX Diagram 문서와 연결하면 오래된 학습 데이터가 아닌 최신 API를 기반으로 코드를 생성합니다. + +- [DHTMLX MCP 서버](guides/ai-integrations/mcp-server.md) + ## 터치 지원 {#touch-support} DHTMLX Diagram에 내장된 터치 지원 덕분에 반응형 웹 애플리케이션을 만들 수 있습니다. 터치 디바이스에서 UI 위젯이 어떻게 작동하는지 [터치 지원](guides/touch_support.md) 가이드에서 확인해 보세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/overview.md b/i18n/ko/docusaurus-plugin-content-docs/current/overview.md index da16abcc..3d21a82a 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/overview.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/overview.md @@ -143,4 +143,4 @@ DHTMLX Diagram은 Diagram 작업을 더 편리하게 만들기 위해 적용할 ## 다음 단계 {#whats-next} -이제 애플리케이션에서 DHTMLX Diagram Editor를 사용하는 방법을 알아볼 수 있습니다. 이 도구에 대해 자세히 알아보려면 [Diagram Editor 개요](editor_overview.md)를 읽어보십시오. +이제 애플리케이션에서 DHTMLX Diagram Editor를 사용하는 방법을 알아볼 수 있습니다. 이 도구에 대해 자세히 알아보려면 [Diagram Editor 개요](editor_overview.md)를 읽어보십시오. AI 코딩 어시스턴트로 개발하는 경우, [DHTMLX MCP 서버](guides/ai-integrations/mcp-server.md)를 통해 최신 문서에 연결하십시오. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/whats_new.md b/i18n/ko/docusaurus-plugin-content-docs/current/whats_new.md index d82f687f..d53d0bb5 100644 --- a/i18n/ko/docusaurus-plugin-content-docs/current/whats_new.md +++ b/i18n/ko/docusaurus-plugin-content-docs/current/whats_new.md @@ -8,6 +8,22 @@ description: DHTMLX JavaScript Diagram 라이브러리에 대한 새로운 정 Diagram을 이전 버전에서 업데이트하는 경우, 자세한 내용은 [최신 버전으로 마이그레이션](migration.md) 문서를 확인하십시오. +## 버전 6.1.7 {#version-6.1.7} + +2026년 8월 5일에 출시되었습니다. + +### 수정 사항 {#fixes} + +- Diagram Editor. 도형을 그룹이나 스윔레인으로 이동한 후 연결선의 시각적 컨트롤이 사라지던 문제를 수정했습니다. +- Diagram Editor. 회전된 도형의 연결점에 새 커넥터가 스냅되는 방식을 수정했습니다. +- Diagram Editor. 그룹 내 도형을 회전할 때 연결선이 끊어지거나 어긋나던 문제를 수정했습니다. +- Diagram Editor. 수평 슬라이더와 수직 슬라이더가 모두 표시된 상태에서 `dhx_slide` 슬라이더가 올바르게 작동하도록 수정했습니다. +- Diagram Editor. 100%가 아닌 확대/축소 수준에서 `dhx_slide` 요소가 표시되는 방식을 수정했습니다. +- Diagram Editor. 선 미리보기가 연결점에 정확히 정렬되도록 위치를 수정했습니다. +- Diagram Editor. 접힌 도형바 섹션이 다이어그램 영역을 클릭하면 자동으로 펼쳐지던 문제를 수정했습니다. +- Diagram. 사용자 지정 도형 속성의 기본값 `true`가 명시적으로 지정된 `false` 값을 덮어쓰던 문제를 수정했습니다. +- Diagram. 스크롤바를 클릭하면 현재 선택된 요소가 해제되던 문제를 수정했습니다. + ## 버전 6.1.6 {#version-6.1.6} 2026년 7월 1일에 출시되었습니다. diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/.sync b/i18n/ru/docusaurus-plugin-content-docs/current/.sync index 034fab47..dec82a30 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/ru/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -514fd410a52ca700b6c2e21b472b47960760a347 +6bfc2997d624dbe1965af8799c866a0c4a6df1b6 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 79c4f230..6557060a 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 @@ -1,16 +1,16 @@ --- sidebar_label: MCP-сервер DHTMLX -title: Использование MCP-сервера DHTMLX с ИИ-ассистентами для написания кода -description: Подключите ИИ-ассистентов для написания кода к актуальной документации DHTMLX Diagram через MCP-сервер. Рассматриваются фигуры, дорожки, организационные диаграммы, Diagram Editor и другое. +title: MCP-сервер DHTMLX Diagram для API фигур и коннекторов +description: Направьте ИИ-ассистента на MCP-сервер — и он найдёт актуальную документацию DHTMLX Diagram по фигурам, дорожкам, организационным диаграммам и Diagram Editor. --- -# Использование MCP-сервера DHTMLX с ИИ-ассистентами для написания кода +# MCP-сервер DHTMLX Diagram: фигуры, коннекторы и API редактора {#dhtmlx-diagram-mcp-server-shapes-connectors-and-editor-apis} -Разработка приложений с диаграммами требует точного контроля над фигурами, соединениями, компоновкой и конфигурацией редактора. Когда ИИ-инструмент генерирует код [DHTMLX Diagram](/) на основе устаревших данных обучения, результатом становятся несоответствующие API, отсутствующие свойства и параметры конфигурации, которых больше не существует. +[DHTMLX Diagram](/) даёт вам реальный контроль над [геометрией фигур](/shapes/configuration_properties), [трассировкой коннекторов](/lines/) и [правилами компоновки](/guides/diagram/configuration), а также над любыми параметрами, которые редактор позволяет настраивать. Сгенерированный код должен отражать актуальные свойства фигур, методы коннекторов и параметры компоновки, а не состояние более раннего снимка данных обучения. -MCP-сервер DHTMLX (Model Context Protocol) решает эту проблему, предоставляя ИИ-инструментам прямой доступ к актуальной документации Diagram. Работаете ли вы с [дорожками](/swimlanes/), [пользовательскими фигурами](/shapes/custom_shape), [Diagram Editor](/guides/diagram_editor/initialization) или любой другой частью библиотеки — ассистент получает актуальные справочные материалы перед формированием ответа. +MCP-сервер DHTMLX существует именно для этого: он предоставляет ассистенту актуальную документацию Diagram ещё до того, как будет нарисована хотя бы одна фигура. Работаете ли вы с [дорожками](/swimlanes/), [пользовательскими фигурами](/shapes/custom_shape), [Diagram Editor](/guides/diagram_editor/initialization) или любой другой частью библиотеки — ассистент получает актуальные справочные материалы перед формированием ответа. -**Конечная точка MCP** +### Конечная точка MCP {#mcp-endpoint} ~~~ https://docs.dhtmlx.com/mcp @@ -20,9 +20,9 @@ https://docs.dhtmlx.com/mcp MCP-сервер DHTMLX охватывает все основные продукты DHTMLX, а не только DHTMLX Diagram. Та же конечная точка и те же шаги настройки применяются независимо от того, с каким компонентом вы работаете. ::: -## Где MCP-сервер помогает при работе с Diagram {#where-mcp-server-helps-with-diagram} +## Работа с Diagram, которую ускоряет MCP-сервер {#diagram-work-the-mcp-server-speeds-up} -MCP-сервер индексирует полную документацию DHTMLX Diagram. Вот распространённые сценарии, в которых MCP-сервер оказывается полезен: +Документация DHTMLX Diagram хранится в индексе MCP-сервера. Разработчики обращаются к ней, например, для таких задач: - Поиск актуального API для [фигур](/shapes/default_shapes), [линий](/lines/), [групп](/groups/) или [дорожек](/swimlanes/). - Генерация готового к запуску кода Diagram на основе описания. @@ -33,15 +33,24 @@ MCP-сервер индексирует полную документацию DH - Обработка [событий Diagram и Editor](/guides/event_handling) для реакции на действия пользователя. - Изучение [поддержки TypeScript](/guides/using_typescript) и интеграции с фреймворками React, Vue, Angular и Svelte. -## Как работает MCP-сервер DHTMLX {#how-dhtmlx-mcp-server-works} +## Внутри запроса к MCP-серверу Diagram {#inside-a-diagram-mcp-server-request} -Сервер объединяет конвейер Retrieval-Augmented Generation (RAG) с MCP, чтобы ИИ-ассистенты могли запрашивать документацию по требованию, а не полагаться исключительно на данные обучения. +MCP-сервер DHTMLX запускает конвейер Retrieval-Augmented Generation (RAG) поверх Model Context Protocol (MCP) и направляет каждый запрос в один из двух сценариев: *Search*, который находит подходящие справочные страницы для дальнейшей работы ассистента, или *Inference*, который читает эти страницы и сразу возвращает готовый ответ. Документация Diagram нужна лишь для части запроса, и ассистент сначала выделяет именно эту часть, а остальное обрабатывает самостоятельно. -Например, когда вы спрашиваете: *«Как настроить диаграмму с дорожками и пользовательскими заголовками ячеек?»*, ассистент отправляет запрос через конечную точку MCP. Сервер сопоставляет его с документацией по дорожкам, находит соответствующие справочные страницы и возвращает их в качестве контекста. После этого ассистент генерирует код на основе актуального API, а не снимка данных обучения. +Вот как это работает на примере запроса *«Как построить в DHTMLX Diagram организационную диаграмму, которая получает данные о сотрудниках из моего внутреннего HR API и автоматически распределяет их по отделам?»*: -## Подключение ИИ-инструментов к Diagram {#connecting-ai-tools-to-diagram} +1. Ассистент выделяет часть, для которой нужна документация: как настроить auto-layout для организационной диаграммы, построенной из набора данных JSON. +2. Сервер сопоставляет её с документацией по конфигурации диаграммы. +3. Поскольку ответ требует сгенерированного кода, запрос направляется в *Search* (более узкий фактический вопрос — например, какой метод управляет auto-layout — ушёл бы в *Inference*). +4. *Search* извлекает подходящие страницы из векторного индекса, построенного на основе актуальной документации Diagram. +5. Эти страницы возвращаются ассистенту в качестве контекста. +6. Ассистент настраивает auto-layout, используя этот контекст, а затем самостоятельно пишет логику обращения к HR API, опираясь на собственные знания, а не догадки об API Diagram. -ИИ-инструменты для разработки обычно поддерживают MCP через команду CLI или файл конфигурации JSON. В обоих случаях ключевой шаг — регистрация URL-адреса сервера: +Благодаря этому сгенерированный код Diagram остаётся согласованным с документацией в её нынешнем виде. + +## Подключение MCP-сервера к вашему ИИ-инструменту {#bringing-the-mcp-server-into-your-ai-tool} + +Каждый из перечисленных ниже инструментов подключается к одной и той же конечной точке MCP своим способом: где-то это флаг CLI, где-то — блок конфигурации JSON. Зарегистрируйте сервер один раз для каждого инструмента — и подключение будет действовать для каждого проекта Diagram, который вы откроете в нём: ~~~ https://docs.dhtmlx.com/mcp @@ -77,7 +86,7 @@ claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp ### Настройка Cursor {#cursor-setup} :::info -Пошаговые инструкции по настройке MCP для Cursor можно найти в [официальной документации](https://cursor.com/en-US/docs/mcp). +[Официальная документация](https://cursor.com/en-US/docs/mcp) Cursor подробно описывает все параметры настройки MCP. ::: Чтобы подключить MCP-сервер DHTMLX к Cursor, выполните следующие шаги: @@ -102,7 +111,7 @@ claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp #### Antigravity 2.0 {#antigravity-20} :::info -Подробные сведения об интеграции MCP-сервера в Antigravity приведены в [официальной документации](https://antigravity.google/docs/mcp). +[Официальная документация](https://antigravity.google/docs/mcp) Antigravity полностью описывает интеграцию MCP-сервера. ::: Чтобы подключить MCP-сервер DHTMLX к Google Antigravity, выполните следующие шаги: @@ -123,7 +132,7 @@ https://docs.dhtmlx.com/mcp #### Antigravity CLI {#antigravity-cli} :::info -Ознакомьтесь с [соответствующим руководством](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes), чтобы узнать о переходе с Gemini CLI на Antigravity CLI. +Переходите с Gemini CLI на Antigravity CLI? [Соответствующее руководство](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes) описывает, что изменилось. ::: Чтобы подключить MCP-сервер DHTMLX к Antigravity CLI, создайте файл `mcp_config.json` в одном из следующих расположений: @@ -148,7 +157,7 @@ https://docs.dhtmlx.com/mcp ### Настройка ChatGPT {#chatgpt-setup} :::info -Полное руководство по подключению MCP-серверов к ChatGPT приведено в [официальной документации](https://developers.openai.com/api/docs/guides/tools-connectors-mcp). +[Официальная документация](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt) описывает все шаги подключения MCP-сервера к ChatGPT. ::: Чтобы подключить MCP-сервер DHTMLX к ChatGPT, выполните следующие шаги: @@ -169,25 +178,27 @@ https://docs.dhtmlx.com/mcp - Authentication: `No authentication` 6. Нажмите **Create** -После подключения ChatGPT будет получать документацию Diagram при ответах на вопросы в ходе ваших диалогов. +После подключения ChatGPT получает документацию Diagram при ответах на вопросы в ходе ваших диалогов. -:::note -Обратите внимание, что интеграция MCP с ChatGPT может приводить к более медленным ответам. Для более быстрой работы рассмотрите другие инструменты, перечисленные на этой странице. +:::info +Для интенсивных задач написания кода другие инструменты с поддержкой MCP могут работать эффективнее. ::: ### Другие инструменты {#other-tools} Большинство современных ИИ-инструментов для написания кода (включая Windsurf, Cline, Continue.dev и другие) отображают MCP в настройках под такими названиями, как «Model Context Protocol», «Context Sources» или «Custom integrations». Добавьте `https://docs.dhtmlx.com/mcp` в качестве исходного URL. -## Конфиденциальность и обработка данных {#privacy-and-data-handling} +## Конфиденциальность в работе MCP-сервера {#the-privacy-side-of-the-mcp-server} + +Ничего из этого не выполняется на вашем компьютере: MCP-сервер DHTMLX работает исключительно как удалённый сервис и не хранит копию ваших персональных данных. -MCP-сервер DHTMLX — это исключительно облачный сервис, который работает удалённо, не затрагивает вашу локальную среду и не хранит персональные данные пользователей. Запросы могут регистрироваться в журнале для отладки и улучшения сервиса. +Сервер регистрирует запросы в журнале только для отладки и улучшения сервиса. -Команды, которым требуются более строгие гарантии конфиденциальности, могут запросить коммерческое развёртывание с отключённым логированием запросов. Для получения подробностей свяжитесь с нами по адресу `info@dhtmlx.com`. +Хотите полностью отключить логирование? Это доступно в коммерческом развёртывании — свяжитесь с нами по адресу `info@dhtmlx.com`, чтобы его настроить. -## Примеры запросов для Diagram с использованием ИИ {#example-prompts-for-diagram-with-ai} +## Запросы для типичных задач Diagram {#prompts-for-common-diagram-tasks} -После подключения MCP-сервера формулируйте запросы вокруг конкретной цели, чтобы ассистент понимал, какую часть API Diagram нужно искать. Приведённые ниже запросы сгруппированы по типу задачи. Вы можете скопировать и адаптировать их по своему усмотрению. +Запрос, в котором указана конкретная функция Diagram (фигура, редактор, экспорт), возвращает более релевантные результаты, чем расплывчатая формулировка. Ниже примеры сгруппированы по функциям. **Создание диаграмм** @@ -234,7 +245,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? ~~~ -## Советы для эффективных запросов по Diagram {#tips-for-effective-diagram-prompts} +## Как формулировать запросы, на которые сработает MCP-сервер {#writing-prompts-the-mcp-server-can-act-on} - **Указывайте область API.** Различайте экземпляр диаграммы и редактор — например, «in the DHTMLX Diagram Editor» и «on the diagram object». Сервер находит более релевантные документы, когда цель запроса очевидна. - **Указывайте тип фигуры.** Запросы вроде «a swimlane shape» или «a custom shape with HTML content» находят нужные справочные страницы быстрее, чем обобщённое «a shape». diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/guides/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/guides/overview.md index 437c001d..ff9709c9 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/guides/overview.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/guides/overview.md @@ -66,6 +66,12 @@ description: Вы можете изучить руководства по JavaSc - [Интеграция с React](guides/integrations/react_integration.md) - [Интеграция с Vue.js](guides/integrations/vue_integration.md) +## Интеграции с ИИ {#ai-integrations} + +Подключите ИИ-ассистента для написания кода к актуальной документации DHTMLX Diagram, чтобы он генерировал код на основе текущего API, а не на основе устаревших данных обучения. + +- [MCP-сервер DHTMLX](guides/ai-integrations/mcp-server.md) + ## Поддержка сенсорного управления {#touch-support} Вы можете создавать адаптивные веб-приложения с помощью DHTMLX Diagram благодаря встроенной поддержке сенсорного управления. Узнайте, как UI-виджеты работают на сенсорных устройствах, в руководстве [Поддержка сенсорного управления](guides/touch_support.md). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/overview.md b/i18n/ru/docusaurus-plugin-content-docs/current/overview.md index fdda06fd..01bde2a2 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/overview.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/overview.md @@ -142,4 +142,4 @@ DHTMLX Diagram предоставляет набор API, который мож ## Что дальше {#whats-next} -Теперь вы можете узнать больше об использовании DHTMLX Diagram Editor в своём приложении. Прочитайте статью [Обзор Diagram Editor](editor_overview.md), чтобы узнать больше об этом инструменте. +Теперь вы можете узнать больше об использовании DHTMLX Diagram Editor в своём приложении. Прочитайте статью [Обзор Diagram Editor](editor_overview.md), чтобы узнать больше об этом инструменте. Если вы разрабатываете с помощью ИИ-ассистента для написания кода, подключите его к актуальной документации через [MCP-сервер DHTMLX](guides/ai-integrations/mcp-server.md). diff --git a/i18n/ru/docusaurus-plugin-content-docs/current/whats_new.md b/i18n/ru/docusaurus-plugin-content-docs/current/whats_new.md index 871aa0f0..fb5afcfb 100644 --- a/i18n/ru/docusaurus-plugin-content-docs/current/whats_new.md +++ b/i18n/ru/docusaurus-plugin-content-docs/current/whats_new.md @@ -8,6 +8,22 @@ description: Узнайте о новых возможностях библио Если вы обновляете Diagram с более старой версии, ознакомьтесь со статьей [Переход на новую версию](migration.md) для получения подробной информации. +## Версия 6.1.7 {#version-617} + +Выпущено 5 августа 2026 г. + +### Исправления {#fixes} + +- Diagram Editor. Исправлена проблема, из-за которой соединительные линии теряли визуальные элементы управления после перемещения фигуры в группу или дорожку +- Diagram Editor. Исправлена привязка новых соединительных линий к точкам соединения на повернутых фигурах +- Diagram Editor. Исправлена проблема, из-за которой соединительные линии разрывались или смещались при повороте фигуры внутри группы +- Diagram Editor. Исправлено поведение ползунков `dhx_slide`: теперь они корректно работают, когда одновременно отображаются горизонтальный и вертикальный ползунки +- Diagram Editor. Исправлена видимость элементов `dhx_slide` при масштабе, отличном от 100% +- Diagram Editor. Исправлено позиционирование плейсхолдера предварительного просмотра линии для корректного выравнивания с точкой соединения +- Diagram Editor. Исправлена проблема, из-за которой свернутые разделы панели фигур автоматически разворачивались при клике в области диаграммы +- Diagram. Исправлена проблема, из-за которой значение `true` по умолчанию в свойстве пользовательской фигуры переопределяло явно заданное значение `false` +- Diagram. Исправлена проблема, из-за которой клик по полосе прокрутки сбрасывал текущее выделение элементов + ## Версия 6.1.6 {#version-616} Выпущено 1 июля 2026 г. diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/.sync b/i18n/zh/docusaurus-plugin-content-docs/current/.sync index 310660cf..dec82a30 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/.sync +++ b/i18n/zh/docusaurus-plugin-content-docs/current/.sync @@ -1 +1 @@ -92695f8ea3eeca4963dc78a6ff38bd5ddc1178e2 +6bfc2997d624dbe1965af8799c866a0c4a6df1b6 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 155ca9e6..de1223dd 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 @@ -1,16 +1,16 @@ --- sidebar_label: DHTMLX MCP 服务器 -title: 在 AI 编程助手中使用 DHTMLX MCP 服务器 -description: 通过 MCP 服务器将 AI 编程助手连接到实时的 DHTMLX Diagram 文档。涵盖形状、泳道、组织结构图、Diagram Editor 等内容。 +title: 用于形状和连接器 API 的 DHTMLX Diagram MCP 服务器 +description: 将 AI 助手指向该 MCP 服务器,即可获取有关形状、泳道、组织结构图和 Diagram Editor 的最新 DHTMLX Diagram 文档。 --- -# 在 AI 编程助手中使用 DHTMLX MCP 服务器 {#using-dhtmlx-mcp-server-with-ai-coding-assistants} +# DHTMLX Diagram MCP 服务器:形状、连接器和编辑器 API {#dhtmlx-diagram-mcp-server-shapes-connectors-and-editor-apis} -构建图表应用程序需要对形状、连接、布局和编辑器配置进行精确控制。当 AI 工具根据过时的训练数据生成 [DHTMLX Diagram](/) 代码时,结果往往是 API 不匹配、属性缺失,以及已不存在的配置选项。 +[DHTMLX Diagram](/) 让您真正掌控[形状几何属性](/shapes/configuration_properties)、[连接线路由](/lines/)和[布局规则](/guides/diagram/configuration),以及编辑器配置所允许的任何其他选项。生成的代码需要体现当前的形状属性、连接线方法和布局选项,而不是仍停留在早期训练快照中的状态。 -DHTMLX 模型上下文协议(Model Context Protocol,MCP)服务器通过让 AI 工具直接访问实时的 Diagram 文档来解决这一问题。无论您使用的是[泳道](/swimlanes/)、[自定义形状](/shapes/custom_shape)、[Diagram Editor](/guides/diagram_editor/initialization),还是库的其他任何部分,助手都会在生成响应之前检索最新的参考资料。 +DHTMLX MCP 服务器正是为解决这一问题而生:在绘制任何形状之前,它就已将最新的 Diagram 文档呈现给助手。无论您使用的是[泳道](/swimlanes/)、[自定义形状](/shapes/custom_shape)、[Diagram Editor](/guides/diagram_editor/initialization),还是库的其他任何部分,助手都会在生成响应之前检索最新的参考资料。 -**MCP 端点** +### MCP 端点 {#mcp-endpoint} ~~~ https://docs.dhtmlx.com/mcp @@ -20,9 +20,9 @@ https://docs.dhtmlx.com/mcp DHTMLX MCP 服务器涵盖所有主要的 DHTMLX 产品,而不仅仅是 DHTMLX Diagram。无论您使用的是哪个组件,相同的端点和配置步骤均适用。 ::: -## MCP 服务器对 Diagram 有哪些帮助 {#where-mcp-server-helps-with-diagram} +## MCP 服务器加速的 Diagram 工作 {#diagram-work-the-mcp-server-speeds-up} -MCP 服务器会为完整的 DHTMLX Diagram 文档建立索引。以下是 MCP 服务器常见的实用场景: +DHTMLX Diagram 的文档已收录在 MCP 服务器的索引中,开发者可借此查询以下内容: - 查询[形状](/shapes/default_shapes)、[线条](/lines/)、[分组](/groups/)或[泳道](/swimlanes/)的最新 API。 - 根据描述生成可直接运行的 Diagram 代码。 @@ -33,15 +33,24 @@ MCP 服务器会为完整的 DHTMLX Diagram 文档建立索引。以下是 MCP - 处理 [Diagram 和编辑器事件](/guides/event_handling)以响应用户交互。 - 了解 [TypeScript 支持](/guides/using_typescript)情况,以及与 React、Vue、Angular 和 Svelte 的框架集成。 -## DHTMLX MCP 服务器的工作原理 {#how-dhtmlx-mcp-server-works} +## Diagram MCP 服务器请求的内部机制 {#inside-a-diagram-mcp-server-request} -该服务器将检索增强生成(Retrieval-Augmented Generation,RAG)流程与 MCP 相结合,使 AI 助手能够按需查询文档,而不必仅依赖训练数据。 +DHTMLX MCP 服务器基于模型上下文协议(Model Context Protocol,MCP)运行检索增强生成(Retrieval-Augmented Generation,RAG)流程,将每次查询路由到两种工作流程之一:*检索(Search)* 负责检索匹配的参考页面供助手使用,*推理(Inference)* 则直接读取这些页面并返回完整答案。一次请求中往往只有部分内容真正需要用到 Diagram 的文档,助手会先提取出这部分内容,其余部分则依靠自身能力处理。 -例如,当您提问 *"如何配置带有自定义单元格表头的泳道图?"* 时,助手会通过 MCP 端点发送该提示。服务器会将其与泳道相关文档进行匹配,检索出相关的参考页面,并将其作为上下文返回。随后,助手会基于当前的 API(而非训练时的快照)生成代码。 +下面以提示词 *"如何构建一个从内部 HR API 提取员工记录、并按部门自动排列的 DHTMLX Diagram 组织结构图?"* 为例,说明该流程的具体运作方式: -## 将 AI 工具连接到 Diagram {#connecting-ai-tools-to-diagram} +1. 助手先找出提示词中需要查阅文档的部分:如何为基于 JSON 数据集构建的组织结构图配置自动布局。 +2. 服务器将其与图表配置文档进行匹配。 +3. 由于该问题的答案需要生成代码,因此请求会被路由到 *检索(Search)*(如果是范围更窄的事实性问题,例如"哪个方法可以控制自动布局",则会被路由到 *推理(Inference)*)。 +4. *检索(Search)* 会从基于当前 Diagram 文档构建的向量索引中提取匹配的页面。 +5. 这些页面会作为上下文返回给助手。 +6. 助手利用该上下文配置自动布局,然后凭借自身知识编写 HR API 的数据获取逻辑,而不是去猜测 Diagram 的 API。 -AI 开发工具通常通过 CLI 命令或 JSON 配置文件来支持 MCP。无论采用哪种方式,核心步骤都是注册服务器 URL: +这样可以确保生成的 Diagram 代码始终与当前文档保持一致。 + +## 将 MCP 服务器接入您的 AI 工具 {#bringing-the-mcp-server-into-your-ai-tool} + +下面列出的每个工具都会通过各自的方式连接到同一个 MCP 端点:有的使用 CLI 参数,有的使用 JSON 配置块。只需在每个工具中注册一次,此后您在该工具中打开的每个 Diagram 项目都会自动沿用这一连接: ~~~ https://docs.dhtmlx.com/mcp @@ -77,7 +86,7 @@ claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp ### Cursor 设置 {#cursor-setup} :::info -您可以在[官方文档](https://cursor.com/en-US/docs/mcp)中找到 Cursor 的详细 MCP 设置步骤。 +Cursor 的[官方文档](https://cursor.com/en-US/docs/mcp)详细介绍了每一项 MCP 配置选项。 ::: 请按照以下步骤将 DHTMLX MCP 服务器连接到 Cursor: @@ -102,7 +111,7 @@ claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp #### Antigravity 2.0 {#antigravity-20} :::info -有关在 Antigravity 中集成 MCP 服务器的完整详情,请参阅[官方文档](https://antigravity.google/docs/mcp)。 +Antigravity 的[官方文档](https://antigravity.google/docs/mcp)全面介绍了 MCP 服务器的集成方式。 ::: 以下是将 DHTMLX MCP 服务器连接到 Google Antigravity 需要完成的步骤: @@ -123,7 +132,7 @@ https://docs.dhtmlx.com/mcp #### Antigravity CLI {#antigravity-cli} :::info -请查看[相关指南](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes),了解从 Gemini CLI 迁移到 Antigravity CLI 的相关信息。 +正在从 Gemini CLI 迁移到 Antigravity CLI?[相关指南](https://antigravity.google/docs/gcli-migration#mcp-config-formatting-changes)介绍了这一变更。 ::: 要将 DHTMLX MCP 服务器连接到 Antigravity CLI,请在以下位置之一创建 `mcp_config.json`: @@ -148,7 +157,7 @@ https://docs.dhtmlx.com/mcp ### ChatGPT 设置 {#chatgpt-setup} :::info -有关将 MCP 服务器连接到 ChatGPT 的完整指南,请参阅[官方文档](https://developers.openai.com/api/docs/guides/tools-connectors-mcp)。 +[官方文档](https://help.openai.com/en/articles/12584461-developer-mode-and-mcp-apps-in-chatgpt)详细介绍了将 MCP 服务器连接到 ChatGPT 的每一步操作。 ::: 请按照以下步骤将 DHTMLX MCP 服务器连接到 ChatGPT: @@ -171,23 +180,25 @@ https://docs.dhtmlx.com/mcp 连接完成后,ChatGPT 会在对话中回答问题时检索 Diagram 文档。 -:::note -请注意,与 ChatGPT 集成 MCP 可能会导致响应速度变慢。如需更快的体验,请考虑使用本页面列出的其他工具。 +:::info +对于高强度的编码工作流程,其他支持 MCP 的工具可能效率更高。 ::: ### 其他工具 {#other-tools} 大多数现代 AI 编程工具(包括 Windsurf、Cline、Continue.dev 等)会在其设置中以 "Model Context Protocol"、"Context Sources" 或 "Custom integrations" 等名称提供 MCP 功能。请将 `https://docs.dhtmlx.com/mcp` 添加为源 URL。 -## 隐私与数据处理 {#privacy-and-data-handling} +## MCP 服务器的隐私保护 {#the-privacy-side-of-the-mcp-server} + +这一切都不会在您的本地设备上运行:DHTMLX MCP 服务器完全以远程服务的形式运行,且不会保留您个人数据的任何副本。 -DHTMLX MCP 服务器是一项纯云端服务,在远程运行,不会影响您的本地环境,也不会存储任何个人用户数据。查询记录可能会出于调试和服务改进的目的而被记录。 +服务器记录查询日志,仅用于调试和改进服务。 -如果团队需要更严格的隐私保障,可以申请禁用查询日志记录的商业部署方案。详情请联系 `info@dhtmlx.com`。 +希望完全关闭日志记录?商业部署方案可满足这一需求,请通过 `info@dhtmlx.com` 联系我们进行配置。 -## 使用 AI 编写 Diagram 提示词示例 {#example-prompts-for-diagram-with-ai} +## 常见 Diagram 任务的提示词 {#prompts-for-common-diagram-tasks} -连接 MCP 服务器后,请围绕具体目标来表述提示词,以便助手了解需要查阅 Diagram API 的哪个部分。以下提示词按任务类型分类,您可以根据需要复制并调整。 +明确指出您需要的具体 Diagram 功能(形状、编辑器、导出等)的提示词,比笼统的提示词能检索到更相关的结果。下面的示例按功能分组。 **创建图表** @@ -234,7 +245,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? ~~~ -## 编写高效 Diagram 提示词的技巧 {#tips-for-effective-diagram-prompts} +## 写出 MCP 服务器能够响应的提示词 {#writing-prompts-the-mcp-server-can-act-on} - **明确 API 范围。** 区分 diagram 实例和 editor,例如 "in the DHTMLX Diagram Editor" 与 "on the diagram object" 这两种表述的区别。目标越明确,服务器检索到的文档就越贴切。 - **注明具体的形状类型。** 类似 "a swimlane shape" 或 "a custom shape with HTML content" 这样的提示词,比笼统的 "a shape" 能更快检索到正确的参考页面。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/guides/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/guides/overview.md index dd1fd2ef..cf94556a 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/guides/overview.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/guides/overview.md @@ -66,6 +66,12 @@ description: 您可以在 DHTMLX JavaScript Diagram 库的文档中学习 JavaSc - [与 React 集成](guides/integrations/react_integration.md) - [与 Vue.js 集成](guides/integrations/vue_integration.md) +## AI 集成 {#ai-integrations} + +将 AI 编程助手连接到实时的 DHTMLX Diagram 文档,使其根据当前 API 生成代码,而非依赖过时的训练数据。 + +- [DHTMLX MCP 服务器](guides/ai-integrations/mcp-server.md) + ## 触控支持 {#touch-support} 得益于内置的触控支持,您可以使用 DHTMLX Diagram 创建响应式 Web 应用程序。请在 [触控支持](guides/touch_support.md) 指南中查看 UI 部件在触控设备上的工作方式。 diff --git a/i18n/zh/docusaurus-plugin-content-docs/current/overview.md b/i18n/zh/docusaurus-plugin-content-docs/current/overview.md index 9b7e86f4..dfa81bd4 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/overview.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/overview.md @@ -142,4 +142,4 @@ DHTMLX Diagram 为您提供了一套 API,可用于让使用 Diagram 的过程 ## 下一步 {#whats-next} -现在,您可以了解如何在应用程序中使用 DHTMLX Diagram Editor。请阅读 [Diagram Editor 概述](editor_overview.md),以详细了解此工具。 +现在,您可以了解如何在应用程序中使用 DHTMLX Diagram Editor。请阅读 [Diagram Editor 概述](editor_overview.md),以详细了解此工具。如果您使用 AI 编程助手进行开发,可以通过 [DHTMLX MCP 服务器](guides/ai-integrations/mcp-server.md) 将其连接到实时文档。 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 639a416a..b1a74a60 100644 --- a/i18n/zh/docusaurus-plugin-content-docs/current/whats_new.md +++ b/i18n/zh/docusaurus-plugin-content-docs/current/whats_new.md @@ -8,6 +8,22 @@ description: 您可以在此了解 DHTMLX JavaScript Diagram 库的最新资讯 如果您正在将 Diagram 从旧版本升级,请查看 [迁移到新版本](migration.md) 了解详细信息。 +## 版本 6.1.7 {#version-617} + +2026 年 8 月 5 日发布 + +### 修复 {#fixes} + +- Diagram Editor。修复了将形状移动到组或泳道中后,连接线丢失可视化控件的问题 +- Diagram Editor。修复了新连接线吸附到旋转形状连接点的问题 +- Diagram Editor。修复了在组内旋转形状时连接线断开或错位的问题 +- Diagram Editor。修复了 `dhx_slide` 滑块的行为,确保在同时显示水平和垂直滑块时能够正常工作 +- Diagram Editor。修复了缩放比例不为 100% 时 `dhx_slide` 元素的可见性问题 +- Diagram Editor。修复了线条预览占位符的位置,使其与连接点正确对齐 +- Diagram Editor。修复了点击 Diagram 区域时已折叠的形状栏分区会自动展开的问题 +- Diagram。修复了自定义形状属性中默认值 `true` 会覆盖显式设置的 `false` 值的问题 +- Diagram。修复了点击滚动条会清除当前所选元素的问题 + ## 版本 6.1.6 {#version-616} 2026 年 7 月 1 日发布