CINXE.COM
<!doctype html> <html lang="en" dir="ltr" class="blog-wrapper blog-tags-post-list-page plugin-blog plugin-id-default" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v3.7.0"> <title data-rh="true">56 posts tagged with "flowchart" | Diagram and visual applications builder - JsPlumb Toolkit</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://jsplumbtoolkit.com/blog/tags/flowchart"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="keywords" content="kanban, erd, entity relationship diagram, flowchart, decision tree, entity relationship diagram, diagram, chatbot, chart, graph, gantt charts, network topology diagrams, visualization, javascript, diagramming library, typescript, charts, orgchart"><meta data-rh="true" property="og:image" content="https://jsplumbtoolkit.com/img/rendering-ports/reskinned-chatbot.png"><meta data-rh="true" property="og:site_name" content="JsPlumb Toolkit, leading diagramming and visual connectivity Javascript and Typescript library"><meta data-rh="true" property="og:title" content="56 posts tagged with "flowchart" | Diagram and visual applications builder - JsPlumb Toolkit"><meta data-rh="true" name="docusaurus_tag" content="blog_tags_posts"><meta data-rh="true" name="docsearch:docusaurus_tag" content="blog_tags_posts"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://jsplumbtoolkit.com/blog/tags/flowchart"><link data-rh="true" rel="alternate" href="https://jsplumbtoolkit.com/blog/tags/flowchart" hreflang="en"><link data-rh="true" rel="alternate" href="https://jsplumbtoolkit.com/blog/tags/flowchart" hreflang="x-default"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Diagram and visual applications builder - JsPlumb Toolkit RSS Feed"> <link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Diagram and visual applications builder - JsPlumb Toolkit Atom Feed"> <link rel="preconnect" href="https://www.googletagmanager.com"> <script>window.dataLayer=window.dataLayer||[]</script> <script>!function(e,t,a,n){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var g=t.getElementsByTagName(a)[0],m=t.createElement(a);m.async=!0,m.src="https://www.googletagmanager.com/gtm.js?id=GTM-PNVM4WJV",g.parentNode.insertBefore(m,g)}(window,document,"script","dataLayer")</script> <script>var sc_project="12334448",sc_invisible=1,sc_security="71953373"</script> <script src="https://www.statcounter.com/counter/counter.js"></script> <link rel="alternate" type="application/rss+xml" href="/talking-tech/rss.xml" title="Diagram and visual applications builder - JsPlumb Toolkit RSS Feed"> <link rel="alternate" type="application/atom+xml" href="/talking-tech/atom.xml" title="Diagram and visual applications builder - JsPlumb Toolkit Atom Feed"> <script src="https://js.stripe.com/v3/"></script><link rel="stylesheet" href="/assets/css/styles.06cd58eb.css"> <script src="/assets/js/runtime~main.37eba193.js" defer="defer"></script> <script src="/assets/js/main.1458f273.js" defer="defer"></script> </head> <body class="navigation-with-keyboard"> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PNVM4WJV" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const n=new URLSearchParams(window.location.search).entries();for(var[t,e]of n)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="JsPlumb Toolkit" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="JsPlumb Toolkit" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate"></b></a><a aria-current="page" class="navbar__item navbar__link btn btn-link navbar__link--active" href="/blog">News</a><a class="navbar__item navbar__link btn btn-link" href="/features">Features</a><a class="navbar__item navbar__link btn btn-link" href="/demonstrations">Demos</a><a href="https://docs.jsplumbtoolkit.com/toolkit/7.x/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link btn btn-link">Documentation</a><a class="navbar__item navbar__link btn btn-link" href="/contact">Contact</a><a href="https://licensing.jsplumbtoolkit.com/download/toolkit" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link btn btn-link">Download</a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link btn btn-secondary mx-2" href="/trial">Free trial</a><a class="navbar__item navbar__link btn btn-primary" href="/purchase">Buy</a><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="container margin-vert--lg"><div class="row"><aside class="col col--3"><nav class="sidebar_re4s thin-scrollbar" aria-label="Blog recent posts navigation"><div class="sidebarItemTitle_pO2u margin-bottom--md"> All Posts</div><div role="group"><h3 class="yearGroupHeading_rMGB">2025</h3><ul class="sidebarItemList_Yudw clean-list"><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2025/03/28/release-7.0.0">Release 7.0.0</a></li></ul></div><div role="group"><h3 class="yearGroupHeading_rMGB">2024</h3><ul class="sidebarItemList_Yudw clean-list"><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/10/14/release-6.81.0">Release 6.81.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/10/04/release-6.80.0">Release 6.80.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/09/24/release-6.72.0">Release 6.72.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/09/16/release-6.71.0">Release 6.71.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/09/06/release-6.70.0">Release 6.70.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/08/26/release-6.60.0">Release 6.60.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/08/23/release-6.50.0">Release 6.50.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/08/16/release-6.40">Release 6.40.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/07/18/wrapping-data-in-web-components">Wrapping JsPlumb in Web Components</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/07/03/building-a-tile-game-with-drag-constrain-functions">Building a tile game using JsPlumb's advanced drag handling</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/26/release-6.30">Release 6.30.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/25/release-6.29.0">Release 6.29.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/23/unit-testing">Unit Testing with JsPlumb</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/23/release-6.28.0">Release 6.28.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/20/release-6.27.0">Release 6.27.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/18/release-6.26.0">Release 6.26.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/11/release-6.25.0">Release 6.25.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/06/06/release-6.24.0">Release 6.24.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/05/17/jsplumb-and-html2canvas">Generating output with html2canvas and JsPlumb</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/05/12/release-6.23.0">Release 6.23.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/04/19/release-6.22.0">Release 6.22.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/04/18/release-6.21.0">Release 6.21.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/04/08/release-6.20.0">Release 6.20.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/04/05/release-6.19.0">Release 6.19.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/04/04/release-6.18.0">Release 6.18.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/03/28/angular-signals-integration">Angular signals integration</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/03/26/release-6.17.0">Release 6.17.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/03/25/release-6.16.0">Release 6.16.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/02/18/release-6.15.0">Release 6.15.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/02/16/release-6.14.0">Release 6.14.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/02/02/release-2.50.0">Release 2.50.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2024/01/31/release-6.13.0">Release 6.13.0</a></li></ul></div><div role="group"><h3 class="yearGroupHeading_rMGB">2023</h3><ul class="sidebarItemList_Yudw clean-list"><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/12/28/release-6.12.0">Release 6.12.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/12/20/release-6.11.0">Release 6.11.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/12/11/animated-edges">Animating edges in SVG</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/12/10/release-6.10.0">Release 6.10.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/27/release-6.9.1">Release 6.9.1</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/22/release-6.9.0">Release 6.9.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/19/image-processing-with-canvas">Image processing with HTML canvas</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/17/rendering-ports">Rendering ports in the Toolkit</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/09/release-6.8.2">Release 6.8.2</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/08/release-6.8.1">Release 6.8.1</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/07/release-6.8.0">Release 6.8.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/11/03/magnetizing-diagram-elements">Magnetizing diagram elements</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/30/fixed-and-floating-elements">Fixed and floating elements (also, how the snaplines plugin works)</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/30/release-6.7.2">Release 6.7.2</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/25/release-6.7.1">Release 6.7.1</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/24/jsplumb-jointjs-comparison">JointJS - JsPlumb Comparison</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/19/release-6.7.0">Release 6.7.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/13/release-6.6.5">Release 6.6.5</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/10/release-6.6.4">Release 6.6.4</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/04/release-6.6.3">Release 6.6.3</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/04/angular-chatbot">Angular chatbot</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/10/03/how-to-build-a-chatbot-designer">Building a chatbot app in 3 hours and 37 minutes</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/09/26/release-6.6.2">Release 6.6.2 - Rotating custom overlays</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/09/24/jsplumb-element-rendering">The case for rendering to separate elements</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/09/20/release-6.6.0">Release 6.6.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/09/03/release-6.5.0">Release 6.5.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/06/21/release-6.2.5">Release 6.2.5</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2023/04/04/release-6.0.0">Release 6.0.0</a></li></ul></div><div role="group"><h3 class="yearGroupHeading_rMGB">2022</h3><ul class="sidebarItemList_Yudw clean-list"><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2022/11/28/release-5.13.1">Release 5.13.1</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2022/08/16/toolkit-release-5.10.8">Release 5.10.8</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2022/07/26/docusaurus-env-loader-json-plugin">Docusaurus JSON environment loader</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2022/05/21/angular-inputs-and-outputs">Angular Inputs and Outputs</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2022/05/20/custom-connectors">Custom connectors</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2022/02/10/anchor-position-finder-toolkit-edition">Anchor position finders</a></li></ul></div><div role="group"><h3 class="yearGroupHeading_rMGB">2021</h3><ul class="sidebarItemList_Yudw clean-list"><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2021/11/09/version-5.0.0">Version 5.0.0</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2021/09/06/docusaurus-and-statcounter">Statcounter plugin for Docusaurus</a></li></ul></div><div role="group"><h3 class="yearGroupHeading_rMGB">2018</h3><ul class="sidebarItemList_Yudw clean-list"><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2018/06/26/world-cup-visualisation-part-2">World Cup 2018, part 2</a></li><li class="sidebarItem__DBe"><a class="sidebarItemLink_mo7H" href="/blog/2018/06/25/world-cup-visualisation-part-1">World Cup 2018, part 1</a></li></ul></div></nav></aside><main class="col col--7"><header class="margin-bottom--xl"><h1>56 posts tagged with "flowchart"</h1><a href="/blog/tags">View All Tags</a></header><article class="margin-bottom--xl"><header><h2 class="title_f1Hy"><a href="/blog/2025/03/28/release-7.0.0">Release 7.0.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2025-03-30T06:00:00.000Z">March 30, 2025</time> · <!-- -->11 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--12 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo authorImage_XqGP" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt"></a><div class="avatar__intro authorDetails_lV9A"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer"><span class="authorName_yefp">Simon Porritt</span></a></div><small class="authorTitle_nd0D" title="JsPlumb core team">JsPlumb core team</small><div class="authorSocials_rSDt"></div></div></div></div></div></header><div class="markdown"><p>We are pleased to announce the release of version 7.0.0 of JsPlumb Toolkit, in which we have introduced three major new capabilities:</p> <ul> <li> <p><a href="#vertex-avoidance">Vertex avoidance</a> JsPlumb can now automatically route edges around nodes and groups. Various options for the routing strategy are supported, and groups are handled seamlessly.</p> </li> <li> <p><a href="#magnetizer-trackback">Magnetizer trackback</a> A new mode for the magnetizer in which elements that have been moved out of the way of some element that is being dragged will attempt to snap back to their original positions - like a crowd parting for you on your way back from the bar.</p> </li> <li> <p><a href="#edge-snapping">Edge snapping</a> When dragging edges, you can instruct JsPlumb to snap to nearby drag targets.</p> </li> </ul> <p>We've also made a host of small updates to improve the usability of JsPlumb's API, documentation and starter apps. This is a big release, so get comfortable!</p></div><footer class="row docusaurus-mt-lg"><div class="col col--9"><b>Tags:</b><ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div><div class="col text--right col--3"><a aria-label="Read more about Release 7.0.0" href="/blog/2025/03/28/release-7.0.0"><b>Read more</b></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="title_f1Hy"><a href="/blog/2024/10/14/release-6.81.0">Release 6.81.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-10-14T06:00:00.000Z">October 14, 2024</time> · <!-- -->2 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--12 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo authorImage_XqGP" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt"></a><div class="avatar__intro authorDetails_lV9A"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer"><span class="authorName_yefp">Simon Porritt</span></a></div><small class="authorTitle_nd0D" title="JsPlumb core team">JsPlumb core team</small><div class="authorSocials_rSDt"></div></div></div></div></div></header><div class="markdown"><p>Release 6.81.0 contains a few nice ergonomic improvements to the Inspector, and to undo/redo functionality.</p></div><footer class="row docusaurus-mt-lg"><div class="col col--9"><b>Tags:</b><ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div><div class="col text--right col--3"><a aria-label="Read more about Release 6.81.0" href="/blog/2024/10/14/release-6.81.0"><b>Read more</b></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="title_f1Hy"><a href="/blog/2024/10/04/release-6.80.0">Release 6.80.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-10-04T06:00:00.000Z">October 4, 2024</time> · <!-- -->5 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--12 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo authorImage_XqGP" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt"></a><div class="avatar__intro authorDetails_lV9A"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer"><span class="authorName_yefp">Simon Porritt</span></a></div><small class="authorTitle_nd0D" title="JsPlumb core team">JsPlumb core team</small><div class="authorSocials_rSDt"></div></div></div></div></div></header><div class="markdown"><p>Release 6.80.0 is a major update to our Svelte integration, with the introduction of a host of new components, plus a surface provider, making it easier than ever before to rapidly build visual connectivity apps.</p></div><footer class="row docusaurus-mt-lg"><div class="col col--9"><b>Tags:</b><ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div><div class="col text--right col--3"><a aria-label="Read more about Release 6.80.0" href="/blog/2024/10/04/release-6.80.0"><b>Read more</b></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="title_f1Hy"><a href="/blog/2024/09/24/release-6.72.0">Release 6.72.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-09-24T06:00:00.000Z">September 24, 2024</time> · <!-- -->One min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--12 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo authorImage_XqGP" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt"></a><div class="avatar__intro authorDetails_lV9A"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer"><span class="authorName_yefp">Simon Porritt</span></a></div><small class="authorTitle_nd0D" title="JsPlumb core team">JsPlumb core team</small><div class="authorSocials_rSDt"></div></div></div></div></div></header><div class="markdown"><p>This is a minor release, with the focus being on improving the JS docs, in conjunction with a major upgrade to <a href="https://docs.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer">https://docs.jsplumbtoolkit.com</a></p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="new-functionality">New functionality<a href="#new-functionality" class="hash-link" aria-label="Direct link to New functionality" title="Direct link to New functionality"></a></h3> <ul> <li>Added <code>onVertexAdded</code> input to Angular <code>ShapeLibraryPalette</code> component.</li> </ul> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="breaking">Breaking<a href="#breaking" class="hash-link" aria-label="Direct link to Breaking" title="Direct link to Breaking"></a></h3> <ul> <li>The <code>AnimationEvents</code> enum was removed and its members (<code>EVENT_END_OVERLAY_ANIMATION</code> etc) are now just exposed as constants.</li> </ul></div><footer class="row docusaurus-mt-lg"><div class="col col--9"><b>Tags:</b><ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div><div class="col text--right col--3"><a aria-label="Read more about Release 6.72.0" href="/blog/2024/09/24/release-6.72.0"><b>Read more</b></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="title_f1Hy"><a href="/blog/2024/09/16/release-6.71.0">Release 6.71.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-09-16T06:00:00.000Z">September 16, 2024</time> · <!-- -->2 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--12 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo authorImage_XqGP" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt"></a><div class="avatar__intro authorDetails_lV9A"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer"><span class="authorName_yefp">Simon Porritt</span></a></div><small class="authorTitle_nd0D" title="JsPlumb core team">JsPlumb core team</small><div class="authorSocials_rSDt"></div></div></div></div></div></header><div class="markdown"><p>In this release:</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="connectors">Connectors<a href="#connectors" class="hash-link" aria-label="Direct link to Connectors" title="Direct link to Connectors"></a></h3> <ul> <li>We've "undeprecated" the usage of static connector type names, such as <code>OrthogonalConnector.type</code>. Where previously we'd deprecated these in favour of string constants (such as <code>CONNECTOR_TYPE_ORTHOGONAL</code>), we - and some licensees - have found that in some situations using the string constant causes a tree shaker to leave the connector code out. This was particularly prevalent in Angular apps. We recommend now using the static type names, even if you're not using Angular.</li> </ul> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="adhoc-layouts">Adhoc Layouts<a href="#adhoc-layouts" class="hash-link" aria-label="Direct link to Adhoc Layouts" title="Direct link to Adhoc Layouts"></a></h3> <ul> <li>The <code>adHocLayout</code> method of the Surface now clears the geometry of all the edges in the canvas, because edited edge paths are intrinsically linked to the position of their source and target vertices, and the <code>adHocLayout</code> method can arbitrarily move any vertex.</li> </ul> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="angular-integration">Angular integration<a href="#angular-integration" class="hash-link" aria-label="Direct link to Angular integration" title="Direct link to Angular integration"></a></h3> <ul> <li>We added optional <code>data</code> and <code>url</code> inputs to the <code>jsplumb-surface</code> component in the Angular integration. You can now do things like this in your templates:</li> </ul> <div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:white"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:white"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">jsplumb-surface</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#1b7085">[toolkitParams]</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#b21e5e">toolkitParams</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#1b7085">[renderParams]</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#b21e5e">renderParams</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#1b7085">[view]</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#b21e5e">view</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#1b7085">url</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#b21e5e">/assets/dataset.json</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">jsplumb-surface</span><span class="token tag punctuation" style="color:#393A34">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> <p>or</p> <div class="language-html codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#393A34;--prism-background-color:white"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-html codeBlock_bY9V thin-scrollbar" style="color:#393A34;background-color:white"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#393A34"><span class="token tag punctuation" style="color:#393A34"><</span><span class="token tag" style="color:#00009f">jsplumb-surface</span><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#1b7085">[toolkitParams]</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#b21e5e">toolkitParams</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#1b7085">[renderParams]</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#b21e5e">renderParams</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#1b7085">[view]</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#b21e5e">view</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag" style="color:#00009f"></span><br></span><span class="token-line" style="color:#393A34"><span class="token tag" style="color:#00009f"> </span><span class="token tag attr-name" style="color:#1b7085">[data]</span><span class="token tag attr-value punctuation attr-equals" style="color:#393A34">=</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag attr-value" style="color:#b21e5e">data</span><span class="token tag attr-value punctuation" style="color:#393A34">"</span><span class="token tag punctuation" style="color:#393A34">></span><span class="token tag punctuation" style="color:#393A34"></</span><span class="token tag" style="color:#00009f">jsplumb-surface</span><span class="token tag punctuation" style="color:#393A34">></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> <p>instead of having to declare a <code>@ViewChild</code> and load the data afterwards.</p></div><footer class="row docusaurus-mt-lg"><div class="col col--9"><b>Tags:</b><ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div><div class="col text--right col--3"><a aria-label="Read more about Release 6.71.0" href="/blog/2024/09/16/release-6.71.0"><b>Read more</b></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="title_f1Hy"><a href="/blog/2024/09/06/release-6.70.0">Release 6.70.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-09-06T06:00:00.000Z">September 6, 2024</time> · <!-- -->3 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--12 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo authorImage_XqGP" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt"></a><div class="avatar__intro authorDetails_lV9A"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer"><span class="authorName_yefp">Simon Porritt</span></a></div><small class="authorTitle_nd0D" title="JsPlumb core team">JsPlumb core team</small><div class="authorSocials_rSDt"></div></div></div></div></div></header><div class="markdown"><p>In release 6.70.0 we've updated our Vue 3 integration to make it more modern and easier to use, with reduced boilerplate and better documentation.</p> <p>It is now optional to set <code>surfaceId</code> on the <code>SurfaceComponent</code>, <code>MiniviewComponent</code>, <code>ControlsComponent</code>, <code>ExportControlsComponent</code> and <code>ShapePaletteComponent</code> - the components will use a default value if not provided.</p> <p>With these changes you can now get up and running with JsPlumb Vue quicker than ever:</p></div><footer class="row docusaurus-mt-lg"><div class="col col--9"><b>Tags:</b><ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div><div class="col text--right col--3"><a aria-label="Read more about Release 6.70.0" href="/blog/2024/09/06/release-6.70.0"><b>Read more</b></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="title_f1Hy"><a href="/blog/2024/08/26/release-6.60.0">Release 6.60.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-08-26T06:00:00.000Z">August 26, 2024</time> · <!-- -->3 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--12 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo authorImage_XqGP" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt"></a><div class="avatar__intro authorDetails_lV9A"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer"><span class="authorName_yefp">Simon Porritt</span></a></div><small class="authorTitle_nd0D" title="JsPlumb core team">JsPlumb core team</small><div class="authorSocials_rSDt"></div></div></div></div></div></header><div class="markdown"><p>In release 6.60.0 we've updated our Angular integration to make it more modern and easier to use, with support for signals, reduced boilerplate, and better documentation. The <code>@jsplumbtoolkit/browser-ui-angular</code> package now requires Angular 16 or later. Don't worry, though, if you're on a version of Angular older than 16: we've renamed our existing Angular integration to <code>@jsplumbtoolkit/browser-ui-angular-legacy</code>, and you can still use it.</p></div><footer class="row docusaurus-mt-lg"><div class="col col--9"><b>Tags:</b><ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div><div class="col text--right col--3"><a aria-label="Read more about Release 6.60.0" href="/blog/2024/08/26/release-6.60.0"><b>Read more</b></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="title_f1Hy"><a href="/blog/2024/08/23/release-6.50.0">Release 6.50.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-08-23T06:00:00.000Z">August 23, 2024</time> · <!-- -->3 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--12 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo authorImage_XqGP" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt"></a><div class="avatar__intro authorDetails_lV9A"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer"><span class="authorName_yefp">Simon Porritt</span></a></div><small class="authorTitle_nd0D" title="JsPlumb core team">JsPlumb core team</small><div class="authorSocials_rSDt"></div></div></div></div></div></header><div class="markdown"><p>This release sees a few more updates to our React integration to make it easier than ever to use:</p> <ul> <li> <p>The <code>ShapeLibraryPaletteComponent</code> in the React integration no longer needs to be provided with a <code>shapeLibrary</code> as a prop - it retrieves the shape library from the Surface it is attached to.</p> </li> <li> <p>A new <code>ShapeComponent</code> was added to the React integration. This component is functional and takes as a prop the <code>ctx</code> that the Surface passes to the mapping your view.</p> </li> <li> <p>We've introduced a <code>JsxWrapperProps</code> interface to define the <code>ctx</code> member that the surface passes in to JSX mapped in your viewOptions.</p> </li> </ul></div><footer class="row docusaurus-mt-lg"><div class="col col--9"><b>Tags:</b><ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div><div class="col text--right col--3"><a aria-label="Read more about Release 6.50.0" href="/blog/2024/08/23/release-6.50.0"><b>Read more</b></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="title_f1Hy"><a href="/blog/2024/08/16/release-6.40">Release 6.40.0</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-08-16T06:00:00.000Z">August 16, 2024</time> · <!-- -->5 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--12 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo authorImage_XqGP" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt"></a><div class="avatar__intro authorDetails_lV9A"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer"><span class="authorName_yefp">Simon Porritt</span></a></div><small class="authorTitle_nd0D" title="JsPlumb core team">JsPlumb core team</small><div class="authorSocials_rSDt"></div></div></div></div></div></header><div class="markdown"><p>Release 6.40.0 is a fairly big release, containing:</p> <ul> <li> <p><a href="#react-updates">A major update to our React integration</a>, with the introduction of contexts and providers, making it easier than ever before to rapidly build visual connectivity apps.</p> </li> <li> <p>A vastly improved algorithm for repainting orthogonal connectors when the source or target node is dragged</p> </li> <li> <p>Default node components in the Angular and React integration, allowing you to quickly prototype something without needing to focus on too many details upfront</p> </li> <li> <p>Improvements to our documentation to make it easier to see how to achieve specific tasks with different integrations. This is an ongoing process but we've hit upon a basic structure now that we think works nicely.</p> </li> <li> <p>A couple of bugfixes</p> </li> <li> <p>An <a href="#hierarchy-layout">update to the Hierarchy layout</a> to support ports.</p> </li> </ul></div><footer class="row docusaurus-mt-lg"><div class="col col--9"><b>Tags:</b><ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li></ul></div><div class="col text--right col--3"><a aria-label="Read more about Release 6.40.0" href="/blog/2024/08/16/release-6.40"><b>Read more</b></a></div></footer></article><article class="margin-bottom--xl"><header><h2 class="title_f1Hy"><a href="/blog/2024/07/03/building-a-tile-game-with-drag-constrain-functions">Building a tile game using JsPlumb's advanced drag handling</a></h2><div class="container_mt6G margin-vert--md"><time datetime="2024-07-03T06:00:00.000Z">July 3, 2024</time> · <!-- -->8 min read</div><div class="margin-top--md margin-bottom--sm row"><div class="col col--12 authorCol_Hf19"><div class="avatar margin-bottom--sm"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer" class="avatar__photo-link"><img class="avatar__photo authorImage_XqGP" src="https://avatars.githubusercontent.com/u/262720?s=60&v=4" alt="Simon Porritt"></a><div class="avatar__intro authorDetails_lV9A"><div class="avatar__name"><a href="https://github.com/sporritt" target="_blank" rel="noopener noreferrer"><span class="authorName_yefp">Simon Porritt</span></a></div><small class="authorTitle_nd0D" title="JsPlumb core team">JsPlumb core team</small><div class="authorSocials_rSDt"></div></div></div></div></div></header><div class="markdown"><p>Many libraries offer the ability to drag elements around, but JsPlumb's drag handler is a little more advanced than most: there are a number of options you can set on JsPlumb to get very fine-grained control of how your users drag elements around. One of these - the <code>constrainFunction</code> - is the focus of our post today, and we'll show you how it can be used to make a simple tile game with the minimum of effort.</p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="constrain-functions">Constrain functions<a href="#constrain-functions" class="hash-link" aria-label="Direct link to Constrain functions" title="Direct link to Constrain functions"></a></h3> <p>In this first canvas, you can drag around each of the nodes as you please:</p> <div class="tdemo tile-game-demo"></div></div><footer class="row docusaurus-mt-lg"><div class="col col--9"><b>Tags:</b><ul class="tags_jXut padding--none margin-left--sm"><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/toolkit">toolkit</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg">svg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/flowchart">flowchart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/inspector">inspector</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/erd">erd</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/svg-export">svg export</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/png">png</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpeg">jpeg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jpg">jpg</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/apidocs">apidocs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt">gantt</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/gantt-chart">gantt chart</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/network-topology">network topology</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/jointjs">jointjs</a></li><li class="tag_QGVx"><a class="tag_zVej tagRegular_sFm0" href="/blog/tags/reactflow">reactflow</a></li></ul></div><div class="col text--right col--3"><a aria-label="Read more about Building a tile game using JsPlumb's advanced drag handling" href="/blog/2024/07/03/building-a-tile-game-with-drag-constrain-functions"><b>Read more</b></a></div></footer></article><nav class="pagination-nav" aria-label="Blog list page navigation"><a class="pagination-nav__link pagination-nav__link--next" href="/blog/tags/flowchart/page/2"><div class="pagination-nav__label">Older entries</div></a></nav></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">DISCOVER</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/demonstrations">Demonstrations</a></li><li class="footer__item"><a class="footer__link-item" href="/contact">Contact Us</a></li><li class="footer__item"><a href="/JSPLUMB-TOOLKIT-LICENSE-V7-REV-1-31-MAR-2025.pdf" target="_blank">License Agreement</a></li><li class="footer__item"><a href="/JSPLUMB-TOOLKIT-LICENSE-V6-V5-V2-REV-11-25-NOV-2024.pdf" target="_blank">License Agreement v6.x</a></li><li class="footer__item"><a class="footer__link-item" position="right" href="/privacy">Privacy Policy</a></li><li class="footer__item"><a class="footer__link-item" position="right" href="/talking-tech">Talking Tech</a></li></ul></div><div class="col footer__col"><div class="footer__title">DEVELOP</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com/toolkit/7.x/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Documentation</a></li><li class="footer__item"><a href="https://licensing.jsplumbtoolkit.com/download/toolkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">Licensee Portal</a></li><li class="footer__item"><a href="https://licensing.jsplumbtoolkit.com/download/toolkit" target="_blank" rel="noopener noreferrer" class="footer__link-item">Download</a></li><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/npm-repository" target="_blank" rel="noopener noreferrer" class="footer__link-item">NPM Repository</a></li><li class="footer__item"><a class="footer__link-item" href="/trial">Try JsPlumb Toolkit for free</a></li></ul></div><div class="col footer__col"><div class="footer__title">LINKS</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/blog">News</a></li><li class="footer__item"><a class="footer__link-item" href="/purchase">Pricing</a></li><li class="footer__item"> <div class="d-flex align-items-center mt-5"> <a href="https://github.com/jsplumb"><img class="me-2" src="/img/social-logos/github.svg" alt="github logo"></a> <a href="https://www.facebook.com/jsPlumbToolkit"><img class="mx-2" src="/img/social-logos/facebook.svg" alt="facebook logo"></a> <a href="https://www.linkedin.com/company/jsplumb/"><img class="mx-2" src="/img/social-logos/linkedin.svg" alt="linked in logo"></a> <a href="https://twitter.com/jsplumbtoolkit"><img class="mx-2" src="/img/social-logos/twitter.svg" alt="twitter logo"></a> </div></li></ul></div><div class="col footer__col"><div class="footer__title">INTEGRATIONS</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://angular.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Angular</a></li><li class="footer__item"><a href="https://react.jsplumbtoolkit.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/vue3-integration" target="_blank" rel="noopener noreferrer" class="footer__link-item">Vue</a></li><li class="footer__item"><a href="https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/svelte-integration" target="_blank" rel="noopener noreferrer" class="footer__link-item">Svelte</a></li></ul></div></div><div class="footer__bottom text--center"><div class="margin-bottom--sm"><a href="https://jsplumbtoolkit.com" rel="noopener noreferrer" class="footerLogoLink_BH7S"><img src="/img/logo-white.svg" alt="JsPlumb Toolkit" class="footer__logo themedComponent_mlkZ themedComponent--light_NVdE" width="160" height="51"><img src="/img/logo-white.svg" alt="JsPlumb Toolkit" class="footer__logo themedComponent_mlkZ themedComponent--dark_xIcU" width="160" height="51"></a></div><div class="footer__copyright">Copyright © 2025 JSPLUMB PTY LTD.</div></div></div></footer></div> </body> </html>