Category Archives: Diagramming

Diagramming for WinForms, V6.3.2

Posted on by

We have released a new version of the popular FlowChart.NET diagramming component. Here is an overview of the newly added features:

Support for Microsoft Visio stencils

You can now display shapes from stencil files in Visio 2003 XML stencil format (.vsx) into your FlowChart.NET diagrams. To load a stencil file, use an instance of the VisioStencil class. The shapes are displayed in the diagram through VisioNode objects. It’s very easy to associate a stencil shape with the node – just create an instance of the VisioContent class and assign it to the node’s Content property.

Note: Standard stencils installed with Visio are copyrighted by Microsoft, and you should not use them in your application. This feature is intended to let you use public domain stencils, or commercial clipart you have purchased a license for.

Diagramming for WinForms Visio import and export classes do not support VisioNodes yet; this will be implemented in future releases.

Visio Stencil Shapes

Visio Stencil Shapes

License keys

MindFusion no longer supports separate trial and licensed builds of the control assemblies. Instead, set the DiagramView.LicenseKey property to disable the component’s evaluation mode and stop displaying trial messages. If your application contains more than one DiagramView instance or other MindFusion components, you could call MindFusion.Licensing.LicenseManager.AddLicense(key) from application start-up code to specify the key once instead of setting it per each control. License key strings are now listed on the Keys & Downloads page at MindFusion’s customer portal.

Miscellaneous

  • You can specify the maximum tab size in TabbedDiagramView with the new MaxTabSize property.
  • The type of LinkLabel.Margin property has been changed from float to Thickness.
  • Initial state of PrintPreviewEx landscape button now corresponds to value of PageSettings.Landscape property.
  • ChangeUnit now also scales child elements of nodes such as TableNode cells and TreeViewNode items.
  • as well other new features and improvements. Read the full list here.

The trial version is available for direct download from the link below:

Diagramming for WinForms, V6.3.2 Trial Version Download

Your comments and feedback about the new version is welcomed. You can use the Diagramming for WinForms forum, the help desk or write us at support@mindfusion.eu. Our support team will be pleased to help you.

About MindFusion.Diagramming for WinForms: A programming component that provides any WinForms application with a full set of features for creating and customizing all types of diagrams, flowcharts, schemes, hierarchies, trees, graphs etc. The control provides numerous ways to save and load a diagram, six auxiliary controls and more than 12 automatic graph layout algorithms. Diagram elements include scrollable tables, container nodes, multi-segment arrows, custom diagram item types and many more. Further details here.

Diagramming for WinForms is a royalty-free component, clients get 12 month upgrade subscription when buying a license. The source code is also available for purchase. Visit the buy page for a list with the current license prices.

Database schema diagram

Posted on by

In this post we’ll show how to use TableNode objects to display tabular data, more specifically database schema information. A Visual Studio sample project containing the code from this post is available for download here:

DatabaseSchema.zip

To start, create a new Windows Forms application, and place a text field for connection string, a button and a DiagramView on the form. In the code-behind file, add following field to map table name to respective TableNode objects:

Dictionary<string, tablenode=""> tables = new Dictionary<string, tablenode="">();
</string,></string,>

Add a RectangleF that stores default size passed to CreateTableNode method:

RectangleF defaultSize = new RectangleF(0, 0, 30, 30);

Create a ReadTables method, which provided an SqlConnection, parses its schema information and creates diagram nodes:

void ReadTables(SqlConnection connection)
{
	// get table schema definitions from connection
	var schema = connection.GetSchema("Tables");
	foreach (DataRow row in schema.Rows)
	{
		// fetch table name
		var name = row["TABLE_NAME"].ToString();

		// create respective node
		var table = diagram.Factory.CreateTableNode(defaultSize);
		table.Caption = name;
		table.Shape = SimpleShape.RoundedRectangle;
		table.Brush = new MindFusion.Drawing.SolidBrush(Color.LightGray);

		// register node in dictionary for future foreign key reference
		tables[name.Replace(" ", "_")] = table;
		ReadFields(table, connection,
			row["TABLE_CATALOG"].ToString(), null, name);
	}

	ReadForeignKeys(connection);
}

The ReadFields method takes table node and name parameters and creates node cells that will show information for the column name and type of database tables:

void ReadFields(TableNode node,
	SqlConnection connection, string db, string owner, string tableName)
{
	// remove default cells
	node.RowCount = 0;

	// reserve one column for name and one for data type
	node.ColumnCount = 2;

	// read column definitions of specified table
	var schema = connection.GetSchema("Columns", new[] { db, owner, tableName });
	foreach (DataRow row in schema.Rows)
	{
		// add a new row to the node
		int r = node.AddRow();

		// set cells' text to the column name and type
		node[0, r].Text = row["COLUMN_NAME"].ToString();
		node[1, r].Text = row["DATA_TYPE"].ToString();

	}

	// make table cells big enough to show all text
	node.ResizeToFitText(false);
}

The ReadForeignKeys method creates DiagramLink connectors between table nodes to show the relationships between database tables:

void ReadForeignKeys(SqlConnection connection)
{
	var schema = connection.GetSchema("ForeignKeys");
	foreach (DataRow row in schema.Rows)
	{
		// read foreign key information
		string fkName = row["CONSTRAINT_NAME"].ToString();
		string tableName = row["TABLE_NAME"].ToString().Replace(" ", "_");
		string prefix = "FK_" + tableName + "_";
		if (fkName.StartsWith(prefix))
		{
			string targetName = fkName.Substring(prefix.Length);

			// get table nodes registered for specified names
			if (tables.ContainsKey(targetName) && tables.ContainsKey(tableName))
			{
				var table = tables[tableName];
				var targetTable = tables[targetName];

				// create a link between the nodes to show relationship
				diagram.Factory.CreateDiagramLink(table, targetTable);
			}
		}
	}
}

Finally handle the button’s click event to open specified connection and call ReadTables. Apply AnnealLayout to arrange the tables so that they do not overlap:

private void btnOpen_Click(object sender, System.EventArgs e)
{
	diagram.ClearAll();

	try
	{
		var connection = new SqlConnection(tbConnection.Text);
		connection.Open();

		// read schema and create corresponding diagram items
		ReadTables(connection);

		connection.Close();
	}
	catch (Exception exception)
	{
		MessageBox.Show(exception.Message);
		diagram.ClearAll();
	}

	// arrange the tables to remove overlaps
	var layout = new AnnealLayout();
	layout.SplitGraph = true;
	layout.Randomize = false;
	layout.MultipleGraphsPlacement = MultipleGraphsPlacement.MinimalArea;
	layout.Margins = new SizeF(10, 10);
	layout.Arrange(diagram);
}

If you run the project and open the Northwind sample database by Microsoft, you should see this diagram:

database schema layout

The code above uses MindFusion’s .NET API and can be used with Windows Forms, WPF, Silverlight and ASP.NET diagramming components. The Java API for Android and desktop Swing application will look similar, with setter method calls instead of property assignments.

You can download the trial version of any MindFusion.Diagramming component from this page.

Enjoy!

MindFusion Controls on NuGet

Posted on by

All MindFusion components for WinForms, WPF and Silverlight are now available as NuGet packages. The following table lists the NuGet IDs of the individual products:

Product NuGet ID
MindFusion.Charting for WinForms
MindFusion.Diagramming for WinForms
MindFusion.Gauges for WinForms
MindFusion.Pack for WinForms
MindFusion.Reporting for WinForms
MindFusion.Scheduling for WinForms
MindFusion.Spreadsheet for WinForms		 MindFusion.Charting
MindFusion.Diagramming
MindFusion.Gauges
MindFusion.Pack
MindFusion.Reporting
MindFusion.Scheduling
MindFusion.Spreadsheet
MindFusion.Charting for WPF
MindFusion.Diagramming for WPF
MindFusion.Gauges for WPF
MindFusion.Pack for WPF
MindFusion.Reporting for WPF
MindFusion.Scheduling for WPF
MindFusion.Spreadsheet for WPF		 MindFusion.Charting.Wpf
MindFusion.Diagramming.Wpf
MindFusion.Gauges.Wpf
MindFusion.Pack.Wpf
MindFusion.Reporting.Wpf
MindFusion.Scheduling.Wpf
MindFusion.Spreadsheet.Wpf
MindFusion.Charting for Silverlight
MindFusion.Diagramming for Silverlight
MindFusion.Gauges for Silverlight
MindFusion.Pack for Silverlight
MindFusion.Reporting for Silverlight
MindFusion.Scheduling for Silverlight		 MindFusion.Charting.Silverlight
MindFusion.Diagramming.Silverlight
MindFusion.Gauges.Silverlight
MindFusion.Pack.Silverlight
MindFusion.Reporting.Silverlight
MindFusion.Scheduling.Silverlight

The complete list of MindFusion products on NuGet can be found here: https://www.nuget.org/profiles/MindFusion.

The NuGet manager is available for Visual Studio 2010, Visual Studio 2012, and Visual Studio 2013 and can be downloaded from here: https://www.nuget.org/.

To install a package, run the following command in the Package Manager Console (accessible from the Visual Studio menu: Tools → NuGet Package Manager → Package Manager Console):

PM> Install-Package

Where <id> is the NuGet ID of the package. For example, to install MindFusion.Diagramming for WinForms, use:

PM> Install-Package MindFusion.Diagramming

Enjoy!

Diagramming for ASP.NET, V5.4.1 & Diagramming for ASP.NET MVC, V2.4

Posted on by

MindFusion is pleased to announce the new releases of its Diagramming components for ASP.NET MVC and ASP.NET. We have added the following new useful features:

Styled text
The ShapeNode.EnableStyledText property allows using HTML-like formatting tags to apply various attributes to the node’s text. At this time the components support the following formatting tags:

  • <b> specifies bold text
  • <i> specifies italic text
  • <u> specifies underlined text
  • <color=value> specifies text color
  • <br /> specifies line break
Styled text in an ASP.NET/ASP.NET MVC diagram

Styled text in an ASP.NET/ASP.NET MVC diagram

Improved text rendering

  • We have gratly improved the general text rendering quality. The components now remove scale transformations applied for MeasureUnit and ZoomFactor before drawing text on the canvas, and instead specify a scaled font size, which helps improve text appearance in Firefox and older versions of Chrome.
  • You can draw the items’ text underlined. To enable this, set the underline attribute of the Font class.
  • Font styles can be specified via Style instance by setting its FontStyle property.

License keys

MindFusion no longer provides separate trial and licensed versions of its components. Instead, you should set the LicenseKey property to disable a component’s evaluation mode and stop displaying trial messages. If your application has more than one Diagram instance or other controls by MindFusion, a single call to MindFusion.Licensing.LicenseManager.AddLicense(key) is enough to specify the key for all the controls. You can find your license key strings listed on the Keys & Downloads page at your http://clientsarea.eu account.

Miscellaneous

  • You can draw items using dashed lines in browsers that support the setLineDash function. To enable this, set the Pen.DashStyle property of DiagramItem or the StrokeDashStyle property of Style.
  • Client-side TreeLayout supports organizational charts with assistant nodes as in Microsoft Office diagrams. You can mark nodes as assistants if you set node.LayoutTraits[TreeLayout.Assistant] to a member of the AssistantType enumeration. Set 
    TreeLayout.enableAssistants = true;

    to arrange assistant nodes in a separate branch between the main node levels.

  • Specify if separate connected components of a graph should be arranged horizontally or vertically relatively to each other by setting the multipleGraphsPlacement attribute of layout classes.
  • The type of LinkLabel.Margin property has been changed from number to Thickness, letting you specify different margin sizes at each side of the label.
  • Masters for Start and Arrow7 shapes are added to VisioExporter template file.
  • VisioImporter now tries to preserve ShapeNode.Shape when importing from files created by VisioExporter.

The trial versions of the controls are available for download from the links below:

Download MindFusion.Diagramming for ASP.NET, V5.4.1

Download MindFusion.Diagramming for ASP.NET MVC, V2.4

MindFusion support team is happy to assist you with any questions you might have about Diagramming for ASP.NET MVC, Diagramming for ASP.NET or any other of our products. You can leave a message at the discussion board, use the help desk or e-mail support@mindfusion.eu.. We strive to provide competent and detailed answers to your questions within hours of receiving them.

About Diagramming for ASP.NET Component: An advanced WebForms programming component that offers all the functionality that is needed for creating, styling and presenting attractive flowcharts, hierarchies, trees, graphs, schemes, diagrams and many more. The control offers numerous utility methods, path finding and cycle detection, rich event set and many useful user interaction features like tool tips, multiple selection, copy/paste to/from Windows clipboard and many more.

NetDiagram offers over 100 predefined node shapes, scrollable tables, 13 automatic layouts and many more. You can check the online demo to see some of the features in action. The control includes many samples, detailed documentation and step-by-step tutorials. Every features is duly documented and there’s plenty of code to copy. The component is not only powerful and scalable, but easy to learn and fun to use.

About Diagramming for ASP.NET MVC Control: It is a multi-purpose diagramming tool that consists of two parts: a .NET class library running on the server and a client side control implemented in JavaScript. The server side .NET library implements a flow-diagramming object model that lets you define structures such as trees, flowcharts and graphs. Every element in the diagram is easily accessible and the whole diagram is rendered as part of an HTML page by just calling the DiagramView extension method.

On the client the diagram is rendered by a DiagramView JavaScript control that draws its content on an HTML Canvas. The user is able to add nodes and links simply by drawing them with the mouse. There is also a NodeListView control, which lets users create new nodes via drag and drop.

MvcDiagram also supports various automatic layout algorithms that will make every diagram easy to understand and nice to look at. The diagram can also be easily serialized in binary or XML format. Exporting is done in a variety of formats including Pdf, Svg, Visio and more. You can read details about the components at the MvcDiagram features page.

Diagramming for JavaScript, V2.3

Posted on by

We are happy to share the newly added features to the latest version of MindFusion JavaScript diagramming library:

Styled text in nodes
You can use HTML-like formatting tags with the ShapeNode.EnableStyledText and apply various attributes to the node’s text. Currently JsDiagram supports:

  • <b> specifies bold text
  • <i> specifies italic text
  • <u> specifies underlined text
  • <color=value> specifies text color
  • <br /> specifies line break
Diagramming for JavaScript Library: Styled Text

Diagramming for JavaScript Library: Styled Text

Text rendering improvements

  • We have greatly improved the general text rendering quality. The component now removes scale transformations applied for MeasureUnit and ZoomFactor before drawing text on the canvas, and instead specifies a scaled font size, which helps improve text appearance in Firefox and older versions of Chrome.
  • You can draw the items’ text underlined. To enable this, set the underline attribute of the Font class.
  • You can specify Font styles via the Style instance by calling its setFontStyle() method with a combination of MindFusion.Drawing.FontStyle enumeration members (Bold, Italic, Underline).

Miscellaneous

  • You can draw items with dashed lines in browsers that support the setLineDash function. To enable this, set the StrokeDashStyle property of DiagramItem or Style to a member of the MindFusion.Drawing.DashStyle enumeration (Solid, Dash, Dot, DashDot, DashDotDot).
  • TreeLayout supports organizational charts with assistant nodes as in Microsoft Office diagrams. To mark nodes as assistants, set node.getLayoutTraits().treeLayoutAssistant to a member of the MindFusion.Graphs.AssistantType enumeration (Normal, Left, Right). Set treeLayout.enableAssistants = true; to arrange assistant nodes in a separate branch between the main node levels.
  • You can specify if separate connected components of a graph should be arranged horizontally or vertically relatively to each other by setting the multipleGraphsPlacement attribute of layout classes.
  • The type of LinkLabel.Margin property has been changed from number to Thickness, letting you specify different margin sizes at each side of the label.

You can download the trial version directly from the following link:

Download Diagramming for JavaScript, V2.3 Trial Version

We shall be glad to receive any comments, suggestions and feedback. You can write us at e-mail support@mindfusion.eu or use the help desk. You can use the JsDiagram section on MindFusion forum to post questions about the tool.

About Diagramming for JavaScript Library: 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. 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 – check them here. JsDiagram is not only the perfect choice for creating any type of diagram in the browser – 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 JsDiagram page.