在使用UFLO开发业务流程的时候，我们可能需要根据任务ID、历史任务ID、流程实例的ID、历史流程实例ID或流程模版ID或Key来显示对应的流程模版。如果您的项目中包含uflo-console模块，那么要在网页中显示对应的流程进度图是一件非常的简单的事，在uflo-console模块当中，我们已添加了这一功能。
显示流程进度图的URL为：
http://localhost:8080/uflo-test/uflo/diagram
我们可以在这个URL后面添加下面这些参数之一来显示流程图：
| 参数名 | 含义 | 示例 | 描述 |
|---|---|---|---|
| taskId | 任务ID或历史任务ID | http://localhost:8080/uflo-test/uflo/diagram?taskId=202 | 系统会查询任务ID为202的任务，如果存在就显示这个任务对应的流程图， 否则查询历史任务ID为202的历史任务，如果存在就显示。 |
| processId | 流程模版ID | http://localhost:8080/uflo-test/uflo/diagram?processId=202 | 查询流程模版ID为202的流程模版，如果存在就显示对应的流程图。 |
| processKey | 流程模版Key | http://localhost:8080/uflo-test/uflo/diagram?processId=demo-2 | 查询流程模版key为"demo-2"的流程模版，如果存在就显示对应的流程图。 |
| processInstanceId | 流程实例ID或历史流程实例ID | http://localhost:8080/uflo-test/uflo/diagram?processInstanceId=202 | 系统会查询流程实例IID为202的流程实例，如果存在就显示这个流程实例I对应的流程图， 否则查询历史流程实例IID为202的历史流程实例，如果存在就显示。 |
可以看到Uflo中提供的流程图在线展示，并不是简单的图片展示，而是根据流程模版信息，在网页当中通过JS进行重绘来显示流程图。尽管与流程模版设计器IDE中采用的技术不同，但在线显示流程图可以做到与IDE中显示效果100%相同，不存在任何差异。同时，对于经过的流程节点与连线，在线流程图在展示的时候会以灰色调进行显示，对于经过的人工任务节点，鼠标移到节点图片上还在tooltip的提示信息，及右上角的节点在流程流转上经历多少次的圆圈数字提示等。同时，当我们的鼠标移到流程图节点对应的图标上时，还会有类似tooltip的默认提示，在这个默认提示当中，显示了当前任务相关信息。
同时，为了更加友好的显示在线流程图效果，我们还允许大家对流程图中经过节点的颜色、字体、字体大小、边框色、连线颜色、是否显示节点经过次数等通过属性文件中进行自定义，这些属性如下表所示：
| 属性名 | 数据类型 | 默认值 | 描述 |
|---|---|---|---|
uflo.diagram.showTime | 布尔 | true | 是否显示节点流转次数 |
uflo.diagram.passedNodeBgcolor | 字符串 | 245,245,245 | 一个RGB数值，用来决定经过的节点的背景颜色 |
uflo.diagram.passedNodeFontColor | 字符串 | 150,150,150 | 一个RGB数值，用来决定经过的节点的字体颜色 |
uflo.diagram.passedNodeFontSize | 数字 | 13 | 定义经过节点字体大小 |
uflo.diagram.passedNodeBorderColor | 字符串 | 200,200,200 | 一个RGB数值，用来决定经过的节点的边框颜色 |
uflo.diagram.passedConnectionColor | 字符串 | 200,200,200 | 一个RGB数值，用来决定经过的节点之间连线的颜色 |
uflo.diagram.passedConnectionFontColor | 字符串 | 150,150,150 | 一个RGB数值，用来决定经过的节点之间连线的上文字的颜色(如果连线上有文字的话) |
uflo.diagram.passedConnectionFontSize | 数字 | 12 | 定义经过节点之间连线文字大小 |
uflo.diagram.connectionColor | 字符串 | 0,69,123 | 一个RGB数值，定义未经过节点间连线颜色 |
uflo.diagram.connectionFontColor | 字符串 | 0,69,123 | 一个RGB数值，定义未经过节点间连线上文字颜色 |
uflo.diagram.connectionFontSize | 数字 | 12 | 定义未经过节点之间连线文字大小 |
uflo.diagram.nodeBgcolor | 字符串 | 220,220,220 | 一个RGB数值，定义未经过节点的背景颜色 |
uflo.diagram.nodeFontColor | 字符串 | 18,42,136 | 一个RGB数值，定义未经过节点的文字颜色 |
uflo.diagram.nodeFontSize | 数字 | 13 | 定义未经过节点的文字大小 |
uflo.diagram.nodeBorderColor | 字符串 | 18,42,136 | 一个RGB数值，定义未经过节点的边框颜色 |
uflo.diagram.currentNodeBgcolor | 字符串 | 250,250,250 | 一个RGB数值，定义当前流程实例所在任务节点的背景颜色 |
uflo.diagram.currentNodeFontColor | 字符串 | 76,177,255 | 一个RGB数值，定义当前流程实例所在任务节点的字体颜色 |
uflo.diagram.currentNodeFontSize | 数字 | 13 | 定义当前流程实例所在任务节点的字体大小 |
uflo.diagram.currentNodeBorderColor | 字符串 | 76,121,156 | 一个RGB数值，定义当前流程实例所在任务节点的边框颜色 |
| uflo.diagram.multiCurrentNodeBgcolor | 字符串 | 250,250,250 | 一个RGB数值，定义当前流程实例并行情况下所在任务节点的背景颜色 |
| uflo.diagram.multiCurrentNodeFontColor | 字符串 | 0,160,233 | 一个RGB数值，定义当前流程实例并行情况下所在任务节点的字体颜色 |
| uflo.diagram.multiCurrentNodeFontSize | 数字 | 13 | 定义当前流程实例并行情况下所在任务节点的字体大小 |
| uflo.diagram.multiCurrentNodeBorderColor | 字符串 | 0,160,233 | 一个RGB数值，定义当前流程实例并行情况下所在任务节点的边框颜色 |
