MindFusion.DiagrammingforWinForms是一个能帮助你创建工作流和进程图表的.NET控件；数据库实体关系图表；组织图表；对象层次和关系图表；图表和树。它是基于对象－图表框，表格和箭头类型，将其归类分派给其他并结合成复杂的结构。该控件提供超过预先定义的50多种图表框，如自定义设计样式和对图表框着色等。MindFusion.DiagrammingforWinForms现已加入在线订购，StandardSingleDeveloper版本原价2848现在年终钜惠抢购立享优惠只需2345，立即查看详情>>下载MindFusion.DiagrammingforWinForms最新试用版慧都网
您可以自己测试页面：
I.常规设置
我们需要一个空白的HTML页面和一个空白的JavaScript文件，其中将包含应用程序的代码。
我们将链接添加到三个JavaScript文件。我们将它们添加到网页的末尾，紧接关闭的BODY标记之前：
我们还向网页添加了一些CSS样式选项。它们旨在使我们将更漂亮的HTML控件嵌入到控件节点中。
二.控件
现在我们已经在网页中设置了所有代码，我们开始对JavaScript代码隐藏文件进行编码。我们添加了一些名称空间映射，以使代码更短。如果使用的是VisualStudioCode，则可以添加图库的TypeScript定义。这将在您编码时启用IntelliSense支持。
我们处理初始HTML文档的DOMCOntentLoaded事件以初始化MindFusion控件。
setTarget（diagram）;}}）;我们获得与在网页中创建的三个Canvas元素相对应的HTML元素。我们使用WebAPI的document.getElementById。现在您将看到我们使用先前指定的Canvas元素的ID查询文档。
该概述和zoomControl可实例使用setDiagram和setTarget方法prespectively，指定图情况下，它们应该被约束。
三.节点模板
该ControlNode类允许我们以初始化的外观使用纯HTMLControlNode这与setTemplate方法来完成。您可以为创建的每个ControlNode实例指定不同的模板。
为了进行更改，我们需要使用自定义模板（我们的配方节点）替换关系图节点的默认模板。这是新的模板：
vardefaultTemplate=`
diagram.setDefaultControlTemplate（defaultTemplate）;IV.互动性
当我们创建一个新节点时，该表将呈现一个示例行，您无法编辑该行。标题也一样。如果要使控件可编辑，则需要设置数据交互属性：
data-attributeName=“value”从上面的代码中可以看到，有data-event-click属性。此属性指定节点中呈现的按钮的click事件的事件处理程序。这里是：
functionaddRow(e,sender){vartable=sender.getContent().getElementsByTagName("table")[0];varrows=table.getElementsByTagName('tr');if(rows.length>0){varclone=rows[rows.length-1].cloneNode(true);table.appendChild(clone);}else{vartr=document.createElement('tr');vartd=document.createElement('td');td.appendChild(document.createTextNode('Milk'))td.setAttribute('contenteditable','true');td.setAttribute('data-interactive','true');tr.appendChild(td);td=document.createElement('td');td.appendChild(document.createTextNode('1cup'))td.setAttribute('contenteditable','true');td.setAttribute('data-interactive','true');tr.appendChild(td);table.appendChild(tr);}}在事件处理程序中，我们检查表中是否有行，如果是，则复制第一行。如果没有行，我们将添加一个包含默认数据的新行。data-event-eventName是用于处理ControlNode中包含的HTML控件上可用事件的语法，这是我们指定杯形蛋糕图像可点击的方式：
functionplaceholderClick(e,sender){varinput=document.createElement("input");input.type="file";varimg=e.target;input.addEventListener('change',e=>{Utils.toDataUrl(URL.createObjectURL(e.target.files[0]),function(base64str){img.src=base64str;sender.setTag(base64str);sender.createImage();});})input.click();}选择新图像后，我们将其Base64表示形式作为源分配给ControlNode模板中的图像元素，该图像元素代表烹饪食谱。
这些都是您需要执行的所有步骤，以便获得具有可自定义配料，标题和图像数量的交互式配方节点。
可通过此处的MindFusion论坛获得技术支持。
关于JavaScript绘图：此本地JavaScript库为开发人员提供了创建和自定义任何类型的图，决策树，流程图，类层次结构，图，家谱树，BPMN图等的能力。该控件提供了丰富的事件集，众多的自定义选项，动画，图形操作，样式和主题。您有100多个预定义节点，表节点和15多种自动布局算法。