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>