{"id":892,"date":"2014-07-07T13:40:52","date_gmt":"2014-07-07T13:40:52","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=892"},"modified":"2021-01-14T11:23:22","modified_gmt":"2021-01-14T11:23:22","slug":"diagramming-for-javascript-with-jquery","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/diagramming-for-javascript-with-jquery\/","title":{"rendered":"Diagramming for JavaScript with jQuery"},"content":{"rendered":"<p>Diagramming for JavaScript can use jQuery for browser abstraction instead of Microsoft Ajax. If you want to try the new feature, please download this archive containing a pre-release mindfusion.diagramming.js build and a sample page:<\/p>\n<p align=\"center\"><a href=\"https:\/\/mindfusion.dev\/_beta\/jsdiag_jquery.zip\">https:\/\/mindfusion.dev\/_beta\/jsdiag_jquery.zip<\/a><\/p>\n<p>To enable jQuery support, set MindFusionImpl=&#8221;JQuery&#8221; before loading the diagram script:<\/p>\n<p>Code:<\/p>\n<pre>MindFusionImpl = \"JQuery\"; \n<\/pre>\n<p>Instead of MSAjax $create function, use the static Diagram.create(element) method to create a Diagram instance for given Canvas element:<\/p>\n<p>Code:<\/p>\n<pre>diagram = MindFusion.Diagramming.Diagram.create($(\"#diagram\")[0]); \n<\/pre>\n<div id=\"attachment_759\" style=\"width: 727px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/04\/flowchart_blog.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-759\" class=\"size-full wp-image-759\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/04\/flowchart_blog.png\" alt=\"A sample diagram.\" width=\"717\" height=\"462\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/04\/flowchart_blog.png 717w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/04\/flowchart_blog-300x193.png 300w\" sizes=\"auto, (max-width: 717px) 100vw, 717px\" \/><\/a><p id=\"caption-attachment-759\" class=\"wp-caption-text\">A sample diagram.<\/p><\/div>\n<p>We welcome any comments, suggestions and feedback. You can write us at e-mail <a href=\"mailto:support@mindfusion.dev?subject=contact information from web site&amp;body=Please, remember to add mindfusion.dev to your email whitelist. We usually reply to all contact inquiries within 3 to 4 hours. In case you have not received an answer in 24 hours, the email most likely has been filtered by an anti-spam software running at your mail server. Thank you for the understanding!\" target=\"_parent\" rel=\"noopener noreferrer\">support@mindfusion.dev<\/a> or use the <a title=\"Help Desk\" href=\"http:\/\/www.mindfusion.dev\/HelpDesk\/index.php\" target=\"_parent\" rel=\"noopener noreferrer\">help desk.<\/a> You can use the JsDiagram section on <a href=\"http:\/\/mindfusion.dev\/Forum\/YaBB.pl?board=jsdiag_disc\" target=\"_parent\" rel=\"noopener noreferrer\">MindFusion forum<\/a> to post questions about the tool.<\/p>\n<p><em>About Diagramming for JavaScript Library:<\/em> Written 100% in JavaScript, this tool uses HTML5 Canvas to draw impressive diagrams, schemes, flowcharts, trees and many more. It is browser independent, easy to use and integrate into any web application. JsDiagram supports a variety of predefined node shapes, customizable links, rich event set and many appearance options. The user interaction model includes resizing \/ moving \/ selecting and modifying any diagram element.<\/p>\n<p>The tool boasts an elegant API, which is documented in details as well numerous step-by-step guides and tutorials. Various samples are provided to let you learn quickly how to use the most important features of the library &#8211; check them <a href=\"http:\/\/mindfusion.dev\/onlinedemo-jsdiagram.html\">here.<\/a> JsDiagram is not only the perfect choice for creating any type of diagram in the browser &#8211; it can also arrange it the way you wish with a mouse click using one of its automatic graph layout algorithms. For more details about the features of the component, please visit the <a href=\"http:\/\/mindfusion.dev\/jsdiagram.html\">JsDiagram page.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Diagramming for JavaScript can use jQuery for browser abstraction instead of Microsoft Ajax. If you want to try the new feature, please download this archive containing a pre-release mindfusion.diagramming.js build and a sample page: https:\/\/mindfusion.dev\/_beta\/jsdiag_jquery.zip To enable jQuery support, set &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/diagramming-for-javascript-with-jquery\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"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":[95,2],"tags":[35,80,42,44],"class_list":["post-892","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-product-releases","tag-diagramming","tag-javascript","tag-jquery","tag-library"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-eo","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/892","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=892"}],"version-history":[{"count":4,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/892\/revisions"}],"predecessor-version":[{"id":2503,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/892\/revisions\/2503"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=892"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=892"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=892"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}