# MindFusionDoc Documentation Map This is a unified documentation resource optimized for LLMs. The high-level guides, architectural overviews, and tutorials are inlined directly below in Section 1. All class references are merged into single files per class/struct and linked in Section 2. # Section 1: High-Level Guides and Overviews ## Untitled Topic -1 ## Introduction MindFusion.Diagramming is a reusable software component that lets you create and display various types of diagrams and charts. It is implemented as a .NET control and can be easily integrated into any application targeting the Microsoft .NET platform. By providing your software with ready to use capabilities for visualizing and editing relational data, MindFusion.Diagramming saves you from hundreds of hours of coding and debugging efforts. MindFusion.Diagramming can give graphical representation to:  - Workflow processes - Class relationships - Graphs and networks - Entity-relationship / database diagrams - IVR systems - Industrial automation processes - Genealogy trees - Algorithms and flowcharts - Organizational charts - XML documents - Classification hierarchies - And much more MindFusion.Diagramming provides intuitive user-interaction model for creating or editing diagrams. In addition, its programmatic interface places at your disposal many useful functions, ranging from printing and XML serialization to path-finding and automatic layout algorithms. The control has been tested with the most popular .NET development environments and programming languages, and is used by companies from all around the world to create applications in C#, VB.NET and Delphi.NET. ## General Information ### The MindFusion.Diagramming Component - Redistribution is royalty free - Assembly is strong-named - Can be purchased with source code - Is written in C# - Implements the Document/View architecture - Supports the Mono runtime ### User Interaction - Several user interaction modes - Free-form drawing - Free-form selection mode - Scrolling and zooming - Copy and paste to/from Windows clipboard - Panning - Automatic scrolling while dragging items with the mouse - Alignment to grid - Node alignment guides - Multiple selection - Tool-tips - Docking points can be defined for nodes - Magnifier tool - Undo / redo support - Rotate and flip shapes - Run animations in response to users' actions - Multi-touch gestures ### Programming - Programmatic access to the diagram elements - Extension methods for fluent API - Numerous properties for customizing appearance and behavior - Numerous utility methods - Path finding and cycle detection - Rich event set ### Store and Retrieve Diagrams into/from - Files on disk - .NET streams - ASCII strings - XML documents - JSON strings ### Output - To display in Windows Forms - Display graphs in 3D - Printing and print preview - To a browser using HTML image maps - Create bitmap images ### Import and Export - Export images in bmp, jpeg, gif, tiff, png formats - Export Drawing Exchange Format (DXF) files - Export Scalable Vector Graphics (SVG) files - Export Portable Document Format (PDF) files - Export Visio 2003 VDX files - Export Visio 2013 VSDX files - Export Excel Open XML Format (XLSX) files - Import Scalable Vector Graphics (SVG) files - Import Visio 2003 VDX files - Import Visio 2013 VSDX files - Import OpenOffice Draw (ODG) files  ### Diagram Elements - More than 100 predefined node shapes - Display SVG drawings in nodes - Ability to define custom shapes and shape libraries - Rotation of nodes at arbitrary angles - Container nodes - Tables with unlimited number of rows and columns - Table cells can span several columns and rows - Display maps from ESRI shapefiles - Display maps in OpenStreetMap format - Display hierarchical data in TreeView nodes - Display shapes from Visio stencil files - Assign diagram items to layers - Sections of table rows can be expanded or collapsed - Control hosts allow using .NET controls as diagram nodes - Links can comprise multiple segments - Link segments can be straight lines or curves - Display multiple labels per link - Support for custom node and link types ### Automatic Layout - Spring-Embedder graph layout - Directional tree layout - Horizontal/vertical binary tree layout - Radial tree layout - Fractal tree layout - Layered graph layout - Grid layout - Simulated Annealing graph layout - One-way graph layout - Orthogonal graph layout - Circular graph layout - Orthogonal link router  - Source code flowchart layout - Decision flowchart layout - Process diagrams layout - Tree map layout - Swimlane diagrams layout - Topological graph layout - Triangular graph layout - Hierarchical graph layout - Cascading graph layout - Multi-level graph layout - Automatic link routing ### Appearance - Styles and themes - Nodes can display images and text - Multiple text labels per item - Various text alignment styles - Text can be laid out in polygonal areas - Styled HTML-like text formatting - Customizable fonts and colors - Custom painting of nodes - Shadows - User-assigned mouse cursors - Z-order - Rich choice of pen and brush styles - Transparent nodes - Invisible nodes - Embossment and shadow dispersion visual effects - A background lane grid ### Behavior - Lock diagram elements - Read-only mode supported - Tables can be scrolled - Collapse and expand hierarchy branches - In-place text editing - Dynamic positioning of links relative to connected nodes ### Link Diagram Items - Nodes to nodes - Table rows to table rows - Nodes to table rows - Unconnected links ### Hierarchical Grouping - Attaching nodes to other nodes - Attaching nodes to link control points - Attaching nodes to link segments ### Auxiliary Controls - Overview control - Ruler control - Shapes toolbar - Shapes listbox - Node list control - Layer list control - Zoom control ## Blazor Render Modes MindFusion.Diagramming for Blazor supports only WebAssembly render mode at this time. Therefore, (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md) and other components from the library can be used either from Standalone Blazor WebAssembly projects, or by adding them to a parent component implemented in the ".Client" project of a Blazor Web App solution: https://learn.microsoft.com/en-us/aspnet/core/blazor/project-structure If you do not want to deploy the .NET WebAssembly runtime with your application, you can render diagrams in Blazor static or interactive server modes using MindFusion.Diagramming for JavaScript solution: https://mindfusion.dev/javascript-diagram.html ## HTML Layout (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md) implements scrolling of diagram's canvas internally and fills all space available to the component. As such, CSS width and height attributes are both set to 100%, filling all space provided by parent HTML element (such as div). If you need to display fixed-size diagrams, e.g. in sidebars or in tooltip overlays, assign the size to parent div's width and height attributes. If you prefer the diagram view to grow dynamically to fill browser's window, we recommend using a CSS grid, with chart placed in fr-unit tracks, with additional constraints applied using minmax CSS function. Latter approach is shown in sample projects from library's distribution. ## Getting Started The following topics describe how to integrate the Diagramming for Blazor API into your project, and create an instance of the (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md) control. ## Add Nuget Package In order to integrate Diagramming for Blazor into your Visual Studio project, select Manage Nuget Packages from Project menu: Open the Browse tab, and enter MindFusion.Diagramming.Blazor in the search field. Select the MindFusion.Diagramming.Blazor package and click Install. Once the package is installed, you should be able to add components from the library to your UI ((Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md), (Markdown/T_MindFusion_Diagramming_Blazor_NodeListView.md), etc). ## Create DiagramView in WebAssembly Project After following the previous topic, you should be able to add a (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md) component to your Blazor UI. Open the razor page file. - Import (#mindfusiondiagramming) and (#mindfusiondiagrammingblazor) namespaces. - Add a  tag to the razor markup. - Customize the diagram and attach event handlers from page's OnAfterRender method: ```csharp @page "/" @using MindFusion.Diagramming; @using MindFusion.Diagramming.Blazor; @code {     DiagramView diagramView;     Diagram diagram;     protected override void OnAfterRender(bool firstRender)     {         base.OnAfterRender(firstRender);         if (firstRender)         {             diagram = diagramView.Diagram;             diagram.Bounds = new Microsoft.Maui.Graphics.Rect(0, 0, 2000, 2000);             //diagram.NodeCreated += OnNodeCreated;             //.....         }     } } ``` ### Customize the diagram properties Now you can set the properties of the (Markdown/T_MindFusion_Diagramming_Diagram.md) and the (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md). - Choose a value for the (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#behavior) property of (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md), which defines how the view must interpret actions done with the mouse by users of your application. The default value (Markdown/T_MindFusion_Diagramming_Behavior.md) specifies that users can draw shape nodes and connect them with links. Another value - (Markdown/T_MindFusion_Diagramming_Behavior.md) - allow drawing tables and relations. (Markdown/T_MindFusion_Diagramming_Behavior.md) prevents users from drawing new items, but allows them to modify existing ones. - Customize the appearance of the diagram by setting properties such as (Markdown/T_MindFusion_Diagramming_Diagram.md#showgrid) or (Markdown/T_MindFusion_Diagramming_Diagram.md#backbrush). - Customize common appearance of diagram items by setting style properties, such as (Markdown/T_MindFusion_Diagramming_Diagram.md#shapenodestyle) and (Markdown/T_MindFusion_Diagramming_Diagram.md#diagramlinkstyle). You are now ready to write code. A good place to start is in event handlers - either (Markdown/T_MindFusion_Diagramming_DiagramBase.md#diagrambase-events) raised by the (Markdown/T_MindFusion_Diagramming_Diagram.md) component whose handlers let you run business logic for diagram modifications, or events raised by other user interface elements in your application whose handlers modify the diagram or view. Browse the other sections of this help file to learn more about the functionality provided by the MindFusion.Diagramming classes, methods and properties. Follow the (#tutorials) to learn how to populate the diagram model programmatically or create custom item types. ## Create DiagramView in Web App Project The (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md) componen supports only WebAssembly render mode at this time, but you can also use it from “Blazor Web App” projects: as long as you set the “Interactive render mode” option to WebAssembly or Auto (Server and WebAssembly): Then you can proceed and install the Diagramming library from NuGet as explained earlier. Note: You need to add the Blazor Diagramming package only to the .Client project: Once the package is installed, proceed with adding a new Razor component to the .Client project: On the first line of the newly created Razor file, declare WebAssembly render mode by adding the @rendermode InteractiveWebAssembly directive: ```csharp @rendermode InteractiveWebAssembly ``` Then you can proceed with the import of the system and diagramming namespaces that you are going to use: ```csharp @using Microsoft.Maui.Graphics @using MindFusion.Drawing; @using MindFusion.Diagramming; @using MindFusion.Diagramming.Blazor; @using MindFusion.Diagramming.Layout; ``` Now create the (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md) instance: ```csharp ``` The initialization of the (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md) and its (Markdown/T_MindFusion_Diagramming_Diagram.md) document is done in code, using the OnAfterRender method orverride: ```csharp @code {     DiagramView diagramView;     Diagram diagram;     protected override void OnAfterRender(bool firstRender)     {         base.OnAfterRender(firstRender);         if (firstRender)         {             diagram = diagramView.Diagram;             diagram.Bounds = new Microsoft.Maui.Graphics.Rect(0, 0, 2000, 2000);             //diagram.NodeCreated += OnNodeCreated;             //.....         }     } } ``` You can now add the razor client view, which renders a (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md) component, to a page rendered by the server. Open the Home.razor file from the server project and add the newly created component, in our sample it is called DiagramComponent: Browse the other sections of this help file to learn more about the functionality provided by the MindFusion.Diagramming classes, methods and properties. Follow the (#tutorials) to learn how to populate the diagram model programmatically or create custom item types. ## User Interaction with the Diagram Most likely an application would use MindFusion.Diagramming to enable users to interactively create diagrams, flowcharts and other kinds of presentation documents. A user composes or edits a diagram by drawing its elements on the MindFusion.Diagramming canvas area. With the help of a mouse or another pointing device users draw shapes, tables and links, possibly connecting them in complex hierarchies, graphs, trees or other structures they might need. ### Creating New Items New items can be created by drawing them with the mouse. While a user drags the mouse, the view of the control is updated to show what the new item would look like at the pointer location. If the operation cannot be completed at the current mouse position, the cursor changes to a crossed out circle. When the user releases the button, the item is created. The control does not let users create very tiny nodes which would be hard to select and modify. By default links can be drawn only between nodes, unless the (Markdown/T_MindFusion_Diagramming_Diagram.md#allowunconnectedlinks) property is enabled. Users can cancel item creation by pressing the right mouse button while drawing. ### Modifying Items A user modifies an item by dragging its manipulation handles. The ModificationStart property specifies when these handles appear. The first option, (Markdown/T_MindFusion_Diagramming_ModificationStart.md), makes the handles appear when the mouse hovers over an item; modification of the item can start immediately by pointing it and dragging a handle. The second option is (Markdown/T_MindFusion_Diagramming_ModificationStart.md): in order to be modified, an item should first be selected. Manipulation handles appear around the item to indicate that now it can be moved or resized. Number and functionality of those handles depend on the item type and the value of the corresponding (Markdown/T_MindFusion_Diagramming_DiagramNode.md#handlesstyle) property. What the user sees while moving or resizing items can be customized further by setting the (Markdown/T_MindFusion_Diagramming_Diagram.md#modificationeffect) property. ### Modifying a Node Usually nodes have nine adjustment handles. The one at the center can be used to move the node. When dragged, each corner handle resizes the node by moving the two edges adjacent to the corresponding corner. The edge handles placed at the center of each side can be used to resize a node either horizontally or vertically. Shape nodes can be rotated using an additional round handle drawn above them. Each handle can be enabled or disabled by setting or clearing the respective bit in (Markdown/T_MindFusion_Diagramming_DiagramNode.md#enabledhandles).### Modifying a Link Variety and behavior of link adjustment handles depend on the link's (Markdown/T_MindFusion_Diagramming_DiagramLink.md#shape) and (Markdown/T_MindFusion_Diagramming_DiagramLink.md#segmentcount). Control-points stay at both ends of each segment that constitutes a link. MindFusion.Diagramming offers three link styles. Following sections discuss how to modify links of each style. - The first style called (Markdown/T_MindFusion_Diagramming_LinkStyle.md) defines links, which consist of a series of straight segments, drawn between control-points. There are no restrictions as to the number of segments. Dragging a control-point modifies each segment adjacent to the point. If the (Markdown/T_MindFusion_Diagramming_Diagram.md#allowsplitlinks) property is enabled, users are allowed to insert new control points or to remove existing ones. Inserting a control point is done by pressing the left mouse button over a segment and dragging. The new point appears at the mouse location and splits the pointed segment in two. - If link's style is set to (Markdown/T_MindFusion_Diagramming_LinkStyle.md), each segment has 4 manipulation handles that define a curve. Each curve goes through the end-points, which are shaped as circles. Bend of the curve is defined by the middle two points shaped as rectangles. If a user drags an end-point modification handle, the adjacent control points will be moved with same translation vector as that of the end-point. If a bend control point is dragged, the symmetric control point of the neighboring curve is also moved to ensure the two stay on the same line with the end-point and on the same distance from it. - (Markdown/T_MindFusion_Diagramming_LinkStyle.md) links consist of straight horizontal and vertical segments, each one orthogonal to its neighbors. If a control-point is dragged, the segments adjacent to it are moved and resized preserving their orthogonal orientation to each other. If the (Markdown/T_MindFusion_Diagramming_Diagram.md#allowsplitlinks) property is enabled, users are allowed to insert new control points to (Markdown/T_MindFusion_Diagramming_LinkStyle.md) links or remove existing ones. The orientation of the link segments can be changed if (Markdown/T_MindFusion_Diagramming_DiagramLink.md#cascadeorientation) is set to (Markdown/T_MindFusion_Diagramming_Orientation.md). ### Modifying a Table Table modification handles are drawn as dotted lines over its borders. Dragging the caption bar moves the table. Dragging edges or corner points resizes the table. ### Selecting Items Multiple items are selected by dragging while CTRL key is down. Selection can also be toggled with CTRL + clicking an item. A rectangle appears around selected items, allowing a user to move all of them at once. ### Scrolling and Panning If the ShowScrollbars property is enabled, scrollbars are displayed, which can be used by a user to scroll the diagram's drawing area. Pressing the left mouse button and dragging while the ALT key is down scrolls the diagram too. ### Interpreting Users Actions Mouse operations can be interpreted in different ways depending on the value of the (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#behavior) property. It defines whether for example dragging the mouse creates a node or selects existing items. Check the property description for more information. ## Licensing There are no separate trial builds of MindFusion assemblies. When you purchase a component you can find the license key for this component listed on the Keys & Downloads page at the customer's portal. Assign this license key to the (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#licensekey) property to disable the component's evaluation mode and stop displaying trial messages. If your application contains more than one MindFusion component, you could call MindFusion.Licensing.LicenseManager.AddLicense(key) method from application start-up code to specify the key once instead of setting it per each control. ## Programming Interface Overview The next few chapters give you an overview of all features, grouped by functionality. Hyperlinks refer to the detailed description of methods and properties of each class. ## Document-View Architecture MindFusion.Diagramming implements the Model-View-Controller (MVC) architectural pattern in its new version 5. The MVC design pattern as applied to MindFusion.Diagramming separates the diagram data (model) from its representation to the user (view) and controlling it by the user (controller). ### Single Diagram Canvas The (Markdown/T_MindFusion_Diagramming_Diagram.md) class represents the diagram data model and provides operations to process the data. It exposes properties and methods for adding new diagram elements, finding and accessing existing elements, or removing them. The (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md) class presents the relevant data from the (Markdown/T_MindFusion_Diagramming_Diagram.md) class by drawing on the screen using the Microsoft.Maui.Graphics API. When the diagram is changed, the view automatically redraws the affected part of the image to reflect the changes. Multiple views can display the same diagram, set by their (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#diagram) property. Each view can have a different zoom level and scroll position. The (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md) class also integrates the Controller part of the MVC, represented mostly by the view's (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#behavior) property. That property specifies how GUI actions to manipulate the data should be interpreted. ### Multiple Diagram Pages The (Markdown/T_MindFusion_Diagramming_DiagramDocument.md) class represents a collection of diagram pages or sheets, represented by (Markdown/T_MindFusion_Diagramming_DiagramPage.md) objects. Document's pages are stored in its (Markdown/T_MindFusion_Diagramming_DiagramDocument.md#pages) collection. The (Markdown/T_MindFusion_Diagramming_DiagramDocument.md#savetoxml) and (Markdown/T_MindFusion_Diagramming_DiagramDocument.md#savetojsonstring) methods of (Markdown/T_MindFusion_Diagramming_DiagramDocument.md) save all pages in a single file, and respectively the (Markdown/T_MindFusion_Diagramming_DiagramDocument.md#loadfromxml) and (Markdown/T_MindFusion_Diagramming_DiagramDocument.md#loadfromjsonstring) methods load all pages from the file.(Markdown/T_MindFusion_Diagramming_DiagramPage.md) is derived from (Markdown/T_MindFusion_Diagramming_Diagram.md) and only adds a few properties, so any code that processes (Markdown/T_MindFusion_Diagramming_Diagram.md) objects will work with (Markdown/T_MindFusion_Diagramming_DiagramPage.md) objects too. A diagram document forwards each event raised by its pages, giving you a chance to use the same handler for events raised by different pages. If a page should implement distinct user interaction or validation logic, it is also possible to attach handlers to the (Markdown/T_MindFusion_Diagramming_Diagram.md) events inherited by (Markdown/T_MindFusion_Diagramming_DiagramPage.md). A single (Markdown/T_MindFusion_Diagramming_DiagramPage.md) could be assigned to the (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#diagram) property of (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md), and that lets you create your own user interface for presenting a list of pages to the user and selecting a current page. ## User Interface Components The following UI components from the library can be added to a page to let users create and view diagrams: ### DiagramView (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md) renders the contents of a (Markdown/T_MindFusion_Diagramming_Diagram.md), and lets users draw new items by drawing with mouse or touch on the canvas. The (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#behavior) property indicates how the control should interpret users' actions. Additional properties allow scrolling and zooming the view. ### Palette The (Markdown/T_MindFusion_Diagramming_Blazor_Palette.md) control represents a tool palette that displays (Markdown/T_MindFusion_Diagramming_DiagramItem.md) objects grouped into categories, and is implemented as accordion UI. Call the (Markdown/T_MindFusion_Diagramming_Blazor_Palette.md#addcategory) method to define a category and create its respective accordion pane (an (Markdown/T_MindFusion_Diagramming_Blazor_ItemListView.md)). Call (Markdown/T_MindFusion_Diagramming_Blazor_Palette.md#additem) to add an item to specified category. (Markdown/T_MindFusion_Diagramming_Blazor_Palette.md) provides same layout and appearance properties as the (Markdown/T_MindFusion_Diagramming_Blazor_ItemListView.md) class. ### ItemListView (Markdown/T_MindFusion_Diagramming_Blazor_ItemListView.md) represents a tool palette that contains uncategorized list of diagram items. Items can be added to the list by calling (Markdown/T_MindFusion_Diagramming_Blazor_ItemListView.md#additem) method, and removed by calling (Markdown/T_MindFusion_Diagramming_Blazor_ItemListView.md#removeitem). Drag-and-drop operations from (Markdown/T_MindFusion_Diagramming_Blazor_ItemListView.md) to (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md) create a copy of the dragged item, and set its size to (Markdown/T_MindFusion_Diagramming_Blazor_ItemListView.md#newinstancesize). ### Overview (Markdown/T_MindFusion_Diagramming_Blazor_Overview.md) provides a scaled-down view of a target (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md), helping users work with larger diagrams. A tracker rectangle shows current viewport of the main (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md), and by dragging it users can change the scroll position. It can also be resized to zoom the target view. ### Ruler The (Markdown/T_MindFusion_Diagramming_Blazor_Ruler.md) control displays horizontal and vertical scales that let users measure and align diagram nodes. ### ContextMenu ContextMenu implements a popup menu that lets you display commands from clicked events raised by individual items (e.g. (Markdown/T_MindFusion_Diagramming_DiagramBase.md#nodeclicked)) or the diagram canvas ((Markdown/T_MindFusion_Diagramming_DiagramBase.md#clicked)). ## Diagram Structure The following topics are contained within this topic: (#standard-item-types) Information about the standard MindFusion.Diagramming item types, such as (Markdown/T_MindFusion_Diagramming_ShapeNode.md), (Markdown/T_MindFusion_Diagramming_TableNode.md) and (Markdown/T_MindFusion_Diagramming_DiagramLink.md). (#custom-item-types) Information on how to implement and use custom item types. (#creating-and-deleting-items) Information on how to create and delete items both interactively and programmatically. (#accessing-items) Information about how to access the diagram items, how to get the selected items and how to find particular items in the diagram according to a specific criteria. (#attaching-and-grouping-items) Information about the use of the (Markdown/T_MindFusion_Diagramming_Group.md) class in order to create hierarchies of dependent objects in MindFusion.Diagramming. (#layers) Information about how to organize items in layers and how to use the LayerListView control. (#collapsing-and-expanding-tree-branches) Information on how to enable expanding diagram nodes. (#multiple-diagram-pages) Information about the multi-page (Markdown/T_MindFusion_Diagramming_DiagramDocument.md) class and the TabbedDiagramView control. ## Standard Item Types Diagram elements in MindFusion.Diagramming are represented by (Markdown/T_MindFusion_Diagramming_ShapeNode.md), (Markdown/T_MindFusion_Diagramming_TableNode.md) and (Markdown/T_MindFusion_Diagramming_DiagramLink.md) instances. Combined and linked together, they can form complex data structures such as process or entity-relationship diagrams, class hierarchies, networks and graphs. Each of their rich features can be customized through numerous methods and properties. MindFusion.Diagramming also offers intuitive user interface for drawing and editing diagram items interactively. ### Shape Nodes Shape nodes can represent geometric shapes, flowchart elements, icons in network diagrams, and so on. They can display both graphics and text in different fonts, sizes and colors. There are more than 100 predefined node shapes (you can preview them (#table-of-predefined-shapes)) and apart from them, MindFusion.Diagramming offers an easy way to define custom shapes. Shape nodes can be rotated, either interactively using the round selection handle drawn above them, or programmatically using the (Markdown/T_MindFusion_Diagramming_DiagramNode.md#rotationangle) property. (Markdown/T_MindFusion_Diagramming_ShapeNode.md) appearance can be customized further using several types of custom painting. The first type gives you full control over the painting. With the second one your painting code is performed additionally to the basic painting. The third one performs standard drawing of nodes and custom drawing of their shadows. ### SVG Nodes The (Markdown/T_MindFusion_Diagramming_SvgNode.md) class represents nodes that can display SVG drawings in addition to the rendering provided by its base (Markdown/T_MindFusion_Diagramming_ShapeNode.md) class. The SVG drawing is rendered after the associated (Markdown/T_MindFusion_Diagramming_ShapeNode.md#image) and just before the (Markdown/T_MindFusion_Diagramming_DiagramBase.md#drawnode) event is raised with (Markdown/T_MindFusion_Diagramming_CustomDraw.md). The SVG drawing of the node is specified through its (Markdown/T_MindFusion_Diagramming_SvgNode.md#content) property. The SVG graphics is loaded and associated with the node through a MindFusion.Svg.SvgContent object, which should be initialized and then assigned to this property. ### Composite Nodes Nodes in MindFusion.Diagramming can be composed from components. Components are graphical widgets similar to controls, which can be arranged in hierarchies and added to a (Markdown/T_MindFusion_Diagramming_Diagram.md) through instances of the (Markdown/T_MindFusion_Diagramming_CompositeNode.md) class. The component system contains various built-in components, such as (Markdown/T_MindFusion_Diagramming_Components_TextComponent.md) and (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md). For a complete list of the built-in components, check (#standard-component-types). The component system can be extended with custom component classes. For more information regarding this, check (#creating-custom-components). Component hierarchies can be defined and loaded from XML. To learn more about it, refer to (#components-and-xml). The Using Components tutorial section describes various component features in step-by-step examples. ### Table Nodes Tables can be used to represent table schemas in database diagrams or classes in class-hierarchies. A table contains cells arranged in a  grid, and every cell can display text and/or image. Cells can span several rows and columns as set in the (Markdown/T_MindFusion_Diagramming_TableNode+Cell.md#rowspan) and (Markdown/T_MindFusion_Diagramming_TableNode+Cell.md#columnspan) properties. Cells, columns and rows can be customized in various ways - there are properties available for setting their extents, style, image and text alignment. Tables' dimensions can be programmatically changed; inserting, appending or deleting rows and columns can be done in a very comprehensive, intuitive way whenever you might need it. Tables can also display background images and graphics. The file formats supported are BMP, GIF, JPEG, ICO and WMF (the same applies for shape nodes). ### Free-form Nodes A (Markdown/T_MindFusion_Diagramming_FreeFormNode.md) collects all points from users' mouse or touch input and displays them as node's outline. To let users draw free-form nodes interactively, set Behavior to (Markdown/T_MindFusion_Diagramming_Behavior.md). Use the (Markdown/T_MindFusion_Diagramming_FreeFormNode.md#points) property of (Markdown/T_MindFusion_Diagramming_FreeFormNode.md) to get or set outline points programmatically. If the (Markdown/T_MindFusion_Diagramming_FreeFormNode.md#closed) property is set, the node is drawn as a closed shape and its interior filled, or otherwise the node is drawn as a poly-line. If the distance between first and last points drawn by user is shorter than (Markdown/T_MindFusion_Diagramming_Diagram.md#autoclosedistance), the node gets closed automatically.### Container Nodes A (Markdown/T_MindFusion_Diagramming_ContainerNode.md) can contain other diagram nodes. When a container is moved, its child nodes move too. Containers can be folded to hide the contained nodes, and unfolded back to show them again. Nodes inside a container can be linked to nodes both inside and outside of it. When a container is folded, the links connected to contained nodes point to the container outlines. Containers can be nested within each other to unlimited depth.### Paged Containers (Markdown/T_MindFusion_Diagramming_PagedContainerNode_1.md) is a (Markdown/T_MindFusion_Diagramming_ContainerNode.md) subclass that organizes its child nodes into a collection of (Markdown/T_MindFusion_Diagramming_PagedContainerNode_1.md#pages), represented by (Markdown/T_MindFusion_Diagramming_ContainerPage_1.md) objects. This allows for the creation of more orgainzed diagrams where nodes can be grouped into logical views within a single container. Only the nodes belonging to the currently active page, specified by (Markdown/T_MindFusion_Diagramming_PagedContainerNode_1.md#currentpage) property, are rendered and participate in user interactions.### TreeView Nodes The (Markdown/T_MindFusion_Diagramming_TreeViewNode.md) class represents nodes that can display hierarchical data. The root items displayed in the node can be accessed through the (Markdown/T_MindFusion_Diagramming_TreeViewNode.md#rootitems) property. New items can be added to and removed from the returned collection. The root items can have child items on their own and so on. For more information, refer to the (Markdown/T_MindFusion_Diagramming_TreeViewItem.md) class.### Links Links are used to represent various types of connections and relations in diagrams. MindFusion.Diagramming offers three basic link types: - polyline links composed of straight-line segments; - curved links composed of Bézier-spline segments; - links composed of horizontal and vertical segments, alternating their orientation so that every segment is orthogonal to its neighbor. A link can be connected to a node at each of the link's ends. It is also possible to have unconnected links - having one or both of their ends  not connected to nodes. Some customizable link's properties are: arrowheads, style, color, text, pen width and style, modification behavior and number of segments. ## Custom Item Types You can create your own item types by deriving the (Markdown/T_MindFusion_Diagramming_DiagramNode.md) and (Markdown/T_MindFusion_Diagramming_DiagramLink.md) classes or their successors such as (Markdown/T_MindFusion_Diagramming_TableNode.md), (Markdown/T_MindFusion_Diagramming_ContainerNode.md) and so on. This lets you add custom data fields to the diagram items, and implement custom visualization and interaction functionality. ### Serialization If you add custom fields to your item class, you will probably want their values saved when saving diagram files, and restored when loading files. To enable this, override the (Markdown/T_MindFusion_Diagramming_DiagramItem.md#savetojson) and (Markdown/T_MindFusion_Diagramming_DiagramItem.md#loadfromjson) methods of the (Markdown/T_MindFusion_Diagramming_DiagramItem.md) class, which let you implement JSON serialization. For XML serialization, you must implement the (Markdown/T_MindFusion_Diagramming_DiagramItem.md#savetoxml) and (Markdown/T_MindFusion_Diagramming_DiagramItem.md#loadfromxml) methods. ### Clipboard operations You must implement the (Markdown/T_MindFusion_Diagramming_DiagramItem.md#clone) method in order to enable (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#copytoclipboard) and (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#pastefromclipboard) to work with your custom item type, If Clone is not implemented, you will get an instance of the base class created for the pasted item, and this could lead to an exception when the base class deserialization code tries to load the item state from a data stream created by the derived class. If your class has any custom fields, it must also implement the (Markdown/T_MindFusion_Diagramming_DiagramItem.md#savetojson) and (Markdown/T_MindFusion_Diagramming_DiagramItem.md#loadfromjson) methods for proper serialization. ### Rendering If you need to provide custom rendering for your items, override the (Markdown/T_MindFusion_Diagramming_DiagramNode.md#drawlocal) and (Markdown/T_MindFusion_Diagramming_DiagramNode.md#drawshadowlocal) methods. They receive as an argument an object that implements the (Markdown/T_MindFusion_Drawing_IGraphics.md) interface, which provides methods for drawing vector graphics, text and images. MindFusion.Diagramming provides MauiGraphics, PdfGraphics and SvgGraphics implementations of that interface, which are used respectively when drawing on the screen, exporting to PDF and to SVG. That lets you use the same code regardless of where the item should draw itself. ### User interaction To let the user draw items from a custom class, set the (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#behavior) property of the diagram view to (Markdown/T_MindFusion_Diagramming_Behavior.md), and set the (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#customnodetype) or (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#customlinktype) property to the Type object that corresponds to your class. If you need to change how items handle user interaction while they are being initially created, implement the (Markdown/T_MindFusion_Diagramming_DiagramItem.md#startcreate), (Markdown/T_MindFusion_Diagramming_DiagramItem.md#updatecreate) and (Markdown/T_MindFusion_Diagramming_DiagramItem.md#completecreate) methods. In order to change how items respond to user interaction while they are being modified, implement the (Markdown/T_MindFusion_Diagramming_DiagramItem.md#startmodify), (Markdown/T_MindFusion_Diagramming_DiagramItem.md#updatemodify) and (Markdown/T_MindFusion_Diagramming_DiagramItem.md#completemodify) methods. ## Creating and Deleting Items ### Creating Items Programmatically In order to add a new node or link to a diagram, create an instance of the item class via the new operator and add it to the diagram's (Markdown/T_MindFusion_Diagramming_Diagram.md#nodes) or (Markdown/T_MindFusion_Diagramming_Diagram.md#links) collection. This works the same way for adding both items from your custom class or ones from the MindFusion.Diagramming predefined types. There are several shortcut methods provided for creating instances of the predefined node and link types. The methods are members of the diagram's (Markdown/T_MindFusion_Diagramming_Diagram.md#factory) object: - The (Markdown/T_MindFusion_Diagramming_Factory.md#createshapenode) method creates a (Markdown/T_MindFusion_Diagramming_ShapeNode.md) at the specified position. - The (Markdown/T_MindFusion_Diagramming_Factory.md#createtablenode) method creates a (Markdown/T_MindFusion_Diagramming_TableNode.md) at a specified position. Tables have a method that connects them with other tables called (Markdown/T_MindFusion_Diagramming_TableNode.md#addrelation). - The (Markdown/T_MindFusion_Diagramming_Factory.md#createcontainernode) method creates a (Markdown/T_MindFusion_Diagramming_ContainerNode.md) at the specified position. - There are several overloads of the (Markdown/T_MindFusion_Diagramming_Factory.md#creatediagramlink) method that allow connecting two nodes of the same type or of different types. ### Drawing New Items Users can draw diagram elements with the mouse. The (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#behavior) property specifies what type of elements should be created when a user starts drawing. When a user starts drawing, an item is created and an initialization event is raised to let you customize the item appearance before showing it on the screen. The initialization events include ones such as (Markdown/T_MindFusion_Diagramming_DiagramBase.md#initializenode), (Markdown/T_MindFusion_Diagramming_DiagramBase.md#initializelink), and so on. While items are being drawn, the control raises validation events such as (Markdown/T_MindFusion_Diagramming_DiagramBase.md#nodecreating) to let you validate the operation and prevent creating items at a specific location. When the user releases the mouse button, the item is added to the collection that contains items from the same type (for example (Markdown/T_MindFusion_Diagramming_Diagram.md#nodes)) and an event is raised, for example (Markdown/T_MindFusion_Diagramming_DiagramBase.md#nodecreated). ### Deleting Items Call the (Markdown/T_MindFusion_Diagramming_ItemCollectionBase.md#remove) method of the (Markdown/T_MindFusion_Diagramming_Diagram.md#nodes) or (Markdown/T_MindFusion_Diagramming_Diagram.md#links) collection to delete an item from the diagram. The (Markdown/T_MindFusion_Diagramming_Diagram.md#clearall) method clears diagram contents by deleting all items. A shortcut for removing a link between two tables is provided by the  (Markdown/T_MindFusion_Diagramming_TableNode.md#breakrelation) method. ## Accessing Items One of the most common tasks when using the component is iterating over all items in the diagram document or navigating through the connections between items - from a node to the incoming or outgoing links, or from a link to its origin and destination nodes. To enumerate items of a diagram use the (Markdown/T_MindFusion_Diagramming_Diagram.md#items), (Markdown/T_MindFusion_Diagramming_Diagram.md#links) or (Markdown/T_MindFusion_Diagramming_Diagram.md#nodes) collections. The nodes that a link connects are referenced by the link's (Markdown/T_MindFusion_Diagramming_DiagramLink.md#destination) and (Markdown/T_MindFusion_Diagramming_DiagramLink.md#origin) properties. To access the links that are connected to a node, use its (Markdown/T_MindFusion_Diagramming_DiagramNode.md#incominglinks) and (Markdown/T_MindFusion_Diagramming_DiagramNode.md#outgoinglinks) collections. The first collection contains references to all links pointing to the node, the second - to the links that start from it. Links can connect to rows of a table; to find such links use table's (Markdown/T_MindFusion_Diagramming_TableNode.md#rows) collection and the (Markdown/T_MindFusion_Diagramming_TableNode+Row.md#incominglinks) and (Markdown/T_MindFusion_Diagramming_TableNode+Row.md#outgoinglinks) collections. A shortcut for accessing the other end of a relation in entity-relationship diagrams is provided by the (Markdown/T_MindFusion_Diagramming_TableNode+Row.md#relatedonetomany) and (Markdown/T_MindFusion_Diagramming_TableNode+Row.md#relatedmanytoone) properties of the (Markdown/T_MindFusion_Diagramming_TableNode+Row.md) class.### Selected Items If only one item is selected, it is considered the active item and can be accessed with the (Markdown/T_MindFusion_Diagramming_Diagram.md#activeitem) property. The type of this property is (Markdown/T_MindFusion_Diagramming_DiagramItem.md); you can get the actual type of the selected item through .NET reflection. Multiple items can be selected when clicking or dragging with the CTRL key pressed at the same time. Multiple selection is represented by the (Markdown/T_MindFusion_Diagramming_Diagram.md#selection) property of the (Markdown/T_MindFusion_Diagramming_Diagram.md) class. The (Markdown/T_MindFusion_Diagramming_Selection.md) object provides collections to access the selected (Markdown/T_MindFusion_Diagramming_Selection.md#links) and (Markdown/T_MindFusion_Diagramming_Selection.md#nodes).### Finding Items You can search for diagram items by their (Markdown/T_MindFusion_Diagramming_DiagramItem.md#tag) or (Markdown/T_MindFusion_Diagramming_DiagramItem.md#id) using the (Markdown/T_MindFusion_Diagramming_Diagram.md#findlink), (Markdown/T_MindFusion_Diagramming_Diagram.md#findnode), (Markdown/T_MindFusion_Diagramming_Diagram.md#findlinkbyid) and (Markdown/T_MindFusion_Diagramming_Diagram.md#findnodebyid) methods. Tag and id objects are compared by calling the Equals method of the System.Object class. Thus if they are of value type, they are compared by value (that is bitwise equality). If they are of reference type their Equals method is used.  If there are more items with the same tag, the first one will be returned. If no item with the specified tag or id exists, a null reference (Nothing in Visual Basic) will be returned. Groups can also be searched by tag using (Markdown/T_MindFusion_Diagramming_Diagram.md#findgroup).### Relationship Queries The (Markdown/T_MindFusion_Diagramming_DiagramItem.md#query) method traverses the graph by following node/link connections and group's parent/child relationships to find items in specific relation to the current one. The method receives a string argument consisting of selectors and optional predicates. The query is executed in several steps. In each step the result set is constructed from the previous result set by following the relationship specified by the current selector. If a predicate is specified after the selector identifier, the result set is filtered to include only items for which the predicate evaluates to true. ## Attaching and Grouping Items MindFusion.Diagramming allows attaching a node to another diagram element, establishing a subordinate - master relationship between the two items. The easiest way to attach nodes is to call the (Markdown/T_MindFusion_Diagramming_DiagramNode.md#attachto) method. When a master element is moved or resized, any subordinated node follows it, so that the initial distance between the two items stays constant. This happens both when a user moves the master item around, and when the item position is changed using a method or a property. Recent versions of the API include (Markdown/T_MindFusion_Diagramming_NodeLabel_0.md) and (Markdown/T_MindFusion_Diagramming_LinkLabel.md) classes, which address several of the scenarios described below. We recommend using these classes when appropriate, as they offer a more lightweight and easily configurable alternative to attached nodes. ### Possible Uses - Attach a (Markdown/T_MindFusion_Diagramming_ShapeNode.md#transparent) shape node to another item and set its (Markdown/T_MindFusion_Diagramming_ShapeNode.md#text), so that the shape node acts as an additional label assigned to the main item. - Attach a shape node to another item and set the node's (Markdown/T_MindFusion_Diagramming_ShapeNode.md#image), so it acts as an additional icon displayed inside or near the main item. - Attach a shape node or a table to another item and handle the (Markdown/T_MindFusion_Diagramming_DiagramBase.md#nodeclicked) or similar events to perform some action on the main item. This makes the subordinated node act as a button or another type of UI element attached to the main item. For more complex UI requirements, use an attached ControlNode and handle the events raised by the control it hosts. - In all previous cases, the (Markdown/T_MindFusion_Diagramming_DiagramItem.md#locked) property can be set for attached nodes, which are used only as decorations embellishing the main item. That prevents users from selecting, modifying or drawing links to the subordinates. - Attach child elements in a tree branch to the branch root, so that when a user moves a tree node, the node's children moves simultaneously with it. Modifying an item in such hierarchical group makes the modification pervade through all dependant subordinated items. ### Hierarchical Grouping A unit of attached items is represented by an instance of the (Markdown/T_MindFusion_Diagramming_Group.md) class. To create a group, instantiate a (Markdown/T_MindFusion_Diagramming_Group.md) object and add it to the diagram's (Markdown/T_MindFusion_Diagramming_Diagram.md#groups) collection, or call the (Markdown/T_MindFusion_Diagramming_Factory.md#creategroup) method passing the master object as argument. Attach items to the group using the various (Markdown/T_MindFusion_Diagramming_Group.md) methods. The (Markdown/T_MindFusion_Diagramming_DiagramNode.md#attachto) method of nodes is a shortcut to creating a group and attaching an item to it.Every member of a group can be the master item of another group, that is, an item can be subordinate in one group and meanwhile be another group's master. MindFusion.Diagramming doesn't impose any limits to the depth and width of group hierarchies built that way. However, it is not possible to put an item as a subordinate in more than one groups because the hierarchy relations would become ambiguous. ### Unions It is possible to create such groups, that if any item in the hierarchy is modified, all other items are updated too. This can be done by putting the items in circular chain of dependencies - that is, item1 is attached to item2, item2 to item3 ... itemN to item1. If any of these items is modified, the change will propagate through the chain until it reaches its originator. ### Attaching Items to a Group Links cannot be attached to groups but can be master items of groups. If a group's master item is a link, nodes can be attached to the control points or segments of the link. See the (Markdown/T_MindFusion_Diagramming_Group.md#attachtolinkpoint) and (Markdown/T_MindFusion_Diagramming_Group.md#attachtolinksegment) methods for details. If the master item is a node, other nodes can be attached to any of its corners, or to an area specified as percentage of master-node's bounding rectangle. Check (Markdown/T_MindFusion_Diagramming_Group.md#attachtocorner) and (Markdown/T_MindFusion_Diagramming_Group.md#attachproportional) for details. A shortcut to creating (Markdown/T_MindFusion_Diagramming_Group.md) instance and calling the appropriate AttachTo* methods is provided by the (Markdown/T_MindFusion_Diagramming_DiagramNode.md#attachto) method of the (Markdown/T_MindFusion_Diagramming_DiagramNode.md) class. ### Accessing Group Items Group members can be accessed using the (Markdown/T_MindFusion_Diagramming_Group.md#mainitem) property and the (Markdown/T_MindFusion_Diagramming_Group.md#attachednodes) collection. To get the groups in which an item participates, use its (Markdown/T_MindFusion_Diagramming_DiagramNode.md#mastergroup) and (Markdown/T_MindFusion_Diagramming_DiagramItem.md#subordinategroup) properties. ### Destroying Groups If a user deletes the master item of a group, the group is destroyed automatically and the (Markdown/T_MindFusion_Diagramming_DiagramBase.md#groupdestroyed) event is raised. If (Markdown/T_MindFusion_Diagramming_Group.md#autodeleteitems) is enabled, subordinated items in the group are deleted too. If (Markdown/T_MindFusion_Diagramming_Group.md#autodeleteitems) is disabled, subordinated items are just detached from their master and remain intact. Groups can be destroyed programmatically by removing them from the diagram's (Markdown/T_MindFusion_Diagramming_Diagram.md#groups) collection. ## Layers ### Layers Items can be assigned to layers, and layers can be hidden, locked or moved up/down in the Z order as a group. (Markdown/T_MindFusion_Diagramming_Layer.md) objects provide (Markdown/T_MindFusion_Diagramming_Layer.md#visible), (Markdown/T_MindFusion_Diagramming_Layer.md#locked) and (Markdown/T_MindFusion_Diagramming_Layer.md#zindex) properties, which will affect all items in the respective layer. Layers also expose a (Markdown/T_MindFusion_Diagramming_Layer.md#title) property shown in the LayerListView control. Newly drawn items are added to the layer specified via (Markdown/T_MindFusion_Diagramming_Diagram.md#activelayer). Set the (Markdown/T_MindFusion_Diagramming_DiagramItem.md#layerindex) property of items to associate them with layers in the (Markdown/T_MindFusion_Diagramming_Diagram.md#layers) collection. If (Markdown/T_MindFusion_Diagramming_DiagramItem.md#layerindex) has the default value of -1, the item is not associated with any layer and its visibility depends only on the item's own (Markdown/T_MindFusion_Diagramming_DiagramItem.md#visible) property. ### Layer list control The LayerListView control provides user interface for working with (Markdown/T_MindFusion_Diagramming_Layer.md) objects. The control presents a list of the specified Diagram's layers, showing their title and an overview image of the objects in each layer, and also allows editing of layer's (Markdown/T_MindFusion_Diagramming_Layer.md#visible) and (Markdown/T_MindFusion_Diagramming_Layer.md#locked) properties and choosing the Diagram's currently active layer. New layers can be added to the Diagram by clicking the + button and removed by clicking the - button. The image below illustrates a LayerListView with several layers. ## Collapsing and Expanding Tree Branches If a diagram represents a tree structure, the tree branch starting from a node can be collapsed or expanded again in order to hide or display hierarchy details. Use the nodes' (Markdown/T_MindFusion_Diagramming_DiagramNode.md#collapse) and (Markdown/T_MindFusion_Diagramming_DiagramNode.md#expand) methods to do this programmatically. To determine whether a subtree is expanded or collapsed, check its root's (Markdown/T_MindFusion_Diagramming_DiagramNode.md#expanded) property.### Displaying Expand/Collapse Button If the (Markdown/T_MindFusion_Diagramming_DiagramNode.md#expandable) property of a node is set to true, there is a [±] button displayed beside the node to allow users to collapse or expand the tree branch starting there. The button location can be customized through the diagram's (Markdown/T_MindFusion_Diagramming_Diagram.md#expandbuttonposition) property. The appearance of the collapse / expand icon can be customized by setting (Markdown/T_MindFusion_Diagramming_Renderers.md#expandiconrenderer). By default, pressing that button calls automatically the (Markdown/T_MindFusion_Diagramming_DiagramNode.md#collapse) and (Markdown/T_MindFusion_Diagramming_DiagramNode.md#expand) methods and raises the (Markdown/T_MindFusion_Diagramming_DiagramBase.md#treeexpanded) or (Markdown/T_MindFusion_Diagramming_DiagramBase.md#treecollapsed) events.### Defining Tree Direction A node can be connected to other nodes through outgoing and incoming links. Setting the (Markdown/T_MindFusion_Diagramming_Diagram.md#expandonincoming) property specifies which items connected to a node will be regarded as its descendants. If (Markdown/T_MindFusion_Diagramming_Diagram.md#expandonincoming) is false (default value) then each node will be regarded as a parent of its outgoing links and the items attached to them. If (Markdown/T_MindFusion_Diagramming_Diagram.md#expandonincoming) is set to true, the node's incoming links define its children. So that property specifies the direction of parent-children relationship between diagram items and respectively the overall direction in which collapsing / expanding is done. ### Expanding a Branch Recursively Use the (Markdown/T_MindFusion_Diagramming_Diagram.md#recursiveexpand) property to specify whether the whole tree branch starting from a node will be shown when expanding, or only the first level of descendants. A related property is the (Markdown/T_MindFusion_Diagramming_Group.md#expandable) property of the (Markdown/T_MindFusion_Diagramming_Group.md) class, which specifies whether expanding and collapsing propagate through group members. ### HtmlBuilder Support The (Markdown/T_MindFusion_Diagramming_HtmlBuilder.md) class can generate map areas for the [±] buttons displayed beside (Markdown/T_MindFusion_Diagramming_DiagramNode.md#expandable) nodes. To enable that, assign an URL to the (Markdown/T_MindFusion_Diagramming_HtmlBuilder.md#expandbtnhyperlink) property. That URL can contain some format specifiers which are automatically replaced with the values of nodes' (Markdown/T_MindFusion_Diagramming_DiagramItem.md#tag) or (Markdown/T_MindFusion_Diagramming_DiagramItem.md#zindex) properties. That lets you identify on the server side the node whose [±] button is clicked. ### Custom Expand/Collapse Functionality The (Markdown/T_MindFusion_Diagramming_Diagram.md#expandbuttonaction) property lets you override the standard functionality of the [±] button. Set this property to (Markdown/T_MindFusion_Diagramming_ExpandButtonAction.md) and handle the (Markdown/T_MindFusion_Diagramming_DiagramBase.md#expandbuttonclicked) event if you need to implement your own expand/collapse logic. ## Multiple Diagram Pages The (Markdown/T_MindFusion_Diagramming_DiagramDocument.md) class represents a collection of diagram pages or sheets, represented by (Markdown/T_MindFusion_Diagramming_DiagramPage.md) objects. New pages can be added to the document and existing pages can be removed and reordered via the (Markdown/T_MindFusion_Diagramming_DiagramDocument.md#pages) collection. The (Markdown/T_MindFusion_Diagramming_DiagramDocument.md#savetoxml) and (Markdown/T_MindFusion_Diagramming_DiagramDocument.md#savetojsonstring) methods of (Markdown/T_MindFusion_Diagramming_DiagramDocument.md) save all pages in a single file, and respectively the (Markdown/T_MindFusion_Diagramming_DiagramDocument.md#loadfromxml) and (Markdown/T_MindFusion_Diagramming_DiagramDocument.md#loadfromjsonstring) methods load all pages from the file. (Markdown/T_MindFusion_Diagramming_DiagramDocument.md) can also load files created by the serialization methods of (Markdown/T_MindFusion_Diagramming_Diagram.md), and will show them in a single page. Note that the opposite is not true: (Markdown/T_MindFusion_Diagramming_Diagram.md) cannot load directly a (Markdown/T_MindFusion_Diagramming_DiagramDocument.md) file. (Markdown/T_MindFusion_Diagramming_DiagramPage.md) is derived from (Markdown/T_MindFusion_Diagramming_Diagram.md) and only adds a (Markdown/T_MindFusion_Diagramming_DiagramPage.md#title) property, so any code that processes (Markdown/T_MindFusion_Diagramming_Diagram.md) objects will work with (Markdown/T_MindFusion_Diagramming_DiagramPage.md) objects too. A diagram document forwards each event raised by its pages, giving you a chance to use the same handler for events raised by different pages. If a page should implement distinct user interaction or validation logic, it is also possible to attach handlers to the (Markdown/T_MindFusion_Diagramming_Diagram.md) events inherited by (Markdown/T_MindFusion_Diagramming_DiagramPage.md). A (Markdown/T_MindFusion_Diagramming_DiagramDocument.md) can be exported to PDF and Visio, and imported from Visio using the new overloads available in the (Markdown/T_MindFusion_Diagramming_Export_PdfExporter.md#export), (Markdown/T_MindFusion_Diagramming_Export_VisioExporter.md#export) and (Markdown/T_MindFusion_Diagramming_Import_VisioImporter.md#import) classes respectively. Other export classes do not support multi-page export at this time, but still can be used to export individual pages via their Export(Diagram) method. A single (Markdown/T_MindFusion_Diagramming_DiagramPage.md) could be assigned to the (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md#diagram) property of (Markdown/T_MindFusion_Diagramming_Blazor_DiagramView.md), and that lets you create your own user interface for presenting a list of pages to the user and selecting a current page. ## Components The following topics are discussed in more details: (#using-components) General information on components and how to use them in diagram nodes. (#standard-component-types) A complete list and information about the standard MindFusion.Diagramming components, such as (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md), (Markdown/T_MindFusion_Diagramming_Components_TextComponent.md) and (Markdown/T_MindFusion_Diagramming_Components_ShapeComponent.md). (#components-and-xml) How to define components hierarchies in XML and how to load those hierarchies. (#creating-custom-components) Information on how to implement and use custom components. ## Using Components The components in MindFusion.Diagramming are used through an instance of the (Markdown/T_MindFusion_Diagramming_CompositeNode.md) class or a class deriving from (Markdown/T_MindFusion_Diagramming_CompositeNode.md). Simply create concrete component instances and add them to the (Markdown/T_MindFusion_Diagramming_CompositeNode.md#components) collection of the (Markdown/T_MindFusion_Diagramming_CompositeNode.md). ### Arranging Components By default the composite node arranges its child components on top of each other, in the order they were added to the (Markdown/T_MindFusion_Diagramming_CompositeNode.md#components) collection. To apply custom arrangement, the children should be organized in a component hierarchy using the appropriate panel components. For example, to arrange children horizontally, in a row, you can use the (Markdown/T_MindFusion_Diagramming_Components_StackPanel.md) with (Markdown/T_MindFusion_Diagramming_Components_StackPanel.md#orientation) set to (Markdown/T_MindFusion_Diagramming_Components_Orientation.md). Here is an example on how to do this in code: ```csharp CompositeNode node = new CompositeNode(); StackPanel panel = new StackPanel(); panel.Orientation = MindFusion.Diagramming.Components.Orientation.Horizontal; panel.Spacing = 1; TextComponent text = new TextComponent(); text.Text = "Hello world!"; panel.Components.Add(text); ButtonComponent button = new ButtonComponent(); TextComponent buttonContent = new TextComponent(); buttonContent.Text = "Click me!"; button.Content = buttonContent; panel.Components.Add(button); node.Components.Add(panel); ``` ``` Dim node As New CompositeNode() Dim panel As New StackPanel() panel.Orientation = MindFusion.Diagramming.Components.Orientation.Horizontal panel.Spacing = 1 Dim text As New TextComponent() text.Text = "Hello world!" panel.Components.Add(text) Dim button As New ButtonComponent() Dim buttonContent As New TextComponent() buttonContent.Text = "Click me!" button.Content = buttonContent panel.Components.Add(button) node.Components.Add(panel) ``` It is possible to create custom panel classes by deriving from (Markdown/T_MindFusion_Diagramming_Components_ContentComponent.md) and overriding the (Markdown/T_MindFusion_Diagramming_Components_ContainerComponent.md#arrangecomponents) method. For an example on how to implement custom panel classes, check the (#creating-custom-components) topic. Another way to arrange child components is by deriving from (Markdown/T_MindFusion_Diagramming_CompositeNode.md) and overriding the (Markdown/T_MindFusion_Diagramming_CompositeNode.md#arrangecomponents) method. Then, you can manually assign the position of individual nodes through their (Markdown/T_MindFusion_Diagramming_Components_ComponentBase.md#bounds) property. ### Finding Components The (Markdown/T_MindFusion_Diagramming_CompositeNode.md#findcomponent) method of the (Markdown/T_MindFusion_Diagramming_CompositeNode.md) class can be used to search for components by their (Markdown/T_MindFusion_Diagramming_Components_ComponentBase.md#name). This method performs a recursive search of all components in the (Markdown/T_MindFusion_Diagramming_CompositeNode.md#components) collection and returns a reference to the first component with the specified name. This is particularly useful when the component hierarchy is defined through XML and you need to obtain a reference to a specific component in the hierarchy for additional processing. For more information on how to define components in XML check (#components-and-xml). ### Hit-testing Components To retrieve the topmost component at a specific location, use the (Markdown/T_MindFusion_Diagramming_CompositeNode.md#getcomponentat) method of the (Markdown/T_MindFusion_Diagramming_CompositeNode.md) class. This method ignores components with any of the following properties set to false: (Markdown/T_MindFusion_Diagramming_Components_ComponentBase.md#isenabled), (Markdown/T_MindFusion_Diagramming_Components_ComponentBase.md#ishittestvisible). ## Standard Component Types The following image illustrates the standard components using the default appearance settings. Additional information about the individual components can be found below. ### Border Components The border components can adorn a single component with a border and a background. To nest a more complicated structure within a border, use one of the panel components as a parent. The border component exposes few properties. The (Markdown/T_MindFusion_Diagramming_Components_BorderComponent.md#background) and (Markdown/T_MindFusion_Diagramming_Components_BorderComponent.md#pen) can be used to define the border appearance. The derived (Markdown/T_MindFusion_Diagramming_Components_ContentComponent.md#padding) property can be used to specify the distance between the border sides and the child component. The border child can be assigned through the (Markdown/T_MindFusion_Diagramming_Components_ContentComponent.md#content) property. ### Button Components The button components represent a clickable button. The button components, similar to the border components, can host a single child component - usually a (Markdown/T_MindFusion_Diagramming_Components_TextComponent.md). The default button appearance is controlled through a set of brush and pen properties - (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md#brush), (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md#brushhovered), (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md#brushpressed), (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md#pen), (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md#penhovered) and (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md#penpressed). These properties define the appearance of the button in its different states. An alternative way to define the button appearance is through images by using the (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md#imagelist) property. In addition the buttons can be custom drawn by handling the (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md#customdraw) event. When a button component is clicked, the (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md#clicked) event is raised. ### CheckBox Components The check box components represent specialized buttons with an additional state - checked. The appearance of the check box in its checked state can be customized through the (Markdown/T_MindFusion_Diagramming_Components_CheckBoxComponent.md#checkedimagelist). The state can be programmatically get or set through the (Markdown/T_MindFusion_Diagramming_Components_CheckBoxComponent.md#ischecked) property. ### Text Components Text components can display static text. Text components expose an array of properties for customizing the appearance of the displayed text, including (Markdown/T_MindFusion_Diagramming_Components_TextComponent.md#font), (Markdown/T_MindFusion_Diagramming_Components_TextComponent.md#textcolor), (Markdown/T_MindFusion_Diagramming_Components_TextComponent.md#textalignment), (Markdown/T_MindFusion_Diagramming_Components_TextComponent.md#linealignment) and (Markdown/T_MindFusion_Diagramming_Components_TextComponent.md#background). The text of the text components can be specified through the (Markdown/T_MindFusion_Diagramming_Components_TextComponent.md#text) property. ### Edit Components Edit components display editable text content and are analogous to entry / text box controls provided by operating systems / UI frameworks. The following properties define the appearance of the text within the component - (Markdown/T_MindFusion_Diagramming_Components_EditComponent.md#font), (Markdown/T_MindFusion_Diagramming_Components_EditComponent.md#textcolor), (Markdown/T_MindFusion_Diagramming_Components_EditComponent.md#textwrapping). In order to edit the text in an edit component, the component has to have keyboard input. This is achieved by setting (Markdown/T_MindFusion_Diagramming_Components_ComponentBase.md#isfocused) to true. The user can focus an edit component by clicking on it with the left mouse button. To enable single line edit mode set (Markdown/T_MindFusion_Diagramming_Components_EditComponent.md#acceptsreturn) to false. The edit components expose several events, most notably - (Markdown/T_MindFusion_Diagramming_Components_EditComponent.md#textchanging) and (Markdown/T_MindFusion_Diagramming_Components_EditComponent.md#textchanged). ### Selection The current selection of the edit component is defined through the (Markdown/T_MindFusion_Diagramming_Components_EditComponent.md#selectionstart) and (Markdown/T_MindFusion_Diagramming_Components_EditComponent.md#selectionlength) properties. The appearance of the selection is defined through the (Markdown/T_MindFusion_Diagramming_Components_EditComponent.md#selectioncolor), (Markdown/T_MindFusion_Diagramming_Components_EditComponent.md#inactiveselectioncolor) and (Markdown/T_MindFusion_Diagramming_Components_EditComponent.md#hideselection) properties. ### Undo/Redo The edit components implement undo and redo internally. To undo the most recent changes press CTRL+Z while the edit component has the input focus. To redo the changes, press CTRL+Y. ### Clipboard All standard Clipboard operations are supported and can be accessed through the usual keyboard shortcuts: Copy - CTRL+C, Cut - CTRL+X, Paste - CTRL+V. ### NumericEdit Components The numeric edit components are similar to the generic edit components. The main difference is that the numeric edits (as the name suggests) allow only numeric input. In addition to the standard edit events, the numeric edits also expose the more specialized (Markdown/T_MindFusion_Diagramming_Components_NumericEditComponent.md#validatevalue) and (Markdown/T_MindFusion_Diagramming_Components_NumericEditComponent.md#valuechanged) events. The numeric components support undo, redo and clipboard as well. ### Image Components The image components display an image in different alignment modes. The image and alignment can be specified through the (Markdown/T_MindFusion_Diagramming_Components_ImageComponent.md#image) and (Markdown/T_MindFusion_Diagramming_Components_ImageComponent.md#imagealign) properties respectively. ### Shape Components The shape components can display arbitrary geometrical shapes. Any shape defined through a (Markdown/T_MindFusion_Diagramming_Shape.md) object can be used, including all (#table-of-predefined-shapes). The shape components can also be initialized using the specialized geometry syntax when defined in XML. For more information regarding this, check (#components-and-xml). The appearance of the displayed shape is specified through the (Markdown/T_MindFusion_Diagramming_Components_ShapeComponent.md#brush) and (Markdown/T_MindFusion_Diagramming_Components_ShapeComponent.md#pen) properties and the shape itself is assigned through the (Markdown/T_MindFusion_Diagramming_ShapeNode.md#shape) property. ### Slider Components The slider components provide a way to interactively select a single numeric value or a range of numeric values from within a fixed interval, by dragging one or more thumbs along a horizontal rail. In addition the slider component provides two buttons which can be used to adjust the value more precisely. The type of the slider component can be specified through the (Markdown/T_MindFusion_Diagramming_Components_SliderComponent.md#type) property. The interval of available values can be set through the (Markdown/T_MindFusion_Diagramming_Components_SliderComponent.md#minimum) and (Markdown/T_MindFusion_Diagramming_Components_SliderComponent.md#maximum) properties. The selected values can be get or set through the (Markdown/T_MindFusion_Diagramming_Components_SliderComponent.md#value), (Markdown/T_MindFusion_Diagramming_Components_SliderComponent.md#startvalue) and (Markdown/T_MindFusion_Diagramming_Components_SliderComponent.md#endvalue) properties respectively depending on the type of the slider. The components expose a set of events, which are raised when the slider values are changed interactively. These events are (Markdown/T_MindFusion_Diagramming_Components_SliderComponent.md#batchvaluechanged), (Markdown/T_MindFusion_Diagramming_Components_SliderComponent.md#endvaluechanged), (Markdown/T_MindFusion_Diagramming_Components_SliderComponent.md#startvaluechanged), and (Markdown/T_MindFusion_Diagramming_Components_SliderComponent.md#valuechanged). ### Spinner Components The spinner components represent a composition of a numeric edit box and two buttons. In addition to the core functionality provided by the numeric edit, the value can also be adjusted through the buttons or by pressing the Up, Down, PageUp and PageDown keys while the edit has the input focus. The interval in which the value can vary is specified through the (Markdown/T_MindFusion_Diagramming_Components_SpinnerComponent.md#minimum) and (Markdown/T_MindFusion_Diagramming_Components_SpinnerComponent.md#maximum) properties. The current value can be accessed through the (Markdown/T_MindFusion_Diagramming_Components_SpinnerComponent.md#value) property. The events that are raised when the value is changed are (Markdown/T_MindFusion_Diagramming_Components_SpinnerComponent.md#valuechanged) and (Markdown/T_MindFusion_Diagramming_Components_SpinnerComponent.md#batchvaluechanged). ### Simple Panels The most basic of all three built-in panels. Simple panels arrange their child components on top of each other, in the order they were added in the (Markdown/T_MindFusion_Diagramming_Components_ContainerComponent.md#components) collection. The children are positioned within the available space according to their (Markdown/T_MindFusion_Diagramming_Components_ComponentBase.md#horizontalalignment), (Markdown/T_MindFusion_Diagramming_Components_ComponentBase.md#verticalalignment), (Markdown/T_MindFusion_Diagramming_Components_ComponentBase.md#width) and (Markdown/T_MindFusion_Diagramming_Components_ComponentBase.md#height). ### Stack Panels Stack panels arrange their children in a vertical or horizontal row, according to the value of the (Markdown/T_MindFusion_Diagramming_Components_StackPanel.md#orientation) property. ### Grid Panels Grid panels arrange their children in a table. The rows and columns of this table are defined through (Markdown/T_MindFusion_Diagramming_Components_GridRow.md) and (Markdown/T_MindFusion_Diagramming_Components_GridColumn.md) objects which are added to the (Markdown/T_MindFusion_Diagramming_Components_GridPanel.md#rows) and (Markdown/T_MindFusion_Diagramming_Components_GridPanel.md#columns) collection of the (Markdown/T_MindFusion_Diagramming_Components_GridPanel.md) respectively. Each grid panel needs to define at least one column and row in order to be effective. The destination row and column of individual child components depends on the value of their (Markdown/T_MindFusion_Diagramming_Components_ComponentBase.md#gridrow) and (Markdown/T_MindFusion_Diagramming_Components_ComponentBase.md#gridcolumn) properties. ## Components and XML As described in the (#using-components) topic, to use components in MindFusion.Diagramming you need to instantiate them and add them to the (Markdown/T_MindFusion_Diagramming_CompositeNode.md#components) collection of a (Markdown/T_MindFusion_Diagramming_CompositeNode.md). MindFusion.Diagramming provides a more convenient method for defining component hierarchies - through XML. ### Definition Each node in the source XML represents a component or an object. The child nodes in the XML represent child components. The XML attributes represent either property assignments or event handler attachments. A simple component hierarchy defined in XML is illustrated below: ```                                                                                                             ``` Because the XML documents have a single root, the component hierarchies defined through XML can have a single root too. In the case when a hierarchy needs to have more than one root each root can be defined in its own XML or all the root components can be grouped under a single component container. As is observed in the sample above the components can be specified through shortcut names. The following table lists all available shortcuts: | **Component ** | **Shortcut Name ** | (Markdown/T_MindFusion_Diagramming_Components_BorderComponent.md) | Border | (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md) | Button | (Markdown/T_MindFusion_Diagramming_Components_CheckBoxComponent.md) | CheckBox | (Markdown/T_MindFusion_Diagramming_Components_EditComponent.md) | Edit | (Markdown/T_MindFusion_Diagramming_Components_ImageComponent.md) | Image | (Markdown/T_MindFusion_Diagramming_Components_ShapeComponent.md) | Shape | (Markdown/T_MindFusion_Diagramming_Components_TextComponent.md) | Text | (Markdown/T_MindFusion_Diagramming_Components_NumericEditComponent.md) | NumericEdit | (Markdown/T_MindFusion_Diagramming_Components_SliderComponent.md) | Slider | (Markdown/T_MindFusion_Diagramming_Components_SpinnerComponent.md) | Spinner The components can also be defined using their full names. ### Composite Properties Some properties have too complex values and cannot be represented with attributes. Consider for example the collection properties, such as the (Markdown/T_MindFusion_Diagramming_Components_GridPanel.md#columns) and (Markdown/T_MindFusion_Diagramming_Components_GridPanel.md#rows) properties of the (Markdown/T_MindFusion_Diagramming_Components_GridPanel.md). These properties can be defined as child nodes using the specialized syntax illustrated below: ```         ``` For example, to define (Markdown/T_MindFusion_Diagramming_Components_ContentComponent.md#content) of a (Markdown/T_MindFusion_Diagramming_Components_ButtonComponent.md), you can use the following syntax: ``` ``` ### Images Images can be defined in XML using Bitmap objects and string paths. Here is an example: ```       Images/MyImage.png   ``` In the example above "Images/MyImage.png" will be interpreted as a string and the loader will attempt to create a new Bitmap instance by passing this string as an argument to the Bitmap(string) constructor. ### Shapes The (Markdown/T_MindFusion_Diagramming_Components_ShapeComponent.md#shape) of shape components can be defined in XML by either specifying the name of a (#table-of-predefined-shapes) or by using the specialized syntax for graphical paths. The example below defines two (Markdown/T_MindFusion_Diagramming_Components_ShapeComponent.md) instances in a (Markdown/T_MindFusion_Diagramming_Components_StackPanel.md). The first shape component uses the predefined (Markdown/T_MindFusion_Diagramming_Shapes.md#ellipse) shape and the second uses a custom arrow shape: ```     ``` The specialized graphical path syntax supports the following subset of operations: | **Command ** | **Description ** | MX,Y | Moves to point (X, Y). | LX,Y | Draws a line from the current point to point (X, Y). | CX1,Y1 X2,Y2 X3,Y3 | Draws a curve from the current point to (X3, Y3) using points (X1, Y1) and (X2, Y2) as control points. | AW,H R A D X,Y | Draws an arc with size (W, H) using rotation R and an end point (X, Y). A specifies whether to draw the large arc (1 - large arc, 0 - small arc) and D specifies direction - (1 - positive angle, 0 - negative). | z | Closes the figure. ### Event Handlers Event handlers can be specified using attributes by setting the name of the event as the name of the attribute and the name of the handling method as attribute value. Consider the following example: ```