Skip to content

Commit 8e0d131

Browse files
author
Serhii Pylypchuk
committed
[update] the Overview page optimisation to load faster
1 parent 76ac505 commit 8e0d131

4 files changed

Lines changed: 561 additions & 541 deletions

File tree

‎docs/editor_overview.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
sidebar_label: Diagram Editor overview
3+
title: Editor Overview
4+
description: You can have an overview of DHTMLX JavaScript Diagram library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram.
5+
---
6+
7+
# DHTMLX Diagram Editor overview
8+
9+
The DHTMLX Diagram component provides you with Editor that allows you to try and apply your designer skills in building neat and nice-looking diagrams.
10+
11+
### Editor in the default mode
12+
13+
The interface of the editor initialized in the default mode consists of four functional parts: toolbar, left panel, grid area, and right panel.
14+
15+
To build a diagram, you need either to drag the necessary items from the left panel or create a copy of the items via the per-item toolbar. You can adjust the attributes of the items via sidebar options of the right panel.
16+
17+
| [Diagram. Default mode. Wide flowchart](https://snippet.dhtmlx.com/4d4k3o8p) |
18+
| ---------------------------------------------------------------------------- |
19+
| ![](assets/default_editor.gif) |
20+
21+
If you need to edit a custom shape you may customize the left panel and configure the right panel according to the attributes of your shape.
22+
23+
<iframe src="https://snippet.dhtmlx.com/2z0a18oz?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
24+
25+
### Editor in the org chart mode
26+
27+
The interface of the editor initialized in the org chart mode consists of three parts: toolbar, grid area, and right panel. Note, that the editor does not have the left panel.
28+
29+
To build a diagram in the org chart mode of the editor, you need to select a shape and add a new child for it. You can also add assistant or partner items for a parent shape of any level. The assistant or partner items can't be parent items. The connection between parent shape and its partner is always horizontal. Also, the connections between parent shape and all its children become horizontal when you add the partner item for a parent, even if the connections were vertical before.
30+
31+
The shapes are draggable from one parent item to another. The moved item is dragged with all its child items.
32+
33+
You can adjust the attributes of the shapes via the available sidebar options of the right panel.
34+
35+
| [Diagram editor. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/og4qm3ja) |
36+
| ------------------------------------------------------------------------------------------- |
37+
| ![](assets/orgchart_editor_draggable.gif) |
38+
39+
| [Diagram editor. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/og4qm3ja) |
40+
| ------------------------------------------------------------------------------------------- |
41+
| ![](assets/orgchart_editor_draggable_assistant.gif) |
42+
43+
| [Diagram editor. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/og4qm3ja) |
44+
| ------------------------------------------------------------------------------------------- |
45+
| ![](assets/orgchart_editor_draggable_partner.gif) |
46+
47+
In the example below, you can notice that a set of sidebar options for editing the attributes of the shape with an image differs from the sidebar options for editing a simple card.
48+
49+
<iframe src="https://snippet.dhtmlx.com/vghuunmd?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
50+
51+
If you've added a custom shape to the editor in the org chart mode, you can configure the right panel to be able to edit custom properties of the shape.
52+
53+
### Editor in the mindmap mode
54+
55+
The interface of the editor initialized in the mindmap mode consists of three parts: toolbar, grid area, and right panel. Note, that the editor does not have the left panel.
56+
57+
To build a diagram in the mindmap mode of the editor, you need to select a shape and add a new child for it. The shapes are draggable from one parent item to another. The moved item is dragged with all its child items.
58+
59+
You can adjust the attributes of the shapes via the available sidebar options of the right panel.
60+
61+
| [Diagram editor. Mindmap mode. Emotions mind map](https://snippet.dhtmlx.com/lo1vm0e8) |
62+
| -------------------------------------------------------------------------------------- |
63+
| ![](assets/mindmap_editor_draggable.gif) |
64+
65+
If you've added a custom shape to the editor in the org chart mode, you can configure the right panel to be able to edit custom properties of the shape.
66+
67+
## Shape search
68+
69+
DHTMLX Diagram provides you with a set of API that you can apply in order to make working with a Diagram more convenient.
70+
For example, you can implement a feature of searching a shape on request that helps you to simplify work with large diagrams.
71+
72+
<iframe src="https://snippet.dhtmlx.com/d7kvzq4r?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>
73+
74+
## Diagram scale
75+
76+
You can apply the zoom template to your diagram to be able to change its appearance via zooming the diagram in or out. Besides, you can make it possible to user to get the detailed information on the selected shape.
77+
78+
<iframe src="https://snippet.dhtmlx.com/09o8t3o2?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>
79+
80+
## What's next
81+
82+
That's all. Now you can start working with charts or keep exploring the inner world of JavaScript Diagram and Diagram Editor.

‎docs/overview.md‎

Lines changed: 3 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ slug: /
55
description: You can have an overview of DHTMLX JavaScript Diagram library in the documentation. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram.
66
---
77

8-
# Diagram overview
8+
# DHTMLX Diagram overview
99

1010
DHTMLX Diagram is a client-side chart component that allows you to display relations between some objects, concepts or living beings in a visual form:
1111
as a scheme, chart, organizational chart, mind map, etc. The diagram makes it easier to present tangled and bulky information in a simple and accessible way.
@@ -107,82 +107,12 @@ The mindmap mode is used to represent a core topic or idea surrounded by the bra
107107
| ![](assets/mindmap_emotions.png) |
108108

109109
The shapes are connected by curved lines and arranged around a central shape of the diagram.
110-
111110
### Custom shapes
112111

113112
An example of adding a custom template into the mindmap mode of the diagram to create a site map:
114113

115114
<iframe src="https://snippet.dhtmlx.com/do1jwmw1?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
116115

117-
## Diagram Editor
118-
119-
The DHTMLX Diagram component provides you with Editor that allows you to try and apply your designer skills in building neat and nice-looking diagrams.
120-
121-
### Editor in the default mode
122-
123-
The interface of the editor initialized in the default mode consists of four functional parts: toolbar, left panel, grid area, and right panel.
124-
125-
To build a diagram, you need either to drag the necessary items from the left panel or create a copy of the items via the per-item toolbar. You can adjust the attributes of the items via sidebar options of the right panel.
126-
127-
| [Diagram. Default mode. Wide flowchart](https://snippet.dhtmlx.com/4d4k3o8p) |
128-
| ---------------------------------------------------------------------------- |
129-
| ![](assets/default_editor.gif) |
130-
131-
If you need to edit a custom shape you may customize the left panel and configure the right panel according to the attributes of your shape.
132-
133-
<iframe src="https://snippet.dhtmlx.com/2z0a18oz?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
134-
135-
### Editor in the org chart mode
136-
137-
The interface of the editor initialized in the org chart mode consists of three parts: toolbar, grid area, and right panel. Note, that the editor does not have the left panel.
138-
139-
To build a diagram in the org chart mode of the editor, you need to select a shape and add a new child for it. You can also add assistant or partner items for a parent shape of any level. The assistant or partner items can't be parent items. The connection between parent shape and its partner is always horizontal. Also, the connections between parent shape and all its children become horizontal when you add the partner item for a parent, even if the connections were vertical before.
140-
141-
The shapes are draggable from one parent item to another. The moved item is dragged with all its child items.
142-
143-
You can adjust the attributes of the shapes via the available sidebar options of the right panel.
144-
145-
| [Diagram editor. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/og4qm3ja) |
146-
| ------------------------------------------------------------------------------------------- |
147-
| ![](assets/orgchart_editor_draggable.gif) |
148-
149-
| [Diagram editor. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/og4qm3ja) |
150-
| ------------------------------------------------------------------------------------------- |
151-
| ![](assets/orgchart_editor_draggable_assistant.gif) |
152-
153-
| [Diagram editor. Org chart mode. Basic initialization](https://snippet.dhtmlx.com/og4qm3ja) |
154-
| ------------------------------------------------------------------------------------------- |
155-
| ![](assets/orgchart_editor_draggable_partner.gif) |
156-
157-
In the example below, you can notice that a set of sidebar options for editing the attributes of the shape with an image differs from the sidebar options for editing a simple card.
158-
159-
<iframe src="https://snippet.dhtmlx.com/vghuunmd?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="600"></iframe>
160-
161-
If you've added a custom shape to the editor in the org chart mode, you can configure the right panel to be able to edit custom properties of the shape.
162-
163-
### Editor in the mindmap mode
164-
165-
The interface of the editor initialized in the mindmap mode consists of three parts: toolbar, grid area, and right panel. Note, that the editor does not have the left panel.
166-
167-
To build a diagram in the mindmap mode of the editor, you need to select a shape and add a new child for it. The shapes are draggable from one parent item to another. The moved item is dragged with all its child items.
168-
169-
You can adjust the attributes of the shapes via the available sidebar options of the right panel.
170-
171-
| [Diagram editor. Mindmap mode. Emotions mind map](https://snippet.dhtmlx.com/lo1vm0e8) |
172-
| -------------------------------------------------------------------------------------- |
173-
| ![](assets/mindmap_editor_draggable.gif) |
174-
175-
If you've added a custom shape to the editor in the org chart mode, you can configure the right panel to be able to edit custom properties of the shape.
176-
177-
## Shape search
178-
179-
DHTMLX Diagram provides you with a set of API that you can apply in order to make working with a Diagram more convenient.
180-
For example, you can implement a feature of searching a shape on request that helps you to simplify work with large diagrams.
181-
182-
<iframe src="https://snippet.dhtmlx.com/d7kvzq4r?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>
183-
184-
## Diagram scale
185-
186-
You can apply the zoom template to your diagram to be able to change its appearance via zooming the diagram in or out. Besides, you can make it possible to user to get the detailed information on the selected shape.
116+
## What's next
187117

188-
<iframe src="https://snippet.dhtmlx.com/09o8t3o2?mode=result" frameborder="0" class="snippet_iframe" width="100%" height="500"></iframe>
118+
Now you can learn about using DHTMLX Diagram Editor in your application. Follow the directions of the [Editor overview](editor_overview.md) to get more about this tool.

‎docusaurus.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ module.exports = {
180180
darkTheme: require('prism-react-renderer/themes/dracula'),
181181
},
182182
navbar: {
183-
title: 'Diagram Documentation',
183+
title: 'JavaScript Diagram Documentation',
184184
logo: {
185185
alt: 'DHTMLX Diagram Documentation',
186186
src: 'img/dhtmlx_logo.svg',

0 commit comments

Comments
 (0)