Webix Diagram Editor Review

Webix UI Library presented its Diagram Library widget not so long ago. It has become a convenient solution for building diagrams of any type and customizing links between the blocks. However, the developers from Webix do not stand still and they are ready with a Diagram Editor to make the process of creating diagrams even more fascinating.

Diagram Editor is a special interface for arranging blocks and links of diagrams. It allows users to conveniently change the shapes of blocks and links, move and delete them, set the space between blocks, view and apply the chosen parameters.

The Editor includes:

  • Toolbar
  • Shapes panel
  • Workspace
  • Settings panel

Toolbar is at the top. It contains the following controls that allow users to:

  • resetting the diagram to the initial parameters
  • “Undo” and “Redo” arrows to make one step back or forward in the recent activities
  • “Zoom” to increase or decrease the diagram in the workspace
  • setting the grid step of the workspace
  • switching between the setting and the display modes
  • automatic placement of the blocks in the most appropriate way
  • applying all the settings to the diagram

Shapes panel is on the left part of the Editor. You can choose here among different types of blocks. Shapes are distributed across several predefined groups, but you can also create custom ones.

Workspace is the central part of the Editor with the main magic happening. Depending on the mode, the Workspace may be shown either with a grid or without it. You can manually drag the selected blocks in the Workspace. With a click on any block, you can copy it, create a new link for it, delete it. Besides, you can move the selected block and resize it.

Settings panel allows users to change the parameters of the whole diagram or to configure individual settings for a particular block or link. With a click on the free space in the Workspace, the default settings will be shown in the Settings panel. To apply individual settings for a separate block or link, you can select the desired entity and the form will display its configurable options. Clicking on the link, you can define the style for it in the Settings panel.

When you click on a particular block of the diagram in the Workspace, additional settings for this block appear in the Settings panel. There you can select the color of the block, the font color. You can change the border style and the text parameters.

The same changes can be made with a particular link. Click on the link you wish in the Workspace to see its settings in the Settings panel.

Conclusion

Webix Diagram Editor is a tool that facilitates the process of creating diagrams significantly. It helps to meet the requirements of any challenging project. The Diagram Editor is flexible when it comes to configuration and customization so you can build a diagram of any complexity.

--

--

--

#JavaScript UI library for #cross-platform #web app development with 100+ #UI widgets and fully-featured #CSS / #HTML5 JavaScript controls. www.webix.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Importance of Math in C.S.

From Cars to Art to Code and Mushrooms

Understanding Ansible Playbook

knoldus-advt-sticker

How I Build Software

Functional Programming: A Paradigm

knoldus-advt-sticker

How I built my CDP with Airflow

10 Quick Linux Tail Command with Examples

Default-Tail-Command-Output

Four questions to ask yourself when you think you need an app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Webix

Webix

#JavaScript UI library for #cross-platform #web app development with 100+ #UI widgets and fully-featured #CSS / #HTML5 JavaScript controls. www.webix.com

More from Medium

Create and publish a VS Code theme.Step by step.

New release of Visual Studio 2022

Setup Tailwind on a Blazor WASM project

Tabbed Master-Detail Form