diff --git a/js/docEnums.js b/js/docEnums.js
index 8e787e61eff6..d7e9e473daa0 100644
--- a/js/docEnums.js
+++ b/js/docEnums.js
@@ -1031,3 +1031,8 @@
  * @typedef {string} Enums.DiagramAutoLayout
  * @enum {'tree'|'sugiyama'}
  */
+
+/**
+ * @typedef {string} Enums.DiagramConnectionPointSide
+ * @enum {'north'|'east'|'south'|'west'}
+ */
diff --git a/js/ui/diagram/ui.diagram.js b/js/ui/diagram/ui.diagram.js
index ecb10bf3a057..74d65d081e1f 100644
--- a/js/ui/diagram/ui.diagram.js
+++ b/js/ui/diagram/ui.diagram.js
@@ -29,6 +29,8 @@ const DIAGRAM_ITEMS_FIELD = "items";
 const DIAGRAM_FROM_FIELD = "from";
 const DIAGRAM_TO_FIELD = "to";
 
+const DIAGRAM_CONNECTION_POINT_SIDES = ["north", "east", "south", "west"];
+
 class Diagram extends Widget {
     _init() {
         this._updateDiagramLockCount = 0;
@@ -372,9 +374,21 @@ class Diagram extends Widget {
                         id: s.id,
                         title: s.title,
                         svgUrl: s.svgUrl,
+                        svgLeft: s.svgLeft,
+                        svgTop: s.svgTop,
+                        svgWidth: s.svgWidth,
+                        svgHeight: s.svgHeight,
                         defaultWidth: s.defaultWidth,
                         defaultHeight: s.defaultHeight,
+                        defaultText: s.defaultText,
                         allowHasText: s.allowHasText,
+                        textLeft: s.textLeft,
+                        textTop: s.textTop,
+                        textWidth: s.textWidth,
+                        textHeight: s.textHeight,
+                        connectionPoints: s.connectionPoints && s.connectionPoints.map(pt => {
+                            return { 'x': pt.x, 'y': pt.y, 'side': DIAGRAM_CONNECTION_POINT_SIDES.indexOf(pt.side) };
+                        })
                     };
                 }
             ));
@@ -623,6 +637,22 @@ class Diagram extends Widget {
                 * @type String
                 */
                 /**
+                * @name dxDiagramOptions.customShapes.svgLeft
+                * @type Number
+                */
+                /**
+                * @name dxDiagramOptions.customShapes.svgTop
+                * @type Number
+                */
+                /**
+                * @name dxDiagramOptions.customShapes.svgWidth
+                * @type Number
+                */
+                /**
+                * @name dxDiagramOptions.customShapes.svgHeight
+                * @type Number
+                */
+                /**
                 * @name dxDiagramOptions.customShapes.defaultWidth
                 * @type Number
                 */
@@ -631,9 +661,45 @@ class Diagram extends Widget {
                 * @type Number
                 */
                 /**
+                * @name dxDiagramOptions.customShapes.defaultText
+                * @type String
+                */
+                /**
                 * @name dxDiagramOptions.customShapes.allowHasText
                 * @type Boolean
                 */
+                /**
+                * @name dxDiagramOptions.customShapes.textLeft
+                * @type Number
+                */
+                /**
+                * @name dxDiagramOptions.customShapes.textTop
+                * @type Number
+                */
+                /**
+                * @name dxDiagramOptions.customShapes.textWidth
+                * @type Number
+                */
+                /**
+                * @name dxDiagramOptions.customShapes.textHeight
+                * @type Number
+                */
+                /**
+                * @name dxDiagramOptions.customShapes.connectionPoints
+                * @type Array<Object>
+                */
+                /**
+                * @name dxDiagramOptions.customShapes.connectionPoints.x
+                * @type Number
+                */
+                /**
+                * @name dxDiagramOptions.customShapes.connectionPoints.y
+                * @type Number
+                */
+                /**
+                * @name dxDiagramOptions.customShapes.connectionPoints.side
+                * @type Enums.DiagramConnectionPointSide
+                */
             ],
             /**
              * @name dxDiagramOptions.export
diff --git a/js/ui/speed_dial_action/speed_dial_action.js b/js/ui/speed_dial_action/speed_dial_action.js
index 75db5c5c6464..fc2cbf1c6318 100644
--- a/js/ui/speed_dial_action/speed_dial_action.js
+++ b/js/ui/speed_dial_action/speed_dial_action.js
@@ -4,6 +4,7 @@ import Guid from "../../core/guid";
 import readyCallbacks from "../../core/utils/ready_callbacks";
 import Widget from "../widget/ui.widget";
 import { initAction, disposeAction } from "./speed_dial_main_item";
+import { getSwatchContainer } from "../widget/swatch_container";
 
 const ready = readyCallbacks.add;
 
@@ -103,7 +104,11 @@ const SpeedDialAction = Widget.inherit({
     },
 
     _render() {
-        ready(() => initAction(this));
+        if(!getSwatchContainer(this.$element())) {
+            ready(() => initAction(this));
+        } else {
+            initAction(this);
+        }
     },
 
     _dispose() {
diff --git a/package.json b/package.json
index bc79897346a4..39887c8dc6d3 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
   },
   "license": "SEE LICENSE IN README.md",
   "dependencies": {
-    "devexpress-diagram": "0.0.25",
+    "devexpress-diagram": "0.0.26",
     "jszip": "^2.0.0 || ^3.0.0",
     "quill": "^1.3.6",
     "showdown": "^1.8.6",
diff --git a/ts/dx.all.d.ts b/ts/dx.all.d.ts
index 4a9fa3d2b3dc..ab9544616456 100644
--- a/ts/dx.all.d.ts
+++ b/ts/dx.all.d.ts
@@ -1991,7 +1991,7 @@ declare module DevExpress.ui {
     /** @name dxDiagram.Options */
     export interface dxDiagramOptions extends WidgetOptions<dxDiagram> {
         /** @name dxDiagram.Options.customShapes */
-        customShapes?: Array<{ allowHasText?: boolean, defaultHeight?: number, defaultWidth?: number, id?: number, svgUrl?: string, title?: string }>;
+        customShapes?: Array<{ allowHasText?: boolean, connectionPoints?: Array<{ side?: 'north' | 'east' | 'south' | 'west', x?: number, y?: number }>, defaultHeight?: number, defaultText?: string, defaultWidth?: number, id?: number, svgHeight?: number, svgLeft?: number, svgTop?: number, svgUrl?: string, svgWidth?: number, textHeight?: number, textLeft?: number, textTop?: number, textWidth?: number, title?: string }>;
         /** @name dxDiagram.Options.edges */
         edges?: { dataSource?: Array<any> | DevExpress.data.DataSource | DevExpress.data.DataSourceOptions, fromExpr?: string | ((data: any) => any), keyExpr?: string | ((data: any) => any), toExpr?: string | ((data: any) => any) };
         /** @name dxDiagram.Options.export */