How to create a data flow diagram in JavaScript

dhtmlxDiagram is a chart library that can generate any chart you need with just a few lines of code. Visualize complex data in a neat hierarchical structure with automatic layout and real-time graph editor. JavaScript dhtmlxDiagram allows you to add beautiful interactive diagrams, charts and graphs to web applications. With this lightweight and fast component, your data will be presented in a clear and intuitive way.

Click to download the trial version of dhtmlxDiagram

Have you ever tried to describe the workflow or business process of a project in natural language? Your productivity is likely to be low, because such tasks require special tools, such as JavaScript data flow diagrams. This is another useful chart that can be generated with DHTMLX charts. Interestingly, it can be done without writing any code! Learn all the details in this article.

What is a data flow diagram

Data flow diagram (often abbreviated as DFD) is a popular data visualization tool for structured analysis. This type of diagram helps to clearly present the conversion process within the system, the collection of data or physical materials processed by a given system, and the flow of information or material between the process, repository, and the outside world.

DFD can have multiple decomposition levels aimed at describing some complex processes in the system. These levels range from basic naming context diagrams (providing only one key process to provide an overall view of the data flow) to more complex structures (marked with numbers starting from 0 (low-level DFD), supplemented by multiple sub-processes) different. This method is very suitable for transaction processing systems and function-intensive applications.

Several symbols define special geometric symbols used to display data flow diagram elements. The main visual difference between all symbols lies in the presentation of the DFD process. For this reason, the two most popular symbol types, Yourdon & Coad and Gane & Sarson, use circles and rounded rectangles, respectively.

Now, let us consider the four main components of any JavaScript data flow diagram and some rules that should be considered when constructing this chart type.

External entity
Insert picture description here

It is a graph element (also called a terminator) that is used to introduce data into the system or obtain processed data from it. This component is not part of the system itself, it reveals how the system communicates with the outside world. Entities can be represented by various objects, such as people, external systems, or organizations. Unprocessed information cannot be directly exchanged between entities, nor can it be received from the system by any entity. Entities are represented by rectangles and named after nouns.
deal with
Insert picture description here

Any data changes during the information flow will happen through the process. It is the most compelling DFD parameter, it receives incoming data and uses specific operations (calculation, sorting, etc.) to generate output. The graph can include one or more processes, each of which processes data in its own way. Without at least one input point and one output point, the DFD process will not exist (the same rules apply to data storage). Processes interact through data storage, not through direct flow between processes. Depending on the type of symbol, you can use a circle or a rounded rectangle to describe this component. Usually, the enumerated "verb + noun" combination is used to mark the DFD process to explain what happened to the input data.
data storage
Insert picture description here

Data storage refers to a persistent data store in the system that can be retrieved or generated by a given process. Displayed as an open rectangle or two parallel lines, the data storage area does not run alone, but always interacts with related processes. Without modification, new data cannot appear in the data store or be moved to an external entity or other data store.

data flow
Insert picture description here

It is a directed arrow that indicates the direction of data movement between other elements of the graph. Each arrow is explained by text, explaining the data being sent/received.
JavaScript data flow diagrams make it easier to analyze requirements and model systems of various types and levels of complexity, and help improve efficiency. DFD is better than other tools in providing a global view of how data moves through the system. Therefore, this useful chart is often used by professionals to apply to different fields, such as:
software development,
business analysis,
project management modeling

Example of JavaScript data flow chart written in DHTMLX

Insert picture description here

Our example uses Yourdon & Coad mark type to demonstrate the flow of information and physical materials in the transportation company's spare parts tracking system. The architecture of level 0 data flow diagram includes the following components:

External entities (machines, warehouse personnel, suppliers) show how external parties interact with the system. The mechanic sends a spare part request and receives a spare part package. You can use the inventory and ordering information provided by the warehouse staff and the seller to satisfy this request. The entity is represented by a light pink rectangle.
Clearly describe the process of providing a complete set of spare parts. They are shown with enumerated green circles.
Data storage is used to save/retrieve information about parts requests and parts library inventory. These elements are displayed in the form of open rectangles.
The data flow specifies the transmission path of the information in the system through the directed blue line with clarification.

How to use DHTMLX to build a JavaScript data flow chart

In addition to the traditional coding methods described in this guide, DHTMLX Diagram also enables you to use Diagram Editor to quickly create JavaScript data flow diagrams.

This feature-rich tool can be used to construct graphs without coding. It provides a set of predefined graphic shapes, connectors and editing options. If you plan to use JavaScript and symbol types other than Yourdon & Coad to build a data flow diagram, you can easily enrich the diagram editor with custom shapes. The editor can be smoothly integrated into any web application, and can be adjusted through a flexible API.
The user-friendly interface of the chart editor helps to minimize its learning curve. Use the import option in the toolbar to convert the JSON file with DFD

Insert picture description here

Upload to DHTMLX chart editor and use our JavaScript data flow chart example

Now, let's take a look at the key features of DHTMLX diagrams, which will help you build your own JavaScript data flow diagram.
Arrange the structure of the data flow diagram
Insert picture description here

Using the left panel, you can add all the built-in shapes needed to create a data flow diagram. Just drag the desired shape from the displayed list, place it in the grid area, and use the rotation function to position it correctly. Since you need multiple instances of each DFD shape, you can create a copy with the help of the corresponding option that appears when you click the shape. This feature is especially useful if you don’t want to waste time adjusting each shape individually. To link the shapes to each other, a connector should be selected, as shown in the image above.

Edit the nodes and connectors of the data flow diagram
Insert picture description here

If you want to make the chart look unique, the right panel of the editor provides many editing options. For example, you can more precisely define the size and position of each shape, apply stroke modifications to shapes and connectors, change colors, and take advantage of multiple text editing functions.

Exporting and importing JavaScript data flow
diagrams Once the diagram is ready, you can share it with others through the export function, which allows converting JavaScript data flow diagrams into PDF, PNG and JSON formats. And, if you find new ideas on how to make the completed diagram better, you can import the diagram saved in JSON format into the editor with just a few clicks and make the necessary changes.

As you can see, the graph editor is a simple but effective tool that can easily generate beautiful data flow diagrams for your projects.

Final words

In this guide, we reviewed the main features of data flow diagrams in JavaScript and learned how to create it using DHTMLX.

In summary, DHTMLX JavaScript library can extend the data visualization function in any Web project. It has a rich and intuitive API, can draw diagrams through coding, and provides a Diagram Editor tool to complete this work without programming.

APS helps improve the production efficiency of enterprises, truly realize the visual presentation and control of production plans, quickly and effectively respond to production plans in different scenarios, improve on-time delivery capabilities, and increase production capacity and resource utilization.

If you want to purchase a genuine dhtmlxDiagram license, or understand the Huidu APS system, please click [ Consult Online Customer Service ]

Guess you like

Origin blog.csdn.net/RoffeyYang/article/details/112172950