### Install Dependencies with npm Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/svelte_integration.md Install project dependencies and start the development server using npm. ```bash npm install npm run dev ``` -------------------------------- ### Install Dependencies with Yarn Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/svelte_integration.md Install project dependencies and start the development server using Yarn. ```bash yarn yarn start // or yarn dev ``` -------------------------------- ### Start the Application Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/ai_integration.md Run this command to start the demo application. After starting, navigate to http://localhost:3001 in your browser. ```bash npm start // this is the required start command ``` -------------------------------- ### Full HTML Example with Diagram Initialization and Data Loading Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/diagram/initialization.md This example demonstrates a complete HTML page setup for DHTMLX Diagram, including script and CSS includes, a container div, diagram initialization, and data parsing. ```html

``` -------------------------------- ### Application Start Confirmation Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/ai_integration.md This output indicates that the server has successfully started and is listening on the specified port. ```bash Server started on port 3001. ``` -------------------------------- ### Install Dependencies for Documentation Source: https://github.com/dhtmlx/docs-diagram/blob/master/README.md Install the necessary project dependencies using Yarn. This command should be run after cloning the repository. ```bash $ yarn ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/ai_integration.md Install all necessary project dependencies using npm. This command should be run after cloning the repository. ```bash npm install ``` -------------------------------- ### Full Example: Initialize and Load Data Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/diagram_editor/initialization.md A complete example demonstrating how to include the editor files, prepare data, initialize the `DiagramEditor`, and load the data into it. ```html

``` -------------------------------- ### Example Usage Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/basic_controls/checkboxgroup.md An example demonstrating how to initialize the DHTMLX Diagram Editor with a CheckboxGroup in the editbar properties and parse data. ```APIDOC ## Example ~~~jsx {7-19} const editor = new dhx.DiagramEditor("editor_container", { type: "default", view: { editbar: { properties: { $shape: [ { type: "checkboxGroup", label: "Select products", key: "products", options: { rows: [ { id: "diagram", text: "DHTMLX Diagram", value: "diagram" }, { id: "suite", text: "DHTMLX Suite", value: "suite" }, { id: "gantt", text: "DHTMLX Gantt" }, { id: "spreadsheet", text: "DHTMLX Spreadsheet", disabled: true } ] } } ] } } } }); editor.parse([ { "type": "rectangle", "products": { "diagram": "diagram", "suite": "", "gantt": true, "spreadsheet": false } } ]); ~~~ ``` -------------------------------- ### Basic Grid Step Usage Example Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/complex_controls/gridstep.md An example demonstrating how to initialize a DHTMLX DiagramEditor with a gridStep control in its properties. ```APIDOC ## Initialize Diagram Editor with Grid Step ### Description This example shows how to create a `dhx.DiagramEditor` instance and configure the `editbar` to include a `gridStep` control. ### Code ```jsx const editor = new dhx.DiagramEditor("editor_container", { type: "default", view: { editbar: { properties: { $default: [ { type: "gridStep", readOnly: true } ] } } } }); ``` ``` -------------------------------- ### Example: Configuring Toolbar Items via Strings Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/toolbar/config/items_property.md This example demonstrates how to initialize the DHTMLX Diagram Editor and configure its toolbar using an array of strings for the `items` property. ```APIDOC ### Example 1 The example below shows how to configure Toolbar items via strings: ```jsx {10-14} // Configuring items via strings const editor = new dhx.DiagramEditor("editor_container", { type: "default", view: { // toolbar: true, // displays default Toolbar // or configure Toolbar via object toolbar: { css: "custom_css", navigationType: "pointer", items: [ "file", "spacer", "scale" ] } } }); ``` ``` -------------------------------- ### Dynamic Management of Editbar Panel Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/whats_new.md Example demonstrating dynamic management of the Editbar panel based on provided conditions. This snippet requires prior setup of the Diagram Editor. ```javascript dhx.ready(function() { var editor = new dhx.DiagramEditor("#editor", { //... configuration }); editor.editbar.show("controls"); }); ``` -------------------------------- ### Colorpicker Configuration Example Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/basic_controls/colorpicker.md An example demonstrating how to configure a Colorpicker within the Diagram Editor's editbar properties. ```APIDOC ## Example Configuration ```jsx const editor = new dhx.DiagramEditor("editor_container", { type: "default", view: { editbar: { properties: { $shape: [ { type: "colorpicker", wrap: true, label: "Fill", placeholder: "Select color", grayShades: false, palette: [ ["#69d2e7", "#a7dbd8", "#e0e4cc", "#f38630", "#fa6900", "#7fc7af", "#dad8a7"], ["#fe4365", "#fc9d9a", "#f9cdad", "#c8c8a9", "#83af9b", "#948c75", "#d5ded9"], ["#ecd078", "#d95b43", "#c02942", "#542437", "#53777a", "#cbe86b", "#f2e9e1"], ["#556270", "#4ecdc4", "#c7f464", "#ff6b6b", "#c44d58", "#dce9be", "#555152"], ["#774f38", "#e08e79", "#f1d4af", "#ece5ce", "#c5e0dc", "#005f6b", "#008c9e"], ["#e8ddcb", "#cdb380", "#036564", "#033649", "#031634", "#73626e", "#b38184"], ["#490a3d", "#bd1550", "#e97f02", "#f8ca00", "#8a9b0f", "#fc913a", "#f9d423"], ["#594f4f", "#547980", "#45ada8", "#9de0ad", "#e5fcc2", "#fecea8", "#ff847c"], ["#00a0b0", "#6a4a3c", "#cc333f", "#eb6841", "#edc951", "#80bca3", "#f6f7bd"], ["#e94e77", "#d68189", "#c6a49a", "#c6e5d9", "#f4ead5", "#40c0cb", "#f9f2e7"] ] } ] } } } }); ``` ``` -------------------------------- ### Example: Configure Toolbar items via strings in DiagramEditor Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/toolbar/config/items_property.md This example demonstrates initializing a DiagramEditor with a toolbar configured using an array of strings for its items. ```jsx // Configuring items via strings const editor = new dhx.DiagramEditor("editor_container", { type: "default", view: { // toolbar: true, // displays default Toolbar // or configure Toolbar via object toolbar: { css: "custom_css", navigationType: "pointer", items: [ "file", "spacer", "scale" ] } } }); ``` -------------------------------- ### Create React App Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/react_integration.md Use npx to create a new React project. Ensure Node.js is installed. ```bash npx create-react-app my-react-diagram-app ``` -------------------------------- ### Select Control Example Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/basic_controls/select.md This example demonstrates how to configure a Select control within the Diagram Editor's editbar properties, including defining options and their properties. ```APIDOC ## Example ~~~jsx {7-20} const editor = new dhx.DiagramEditor("editor_container", { type: "default", view: { editbar: { properties: { $shape: [ { type: "select", label: "Position", key: "position", wrap: true, options: [ "", "Technical Director", "Manager", "QA Lead", { value: 4, content: "Team Lead", disabled: true }, { value: 5, content: "Programmer" } ] } ] } } } }); ~~~ ``` -------------------------------- ### Datepicker Configuration Example Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/basic_controls/datepicker.md Example of how to configure Datepicker controls within the Diagram Editor's editbar properties. ```APIDOC ## Datepicker Configuration Example ### Description This example demonstrates how to define Datepicker controls in the `editbar.properties` configuration for the Diagram Editor. ### Configuration Snippet ```jsx { editbar: { properties: { $shape: [ { type: "datepicker", key: "date_start", label: "Date start", wrap: true }, { type: "datepicker", key: "date_end", label: "Date end", wrap: true, valueFormat: "Date", timePicker: true, weekStart: "monday" } ] } } } ``` ### Usage Example ```jsx const editor = new dhx.DiagramEditor("editor_container", { type: "org", view: { editbar: { properties: { $shape: [ { type: "datepicker", key: "date_start", label: "Date start", wrap: true, }, { type: "datepicker", key: "date_end", label: "Date end", wrap: true, valueFormat: "Date", timePicker: true, weekStart: "monday" } ] } } } }); editor.parse([ { "id": "shape_1" }, { "id": "shape_2", "parent": "shape_1", "date_start": "25/03/24", "date_end": new Date }, { "id": "shape_3", "parent": "shape_1", "date_start": "25/03/24", "date_end": new Date } ]); ``` ``` -------------------------------- ### Example: Customizing Editor Views Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editor/config/view_property.md This example demonstrates how to configure specific properties for the toolbar, shapebar, and hide the editbar. The toolbar is customized with CSS and data, while the shapebar's width is set. ```jsx const editor = new dhx.DiagramEditor("editor_container", { type: "default", view: { toolbar: { css: "toolbar_custom", data: ["file", "separator", "scale"] }, shapebar: { width: 400 }, editbar: false } // other configurations }); ``` -------------------------------- ### Example: Configuring Line Titles Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/line_titles/configuration_properties.md Demonstrates how to configure shapes, lines, and line titles within the diagram data structure. ```jsx const data = [ // configuring shapes { type: "rectangle", id: "shape_1" }, { type: "rectangle", id: "shape_2", x: 400 }, // configuring lines { type: "line", id: "line_1", from: "shape_1", to: "shape_2" }, // configuring line titles { type: "lineTitle", id: "title_1", parent: "line_1", text: "Some text" } ]; ``` -------------------------------- ### Run DHTMLX Diagram Documentation Locally Source: https://github.com/dhtmlx/docs-diagram/blob/master/README.md Start the local documentation server using Yarn. This allows you to explore the documentation in your browser. ```bash $ yarn start ``` -------------------------------- ### RadioGroup Configuration Example Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/basic_controls/radiogroup.md This example demonstrates how to configure a RadioGroup control within the editbar properties of the Diagram Editor, specifically for setting text alignment. ```APIDOC ## RadioGroup Properties ### Service Properties and Methods :::warning Note that it's highly not recommended to redefine the service properties and methods for the default types of controls, since it may cause breaks in their functionality. ::: - `$on` - (optional) - allows setting an event listener. The object has the following properties: - `eventName` - a callback function which is called with the following parameters: - `object` - an object with the following properties: - `control` - the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control - `editor` - the object of the Diagram Editor - `id` - the id of a Diagram item - `arguments` - (optional) - the [original event arguments](https://docs.dhtmlx.com/suite/category/form-radiogroup-events/) - `$handler` - (optional) - a callback function that allows handling actions on firing the `change` event of the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control and the `change` event of DataCollection. Called with the following parameter: - `object` - an object with the following properties: - `id` - the id of a Diagram item - `key` - the name of the specified/modified property or the path to it in the object of a Diagram item - `editor` - the object of the Diagram Editor - `control` - the object of the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control the component is built on - `value` - the new value of the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control - `$setValue` - (optional) - a callback function that allows setting the value of the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control on initialization of a control and on changing the value in DataCollection. Called with the following parameter: - `object` - an object with the following properties: - `editor` - the object of the Diagram Editor - `control` - the object of the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control the component is built on - `value` - the value of a Diagram item - `$layout` - (optional) - a callback function that allows setting the structure of a control. Returns the configuration of the [RadioGroup](https://docs.dhtmlx.com/suite/form/radiogroup/) Form control. Called with the following parameter: - `object` - the configuration of a control without service properties ### Radio Button Properties - `value` - (required) the value of a radio button - `text` - (optional) the text label of a radio button - `disabled` - (optional) defines whether a control is enabled (*false*) or disabled (*true*). *false* by default - `hidden` - (optional) defines whether a radio button is hidden. *false* by default - `css` - (optional) adds style classes to a control - `height` - (optional) the height of a control. *"content"* by default - `width` - (optional) the width of a control. *"content"* by default - `padding` - (optional) sets padding between a cell and a border of a radio button control ## Example ```jsx const editor = new dhx.DiagramEditor("editor_container", { type: "default", view: { editbar: { properties: { $shape: [ { type: "radioGroup", key: "textAlign", label: "Text align", wrap: true, options: { rows: [ { text: "Left", value: "left" }, { text: "Center", value: "center" }, { text: "Right", value: "right" } ] } } ] } } } }); ``` ``` -------------------------------- ### Example of Default Mode Specific Properties Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/shapes/configuration_properties.md Demonstrates setting the 'angle' and 'type' properties for a shape in the default mode. ```jsx const data = [ { id: 1, x: 280, y: 0, text: "Start", type: "start", angle: 10 } ]; ``` -------------------------------- ### Arrange Control Example in Editor Initialization Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/complex_controls/arrange.md This example demonstrates how to initialize the DHTMLX DiagramEditor and configure the Arrange control within its properties. It shows disabling the control and hiding the angle property using the $properties service property. ```jsx const editor= new dhx.DiagramEditor("editor_container", { type: "default", view: { editbar: { properties: { rectangle: [ { type: "arrange", disabled: true, $properties: { angle: { hidden: true } // configuration of the "input" basic control } } ] } } } }); ``` -------------------------------- ### Create Svelte Project with Vite Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/svelte_integration.md Use npm to create a new Svelte project with Vite. Select Svelte and JavaScript options during setup. ```bash npm create vite@latest ``` -------------------------------- ### Import Diagram Editor (PRO Version) Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/svelte_integration.md Import the Diagram Editor and its CSS file for the PRO version when installing from a local folder. ```html ``` -------------------------------- ### Clone DHTMLX Diagram Documentation Repository Source: https://github.com/dhtmlx/docs-diagram/blob/master/README.md Clone the documentation repository to your local machine using Git. Navigate into the cloned directory to proceed with setup. ```bash $ git clone git@github.com:DHTMLX/docs-diagram.git $ cd docs-diagram ``` -------------------------------- ### Configuring Swimlane and its Cells Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/swimlanes/configuration_properties.md Example demonstrating the configuration of a swimlane and its child cells, including setting IDs, types, group children, styles, and positions. ```jsx const data = [ // configuring a swimlane { "id": "main", "type": "$swimlane", "height": 730, "width": 1195, "layout": [ [1, 2, 3, 4] ] }, // configuring a cell of the swimlane { "id": 1, "type": "$sgroup", "groupChildren": ["s1"], "style": { "fill": "#D4DAE4" }, "x": 0, "y": 80 }, // configuring a shape to put into the cell { "id": "s1", "type": "end", "text": "Step 1", "x": 20, "y": 110 } ]; ``` -------------------------------- ### Integrating Size Control into Editbar Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/complex_controls/size.md Example demonstrating how to include the 'size' complex control within the Editbar properties of a DHTMLX Diagram Editor instance. ```APIDOC ## Integrating Size Control into Editbar ### Description This example shows how to add the 'size' complex control to the editbar's properties for shapes in a DHTMLX Diagram Editor. ### Usage ```jsx const editor = new dhx.DiagramEditor("editor_container", { type: "mindmap", view: { editbar: { properties: { $shape: [ { type: "size", label: "Shape size" } ] } } } }); ``` ``` -------------------------------- ### Define Milestone Shape Data Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/shapes/configuration_properties.md Example of defining data for a milestone shape, including its ID, text, type, parent, start date, and duration. ```jsx const data = [ { "id": "5.2", "text": "Product Launch", "type": "milestone", "parent": "5", "start_date": new Date(2026, 2, 1), "duration": 1 } ]; ``` -------------------------------- ### Configure Datepicker Controls in Editbar Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/basic_controls/datepicker.md This example demonstrates how to add two Datepicker controls, 'date_start' and 'date_end', to the editbar properties of the Diagram Editor. It shows basic configuration and advanced options like value format, time picker, and week start day. ```jsx const editor = new dhx.DiagramEditor("editor_container", { type: "org", view: { editbar: { properties: { $shape: [ { type: "datepicker", key: "date_start", label: "Date start", wrap: true, }, { type: "datepicker", key: "date_end", label: "Date end", wrap: true, valueFormat: "Date", timePicker: true, weekStart: "monday" } ] } } } }); editor.parse([ { "id": "shape_1" }, { "id": "shape_2", "parent": "shape_1", "date_start": "25/03/24", "date_end": new Date }, { "id": "shape_3", "parent": "shape_1", "date_start": "25/03/24", "date_end": new Date } ]); ``` -------------------------------- ### Example: Configuring a Default Mode Line Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/lines/configuration_properties.md Demonstrates how to configure shapes and a line with specific properties like stroke color, connection type, sides, and arrows in the default mode. ```jsx const data = [ // configuring shapes { "id": 1, "x": 200, "y": 0, "text": "Start", "type": "start" }, { "id": 2, "x": 200, "y": 320, "text": "Call Client and set-up Appointment", "type": "process" }, // configuring lines { "type": "line", "stroke": "#0AB169", "connectType": "straight", "from": 1, "to": 2, "fromSide": "bottom", "toSide": "top", "forwardArrow": "filled" } ]; ``` -------------------------------- ### Navigate to the Project Directory Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/ai_integration.md Change your current directory to the cloned project repository. ```bash cd diagram-org-chart-builder-ai-demo ``` -------------------------------- ### Focused Color Calculation Example Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/themes/base_themes_configuration.md This example shows how the focused color is calculated based on the primary color variables using HSL format. ```css --dhx-color-focused: hsl(calc(var(--dhx-h-primary) + 10), var(--dhx-s-primary), var(--dhx-l-primary)); ``` -------------------------------- ### Navigate to Project Directory Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/react_integration.md Change the current directory to the newly created React project. ```bash cd my-react-diagram-app ``` -------------------------------- ### Get Diagram Scroll State Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram/getscrollstate_method.md Call this method to get the current scroll position of the diagram. This can be useful for saving and restoring scroll states. ```javascript const diagram = new dhx.Diagram("diagram_container"); diagram.data.parse(data); const state = diagram.getScrollState(); // diagram.scrollTo( state.x, state.y ); ``` -------------------------------- ### Get Item Index by ID Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/manipulating_items.md Finds the numerical index of a diagram item by providing its unique identifier. This is the inverse operation of getting an ID by index. ```javascript const id = diagram.data.getIndex("1"); // -> returns 0 ``` -------------------------------- ### Configure PERT Diagram Links and Data Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/lines/configuration_properties.md This example demonstrates how to structure the data for a PERT diagram, including configuring tasks and their connecting links with `source` and `target` properties. ```jsx const dataset = { data: [ // configuring a project shape { id: "1", text: "Project #1", type: "project", parent: null }, // configuring task shapes { id: "1.1", text: "Task #1", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, { id: "1.2", text: "Task #2", parent: "1", type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, { id: "2.1", text: "Task #3", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 }, { id: "2.2", text: "Task #4", parent: null, type: "task", start_date: new Date(2026, 0, 1), duration: 10 } ], links: [ // configuring links objects { id: "line-1", source: "1.1", target: "1.2" }, { id: "line-2", source: "1.2", target: "2.1" }, { id: "line-3", source: "2.1", target: "2.2" } ] }; ``` -------------------------------- ### Applying New Themes to Diagram Editor Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/whats_new.md Example demonstrating how to apply new themes like Dark, Light High Contrast, and Dark High Contrast to the Diagram Editor. Ensure the theme files are correctly linked. ```javascript dhx.ready(function() { var editor = new dhx.DiagramEditor("#editor", { css: "dhx_diagram_theme_dark" }); }); ``` -------------------------------- ### Configure Environment Variables Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/ai_integration.md Create and configure the .env file by copying env.sample. This file stores sensitive API keys and server configurations. ```dotenv # --- OpenAI API Configuration --- OPENAI_API_KEY=sk-YourSecretApiKeyGoesHere OPENAI_BASE_URL=https://api.openai.com/v1 # --- Security Configuration --- CORS_ALLOWED_ORIGINS=http://localhost:3001,http://127.0.0.1:3001,http://localhost:5500,http://127.0.0.1:5500 # --- Server Configuration (optional) --- PORT=3001 ``` -------------------------------- ### Get Selected Item Object Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/manipulating_items.md Retrieve the object of a selected item using its ID or get the last selected item. Requires the diagram to be initialized with the 'select:true' option. ```javascript const diagram = new dhx.Diagram("diagram_container", { select: true }); data.parse(data); console.log(diagram.selection.getIds()); // -> ["1", "2", "3"] // getting the last selected item const item = diagram.selection.getItem(); // -> {id: "3", text: "Technical Director", title: "Jerry Wagner"} // getting the selected item by id const item = diagram.selection.getItem({ id: "1" }); // -> {id: "1", text: "Chairman & CEO", title: "Henry Bennett"} // trying to get an item which is not in the selection list const item = diagram.selection.getItem({ id: "4" }); // -> returns undefined, since there is no item with the specified id in the selection list ``` -------------------------------- ### Import Diagram Editor (Trial Version) Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/svelte_integration.md Import the Diagram Editor and its minified CSS file for the trial version. ```html ``` -------------------------------- ### Mindmap Mode Example Data Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/shapes/configuration_properties.md Example data for DHTMLX Diagram in mindmap mode, illustrating the use of `openDir` to control the direction of child item display and `giveItem`/`catchItem` properties. ```jsx const data = [ { id: "1", text: "main", openDir: { left: true, right: false } }, { id: "2", text: "2", parent: "1", giveItem: false }, { id: "3", text: "3", parent: "1", catchItem: false }, { id: "4", text: "4", parent: "1" } ]; ``` -------------------------------- ### Initialize Diagram Editor with Configuration Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/diagram_editor/initialization.md Instantiate the Diagram Editor by providing a container ID and a configuration object. Customize properties like 'type', 'shapeBarWidth', and 'lineGap' to tailor the editor's appearance and behavior. ```jsx const editor = new dhx.DiagramEditor("editor_container", { type: "default", // "default" | "org" | "mindmap" shapeBarWidth: 320, lineGap: 20 }); ``` -------------------------------- ### Getting the ID of a cell Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/manipulating_items.md Obtain the ID of a cell based on its index and type (column or row) using `getCellId`. You can also get the cell ID associated with a subheader using `getSubHeaderCellId`. ```APIDOC ## Getting the id of a cell ### Description You can get the id of the first cell of a column/row the cell belongs to. It can be done via the `getCellId` method of the cellManager object. You can also get the id of a cell the subheader belongs to by using the `getSubHeaderCellId` method. ### Method `cellManager.getCellId(index, type)` `cellManager.getSubHeaderCellId(subHeaderId)` ### Parameters #### `getCellId` Parameters - **index** (number) - Required - The index of the first cell of a row/column. - **type** (string) - Required - The type of the item: `"col" | "row"`. #### `getSubHeaderCellId` Parameters - **subHeaderId** (string) - Required - The id of the subheader of a swimlane. ### Request Example ```jsx // return the id of the first cell of the first row diagram.cellManager.getCellId(0, "row"); // returns 1 // return the id of the first cell of the third column diagram.cellManager.getCellId(2, "col"); // returns 3 // return the id of the cell the subheader belongs to diagram.cellManager.getSubHeaderCellId("s2"); // returns 4 ``` ``` -------------------------------- ### Initialize Diagram with Configuration Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/diagram/initialization.md Use this method to set initial configuration properties like scale when creating a new Diagram instance. ```jsx const diagram = new dhx.Diagram("diagram_container", { scale: 0.7, // other config options }); ``` -------------------------------- ### Org Chart Mode Example Data Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/shapes/configuration_properties.md Example data structure for DHTMLX Diagram in org chart mode, demonstrating parent-child relationships and specific item types like assistants and partners. ```jsx const data = [ { "id": "1", "text": "item 1", }, { "id": "2", "text": "item 2", "parent": "1", "dir": "vertical" }, { "id": "1.1", "text": "assistant for 1", "parent": "1", "assistant": true }, { "id": "1.2", "text": "partner for 1", "parent": "1", "partner": true } ]; ``` -------------------------------- ### Configuring Toolbar Items Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/toolbar/config/items_property.md This snippet demonstrates how to configure the toolbar items using an array of strings, specifying predefined service elements like 'file', 'spacer', and 'scale'. ```APIDOC ## Configuring items via strings The `items` property allows you to specify [**Service elements**](guides/diagram_editor/toolbar.md/#service-elements) as an array of strings: ```jsx items: [ "file", "edit", "view", "arrange", "spacer", "scale" ]; ``` The full list of service elements you can see [here](guides/diagram_editor/toolbar.md/#service-elements). ``` -------------------------------- ### Get Selected Item ID (From v6.0) Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/migration.md Replaces the deprecated `selection.getId()` with `selection.getIds().at(-1)` to get the last selected item's ID, or `selection.getItem().id` for the item object. Requires `select: true` option. ```jsx // a diagram must be created with the "select:true" option const diagram = new dhx.Diagram("diagram_container", { select: true }); diagram.data.parse(data); // returning the last selected element let id = diagram.selection.getIds().at(-1); id = diagram.selection.getItem().id; ``` -------------------------------- ### Get Selected Item by ID or Last Selected Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/selection/getitem_method.md Use getItem() to retrieve the object of the last selected item when called without arguments. Provide an object with an 'id' property to get a specific selected item. Ensure the diagram is initialized with the 'select: true' option. ```javascript const diagram = new dhx.Diagram("diagram_container", { select: true }); diagram.data.parse(data); console.log(diagram.selection.getIds()); // -> ["1", "2", "3"] // getting the last selected item const item = diagram.selection.getItem(); // -> {id: "3", text: "Technical Director", title: "Jerry Wagner"} // getting the selected item by id const item = diagram.selection.getItem({ id: "1" }); // -> {id: "1", text: "Chairman & CEO", title: "Henry Bennett"} // trying to get an item which is not in the selection list const item = diagram.selection.getItem({ id: "4" }); // -> returns undefined, since there is no item with the specified id in the selection list ``` -------------------------------- ### getId() Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/toolbar/methods/treecollection_methods.md Gets the unique identifier for a given item within the TreeCollection. ```APIDOC ## getId() ### Description Gets the ID of an item. ### Method TreeCollection.getId(item) ### Parameters - **item** (object | string) - The item object or its index. ### Returns - (string) - The ID of the item. ``` -------------------------------- ### getState() Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/toolbar/methods/toolbar_methods.md Gets the current values or states of controls within the toolbar. ```APIDOC ## getState() ### Description Gets current values/states of controls. ### Method `toolbar.getState(): object` ### Response #### Success Response (200) - **object** - An object containing the current state of toolbar controls. ### Request Example ```javascript const toolbarState = editor.toolbar.getState(); console.log(toolbarState); // Output: { "controlId": "currentValue" } ``` ``` -------------------------------- ### View Configuration Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editor/config/view_property.md Configure the visibility and appearance of the Toolbar, Shapebar, and Editbar. ```APIDOC ## view Property ### Description An object that configures Toolbar, Shapebar, and Editbar views of the Diagram Editor. ### Parameters - `toolbar` (optional, boolean | object) - Allows showing/hiding the Toolbar or configuring its appearance. Refer to the [Toolbar API](/api/diagram_editor/toolbar/api_overview/) for more details. - `shapebar` (optional, boolean | object) - Allows showing/hiding the Shapebar or configuring its appearance. Refer to the [Shapebar API](/api/diagram_editor/shapebar/api_overview/) for more details. - `editbar` (optional, boolean | object) - Allows showing/hiding the Editbar or configuring its appearance. Refer to the [Editbar API](/api/diagram_editor/editbar/api_overview/) for more details. ### Default config ```json { "toolbar": true, "shapebar": true, "editbar": true } ``` ### Example ```javascript const editor = new dhx.DiagramEditor("editor_container", { type: "default", view: { toolbar: { css: "toolbar_custom", data: ["file", "separator", "scale"] }, shapebar: { width: 400 }, editbar: false } // other configurations }); ``` ``` -------------------------------- ### Editbar CSS Property Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/config/css_property.md Optional. Applies a custom CSS class to the Editbar. This property is available starting from v6.0. ```APIDOC ## css ### Description Optional. Applies a custom CSS class to the Editbar. ### Usage ```jsx css?: string; ``` ### Example ```jsx const editor = new dhx.DiagramEditor("editor_container", { type: "org", view: { editbar: { css: "custom_css", show: true, width: 300, controls: {}, properties: {} } } }); ``` **Change log**: Added in v6.0 ``` -------------------------------- ### Navigate to App Directory Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/angular_integration.md Change the current directory to the newly created Angular project. ```bash cd my-angular-diagram-app ``` -------------------------------- ### copyStyles() Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/copymanager/methods/copystyles_method.md Copies styles of the specified element or the first element from the selection list. This method is available starting from v6.0. ```APIDOC ## copyStyles() ### Description Copies styles of the specified element or the first element from the selection list. ### Method Signature `copyStyles(id?: string | number): void;` ### Parameters #### id - `id` (string | number) - Optional. The id of an element selected for copying styles. ### Examples 1. **Copy styles of the first element from the selection list:** ```javascript const editor = new dhx.DiagramEditor("editor_container", { type: "default", }); // ... editor.model.copyStyles(); ``` 2. **Copy styles of a specified element:** ```javascript const editor = new dhx.DiagramEditor("editor_container", { type: "default", }); // ... editor.model.copyStyles("1"); ``` ### Change Log - Added in v6.0 ``` -------------------------------- ### Create Vue Project Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/vue_integration.md Use the official Vue project scaffolding tool to create a new Vue project. Ensure Node.js is installed before running this command. ```bash npm create vue@latest ``` -------------------------------- ### Import Diagram Editor (Trial Version) Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/angular_integration.md Import the Diagram Editor from the trial package. ```jsx import { DiagramEditor } from '@dhx/trial-diagram'; ``` -------------------------------- ### Assigning Set Value as Property Value Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/basic_controls/toggle.md Example of configuring a toggle control to set a specific value for a property when activated. ```APIDOC ## Assigning the set value as a value of the applied property ### Description This example shows how to configure a toggle control within `editbar.properties` to set a specific value to a property when the toggle is active, such as setting font style to 'italic'. ### Method Configuration within `dhx.DiagramEditor` constructor. ### Endpoint N/A (Configuration object) ### Parameters #### Request Body (Configuration) - `type`: "toggle" - Specifies the control type. - `key`: (string) - The property to modify (e.g., `"fontStyle"`). - `value`: (string) - The value to set when the toggle is active (e.g., `"italic"`). - `icon`: (string) - Icon for the toggle. ### Request Example ```jsx const editor= new dhx.DiagramEditor("editor_container", { type: "default", view: { editbar: { properties: { $shape: [ { type: "toggle", key: "fontStyle", value: "italic", icon: "dxi dxi-format-italic" } ] } } } }); ``` ``` -------------------------------- ### Initialize Diagram with Autoplacement Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram/autoplacement_property.md Demonstrates how to initialize a DHTMLX Diagram instance with custom autoplacement settings. This example configures the 'edges' mode and a specific graph padding. ```javascript const diagram = new dhx.Diagram("diagram_container", { autoplacement: { mode: "edges", graphPadding: 100 } }); diagram.data.parse(data); diagram.autoPlace(); ``` -------------------------------- ### Applying Boolean Value for Toggle Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/basic_controls/toggle.md Example of configuring a toggle control in the editbar properties to manage a boolean value, such as visibility. ```APIDOC ## Applying the boolean value for a toggle ### Description This example demonstrates how to configure a toggle control within the `editbar.properties` to manage a boolean property of a diagram item, like enabling or disabling visibility. ### Method Configuration within `dhx.DiagramEditor` constructor. ### Endpoint N/A (Configuration object) ### Parameters #### Request Body (Configuration) - `type`: "toggle" - Specifies the control type. - `key`: (Array) - The property path to toggle (e.g., `["header", "enable"]`). - `icon`: (string) - Icon for the 'on' state. - `offIcon`: (string) - Icon for the 'off' state. - `text`: (string) - Text label for the 'on' state. - `offText`: (string) - Text label for the 'off' state. ### Request Example ```jsx const editor = new dhx.DiagramEditor("editor_container", { type: "default", view: { editbar: { properties: { $group: [ { type: "toggle", key: ["header", "enable"], icon: "dxi dxi-eye", offIcon: "dxi dxi-eye-off", text: "Visible", offText: "Invisible" } ] } } } }); ``` ``` -------------------------------- ### Navigate to Project Directory Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/guides/integrations/svelte_integration.md Change the current directory to your newly created Svelte project. ```bash cd my-svelte-diagram-app ``` -------------------------------- ### Toggle Control Configuration Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/editbar/basic_controls/toggle.md Defines the structure and properties of a toggle control within the editbar. Use this for basic setup and customization. ```javascript { type: "toggle", key?: string | string[], hidden?: boolean, // false by default disabled?: boolean, // false by default full?: boolean, // false by default text?: string, icon?: string, offText?: string, offIcon?: string, value?: string | number, css?: string, width?: string | number | "content", // "content" by default height?: string | number | "content", // "content" by default padding?: string | number, // service properties and methods $on?: { [eventName: string]: function }, $handler?: function, $setValue?: function, $layout?: function } ``` -------------------------------- ### Initialize Default Toolbar Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/api/diagram_editor/toolbar/api_overview.md Use `toolbar: true` to display the default Toolbar. This is a quick way to enable basic toolbar functionality. ```jsx const editor = new dhx.DiagramEditor("editor_container", { type: "default", view: { toolbar: true // displaying the default Toolbar } }); ``` -------------------------------- ### Create a Medical Hierarchy Diagram Source: https://github.com/dhtmlx/docs-diagram/blob/master/docs/overview.md Example of using custom shapes to create a medical hierarchy diagram in org chart mode. ```javascript const diagram = new dhx.Diagram("#diagram", { type: "org", defaultShapeType: "custom" }); diagram.addShape("custom", { // ... custom shape configuration }); diagram.load("medical_data.json"); ```