{"id":920,"date":"2014-07-25T08:56:32","date_gmt":"2014-07-25T08:56:32","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=920"},"modified":"2021-01-14T11:33:01","modified_gmt":"2021-01-14T11:33:01","slug":"diagramming-for-javascript-v2-1-beta","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/diagramming-for-javascript-v2-1-beta\/","title":{"rendered":"Diagramming for JavaScript, V2.1"},"content":{"rendered":"<p>MindFusion has just released a beta version of the Diagramming for JavaScript library.<\/p>\n<p><strong>SVG Nodes<\/strong><br \/>\nThe SvgNode class represents nodes that can display SVG drawings. SVG graphics are rendered instead of Image, and on top of the geometry rendered by the base ShapeNode class. You can enable the Transparent property to hide the node&#8217;s geometry and leave visible only the drawing.<\/p>\n<div id=\"attachment_922\" style=\"width: 504px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/07\/js_svg_nodes.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-922\" class=\"size-full wp-image-922\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/07\/js_svg_nodes.png\" alt=\"SVG Nodes built with MindFusion.Diagramming for JavaScript.\" width=\"494\" height=\"492\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/07\/js_svg_nodes.png 494w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/07\/js_svg_nodes-150x150.png 150w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2014\/07\/js_svg_nodes-300x298.png 300w\" sizes=\"auto, (max-width: 494px) 100vw, 494px\" \/><\/a><p id=\"caption-attachment-922\" class=\"wp-caption-text\">SVG Nodes built with MindFusion.Diagramming for JavaScript.<\/p><\/div>\n<p><strong>jQuery support<\/strong><br \/>\nYou can now use jQuery for browser abstraction instead of Microsoft Ajax. To enable jQuery support, set MindFusionImpl=&#8221;JQuery&#8221; before loading the diagram script. Instead of Microsoft Ajax $create function, use the static Diagram.create(element) method to create a Diagram instance for a given Canvas element.<\/p>\n<p><strong>Miscellaneous<\/strong><\/p>\n<ul>\n<li>Set the BackgroundImageUrl property to draw an image as Diagram&#8217;s background.<\/li>\n<li>The TextStyle property of links provides support for several different text position and orientation styles, defined by the LinkTextStyle enumeration.<\/li>\n<li>Set the AllowUnconnectedLinks property to true to let users draw links without connecting them<br \/>\nto nodes.<\/li>\n<\/ul>\n<p>You can download the trial version directly from the following link:<\/p>\n<p align=\"center\"><a href=\"https:\/\/mindfusion.dev\/JsDiagramTrial.zip\" target=\"_parent\" rel=\"noopener noreferrer\">Download Diagramming for JavaScript, V2.1 Trial Version<\/a><\/p>\n<p>We shall be glad to receive 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?\nboard=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.<\/p>\n<p>The user interaction model includes resizing \/ moving \/ selecting and modifying any diagram element. 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>MindFusion has just released a beta version of the Diagramming for JavaScript library. SVG Nodes The SvgNode class represents nodes that can display SVG drawings. SVG graphics are rendered instead of Image, and on top of the geometry rendered by &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/diagramming-for-javascript-v2-1-beta\/\">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":[80,42,44,248],"class_list":["post-920","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-product-releases","tag-javascript","tag-jquery","tag-library","tag-svg-nodes"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-eQ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/920","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=920"}],"version-history":[{"count":6,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/920\/revisions"}],"predecessor-version":[{"id":2512,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/920\/revisions\/2512"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}