Microsoft Automatic Graph Layout (MSAGL)

The MSAGL Viewer provides interactive controls for modifying graph structures. Use the following mouse and keyboard interactions to manage nodes and edges:

Nodes

• Insert a node: Right-click anywhere on the graph drawing and select an "Insert ..." option from the popup menu.
• Delete a node: Select the node with a left-click, then right-click and select "Delete selected" from the popup menu.
• Select multiple nodes: Use a mouse rubber band window or hold the Control key while left-clicking nodes.

Edges

• Insert an edge: Position the cursor at the source node, hold the middle mouse button to drag a "rubber string" to the target node.
• Edit an edge polyline: Select an edge with a left-click. Drag the circular markers at the polyline corners to reshape the edge. You can also right-click a selected edge to insert or delete polyline corners, or delete the edge entirely.
• Move an edge label: Drag the edge label using the left mouse button.

Labels and History

• Edit labels: To edit a node or edge label, type the new text into the textbox located above the viewer control.
• Undo/Redo: Use the undo and redo buttons located in the viewer toolbar to revert or re-apply changes.

The SvgLayerSample demonstrates how to use MSAGL to construct a graph and render it as an SVG. You can define nodes (including specialized types like ComponentNode and LabeledNode), organize them into Subgraph structures, and connect them with edges. The Diagram class is used to process the Graph and generate the SVG output.

var drawingGraph = new Graph();

// Add various node types
drawingGraph.AddNode(new ComponentNode("Foo"));
drawingGraph.AddNode(new ComponentNode("Bar", "Bar Component", "[Azure Functions]", "This is the Bar component, really really important!"));
drawingGraph.AddNode(new LabeledNode("Component05", new System.Collections.Generic.List<string> { "Component Nr. 5" }));

// Organize nodes into subgraphs
var subGraph = new Subgraph("Section01");
subGraph.AddNode(drawingGraph.FindNode("Component02"));
drawingGraph.RootSubgraph.AddSubgraph(subGraph);

// Add custom labels and styling to nodes
var labels = new List<Svg.Label> {
    new Svg.Label("Component Nr. 9") {
        Font = new System.Drawing.Font("Consolas", 20f, System.Drawing.FontStyle.Bold),
        Color = Color.Azure
    }
};
var labeledNode = new LabeledNode("Component09", labels);
labeledNode.SvgElement.BackgroundColor = Color.Maroon;
drawingGraph.AddNode(labeledNode);

// Define edges
drawingGraph.AddEdge("Foo", "Something", "Bar");

// Render the diagram to SVG
var doc = new Diagram(drawingGraph);
doc.Run();

// Output the SVG string
System.Console.WriteLine(doc.ToString());

To visualize a graph in a Windows Forms application, use the Microsoft.Msagl.GraphViewerGdi.GViewer control. You define a Microsoft.Msagl.Drawing.Graph object, add edges and configure node/edge attributes (like Color, FillColor, or Shape), and then bind the graph to the viewer instance.

using System;
using System.Collections.Generic; 
using System.Windows.Forms; 
class ViewerSample { 
    public static void Main() { 
    //create a form 
        System.Windows.Forms.Form form = new System.Windows.Forms.Form();
    //create a viewer object 
        Microsoft.Msagl.GraphViewerGdi.GViewer viewer = new Microsoft.Msagl.GraphViewerGdi.GViewer();
    //create a graph object 
        Microsoft.Msagl.Drawing.Graph graph = new Microsoft.Msagl.Drawing.Graph("graph");
    //create the graph content 
        graph.AddEdge("A", "B");
        graph.AddEdge("B", "C");
        graph.AddEdge("A", "C").Attr.Color = Microsoft.Msagl.Drawing.Color.Green;
        graph.FindNode("A").Attr.FillColor = Microsoft.Msagl.Drawing.Color.Magenta;
        graph.FindNode("B").Attr.FillColor = Microsoft.Msagl.Drawing.Color.MistyRose;
        Microsoft.Msagl.Drawing.Node c = graph.FindNode("C");
        c.Attr.FillColor = Microsoft.Msagl.Drawing.Color.PaleGreen;
        c.Attr.Shape = Microsoft.Msagl.Drawing.Shape.Diamond;
    //bind the graph to the viewer 
        viewer.Graph = graph;
    //associate the viewer with the form 
        form.SuspendLayout();
        viewer.Dock = System.Windows.Forms.DockStyle.Fill;
        form.Controls.Add(viewer);
        form.ResumeLayout();
    //show the form 
        form.ShowDialog();
    } 
}