The Diagram Editor is a special interface for placing diagram blocks and links. It allows users to conveniently change the shapes of blocks and links, move and delete them, set the distance between blocks, and view and apply selected parameters.
The editor includes:
- Toolbar (toolbar).
- Shape toolbar
- Workspace
- Settings panel
The toolbar is located at the top. It contains controls that allow users to:
- reset diagrams to their original settings
- take one step back or forward in the last action with “Undo” and “Redo” arrows
- magnify or reduce the diagram in the workspace using “Zoom”
- adjust the grid spacing of the workspace
- switch between the settings and display modes
- automatically arrange the blocks in the most suitable way
- apply all settings to the diagram
The Shapes panel is located in the left part of the editor. Here you can select one of the different types of blocks. The shapes are divided into several groups, but you can also create your own.
The workspace is the central part of the editor, where all the magic happens. Depending on the mode, the workspace can be displayed with or without a grid. You can manually drag and drop selected blocks onto the workspace. By clicking on any block, you can copy it, create a new link for it, or delete it. In addition, you can move the selected block and resize it.
Settings panel allows users to change the parameters of the whole diagram or configure individual parameters for a particular block or link. When you click on a free space in the workspace, the settings panel will show the default settings. To apply individual settings for an individual block or link, you can select the desired object, and the form will show its customizable parameters. By clicking on a link, you can define a style for it in the Settings panel.
When you click on a particular diagram block in the workspace, additional settings for that block are displayed in the Settings panel. There you can select the color of the block, the color of the font. You can change the border style and text options.
The same changes can be made for the selected relation. Click on the desired link in the workspace to view its settings.
Conclusion
Webix’s Diagram Editor is a tool that makes creating diagrams much easier. It helps meet the requirements of any complex project. The Diagram Editor is very flexible in its settings, so you can build a diagram of any complexity.
