我们常常要在web上显示流程图，网上比较难找，到处要收费，自己琢磨了一个，比较简单，包括开始节点，结束结点，两种节点框图（节点、容器）和两种特殊线（跳线、返回线），使用XML文件或XML字串作为数据源，没有多少需求分析，给有心人参考，也收集一些建议，源码过段时间整理再放上。
demo代码
效果图如下:
数据源说明：
XML数据源
<?XML version="1.0" encoding="utf-8" ?>
<root>
<Attributes>
<Width>120</Width>--节点宽度
<Height>60</Height>--节点高度
</Attributes>
<TaskNodes>
<Task>
<TaskType>Start</TaskType>--开始节点
<TaskCode>Start</TaskCode>--代码
<TaskStatus>Completed</TaskStatus>--是否完成
</Task>
<Task>
<TaskType>Normal</TaskType>--单节点
<TaskCode>OpenForm</TaskCode>
<Title>
<TitleLine>開單</TitleLine>--节点文字第一行
<TitleLine>劉XX</TitleLine>--节点文字第二行
</Title>
<TaskStatus>Completed</TaskStatus>
</Task>
<Task>
<TaskType>Normal</TaskType>
<TaskCode>GroupApprove</TaskCode>
<Title>
<TitleLine>組級審覈</TitleLine>
<TitleLine>王XX</TitleLine>
</Title>
<TaskStatus>Completed</TaskStatus>
</Task>
<Task>
<TaskType>Normal</TaskType>
<TaskCode>SectionApprove</TaskCode>
<Title>
<TitleLine>劉級審覈</TitleLine>
<TitleLine>劉XX</TitleLine>
</Title>
<TaskStatus>Completed</TaskStatus>
</Task>
<Task>
<TaskType>MulApprove</TaskType>--复合结点
<TaskCode>ManageApprove</TaskCode>
<Task>
<TaskType>Normal</TaskType>
<TaskCode>ManageApprove0</TaskCode>
<Title>
<TitleLine>理級審覈</TitleLine>
<TitleLine>趙XX</TitleLine>
</Title>
<TaskStatus>False</TaskStatus>
</Task>
<Task>
<TaskType>Normal</TaskType>
<TaskCode>ManageApprove1</TaskCode>
<Title>
<TitleLine>理級審覈</TitleLine>
<TitleLine>吳XX</TitleLine>
</Title>
<TaskStatus>Completed</TaskStatus>
</Task>
<Task>
<TaskType>Normal</TaskType>
<TaskCode>ManageApprove2</TaskCode>
<Title>
<TitleLine>理級審覈</TitleLine>
<TitleLine>湯XX</TitleLine>
</Title>
<TaskStatus>False</TaskStatus>
</Task>
</Task>
<Task>
<TaskType>End</TaskType>
<TaskCode>End</TaskCode>
<TaskStatus>Completed</TaskStatus>
</Task>
</TaskNodes>
<Lines>
<Line>
<LineType>Back</LineType>--返回线
<LineStart>GroupApprove</LineStart>--起始节点
<LineEnd>OpenForm</LineEnd>--结束节点
</Line>
<Line>
<LineType>Back</LineType>
<LineStart>SectionApprove</LineStart>
<LineEnd>OpenForm</LineEnd>
</Line>
<Line>
<LineType>Back</LineType>
<LineStart>ManageApprove</LineStart>
<LineEnd>OpenForm</LineEnd>
</Line>
<Line>
<LineType>Break</LineType>--跳线
<LineStart>OpenForm</LineStart>
<LineEnd>SectionApprove</LineEnd>
</Line>
<Line>
<LineType>Break</LineType>
<LineStart>GroupApprove</LineStart>
<LineEnd>ManageApprove</LineEnd>
</Line>
</Lines>
</root>
链接处理：
Dictionary<string, string> dicMap = DrawCommon.GetMapXMLString(x, y, w, h, sbXMLString.ToString());
foreach (string TaskCode in dicMap.Keys)
{
string[] arr = dicMap[TaskCode].ToString().Split('&');
sbMap.Append("<area target="blank" href="" + Request.ApplicationPath + "/Detail_workflow.aspx?TaskCode=" + TaskCode + "" shape="rect" coords="" + arr[0] + ", " + arr[1] + ", " + Convert.ToString(Convert.ToInt32(arr[0]) + Convert.ToInt32(arr[2])) + ", " + Convert.ToString(Convert.ToInt32(arr[1]) + Convert.ToInt32(arr[3])) + "">");
}
sbMap.Append("</map>");
divMap.InnerHtml = sbMap.ToString();
