JDElite Integration with Web Frameworks
When larger and more complex flowcharts are needed, you can simplify design with an integration of Web Frameworks. Some diagramming frameworks start with coding of the graphical artifacts. When used together with JDElite, the coded artifacts descriptions can be transferred to JDElite Flowchart Builder to visualize and to edit them, and eventually to modify the artifacts code accordingly.
JDElite Flowchart Builder consists of a flowchart generator (JDLCore) and a graphics engine, as well as plugins to support different Web diagramming frameworks. The plugins convert the users’ flowchart description's formats into the JDElite internal input format. Next the JDLCore generates the nodes layout and edge routing, creating a JSON file in a JDElite output format. This file has the complete layout information, including coordinates, and is displayed in the JDElite Flowchart editor for visual examination and further on-screen editing.
Compatibility with React Flow - a plugin example
The React Flow plugin uses the flowchart descriptive internal JSON format of React Flow (https://reactflow.dev/docs). In this example the input 'position' data is ignored, the plugin converts the remaining input data into the JDElite internal input format and feeds it to JDLCore. The result is a JSON file in the JDElite specific output format. It contains the generated layout of the nodes (with optimized node positions) and the routed links with all coordinates, along with references to the original elements in the input. The graphical information in this output can further help the developers in their work with the React Flow framework.
Take a look at a simple React Flow input and the corresponding JDElite output below:
React Flow input:
JDElite ouput:
The JDElite output flowchart:
.png)