一个简单的WEB流程图组件[demo]

我们常常要在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>

链接处理：

Code
        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();