<think>我们正在创建一个使用HTML和
Activiti绘制
流程图的网页。根据引用[1]，
Activiti提供了一个官方的web工具来绘制
流程图。但是，用户希望在自己的HTML页面中集成这个功能。
根据引用[2]，我们看到一个示例的HTML代码片段，其中包含一个用于显示
流程图的img元素和一个用于显示审批信息的表格。这暗示了我们可以通过以下步骤实现：
1. 使用
Activiti的REST API或内置的
流程图生成功能来获取
流程图的图片。
2. 在HTML页面中通过img标签显示
流程图。
3. 同时，我们可以展示
流程的审批信息，这可能通过另一个表格来展示。
然而，用户的问题是如何生成一个“绘制”
流程图的页面，而不仅仅是显示。这意味着我们需要一个可以编辑
流程图的界面。
实际上，
Activiti官方提供了一个
流程图设计器（Modeler），我们可以将其嵌入到自己的Web应用中。以下是实现步骤：
步骤1：引入
Activiti Modeler
我们可以将
Activiti Modeler的静态资源（HTML、JS、CSS等）集成到我们的Web应用中。
步骤2：创建HTML页面
创建一个HTML页面，用于承载
Activiti Modeler。通常，
Activiti Modeler是一个独立的页面，我们可以通过iframe嵌入或者直接使用其提供的页面。
步骤3：配置和初始化
根据
Activiti的文档，配置Modeler的路径和相关参数。
但是，由于
Activiti Modeler是一个相对复杂的前端应用，直接嵌入需要一定的配置。这里我们提供一个简单的示例，展示如何嵌入
Activiti Modeler。
注意：
Activiti Modeler需要后端支持，因为它的
数据存储和读取都是通过REST API与
Activiti引擎交互。
因此，我们首先需要部署
Activiti应用（包括
Activiti Rest和
Activiti Modeler）。然后，在我们的HTML页面中，可以通过以下方式嵌入：
示例代码（假设
Activiti Modeler部署在
同一个应用的/
activiti路径下）：
```html
<!DOCTYPE html>
<html>
<head>
<title>
流程图设计器</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
#modeler-container {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="modeler-container"></div>
<script src="/
activiti/editor/editor.js"></script>
<script>
// 初始化Modeler
var modeler = new window.
Activiti.Modeler({
container: '#modeler-container',
restUrl: '/
activiti-service' //
Activiti REST服务的根路径
});
</script>
</body>
</html>
```
但是，请注意，
Activiti Modeler的具体引入方式可能会根据版本和部署方式有所不同。上述代码仅为示意。
另外，如果用户希望自己绘制
流程图并保存，那么需要确保有
Activiti引擎的后端支持，并且用户有权限访问。
如果用户只是希望显示已有的
流程图（而不是绘制），那么可以使用如下方式显示
流程图图片：
```html
<img src="/
activiti-rest/service/repository/deployments/{deploymentId}/resources/{resourceName}/image" />
```
其中，deploymentId是部署ID，resourceName是
流程定义的资源名称（通常是BPMN文件对应的PNG图片资源）。
但是，根据引用[2]中的代码，他们使用了img标签来显示
流程图，并且通过设置src属性来获取图片。同时，还展示了审批信息的表格。
因此，针对用户的需求“绘制
流程图的页面”，我们主要提供嵌入
Activiti Modeler的方法。
然而，由于
Activiti Modeler的集成相对复杂，通常需要将整个
Activiti应用部署好，并且前端页面需要与后端进行认证和交互。因此，我们可能还需要考虑用户登录和权限的问题。
总结：创建一个可以绘制
流程图的HTML页面，最直接的方式是嵌入
Activiti官方提供的Modeler。这需要我们将
Activiti Modeler的静态资源部署到服务器，并在HTML页面中引入相应的JS和CSS，然后通过JavaScript初始化Modeler。
但是，由于
Activiti Modeler本身是一个完整的应用，我们也可以直接跳转到
Activiti Modeler的URL（如果已经部署），例如：http://localhost:8080/
activiti-app/modeler.html
如果用户希望在自己的页面中嵌入，可以使用iframe：
```html
<iframe src="http://localhost:8080/
activiti-app/modeler.html" style="width:100%; height:100vh; border:none;"></iframe>
```
这样，用户就可以在iframe中直接使用
Activiti Modeler绘制
流程图。
因此，根据用户的需求，我们给出两种方案：
方案1：直接跳转到
Activiti Modeler提供的页面（如果已经部署了
Activiti应用）。
方案2：在自己的HTML页面中使用iframe嵌入
Activiti Modeler。
方案2的示例代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<title>
流程图设计器</title>
</head>
<body style="margin:0; padding:0;">
<iframe src="http://你的
Activiti应用地址/
activiti-app/modeler.html"
style="width:100%; height:100vh; border:none;">
</iframe>
</body>
</html>
```
注意：将“你的
Activiti应用地址”替换为实际部署的地址。
另外，关于引用[2]中提到的审批信息表格，那是另一个功能，用于展示
流程的审批信息，与绘制
流程图不在
同一个页面。如果需要同时展示，可以设计一个包含两个部分的页面：一部分是
流程图（绘制或查看），另一部分是审批信息表格。但是，绘制
流程图通常是一个独立的功能，审批信息表格通常在
流程实例运行时展示。
因此，针对用户的问题，我们重点解决绘制
流程图的页面创建。审批信息表格的展示可以在另一个页面或
同一个页面的不同标签页中实现。
最后，生成相关问题：
§§相关问题§§
1. 如何部署
Activiti应用以使用
流程图设计器？
2. 如何保存通过
Activiti Modeler绘制的
流程图？
3. 如何在网页中展示
流程图的审批信息？</think>要创建一个使用HTML和
Activiti绘制
流程图的网页，需要结合
Activiti的BPMN设计器功能和HTML页面集成。以下是实现步骤和代码示例：
### 一、核心实现步骤
1. **引入
Activiti设计器依赖**
在项目中添加
Activiti Modeler依赖（Maven示例）：
```xml
<dependency>
<groupId>org.
activiti</groupId>
<artifactId>
activiti-modeler</artifactId>
<version>
6.0.0</version> <!-- 根据实际版本调整 -->
</dependency>
```
2. **创建
流程图设计页面**
```html
<!-- diagram.html -->
<!DOCTYPE html>
<html>
<head>
<title>
流程图设计器</title>
<link rel="stylesheet" href="bpmn-js/assets/diagram-js.css">
<link rel="stylesheet" href="bpmn-js/assets/bpmn-font/css/bpmn.css">
</head>
<body>
<div id="canvas" style="height: 80vh; border: 1px solid #ccc"></div>
<button onclick="saveDiagram()">保存
流程图</button>
<script src="bpmn-js/bpmn-modeler.development.js"></script>
<script>
const bpmnModeler = new BpmnModeler({
container: '#canvas'
});
// 初始化空白
流程图
bpmnModeler.createDiagram();
// 保存
流程图
function saveDiagram() {
bpmnModeler.saveXML({ format: true }, (err, xml) => {
if (err) throw err;
// 发送XML到后端保存
fetch('/save-bpmn', {
method: 'POST',
body: JSON.stringify({ xml })
});
});
}
</script>
</body>
</html>
```
3. **后端保存接口（Spring Boot示例）**
```java
@RestController
public class BpmnController {
@PostMapping("/save-bpmn")
public ResponseEntity<?> saveBpmn(@RequestBody Map<String, String> data) {
String xml = data.get("xml");
// 1. 保存XML到
数据库/文件系统
// 2. 部署
流程定义（可选）
repositoryService.createDeployment()
.addString("process.bpmn20.xml", xml)
.deploy();
return ResponseEntity.ok().build();
}
}
```
4. **
流程图查看页面**（引用[2]的优化实现）
```html
<!-- view.html -->
<div class="flow-container">
<div id="flow-chart">
<img id="flow-image" src="/get-diagram-image?processId=PROCESS_ID" />
</div>
<div class="approval-info">
<table class="approval-table">
<thead>
<tr>
<th>审批节点</th>
<th>审批人</th>
<th>状态</th>
</tr>
</thead>
<tbody id="approval-data"><!-- 动态加载 --></tbody>
</table>
</div>
</div>
```
### 二、关键功能实现
1. **生成
流程图图片**（后端接口）
```java
@GetMapping("/get-diagram-image")
public void getDiagramImage(@RequestParam String processId,
HttpServletResponse response) throws IOException {
ProcessDefinition definition = repositoryService.createProcessDefinitionQuery()
.processDefinitionId(processId).singleResult();
InputStream imageStream = repositoryService.getResourceAsStream(
definition.getDeploymentId(),
definition.getDiagramResourceName()
);
response.setContentType("image/png");
IOUtils.copy(imageStream, response.getOutputStream());
}
```
2. **动态加载审批
数据**（前端JS）
```javascript
fetch(`/approval-data?processId=${processId}`)
.then(res => res.json())
.then(data => {
const tbody = document.getElementById('approval-data');
data.forEach(item => {
const row = `<tr>
<td>${item.taskName}</td>
<td>${item.assignee}</td>
<td>${item.status}</td>
</tr>`;
tbody.innerHTML += row;
});
});
```
### 三、部署注意事项
1. **路径配置**
- 确保前端能访问到`bpmn-js`资源（从`
activiti-webapp-explorer`中提取）
- 配置静态资源路径：
```java
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/bpmn-js/**")
.addResourceLocations("classpath:/static/bpmn-js/");
}
}
```
2. **跨域问题**
若前后端分离开发，需添加CORS配置：
```java
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedMethods("GET", "POST");
}
};
}
```
### 四、效果说明
1. **设计器功能**
支持拖拽任务/网关/事件等元素（符合BPMN2.0标准）
2. **审批信息展示**
左侧显示
流程图，右侧表格展示审批状态（参考引用[2]布局）
最终实现效果：用户可在网页中设计
流程 → 自动保存BPMN XML → 查看
流程图与审批状态[^1][^2]。
---
本文介绍了一个关于Activiti工作流引擎中ACT_UNIQ_HI_BUS_KEY约束导致的异常问题，并提供了解决方案，即在businessKey为空时为其赋一个GUID。
扫一扫
697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
