{"id":2822,"date":"2023-06-03T12:44:56","date_gmt":"2023-06-03T12:44:56","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=2822"},"modified":"2023-06-03T12:58:51","modified_gmt":"2023-06-03T12:58:51","slug":"visualize-neural-networks-using-mindfusion-diagram-component","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/visualize-neural-networks-using-mindfusion-diagram-component\/","title":{"rendered":"Visualize neural networks using MindFusion diagram component"},"content":{"rendered":"\n

In this post we’ll show how to visualize a neural network as a flow diagram. The networks will be loaded from Open Neural Network Exchange (ONNX) file format, with a sample network from the https:\/\/github.com\/onnx\/models<\/a> collection.<\/p>\n\n\n\n\n\n\n\n

The complete sample project is available here \u2013
https:\/\/mindfusion.dev\/_samples\/NeuralNet.zip<\/a><\/p>\n\n\n\n

Start by creating a .NET Windows Forms project, in our example we use C# \/ .NET 6 template. Add the MindFusion.Diagramming Nuget package, and double click the DiagramView and Overview controls from toolbox to add them to the form.<\/p>\n\n\n\n

Add the OnnxSharp<\/a> nuget package, which lets us parse ONNX files. Import the following namespaces into the form’s code-behind:<\/p>\n\n\n\n

using Onnx;\n\nusing MindFusion.Diagramming;\nusing MindFusion.Diagramming.Layout;<\/code><\/pre>\n\n\n\n
Parse the ONNX file:<\/p>\n\n\n\n
var model = ModelProto.Parser.ParseFromFile(@\"inception-v1-12-qdq.onnx\");\nvar graph = model.Graph;<\/code><\/pre>\n\n\n\n
Loop over the network nodes and create respective diagram ones. We’ll use a dictionary to keep track for diagram objects corresponding to ONNX ones. The Onnx.NodeProto class contains many properties, but we’ll show just a few of them in grid format using a TableNode:<\/p>\n\n\n\n
var nodeMap = new Dictionary<NodeProto, DiagramNode>();\n\n\/\/ create a TableNode for each graph node\nforeach (var networkNode in graph.Node)\n{\n\tvar diagramNode = diagram.Factory.CreateTableNode(0, 0, 30, 30, 2, 1);\n\tdiagramNode[0, 0].Text = \"OpType:\";\n\tdiagramNode[1, 0].Text = networkNode.OpType;\n\tforeach (var attribute in networkNode.Attribute)\n\t{\n\t\tdiagramNode.AddRow();\n\t\tint r = diagramNode.RowCount - 1;\n\t\tdiagramNode[0, r].Text = attribute.Name;\n\t\tdiagramNode[1, r].Text = attribute.Type.ToString();\n\t}\n\tdiagramNode.ResizeToFitText(false, false);\n\tdiagramNode.Caption = networkNode.Name;\n\tdiagramNode.ConnectionStyle = TableConnectionStyle.Table;\n\n\tnodeMap[networkNode] = diagramNode;\n}<\/code><\/pre>\n\n\n\n
Style the tables a bit:<\/p>\n\n\n\n
diagramNode.Caption = networkNode.Name;\ndiagramNode.CellFrameStyle = CellFrameStyle.Simple;\ndiagramNode.Brush = new MindFusion.Drawing.SolidBrush(Color.LightGray);\ndiagramNode.CaptionBackBrush = new MindFusion.Drawing.SolidBrush(Color.LightSkyBlue);<\/code><\/pre>\n\n\n\n
Find pairs of nodes with matching output -> input identifiers to draw links between them:<\/p>\n\n\n\n
\/\/ draw links when we find pairs of matching output -> input identifiers\nforeach (var networkNode1 in graph.Node)\n{\n\tforeach (var output in networkNode1.Output)\n\t{\n\t\tforeach (var networkNode2 in graph.Node)\n\t\t{\n\t\t\tif (networkNode1 == networkNode2)\n\t\t\t\tcontinue;\n\n\t\t\tforeach (var input in networkNode2.Input)\n\t\t\t{\n\t\t\t\tif (output == input)\n\t\t\t\t{\n\t\t\t\t\tvar diagramNode1 = nodeMap[networkNode1];\n\t\t\t\t\tvar diagramNode2 = nodeMap[networkNode2];\n\t\t\t\t\tdiagram.Factory.CreateDiagramLink(diagramNode1, diagramNode2);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n
Finally arrange the diagram:<\/p>\n\n\n\n
diagram.Arrange(new LayeredLayout { EnforceLinkFlow = true, IgnoreNodeSize = false });\ndiagram.ResizeToFitItems(5);\n<\/code><\/pre>\n\n\n\n
The final result should look like \u2013
\"\"<\/p>\n\n\n\n
The sample above uses MindFusion\u2019s Windows Forms API<\/a>. Code for other frameworks will look similar as MindFusion maintains same diagramming model for multiple platforms. You can download the trial version of any MindFusion.Diagramming component from this page<\/a>.<\/p>\n\n\n\n
Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post we’ll show how to visualize a neural network as a flow diagram. The networks will be loaded from the Open Neural Network Exchange (ONNX) file format, with a sample network from the https:\/\/github.com\/onnx\/models collection. Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[95,74],"tags":[],"class_list":["post-2822","post","type-post","status-publish","format-standard","hentry","category-diagramming-2","category-sample-code"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-Jw","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2822","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=2822"}],"version-history":[{"count":6,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2822\/revisions"}],"predecessor-version":[{"id":2831,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2822\/revisions\/2831"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=2822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=2822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=2822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}