Visio: Using MSAGL to Create Visio Flowcharts Programmatically
Inspired by Chris Roth’s post on creating flowcharts programmatically and my original post on MSAGL with Visio, I’ve uploaded a new version of the VisioAutoExt library that has lets you automatically create flowcharts from a simple XML file.
Quick summary
- The VisioAutoExt library now contains a command-line tool called MakeFlowChart
- MakeFlowChart accepts simple XML syntax and can layout a flowchart using MSAGL or Visio to position the flowchart shapes.
- You are not restricted to flowcharts! It will draw any diagram. Though not all shapes work well with the Dynamic Connector used by the tool
Command-Line Usage
C:\>MakeFlowChart.exe d:\input1.xml
Example 1 – the input XML
<autolayoutdrawing>
<renderoptions
usedynamicconnectors="true"
connectorlineweight="3"
connectorarrowsize="5"
resizetofitcontents="true"
/>
<shapes>
<shape id="n1" label="FOO1" stencil="server_u.vss" master="Server" />
<shape id="n2" label="FOO2" stencil="server_u.vss" master="Email Server" />
<shape id="n3" label="FOO3" stencil="server_u.vss" master="Proxy Server" />
<shape id="n4" label="FOO4" stencil="server_u.vss" master="Web Server" />
<shape id="n5" label="FOO4" stencil="server_u.vss" master="Application Server" />
</shapes>
<connectors>
<connector id="c1" from="n1" to="n2" label="LABEL1" />
<connector id="c2" from="n2" to="n3" label="LABEL2" />
<connector id="c3" from="n3" to="n4" label="LABEL1" />
<connector id="c4" from="n4" to="n5" label=""/>
<connector id="c5" from="n4" to="n1" label=""/>
<connector id="c6" from="n4" to="n3" label=""/>
</connectors>
</autolayoutdrawing>
Example 1 – the output drawing
Layout – the initial placement of nodes
An initial layout of nodes is always done using MSAGL.
Controlling whether to use Dynamic Connectors or Bezier curves
For a proper Visio diagram we should use Dynamic Connectors, but MSAGL draws the edges with Bezier curves.
The usedynamicconnectors attribute controls whether to use dynamic connectors or just draw the bezier curves that MSAGL defines for the drawing.
For example, if usedynamicconnectors is set to “false” in Example 1 , the output would look like the image below. The bezier curves look nice, but are cannot respond to editing the diagram, unlike Dynamic Connectors.
Not satisfied with the MSAGL placement of nodes?
If you specified the use of dynamic connectors, you can always force the output to relayout using Visio’s algorithm via the Shape > Re-layout Shapes menu item.
Which will product this result for example 1
The node spacing is a bit tight by default. This can again be controlled via Shape > Configure Layout
And picking a larger number for Spacing.
Using different stencils and masters
Just specify the stencil and master name in the stencil and master attributes
<autolayoutdrawing>
<renderoptions
usedynamicconnectors="true"
connectorlineweight="3"
connectorarrowsize="5"
resizetofitcontents="true"
/>
<shapes>
<shape id="n1" label="FOO1" stencil="basflo_u.vss" master="Decision" />
<shape id="n2" label="FOO2" stencil="basflo_u.vss" master="Process" />
<shape id="n3" label="FOO3" stencil="basflo_u.vss" master="Data" />
<shape id="n4" label="FOO4" stencil="basflo_u.vss" master="Process" />
<shape id="n5" label="FOO4" stencil="basflo_u.vss" master="Data" />
</shapes>
<connectors>
<connector id="c1" from="n1" to="n2" label="LABEL1" />
<connector id="c2" from="n2" to="n3" label="LABEL2" />
<connector id="c3" from="n3" to="n4" label="LABEL1" />
<connector id="c4" from="n4" to="n5" label=""/>
<connector id="c5" from="n4" to="n1" label=""/>
<connector id="c6" from="n4" to="n3" label=""/>
</connectors>
</autolayoutdrawing>
