Tag Archives: flowchart

Creating an Interactive Engineering Diagram App in JavaScript

Posted on by

In this post, we’ll walk through the process of building a web-based electrical diagram application. This tool allows users to create, modify, and save circuit and home appliance diagrams. We’ll use the.Diagramming for JavaScript, and its ability to support SVG images in modes, various arrow head shapes on links, save and load of flowcharts to/from various formats.

The final application will feature:

  • A diagram view that supports pan and zoom.
  • A palette of pre-defined SVG nodes representing various engineering components, separated into logical sections.
  • The ability to save the current diagram to a JSON file and load it back.
  • Real-time style customization for text, links, and more.
A circuit schema created with MindFusion Diagramming library for JavaScript

Continue reading →

Getting Started: Building Interactive JavaScript Diagrams with MindFusion

Posted on by

In this article we look at the steps required to build this minimal JavaScript diagramming application:

The application uses MindFusion JavaScript Diagram library and allows the user to create various flowchart shapes with drag and drop, customize their color and edit text. Users can create links and specify whether links have arrowheads. Once ready, they can save the current diagram and load it when needed.

Continue reading →

Find descendant nodes in MindFusion diagrams

Posted on by

This post demonstrates MindFusion.Diagramming API functionality that let you traverse connected diagram elements (following incident edges and adjacent nodes in graph-theory terminology). A diagram is treated as directed graph, where each node exposes incomingLinks and outgoingLinks collection properties, and respectively each link exposes origin and destination node properties. Thus the classic breadth-first search algorithm can be implemented like this for a diagram, with the callback parameter being invoked for each node, also reporting visit order and distance from initial node (as in length of shortest path in the graph):

Continue reading →

Save and Load Part of Diagram Data to/from JSON Files

Posted on by

In this blog post we will demonstrate how you can implement methods that save and load part of the information that a diagram renders into JSON format. The Diagram class has built-in toJson and fromJson methods. They serialize completely the diagram with every detail so you can restore it completely, exactly the way you see it. What we are going to do is write custom save and load methods that use only part of the information – namely the size and location of nodes and links as well as their text.

Continue reading →

One-way Links in Diagramming for JavaScript

Posted on by

In this blog post we demonstrate how you can use the JavaScript Diagram library to allow users to draw an org chart or one-way graph. By default, users are allowed to draw links between any two nodes and the count of links is unlimited. We will use event and properties, available in JS Diagram to allow users to:
– draw only one link between two nodes
– draw links only in one direction.

This behavior mirrors the hierarchy of an organization: in general , each employee, represented by a node, should have only one direct boss.


Continue reading →