Update the default shapes guide

docs/shapes/default_shapes.md

@@ -1,36 +1,47 @@
 ---
-sidebar_label: Default shapes
-title: Default Shapes
+sidebar_label: Basic sets of shapes
+title: Basic sets of shapes
 description: You can learn about the Default Shapes in the documentation of the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram.
 ---
 
-# Default shapes
+# Basic sets of shapes
 
-## Shapes overview
+The DHTMLX Diagram library provides you with sets of shapes types that you can use to build your diagram. Each mode of Diagram [default](#shapes-in-the-default-mode), [org chart](#shapes-in-the-org-chart-mode) and [mindmap](#shapes-in-the-mindmap-mode) has a *basic set* of shapes types. 
 
-The DHTMLX Diagram library provides you with a set of default types of shapes that you can use to build your diagram. The default shapes include:
+:::note
+The basic type of shapes is predefined for a particular Diagram mode. However, a shape of any type can be added into the diagram of any mode.
+:::
+
+## Shapes in the default mode
+
+In the default mode of Diagram, the basic set includes `flow chart` shapes. Use the name of the necessary shape as a value of the `type` attribute inside the shape object, while [preparing a data set for loading into the diagram](/guides/loading_data/#preparing-data-to-load).
+
+
+<img
+  src={require('../assets/flowshapes_types.png').default}
+  className="image_to_center"
+  alt="Alternative text"
+/>
 
-- a set of the flow chart shapes
+## Shapes in the org chart mode
 
-Tip: Use the name of the necessary shape as a value of the **type** attribute inside the shape object, while [preparing a data set for loading into the diagram](/guides/loading_data/#preparing-data-to-load).
+In the **org chart** mode of Diagram, the basic set includes two types of shapes: `"card"` and `"img-card"`. 
 
-- the `"card"` type that is the default type of shapes in the org chart mode of Diagram. Each shape has a text and a colored header line. Shapes located on the same level have headers of identical color.
+- each shape with the `"card"` type has a text and a colored header line. Shapes located on the same level have headers of identical color
 
 <iframe src="https://snippet.dhtmlx.com/5ign6fyy?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="650"></iframe>
 
-- the `"img-card"` type that can be used for adding shapes with images. Don't forget to provide images for cards via the **img** attribute of the shape object.
+- the `"img-card"` type can be used for adding shapes with images. Don't forget to provide images for cards via the `img` attribute of the shape object
 
-- the `"topic"` type that is the default type of shapes in the "mindmap" mode of Diagram. Each shape has a text and a colored border. The color of the outline depends on the level the shape belongs to.
+## Shapes in the mindmap mode
 
-<iframe src="https://snippet.dhtmlx.com/3igf1gd5?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="650"></iframe>
+In the **mindmap** mode of Diagram, the `"topic"` type of shapes is the basic one. Each shape has a text and a colored border. The color of the outline depends on the level the shape belongs to.
 
-:::note
-Any of the above shapes can be added into the diagram of any mode ("default", "org", or "mindmap" one).
-:::
+<iframe src="https://snippet.dhtmlx.com/3igf1gd5?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="650"></iframe>
 
 ## Setting the type of a shape
 
-To set the type of a shape, use the [type](/shapes/configuration_properties/) property inside the shape object while preparing a related JSON structure to load into the diagram:
+To set the type of a shape, use the [`type`](/shapes/configuration_properties/) property inside the shape object while preparing a related JSON structure to load into the diagram:
 
 ~~~jsx
 const data = [
@@ -43,12 +54,12 @@ const data = [
 ~~~
 
 :::note
-See [the full list of configuration properties of a shape object](/shapes/configuration_properties/). Do not add custom properties while creating data objects for default shapes.
+See [the full list of configuration properties of a shape object](/shapes/configuration_properties/). Do not add custom properties while creating data objects for shapes from basic sets. To add a custom property, you need to [create a custom shape](/shapes/custom_shape/).
 :::
 
 ### Setting the default shape type
 
-It is also possible to set the default type for all the shapes via the [](../api/diagram/defaultshapetype_property.md) attribute of the diagram config object:
+It is also possible to set the default type for all the shapes via the [`defaultShapeType`](../api/diagram/defaultshapetype_property.md) attribute of the diagram config object:
 
 ~~~jsx
 const diagram = new dhx.Diagram("diagram_container", {
@@ -58,4 +69,5 @@ const diagram = new dhx.Diagram("diagram_container", {
 diagram.data.parse(data);
 ~~~
 
-This value will be applied, if the configuration object of the shape doesn't contain the `type` property.
+This value will be applied if the configuration object of a shape doesn't contain the `type` property.
+

src/css/custom.css

@@ -210,3 +210,13 @@ span.token-line.theme-code-block-highlighted-line {
 p {
     line-height: 2;
 }
+
+/* center alignment of images */
+
+.image_to_center {
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+
+    border-radius: 3px;
+}