{"id":169664,"date":"2007-12-05T11:48:57","date_gmt":"2007-12-05T11:48:57","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/research\/project\/microsoft-automatic-graph-layout\/"},"modified":"2017-06-19T16:12:29","modified_gmt":"2017-06-19T23:12:29","slug":"microsoft-automatic-graph-layout","status":"publish","type":"msr-project","link":"https:\/\/www.microsoft.com\/en-us\/research\/project\/microsoft-automatic-graph-layout\/","title":{"rendered":"Microsoft Automatic Graph Layout"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/microsoft-automatic-graph-layout-2.jpg\" width=\"180\" height=\"120\" \/>MSAGL is a .NET tool for graph layout and viewing. It was developed in Microsoft by Lev Nachmanson, Sergey Pupyrev, Tim Dwyer and Ted Hart. MSAGL is available as open source <a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"https:\/\/github.com\/microsoft\/automatic-graph-layout.git\">here<\/a>.<\/p>\n<p>All samples use the C# language.<\/p>\n<h2>The Distribution Content and Important Features<\/h2>\n<p>The package contains the following:<\/p>\n<ul>\n<li>Layout engine (Microsoft.MSAGL.dll) &#8211; The core layout functionality. This component can be used directly in cases when visualization is handled by a tool other than MSAGL.<\/li>\n<li>Drawing module (Microsoft.MSAGL.Drawing.dll) &#8211; The Definitions of different drawing attributes like colors, line styles, etc. It also contains definitions of a node class, an edge class, and a graph class. By using these classes a user can create a graph object and use it later for layout, and rendering.<\/li>\n<li>Viewer control (Microsoft.MSAGL.GraphViewerGDIGraph.dll) &#8211; The viewer control, and some other rendering functionality.<\/li>\n<\/ul>\n<p>Some important features of the viewer are:<\/p>\n<ul>\n<li>Pan and Zoom of the graph.<\/li>\n<li>Forward and Backward navigation.<\/li>\n<li>Ability to configure tooltips and highlighting of graph entities.<\/li>\n<li>Ability to search for and focus on entities of the graph.<\/li>\n<\/ul>\n\t\t\t<div class=\"moray-accordion\" data-show=\"false\">\n\t\t\t\t\t\t\t<div class=\"clearfix\">\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"btn-group align-items-center mb-g float-sm-right\"\n\t\t\t\t\t\trole=\"group\"\n\t\t\t\t\t\tdata-mount=\"collapse-controls\"\n\t\t\t\t\t\tdata-bi-aN=\"accordion-collapse-controls\"\n\t\t\t\t\t\tdata-target=\"#accordion-1\">\n\t\t\t\t\t\t<button class=\"btn btn-link m-0\" aria-disabled=\"false\" aria-pressed=\"false\" data-action=\"expand\" type=\"button\" data-bi-cN=\"Expand all\">Expand all<\/button>\n\t\t\t\t\t\t<span aria-hidden=\"true\"> | <\/span>\n\t\t\t\t\t\t<button class=\"btn btn-link m-0\" aria-disabled=\"false\" aria-pressed=\"false\" data-action=\"collapse\" type=\"button\" data-bi-cN=\"Collapse all\">Collapse all<\/button>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<ul class=\"accordion\" id=\"accordion-1\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<li class=\"m-0\">\n\t\t\t<h4 class=\"accordion-header\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"btn btn-collapse m-0\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdata-mount=\"collapse\"\n\t\t\t\t\tdata-target=\"#collapse-2\"\n\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\taria-controls=\"collapse-2\">\n\t\tLayouts Created by MSAGL\t\t\t\t<\/button>\n\t\t\t<\/h4>\n\t\t\t<div class=\"collapse\" id=\"collapse-2\">\n\t\t\t\t<div class=\"accordion-body\">\n\t\t\t\t\t\t\t\t\t\t<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/msagl-195f1b23116b4f049b6e5dc815d96c89.png\" width=\"500\" height=\"516\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/msagl-e7c8e896bfd942f7876c394c5250a584.jpg\" width=\"500\" height=\"378\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/msagl-c34826a5e3af4cecbd8165fabc947b36.jpg\" width=\"500\" height=\"412\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/msagl-44a7b11774a54cab92a3f75a9501601b.png\" width=\"500\" height=\"516\" \/><\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/li>\n\t\t\t\t\t\t<li class=\"m-0\">\n\t\t\t<h4 class=\"accordion-header\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"btn btn-collapse m-0\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdata-mount=\"collapse\"\n\t\t\t\t\tdata-target=\"#collapse-3\"\n\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\taria-controls=\"collapse-3\">\n\t\tFAQ\t\t\t\t<\/button>\n\t\t\t<\/h4>\n\t\t\t<div class=\"collapse\" id=\"collapse-3\">\n\t\t\t\t<div class=\"accordion-body\">\n\t\t\t\t\t\t\t\t\t\t<h3>Do I have control over node positions? Can I request that two nodes should be in the same layer?<\/h3>\n<p style=\"padding-left: 30px;\">This feature has not been implemented yet.<\/p>\n<h3>Can a layout be edited by using the viewer?<\/h3>\n<p style=\"padding-left: 30px;\">Yes, see sample Editing.<\/p>\n<h3>I have a graph with sub-graphs. Can you layout a graph taking into account sub-graphs and drawing a bounding box around each sub-graph?<\/h3>\n<p style=\"padding-left: 30px;\">This feature has not been implemented.<\/p>\n<h3>What is the maximal size of a graph that MSAGL can handle?<\/h3>\n<p style=\"padding-left: 30px;\">Theoretically, there is no limit. In practice, MSAGL is not designed to handle huge graphs. Some MSAGL users were successful in laying out and viewing graphs with 15000 edges. They were doing it on a machine with 4G of RAM, and the waiting time was about 10 minutes. By switching LayoutSettings of the graph to MdsLayoutSettings or RankingLayoutSettings a graph with 50000 elements and more can be processed in a reasonable time.<\/p>\n<h3>Can I specify a custom brush for node drawing?<\/h3>\n<p style=\"padding-left: 30px;\">Yes, it can be done by overriding node rendering. See sample NodesWithImages showing how to override node rendering.<\/p>\n<h3>Can I set a node label different from its ID?<\/h3>\n<p style=\"padding-left: 30px;\">Yes, use node.Attr.Label.<\/p>\n<h3>I need to render a graph on a WEB page. Can MSAGL help here?<\/h3>\n<p style=\"padding-left: 30px;\">Sure. Class Microsoft.Msagl.GraphViewerGDI.GraphRenderer serves this purpose. It can render a graph using just a Graphics object. The only think you need to do is to create a Graphics object and pass it to method Render. See the &#8220;Code Sample&#8221; tab below for an example.<\/p>\n<h3>Can I associate my data with a node or an edge of the graph?<\/h3>\n<p style=\"padding-left: 30px;\">Use field UserData of Node or Edge.<\/p>\n<h3>Where can I read a description of how MSAGL works?<\/h3>\n<p style=\"padding-left: 30px;\">There is a technical report explaining the theory behind the tool.<\/p>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/li>\n\t\t\t\t\t\t<li class=\"m-0\">\n\t\t\t<h4 class=\"accordion-header\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"btn btn-collapse m-0\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdata-mount=\"collapse\"\n\t\t\t\t\tdata-target=\"#collapse-4\"\n\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\taria-controls=\"collapse-4\">\n\t\tRelated Links\t\t\t\t<\/button>\n\t\t\t<\/h4>\n\t\t\t<div class=\"collapse\" id=\"collapse-4\">\n\t\t\t\t<div class=\"accordion-body\">\n\t\t\t\t\t\t\t\t\t\t<ul>\n<li><a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"http:\/\/www.microsoftstore.com\/\" target=\"_self\">Buy MSAGL<\/a><\/li>\n<li><a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" title=\"\" href=\"https:\/\/social.msdn.microsoft.com\/Forums\/en-US\/home?forum=automaticgraphlayout\" target=\"_self\">MSAGL Forum<\/a><\/li>\n<li><a class=\"msr-external-link glyph-append glyph-append-open-in-new-tab glyph-append-xsmall\" href=\"https:\/\/github.com\/Microsoft\/automatic-graph-layout.git\" target=\"_self\">MSAGL at github<\/a><\/li>\n<\/ul>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/li>\n\t\t\t\t\t\t<li class=\"m-0\">\n\t\t\t<h4 class=\"accordion-header\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"btn btn-collapse m-0\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tdata-mount=\"collapse\"\n\t\t\t\t\tdata-target=\"#collapse-5\"\n\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\taria-controls=\"collapse-5\">\n\t\tContact Us\t\t\t\t<\/button>\n\t\t\t<\/h4>\n\t\t\t<div class=\"collapse\" id=\"collapse-5\">\n\t\t\t\t<div class=\"accordion-body\">\n\t\t\t\t\t\t\t\t\t\t<ul>\n<li><a href=\"mailto:levnach@microsoft.com?subject=GLEE%20external%20question\">Feedback<\/a><\/li>\n<\/ul>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/li>\n\t\t\t\t\t\t\t\t\t<\/ul>\n\t\t<\/div>\n\t\t\n","protected":false},"excerpt":{"rendered":"<p>MSAGL is a .NET tool for graph layout and viewing. It was developed in Microsoft by Lev Nachmanson, Sergey Pupyrev, Tim Dwyer and Ted Hart. MSAGL is available as open source here. All samples use the C# language. The Distribution Content and Important Features The package contains the following: Layout engine (Microsoft.MSAGL.dll) &#8211; The core [&hellip;]<\/p>\n","protected":false},"featured_media":0,"template":"","meta":{"msr-url-field":"","msr-podcast-episode":"","msrModifiedDate":"","msrModifiedDateEnabled":false,"ep_exclude_from_search":false,"_classifai_error":"","footnotes":""},"research-area":[13551],"msr-locale":[268875],"msr-impact-theme":[],"msr-pillar":[],"class_list":["post-169664","msr-project","type-msr-project","status-publish","hentry","msr-research-area-graphics-and-multimedia","msr-locale-en_us","msr-archive-status-active"],"msr_project_start":"2007-12-05","related-publications":[150634,158360],"related-downloads":[234591],"related-videos":[],"related-groups":[144794],"related-events":[],"related-opportunities":[],"related-posts":[],"related-articles":[],"tab-content":[{"id":0,"name":"Code Samples","content":"<h1>Code Samples<\/h1>\r\nAll samples use\u00a0the C# language.\r\n<h2>The Viewer sample<\/h2>\r\n[caption id=\"\" align=\"alignnone\" width=\"300\"]<img src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2016\/02\/msagl-abc.jpg\" width=\"300\" height=\"300\" \/> Drawing of the graph from the sample[\/caption]\r\n<h3>The code snippet demonstrates the basic usage of the viewer.<\/h3>\r\n<pre>using System;\r\nusing System.Collections.Generic;\r\nusing System.Windows.Forms;\r\nclass ViewerSample {\r\n\tpublic static void Main() {\r\n\t\t\/\/create a form\r\n\t\tSystem.Windows.Forms.Form form = new \r\nSystem.Windows.Forms.Form();\r\n\t\t\/\/create a viewer object\r\n\t\tMicrosoft.Msagl.GraphViewerGdi.GViewer viewer \r\n= new Microsoft.Msagl.GraphViewerGdi.GViewer();\r\n\t\t\/\/create a graph object\r\n\t\tMicrosoft.Msagl.Drawing.Graph graph = new \r\nMicrosoft.Msagl.Drawing.Graph(\"graph\");\r\n\/\/create the graph content\r\n\t\tgraph.AddEdge(\"A\", \"B\");\r\n\t\tgraph.AddEdge(\"B\", \"C\");\r\n\t\tgraph.AddEdge(\"A\", \"C\").EdgeAttr.Color = \r\nMicrosoft.Msagl.Drawing.Color.Green;\r\n\t\tgraph.FindNode(\"A\").Attr.Fillcolor = \r\nMicrosoft.Msagl.Drawing.Color.Magenta;\r\n\t\tgraph.FindNode(\"B\").Attr.Fillcolor = \r\nMicrosoft.Msagl.Drawing.Color.MistyRose;\r\n\t\tMicrosoft.Msagl.Drawing.Node c = \r\ngraph.FindNode(\"C\");\r\n\t\tc.Attr.Fillcolor = \r\nMicrosoft.Msagl.Drawing.Color.PaleGreen;\r\n\t\tc.Attr.Shape = \r\nMicrosoft.Msagl.Drawing.Shape.Diamond;\r\n\t\t\/\/bind the graph to the viewer viewer.Graph = \r\ngraph;\r\n\t\t\/\/associate the viewer with the form\r\n\t\tform.SuspendLayout();\r\n\t\tviewer.Dock = \r\nSystem.Windows.Forms.DockStyle.Fill;\r\n\t\tform.Controls.Add(viewer);\r\n\t\tform.ResumeLayout();\r\n\t\t\/\/\/show the form\r\n\t\tform.ShowDialog();\r\n\t   }\r\n\t}<\/pre>\r\n<h2>Rendering an image sample<\/h2>\r\n[caption id=\"attachment_273462\" align=\"alignnone\" width=\"50\"]<img class=\"wp-image-273462 size-full\" src=\"https:\/\/www.microsoft.com\/en-us\/research\/wp-content\/uploads\/2007\/12\/ALG_RenderingSample.png\" alt=\"ALG_RenderingSample\" width=\"50\" height=\"179\" \/> The image from the sample[\/caption]\r\n\r\nThis sample shows how to render an image by using class <i>Microsoft.Msagl.GraphViewerGDI.GraphRenderer<\/i>.\r\n<pre>Microsoft.Msagl.Drawing.Graph graph = new \r\nMicrosoft.Msagl.Drawing.Graph(\"\"); \r\ngraph.AddEdge(\"A\", \"B\"); \r\ngraph.AddEdge(\"A\", \"B\"); \r\ngraph.FindNode(\"A\").Attr.Fillcolor = \r\nMicrosoft.Msagl.Drawing.Color.Red; \r\ngraph.FindNode(\"B\").Attr.Fillcolor = \r\nMicrosoft.Msagl.Drawing.Color.Blue; \r\nMicrosoft.Msagl.GraphViewerGdi.GraphRenderer renderer \r\n= new Microsoft.Msagl.GraphViewerGdi.GraphRenderer\r\n(graph);\r\nrenderer.CalculateLayout();\r\nint width = 50;\r\nBitmap bitmap = new Bitmap(width, (int)(graph.Height * \r\n(width \/ graph.Width)), PixelFormat.Format32bppPArgb); \r\nrenderer.Render(bitmap); \r\nbitmap.Save(\"test.png\");<\/pre>\r\nAlternatively, if you have a <em>System.Drawing.Graphics<\/em> object available, you can draw by using method <em>public void Render(Graphics graphics, Rectangle rect)<\/em> taking a <em>System.Drawing.Graphics<\/em> object as an argument.\r\n<h2>Sample of using the engine directly<\/h2>\r\nThis sample bypasses the layer of the <em>Microsoft.Msagl.Drawing.dll<\/em>, and <em>Microsoft.Msagl.GraphViewerGDI.dll<\/em>, and works directly with <em>Microsoft.Msagl.dll<\/em>. Notice, that in this case the user code is responsible for creation of curves of node boundaries.\r\n<pre>using Microsoft.Msagl; \r\nusing Microsoft.Msagl.Splines; \r\nclass GLEETester {\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0static void Main(string[] args) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0double w = 10;\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0double h = 10;\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0MsaglGraph graph = new MsaglGraph();\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Node a = new Node(\"a\", new Ellipse(w, h, new Point()));\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Node b = new Node(\"b\", CurveFactory.CreateBox(w, h, new Point()));\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0graph.AddNode(a); graph.AddNode(b);\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Edge e = new Edge(a, b);\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0graph.AddEdge(e);\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0graph.CalculateLayout();\u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} \r\n}<\/pre>\r\nPlease also pay attention to sample WindowsApplication which comes with the distribution and that can serve as a starting point. Comments and bugs should be e-mailed to <a href=\"mailto:levnach@microsoft.com?subject=GLEE%20external%20question\">Lev Nachmanson<\/a>."}],"slides":[],"related-researchers":[{"type":"user_nicename","value":"levnach","display_name":"Lev Nachmanson","author_link":"<a href=\"https:\/\/www.microsoft.com\/en-us\/research\/people\/levnach\/\" aria-label=\"Visit the profile page for Lev Nachmanson\">Lev Nachmanson<\/a>","is_active":false,"user_id":32653,"last_first":"Nachmanson, Lev","people_section":0,"alias":"levnach"}],"msr_research_lab":[199565],"msr_impact_theme":[],"_links":{"self":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-project\/169664"}],"collection":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-project"}],"about":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/types\/msr-project"}],"version-history":[{"count":1,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-project\/169664\/revisions"}],"predecessor-version":[{"id":273456,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-project\/169664\/revisions\/273456"}],"wp:attachment":[{"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/media?parent=169664"}],"wp:term":[{"taxonomy":"msr-research-area","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/research-area?post=169664"},{"taxonomy":"msr-locale","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-locale?post=169664"},{"taxonomy":"msr-impact-theme","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-impact-theme?post=169664"},{"taxonomy":"msr-pillar","embeddable":true,"href":"https:\/\/www.microsoft.com\/en-us\/research\/wp-json\/wp\/v2\/msr-pillar?post=169664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}