{"id":3120,"date":"2026-01-18T12:04:27","date_gmt":"2026-01-18T12:04:27","guid":{"rendered":"https:\/\/mindfusion.dev\/blog\/?p=3120"},"modified":"2026-01-18T12:25:47","modified_gmt":"2026-01-18T12:25:47","slug":"getting-started-building-interactive-javascript-diagrams-with-mindfusion","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/getting-started-building-interactive-javascript-diagrams-with-mindfusion\/","title":{"rendered":"Getting Started: Building Interactive JavaScript Diagrams with MindFusion"},"content":{"rendered":"\n

In this article we look at the steps required to build this minimal JavaScript diagramming application:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

The application uses MindFusion JavaScript Diagram library<\/a> 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.<\/p>\n\n\n\n

I. Setup of the Initial Project<\/h2>\n\n\n\n

We save precious time by starting with a ready project: MindFusion’s starter project for JS Diagram for vanilla JavaScript. You can find the link to the GitHub page of the project from the official product page for the JavaScript diagram library: https:\/\/mindfusion.dev\/javascript-diagram.html.<\/a><\/p>\n\n\n\n

The URL to clone the GitHub sample project in pure JavaScript is https:\/\/github.com\/MindFusionComponents\/diagram-starter-vanilla<\/a>.<\/p>\n\n\n\n

We open a terminal and clone the project <\/p>\n\n\n\n

git clone https:\/\/github.com\/MindFusionComponents\/diagram-starter-vanilla\ncd diagram-starter-vanilla\nnpm install\nnpm start\n<\/pre>\n\n\n\n
After that you should be able to see the starter project live:
\n<\/p>\n\n\n\n
The initial app renders the diagram at the main portion of the screen together with the Overview and Palette controls to the left and the Zoom control to the right. At the top right corner you can see three buttons – for a new diagram, save and load. <\/p>\n\n\n\n
Let’s take a look at the server first. The server code for the app is in server.js and is very simple:<\/p>\n\n\n\n
const app = express();\nconst port = 3000;\n\napp.use(express.static(__dirname));\n\nreload(app).then(function () {\n  app.listen(port, function () {\n   console.log(`Server listening at http:\/\/localhost:${port}`);\n  })\n}).catch(function (err) {\n  console.error('Reload could not start, could not start server\/sample app', err)\n})\n\n<\/pre>\n\n\n\n
We use Express as a web server and initialize it on port 3000. There’s nothing special about the way we create and run the server.<\/p>\n\n\n\n
Now – to the diagram initialization. The Diagram needs a Canvas element to draw itself onto and this canvas determines where it is going to show on the web page. The web page for our application is index.html and there we specify a Canvas element with an ID:<\/p>\n\n\n\n
<div style=\"height: 200px; border-bottom: 1px solid #e2e4e7; background-color: #c0c0c0;\">\n\t<canvas id=\"overview\" width=\"200\" height=\"200\">\n\t<\/canvas>\n<\/div>\n<\/pre>\n\n\n\n
The other components of the diagram – Ruler<\/a>, Palette<\/a>, Overview<\/a>, Zoom<\/a> control – require a DIV element or a Canvas. We arrange them as needed and give each element an ID, which we will use later on to initialize the required object like this:<\/p>\n\n\n\n
\/\/ create a DiagramView component that wraps the \"diagram\" canvas\nvar diagramView = DiagramView.create(document.getElementById(\"diagram\"));\ndiagram = diagramView.diagram; \n.....\n.....\n\/\/ create an Overview component that displays scaled-down version of the diagram\nvar overview = MindFusion.Diagramming.Overview.create(document.getElementById(\"overview\"));\noverview.diagramView = diagramView;\noverview.backColor = \"#eee\";\n<\/pre>\n\n\n\n
The Palette component can show categories with nodes and links. The shapes and links are instances of the DiagramNode<\/a> and DiagramLink<\/a> classes. Node shapes can be assigned with their id like this:<\/p>\n\n\n\n
palette.addCategory(\"Flowchart Shapes\");\n\tvar shapes = [\"Start\", \"Input\", \"Process\", \"Decision\"]\n\tfor (var i = 0; i < shapes.length; ++i) {\n\t\tvar node = new MindFusion.Diagramming.ShapeNode();\n\t\tnode.shape = shapes[i];\n\t\tnode.style = shapeNodeStyle;\n\t\tpalette.addItem(node, \"Flowchart Shapes\", shapes[i]);\n\t}\n<\/pre>\n\n\n\n
You can check the available shapes on the “Predefined Node Shapes<\/a>” page in the online documentation for the JavaScript diagram library at: https:\/\/mindfusion.dev\/docs\/javascript\/diagramming\/index.htm<\/a><\/p>\n\n\n\n
Save and load for the diagram is done with the toJson<\/a> and fromJson<\/a> methods. It is important to note that these methods return a JSON string and need a JSON string. So, our application needs to handle save of the string once the Save button is pressed. This is done in two ways, depending on whether the browser of the user supports the file API:<\/p>\n\n\n\n
async function onSaveClick()\n{\n\ttry\n\t{\n\t\t\/\/ in this example we store diagram JSON files on local file system;\n\t\t\/\/ alternatively you could send JSON to server-side using fetch API, e.g.\n\t\t\/\/ fetch('api_url', { method: 'POST', ... }\n\t\tconst json = diagram.toJson();\n\n\t\t\/\/ file system API is not fully supported in some browsers yet\n\t\tif (window.showSaveFilePicker)\n\t\t{\n\t\t\tif (!window.isSecureContext)\n\t\t\t{\n\t\t\t\talert(insecureContextMessage);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\n\t\t\tconst handle = await window.showSaveFilePicker(\n\t\t\t{\n\t\t\t\tstartIn: 'documents',\n\t\t\t\t\tsuggestedName: 'diagram.json',\n\t\t\t\t\ttypes: [{\n\t\t\t\t\t\tdescription: 'JSON Files',\n\t\t\t\t\t\taccept: {\n\t\t\t\t\t\t\t'application\/json': ['.json'],\n\t\t\t\t\t\t},\n\t\t\t\t\t}],\n\t\t\t});\n\t\t\tconst writable = await handle.createWritable();\n\t\t\tawait writable.write(json);\n\t\t\tawait writable.close();\n\t\t}\n\t\telse\n\t\t{\n\t\t\t\/\/ work-around for browsers that do not support file system\n\t\t\tconst blob = new Blob([json], { type: 'application\/json' });\n\t\t\tconst url = URL.createObjectURL(blob);\n\t\t\tconst a = document.createElement('a');\n\t\t\ta.href = url;\n\t\t\ta.download = 'diagram.json';\n\t\t\tdocument.body.appendChild(a);\n\t\t\ta.click();\n\t\t\tdocument.body.removeChild(a);\n\t\t\tURL.revokeObjectURL(url);\n\t\t}\n\t}\n\tcatch (err)\n\t{\n\t\tconsole.error(err.name, err.message);\n\t}\n}\n<\/pre>\n\n\n\n
As you can see, the JSON string is saved in a file called diagram.json If the browser does not support the modern file API, we create a temp link in the document and simulate a click on it that will download the file. Load of the JSON file is similar. By load you need to remember that you have to read the contents of the JSON file and assign it to the diagram.fromJson<\/a> method. NOTE: you should not parse the JSON string beforehand.<\/p>\n\n\n\n
II. Styling Nodes and Links<\/h2>\n\n\n\n
We have edited the HTML for the web page to include the new UI controls that allow the user to change the color of the diagram elements. They are <input> elements of type ‘color’: we use the browsers built-in color pickers that render by default with color input elements. <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Then we use standard event handling for the change event to get the newly selected color and assign it to a global variable: <\/p>\n\n\n\n
\/\/ New global variables for default styles\nvar defaultNodeBrushColor = '#e0e9e9';\n\n..............\n..............\n..............\n\n\/\/ Get style control elements\nconst nodeColorPicker = document.getElementById('nodeColorPicker');\n\n..............\n..............\n..............\n\n\/\/ Event listeners for style controls\nnodeColorPicker.addEventListener('change', (event) => {\n\t\t\n\tdefaultNodeBrushColor = event.target.value;\n\t\t\n\tdiagram.selection.nodes.forEach(node => {\n\tnode.brush = defaultNodeBrushColor;\t\t\t\n     });\n});\n<\/pre>\n\n\n\n
As you can see, all selected nodes get an update of the color. The newly selected color is now the default color for every node that is created:<\/p>\n\n\n\n
\/\/ detect user's actions by handling diagram events, such as nodeCreated\ndiagram.nodeCreated.addEventListener(\n\t(sender, args) =>\n\t{\n\t\targs.node.brush = defaultNodeBrushColor;\n\t\targs.node.textColor = defaultTextColor;\n\t\targs.node.shadowOffsetX = 0;\n\t\targs.node.shadowOffsetY = 0;\n\t\targs.node.anchorPattern = nodeAnchorPattern;\n\t});\n<\/pre>\n\n\n\n
This is how we handle the nodeCreated<\/a> event for the diagram. You can check the list with available diagram events in the online documentation: https:\/\/mindfusion.dev\/docs\/javascript\/diagramming\/T_MindFusion_Diagramming_Diagram_Events.htm<\/a><\/p>\n\n\n\n
If you change the look of a node once it is created, you might consider changing during the process of creation as well. This allows the user to see precisely what the new node will look like instead of getting a different object at the end. The same events – linkCreated<\/a> and linkCreating<\/a> are raised for links as well.<\/p>\n\n\n\n
III. Customizing the Links<\/h2>\n\n\n\n
If you draw a link between two nodes you notice that instead of a straight connecting line, the link breaks into several perpendicular segments. This is due to the diagram.routeLinks<\/a> property being turned on. Links can have shapes on both their ends. In our application we allow the user to draw links without a head shape. This is done by setting the headShape<\/a> property to null. We use a checkbox to regulate that:<\/p>\n\n\n\n
var defaultHeadShape = 'Triangle';\n...................\n...................\n\nconst linkHeadCheckbox = document.getElementById('linkHeadCheckbox');\n\n...................\n...................\n\ndefaultHeadShape = linkHeadCheckbox.checked ? 'Triangle' : null;\n\n..................\n..................\n\n\nlinkHeadCheckbox.addEventListener('change', (event) => {\n\t\t\n\tdefaultLinkHeadShape = event.target.checked ? 'Triangle' : null;\n\tdiagram.selection.links.forEach(link => {\n\t\t\t\n\tlink.headShape = defaultLinkHeadShape;\n\t\t\t\n   });\n});\n<\/pre>\n\n\n\n
IV. Anchor Patterns<\/h2>\n\n\n\n
By default links can go out from any point along the side of a DiagramNode<\/a> and connect to an arbitrary point at another DiagramNode<\/a>. A lot of diagrams show nodes that are connected only through the middle or some other predefined points. In MindFusion’s JavaScript Diagram Library<\/a> this is achieved with the AnchorPattern<\/a> property, which is a list with AnchorPoint<\/a> instances. The AnchorPoint<\/a>s are specified in coordinates from 0 to 100 on both X and Y. These are relative units and indicate where on the node surface, links are allows to go out or come in. Imagine the node bounds as a coordinate system that spans from 0 to 100 in both directions:<\/p>\n\n\n\n
nodeAnchorPattern = new AnchorPattern([\n    new AnchorPoint(50, 0, true, true),\/\/center top\n    new AnchorPoint(100, 50, true, true),\/\/center right\n    new AnchorPoint(50, 100, true, true),\/\/center bottom\n    new AnchorPoint(0, 50, true, true)\/\/center left\n]);\nnodeAnchorPattern.points[0].toolTip = \"Center Top\";\nnodeAnchorPattern.points[1].toolTip = \"Center Right\";\nnodeAnchorPattern.points[2].toolTip = \"Center Bottom\";\nnodeAnchorPattern.points[3].toolTip = \"Center Left\";\n\n....................\n....................\n\nnode.anchorPattern = nodeAnchorPattern;\n<\/pre>\n\n\n\n
Once you assign this AnchorPattern<\/a> to a node, a link can only connect in the middle of its sides:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
V. The Initial Diagram<\/h2>\n\n\n\n
When the user opens the web page for the first time they see a simple decision diagram, which can easily be removed with the ‘New’ button:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
This diagram is created in code with the help of the Factory<\/a> class. Factory is a helper class that allows creation of new nodes and links with a single method call. All node types are supported. The Factory class<\/a> is accessible directly through the diagram.factory property:<\/p>\n\n\n\n
var startNode = diagram.factory.createShapeNode(95, 10, 30, 15);                  \nstartNode.shadowOffsetX = 0;                                                                                        \nstartNode.shadowOffsetY = 0;                                                                                        \nstartNode.text = \"Start\"; \nstartNode.shape = 'Ellipse';\t\nstartNode.brush = \"#DB3955\";\nstartNode.textColor = \"#f0f0f0\";\nstartNode.anchorPattern = nodeAnchorPattern; \n<\/pre>\n\n\n\n
The nodes and links are automatically added to the diagram. If you use a regular constructor, you need to add them manually yourself. <\/p>\n\n\n\n
————————————————————————————————————————–<\/p>\n\n\n\n
And with that our tutorial is finished. You can download the final version of this diagram application from this link:<\/p>\n\n\n\n
Download the Final JavaScript Diagram Demo Project<\/a><\/p>\n\n\n\n
This tutorial is available also as a video, which you can watch at: https:\/\/youtu.be\/NrZ25gM5xEw<\/a><\/p>\n\n\n\n
Learn more about Mindfusion JavaScript Diagram Library<\/strong> at: https:\/\/mindfusion.dev\/javascript-diagram.html<\/a><\/p>\n\n\n\n
Discover more JavaScript diagram samples from MindFusion’s GitHub repository at: https:\/\/github.com\/MindFusionComponents\/JavaScript-Diagram-Samples<\/a><\/p>\n\n\n\n
Thank you for your interest in MindFusion developer tools and happy coding!<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[2],"tags":[730,3,4,80,748],"class_list":["post-3120","post","type-post","status-publish","format-standard","hentry","category-product-releases","tag-dev-tools","tag-diagram","tag-flowchart","tag-javascript","tag-web-dev"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-Ok","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/3120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=3120"}],"version-history":[{"count":11,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/3120\/revisions"}],"predecessor-version":[{"id":3131,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/3120\/revisions\/3131"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=3120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=3120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=3120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}