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 2007, 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

An initial layout of nodes is always done using MSAGL. You can always

usedynamicconnectors

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 in Example 1 was set to “false”, the output would be this.

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

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>