activiti7.1.0.M6流程图预览和进度高亮查看、整合bpmn-js

activiti7移除了静态方法创建ProcessDiagramGenerator，需要创建DefaultProcessDiagramGenerator实例

依赖：

　　　　<properties>
　　　　　　<batik-transcoder.version>1.17</batik-transcoder.version>
　　　　　　<batik-codec.version>1.17</batik-codec.version>
　　　　　　<activiti-json-converter.version>7.1.0.M6</activiti-json-converter.version>
　　　　　　<activiti-spring-boot-starter.version>7.1.0.M6</activiti-spring-boot-starter.version>
　　　　</properties>
　　　　
　　　　<dependencies>
　　　　　　<!-- 流程图设计 -->
　　　　　　<dependency>
　　　　　　　　<groupId>org.apache.xmlgraphics</groupId>
　　　　　　　　<artifactId>batik-transcoder</artifactId>
　　　　　　　　<version>${batik-transcoder.version}</version>
　　　　　　</dependency>
　　　　　　<dependency>
　　　　　　　　<groupId>org.apache.xmlgraphics</groupId>
　　　　　　　　<artifactId>batik-codec</artifactId>
　　　　　　　　<version>${batik-codec.version}</version>
　　　　　　</dependency>
　　　　　　<dependency>
　　　　　　　　<groupId>org.activiti</groupId>
　　　　　　　　<artifactId>activiti-json-converter</artifactId>
　　　　　　　　<version>${activiti-json-converter.version}</version>
　　　　　　</dependency>
　　　　　　<!-- activiti -->
　　　　　　<dependency>
　　　　　　　　<groupId>org.activiti</groupId>
　　　　　　　　<artifactId>activiti-spring-boot-starter</artifactId>
　　　　　　　　<version>${activiti-spring-boot-starter.version}</version>
　　　　　　</dependency>
　　　　　　<dependency>
　　　　　　　　<groupId>org.activiti</groupId>
　　　　　　　　<artifactId>activiti-image-generator</artifactId>
　　　　　　　　<version>${activiti-spring-boot-starter.version}</version>
　　　　　　</dependency>
　　　　</dependencies>

参数移除了imageType、customClassLoader，生成的文件格式为svg，在响应给客户端流程图的时候，可以设置响应类型

response.setContentType("image/svg+xml");
IOUtils.copy(is, response.getOutputStream());

或者把svg转换为png

new PNGTranscoder().transcode(new TranscoderInput(is), new TranscoderOutput(response.getOutputStream()));

is为生成的文件流。

具体实现代码：

ProcessDiagramGenerator

import org.activiti.bpmn.model.BpmnModel;

import java.awt.*;
import java.io.InputStream;
import java.util.List;
import java.util.Set;

/**
 * @author penglibo
 * @date 2022-11-24 09:11:02
 * @since jdk 1.8
 */

public interface ProcessDiagramGenerator extends org.activiti.image.ProcessDiagramGenerator {

    /**
     * 生成流程图
     * @param bpmnModel             模型
     * @param highLightedActivities 高亮已经执行流程节点ID集合
     * @param highLightedFlows      高亮流程已发生流转的线id集合
     * @param activityFontName
     * @param labelFontName
     * @param annotationFontName
     * @param colors                流程图颜色定义，这里固定写死的，[0]new Color(0, 205, 0)-绿色-已经运行后的流程;[1]new Color(255, 0, 0)-红色-当前正在执行的流程;
     * @param activityIds           当前激活的节点
     * @return
     */
    InputStream generateDiagram(BpmnModel bpmnModel,
                                List<String> highLightedActivities,
                                List<String> highLightedFlows,
                                String activityFontName,
                                String labelFontName,
                                String annotationFontName,
                                Color[] colors,
                                Set<String> activityIds);
}

ProcessDiagramGeneratorImpl

import org.activiti.bpmn.model.Process;
import org.activiti.bpmn.model.*;
import org.activiti.image.impl.DefaultProcessDiagramCanvas;
import org.activiti.image.impl.DefaultProcessDiagramGenerator;
import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;

import java.awt.*;
import java.io.InputStream;
import java.util.Collections;
import java.util.List;
import java.util.Set;

/**
 * @author penglibo
 * @date 2023-11-24 10:02:33
 * @since jdk 1.8
 */

public class ProcessDiagramGeneratorImpl extends DefaultProcessDiagramGenerator implements ProcessDiagramGenerator {

    /**
     * {@link DefaultProcessDiagramGenerator#generateProcessDiagram(BpmnModel, List, List, String, String, String)}
     */
    public ProcessDiagramCanvas generateProcessDiagram(BpmnModel bpmnModel,
                                                       List<String> highLightedActivities, List<String> highLightedFlows, String activityFontName,
                                                       String labelFontName, String annotationFontName,
                                                       Color[] colors, Set<String> currIds) {
        if (null == highLightedActivities) {
            highLightedActivities = Collections.emptyList();
        }
        if (null == highLightedFlows) {
            highLightedFlows = Collections.emptyList();
        }

        prepareBpmnModel(bpmnModel);

        ProcessDiagramCanvas processDiagramCanvas = initProcessDiagramCanvas(bpmnModel, activityFontName, labelFontName, annotationFontName);

        // Draw pool shape, if process is participant in collaboration
        for (Pool pool : bpmnModel.getPools()) {
            GraphicInfo graphicInfo = bpmnModel.getGraphicInfo(pool.getId());
            processDiagramCanvas.drawPoolOrLane(pool.getId(), pool.getName(), graphicInfo);
        }

        // Draw lanes
        for (Process process : bpmnModel.getProcesses()) {
            for (Lane lane : process.getLanes()) {
                GraphicInfo graphicInfo = bpmnModel.getGraphicInfo(lane.getId());
                processDiagramCanvas.drawPoolOrLane(lane.getId(), lane.getName(), graphicInfo);
            }
        }

        // 绘制活动及其序列流,这里添加了colors, currIds
        for (Process process : bpmnModel.getProcesses()) {
            List<FlowNode> flowNodeList = process.findFlowElementsOfType(FlowNode.class);
            for (FlowNode flowNode : flowNodeList) {
                drawActivity(processDiagramCanvas, bpmnModel, flowNode, highLightedActivities, highLightedFlows, colors, currIds);
            }
        }

        // Draw artifacts
        for (Process process : bpmnModel.getProcesses()) {

            for (Artifact artifact : process.getArtifacts()) {
                drawArtifact(processDiagramCanvas, bpmnModel, artifact);
            }

            List<SubProcess> subProcesses = process.findFlowElementsOfType(SubProcess.class, true);
            if (subProcesses != null) {
                for (SubProcess subProcess : subProcesses) {
                    for (Artifact subProcessArtifact : subProcess.getArtifacts()) {
                        drawArtifact(processDiagramCanvas, bpmnModel, subProcessArtifact);
                    }
                }
            }
        }

        return processDiagramCanvas;
    }

    /**
     * {@link DefaultProcessDiagramGenerator#drawActivity(DefaultProcessDiagramCanvas, BpmnModel, FlowNode, List, List)}
     */
    protected void drawActivity(ProcessDiagramCanvas processDiagramCanvas,
                                BpmnModel bpmnModel,
                                FlowNode flowNode,
                                List<String> highLightedActivities,
                                List<String> highLightedFlows,
                                Color[] colors,
                                Set<String> currIds) {
        ActivityDrawInstruction drawInstruction = activityDrawInstructions.get(flowNode.getClass());
        if (drawInstruction != null) {

            drawInstruction.draw(processDiagramCanvas, bpmnModel, flowNode);

            // Gather info on the multi instance marker
            boolean multiInstanceSequential = false,
                    multiInstanceParallel = false,
                    collapsed = false;

            if (flowNode instanceof Activity) {
                Activity activity = (Activity) flowNode;
                MultiInstanceLoopCharacteristics multiInstanceLoopCharacteristics = activity.getLoopCharacteristics();
                if (multiInstanceLoopCharacteristics != null) {
                    multiInstanceSequential = multiInstanceLoopCharacteristics.isSequential();
                    multiInstanceParallel = !multiInstanceSequential;
                }
            }

            // Gather info on the collapsed marker
            GraphicInfo graphicInfo = bpmnModel.getGraphicInfo(flowNode.getId());
            if (flowNode instanceof SubProcess) {
                collapsed = graphicInfo.getExpanded() != null && !graphicInfo.getExpanded();
            } else if (flowNode instanceof CallActivity) {
                collapsed = true;
            }

            // if (scaleFactor == 1.0) {
            // Actually draw the markers
            processDiagramCanvas.drawActivityMarkers((int) graphicInfo.getX(), (int) graphicInfo.getY(), (int) graphicInfo.getWidth(), (int) graphicInfo.getHeight(),
                    multiInstanceSequential, multiInstanceParallel, collapsed);
            // }

            // Draw highlighted activities
            // historicActivityInstance里取得的list中，最后一个节点就是当前节点，前面的节点都是已完成的节点
            if (highLightedActivities.contains(flowNode.getId())) {
                if (!CollectionUtils.isEmpty(currIds) && currIds.contains(flowNode.getId()) && !(flowNode instanceof Gateway)) {
                    // 非结束节点，并且是当前节点
                    drawHighLight((flowNode instanceof StartEvent), processDiagramCanvas, bpmnModel.getGraphicInfo(flowNode.getId()), colors[1]);
                } else {
                    // 普通节点
                    drawHighLight((flowNode instanceof StartEvent) || (flowNode instanceof EndEvent), processDiagramCanvas, bpmnModel.getGraphicInfo(flowNode.getId()), colors[0]);
                }
            }

        }

        // Outgoing transitions of activity
        for (SequenceFlow sequenceFlow : flowNode.getOutgoingFlows()) {
            String flowId = sequenceFlow.getId();
            boolean highLighted = (highLightedFlows.contains(flowId));
            String defaultFlow = null;
            if (flowNode instanceof Activity) {
                defaultFlow = ((Activity) flowNode).getDefaultFlow();
            } else if (flowNode instanceof Gateway) {
                defaultFlow = ((Gateway) flowNode).getDefaultFlow();
            }

            boolean isDefault = false;
            if (defaultFlow != null && defaultFlow.equalsIgnoreCase(flowId)) {
                isDefault = true;
            }
            boolean drawConditionalIndicator = sequenceFlow.getConditionExpression() != null && !(flowNode instanceof Gateway);

            String sourceRef = sequenceFlow.getSourceRef();
            String targetRef = sequenceFlow.getTargetRef();
            FlowElement sourceElement = bpmnModel.getFlowElement(sourceRef);
            FlowElement targetElement = bpmnModel.getFlowElement(targetRef);
            List<GraphicInfo> graphicInfoList = bpmnModel.getFlowLocationGraphicInfo(flowId);
            if (graphicInfoList != null && graphicInfoList.size() > 0) {
                graphicInfoList = connectionPerfectionizer(processDiagramCanvas, bpmnModel, sourceElement, targetElement, graphicInfoList);
                int[] xPoints = new int[graphicInfoList.size()];
                int[] yPoints = new int[graphicInfoList.size()];

                for (int i = 1; i < graphicInfoList.size(); i++) {
                    GraphicInfo graphicInfo = graphicInfoList.get(i);
                    GraphicInfo previousGraphicInfo = graphicInfoList.get(i - 1);

                    if (i == 1) {
                        xPoints[0] = (int) previousGraphicInfo.getX();
                        yPoints[0] = (int) previousGraphicInfo.getY();
                    }
                    xPoints[i] = (int) graphicInfo.getX();
                    yPoints[i] = (int) graphicInfo.getY();

                }
                // 画高亮线
                // processDiagramCanvas.drawSequenceflow(xPoints, yPoints, false, isDefault, highLighted, colors[0]);
                processDiagramCanvas.drawSequenceflow(xPoints, yPoints, drawConditionalIndicator, isDefault, highLighted, colors[0]);

                // 绘制序列流标签
                GraphicInfo labelGraphicInfo = bpmnModel.getLabelGraphicInfo(flowId);
                if (labelGraphicInfo != null) {
                    processDiagramCanvas.drawLabel(sequenceFlow.getName(), labelGraphicInfo, false);
                } else {
                    // 解决流程图连线名称不显示的BUG
                    GraphicInfo lineCenter = getLineCenter(graphicInfoList);
                    processDiagramCanvas.drawLabel(highLighted, sequenceFlow.getName(), lineCenter, Math.abs(xPoints[1] - xPoints[0]) >= 5);
                }
            }
        }

        // Nested elements
        if (flowNode instanceof FlowElementsContainer) {
            for (FlowElement nestedFlowElement : ((FlowElementsContainer) flowNode).getFlowElements()) {
                if (nestedFlowElement instanceof FlowNode) {
                    drawActivity(processDiagramCanvas,
                            bpmnModel,
                            (FlowNode) nestedFlowElement,
                            highLightedActivities,
                            highLightedFlows);
                }
            }
        }
    }

    protected void drawHighLight(boolean isStartOrEnd, ProcessDiagramCanvas
            processDiagramCanvas, GraphicInfo graphicInfo, Color color) {
        processDiagramCanvas.drawHighLight(isStartOrEnd, (int) graphicInfo.getX(), (int) graphicInfo.getY(), (int) graphicInfo.getWidth(), (int) graphicInfo.getHeight(), color);
    }

    /**
     * 拷贝DefaultProcessDiagramCanvas方法
     * @return {@link org.activiti.image.impl.DefaultProcessDiagramGenerator#initProcessDiagramCanvas
     */
    protected static ProcessDiagramCanvas initProcessDiagramCanvas(BpmnModel bpmnModel,
                                                                   String activityFontName,
                                                                   String labelFontName,
                                                                   String annotationFontName) {

        // 我们需要计算最大值，以了解图像整体的大小
        double minX = Double.MAX_VALUE;
        double maxX = 0;
        double minY = Double.MAX_VALUE;
        double maxY = 0;

        for (Pool pool : bpmnModel.getPools()) {
            GraphicInfo graphicInfo = bpmnModel.getGraphicInfo(pool.getId());
            minX = graphicInfo.getX();
            maxX = graphicInfo.getX() + graphicInfo.getWidth();
            minY = graphicInfo.getY();
            maxY = graphicInfo.getY() + graphicInfo.getHeight();
        }

        List<FlowNode> flowNodes = gatherAllFlowNodes(bpmnModel);
        for (FlowNode flowNode : flowNodes) {

            GraphicInfo flowNodeGraphicInfo = bpmnModel.getGraphicInfo(flowNode.getId());

            // width
            if (flowNodeGraphicInfo.getX() + flowNodeGraphicInfo.getWidth() > maxX) {
                maxX = flowNodeGraphicInfo.getX() + flowNodeGraphicInfo.getWidth();
            }
            if (flowNodeGraphicInfo.getX() < minX) {
                minX = flowNodeGraphicInfo.getX();
            }
            // height
            if (flowNodeGraphicInfo.getY() + flowNodeGraphicInfo.getHeight() > maxY) {
                maxY = flowNodeGraphicInfo.getY() + flowNodeGraphicInfo.getHeight();
            }
            if (flowNodeGraphicInfo.getY() < minY) {
                minY = flowNodeGraphicInfo.getY();
            }

            for (SequenceFlow sequenceFlow : flowNode.getOutgoingFlows()) {
                List<GraphicInfo> graphicInfoList = bpmnModel.getFlowLocationGraphicInfo(sequenceFlow.getId());
                if (graphicInfoList != null) {
                    for (GraphicInfo graphicInfo : graphicInfoList) {
                        // width
                        if (graphicInfo.getX() > maxX) {
                            maxX = graphicInfo.getX();
                        }
                        if (graphicInfo.getX() < minX) {
                            minX = graphicInfo.getX();
                        }
                        // height
                        if (graphicInfo.getY() > maxY) {
                            maxY = graphicInfo.getY();
                        }
                        if (graphicInfo.getY() < minY) {
                            minY = graphicInfo.getY();
                        }
                    }
                }
            }
        }

        List<Artifact> artifacts = gatherAllArtifacts(bpmnModel);
        for (Artifact artifact : artifacts) {

            GraphicInfo artifactGraphicInfo = bpmnModel.getGraphicInfo(artifact.getId());

            if (artifactGraphicInfo != null) {
                // width
                if (artifactGraphicInfo.getX() + artifactGraphicInfo.getWidth() > maxX) {
                    maxX = artifactGraphicInfo.getX() + artifactGraphicInfo.getWidth();
                }
                if (artifactGraphicInfo.getX() < minX) {
                    minX = artifactGraphicInfo.getX();
                }
                // height
                if (artifactGraphicInfo.getY() + artifactGraphicInfo.getHeight() > maxY) {
                    maxY = artifactGraphicInfo.getY() + artifactGraphicInfo.getHeight();
                }
                if (artifactGraphicInfo.getY() < minY) {
                    minY = artifactGraphicInfo.getY();
                }
            }

            List<GraphicInfo> graphicInfoList = bpmnModel.getFlowLocationGraphicInfo(artifact.getId());
            if (graphicInfoList != null) {
                for (GraphicInfo graphicInfo : graphicInfoList) {
                    // width
                    if (graphicInfo.getX() > maxX) {
                        maxX = graphicInfo.getX();
                    }
                    if (graphicInfo.getX() < minX) {
                        minX = graphicInfo.getX();
                    }
                    // height
                    if (graphicInfo.getY() > maxY) {
                        maxY = graphicInfo.getY();
                    }
                    if (graphicInfo.getY() < minY) {
                        minY = graphicInfo.getY();
                    }
                }
            }
        }

        int nrOfLanes = 0;
        for (Process process : bpmnModel.getProcesses()) {
            for (Lane l : process.getLanes()) {

                nrOfLanes++;

                GraphicInfo graphicInfo = bpmnModel.getGraphicInfo(l.getId());
                // // width
                if (graphicInfo.getX() + graphicInfo.getWidth() > maxX) {
                    maxX = graphicInfo.getX() + graphicInfo.getWidth();
                }
                if (graphicInfo.getX() < minX) {
                    minX = graphicInfo.getX();
                }
                // height
                if (graphicInfo.getY() + graphicInfo.getHeight() > maxY) {
                    maxY = graphicInfo.getY() + graphicInfo.getHeight();
                }
                if (graphicInfo.getY() < minY) {
                    minY = graphicInfo.getY();
                }
            }
        }

        // Special case, see https://activiti.atlassian.net/browse/ACT-1431
        if (flowNodes.isEmpty() && bpmnModel.getPools().isEmpty() && nrOfLanes == 0) {
            // Nothing to show
            minX = 0;
            minY = 0;
        }

        return new ProcessDiagramCanvas(
                (int) maxX + 10,
                (int) maxY + 10,
                (int) minX,
                (int) minY,
                activityFontName,
                labelFontName,
                annotationFontName);
    }

    @Override
    public InputStream generateDiagram(BpmnModel bpmnModel, List<String> highLightedActivities,
                                       List<String> highLightedFlows, String activityFontName, String labelFontName, String
                                               annotationFontName,
                                       Color[] colors, Set<String> activityIds) {
        ProcessDiagramCanvas processDiagramCanvas = generateProcessDiagram(bpmnModel, highLightedActivities, highLightedFlows,
                activityFontName, labelFontName, annotationFontName, colors, activityIds);
        return processDiagramCanvas.generateImage();
    }

    @Override
    public InputStream generateDiagram(BpmnModel bpmnModel, String activityFontName, String labelFontName, String
            annotationFontName) {
        return generateDiagram(bpmnModel, Collections.<String>emptyList(), Collections.<String>emptyList(),
                activityFontName, labelFontName, annotationFontName, new Color[]{Color.BLACK, Color.BLACK}, null);
    }

}

ProcessDiagramCanvas

import org.activiti.bpmn.model.AssociationDirection;
import org.activiti.bpmn.model.GraphicInfo;
import org.activiti.image.impl.DefaultProcessDiagramCanvas;

import java.awt.*;
import java.awt.font.FontRenderContext;
import java.awt.font.LineBreakMeasurer;
import java.awt.font.TextAttribute;
import java.awt.font.TextLayout;
import java.awt.geom.Line2D;
import java.awt.geom.Rectangle2D;
import java.awt.geom.RoundRectangle2D;
import java.text.AttributedCharacterIterator;
import java.text.AttributedString;

/**
 * @author penglibo
 * @date 2023-11-24 10:35:13
 * @since jdk 1.8
 */

public class ProcessDiagramCanvas extends DefaultProcessDiagramCanvas {

    protected static Color LABEL_COLOR = new Color(0, 0, 0);

    /** 动态流程图颜色定义 **/
    public static final Color COLOR_NORMAL = new Color(0, 205, 0);

    public static final Color COLOR_CURRENT = new Color(255, 0, 0);

    //font
    protected String labelFontName = "宋体";

    /**
     * 移除了String imageType和ClassLoader customClassLoader
     */
    public ProcessDiagramCanvas(int width, int height, int minX, int minY, String activityFontName, String labelFontName, String annotationFontName) {
        super(width, height, minX, minY, activityFontName, labelFontName, annotationFontName);
    }

    /**
     * {@link DefaultProcessDiagramCanvas#drawHighLight(int, int, int, int)}
     */
    public void drawHighLight(boolean isStartOrEnd,
                              int x,
                              int y,
                              int width,
                              int height,
                              Color color) {
        Paint originalPaint = g.getPaint();
        Stroke originalStroke = g.getStroke();

        // 这里是高亮的颜色
        g.setPaint(color);
        g.setStroke(MULTI_INSTANCE_STROKE);
        if (isStartOrEnd) {
            // 开始、结束节点画圆
            g.drawOval(x, y, width, height);
        } else {
            // 非开始、结束节点画圆角矩形
            RoundRectangle2D rect = new RoundRectangle2D.Double(x, y, width, height, 5, 5);
            g.draw(rect);
        }
        g.setPaint(originalPaint);
        g.setStroke(originalStroke);
    }

    /**
     * {@link DefaultProcessDiagramCanvas#drawSequenceflow(int[], int[], boolean, boolean, boolean)}
     */
    public void drawSequenceflow(int[] xPoints,
                                 int[] yPoints,
                                 boolean conditional,
                                 boolean isDefault,
                                 boolean highLighted,
                                 Color color) {
        drawConnection(xPoints,
                yPoints,
                conditional,
                isDefault,
                "sequenceFlow",
                AssociationDirection.ONE,
                highLighted,
                color);
    }

    /**
     * {@link DefaultProcessDiagramCanvas#drawConnection(int[], int[], boolean, boolean, String, AssociationDirection, boolean)}
     */
    public void drawConnection(int[] xPoints,
                               int[] yPoints,
                               boolean conditional,
                               boolean isDefault,
                               String connectionType,
                               AssociationDirection associationDirection,
                               boolean highLighted,
                               Color color) {

        Paint originalPaint = g.getPaint();
        Stroke originalStroke = g.getStroke();

        g.setPaint(CONNECTION_COLOR);
        if ("association".equals(connectionType)) {
            g.setStroke(ASSOCIATION_STROKE);
        } else if (highLighted) {
            // 设置高亮颜色
            g.setPaint(color);
            g.setStroke(HIGHLIGHT_FLOW_STROKE);
        }

        for (int i = 1; i < xPoints.length; i++) {
            int sourceX = xPoints[i - 1];
            int sourceY = yPoints[i - 1];
            int targetX = xPoints[i];
            int targetY = yPoints[i];
            Line2D.Double line = new Line2D.Double(sourceX, sourceY, targetX, targetY);
            g.draw(line);
        }

        if (isDefault) {
            Line2D.Double line = new Line2D.Double(xPoints[0], yPoints[0], xPoints[1], yPoints[1]);
            drawDefaultSequenceFlowIndicator(line);
        }

        if (conditional) {
            Line2D.Double line = new Line2D.Double(xPoints[0], yPoints[0], xPoints[1], yPoints[1]);
            drawConditionalSequenceFlowIndicator(line);
        }

        if (associationDirection.equals(AssociationDirection.ONE)
                || associationDirection.equals(AssociationDirection.BOTH)) {
            Line2D.Double line = new Line2D.Double(xPoints[xPoints.length - 2], yPoints[xPoints.length - 2],
                    xPoints[xPoints.length - 1], yPoints[xPoints.length - 1]);
            drawArrowHead(line);
        }
        if (associationDirection.equals(AssociationDirection.BOTH)) {
            Line2D.Double line = new Line2D.Double(xPoints[1], yPoints[1], xPoints[0], yPoints[0]);
            drawArrowHead(line);
        }
        g.setPaint(originalPaint);
        g.setStroke(originalStroke);
    }

    /**
     * {@link DefaultProcessDiagramCanvas#drawLabel(String, GraphicInfo, boolean)}
     */
    public void drawLabel(boolean highLighted, String text, GraphicInfo graphicInfo, boolean centered) {
        float interline = 1.0f;

        // text
        if (text != null && text.length() > 0) {
            Paint originalPaint = g.getPaint();
            Font originalFont = g.getFont();
            if (highLighted) {
                g.setPaint(COLOR_NORMAL);
            } else {
                g.setPaint(LABEL_COLOR);
            }
            g.setFont(new Font(labelFontName, Font.BOLD, 10));

            int wrapWidth = 100;
            int textY = (int) graphicInfo.getY();

            AttributedString as = new AttributedString(text);
            as.addAttribute(TextAttribute.FOREGROUND, g.getPaint());
            as.addAttribute(TextAttribute.FONT, g.getFont());
            AttributedCharacterIterator aci = as.getIterator();
            FontRenderContext frc = new FontRenderContext(null, true, false);
            LineBreakMeasurer lbm = new LineBreakMeasurer(aci, frc);

            while (lbm.getPosition() < text.length()) {
                TextLayout tl = lbm.nextLayout(wrapWidth);
                textY += tl.getAscent();
                Rectangle2D bb = tl.getBounds();
                double tX = graphicInfo.getX();
                if (centered) {
                    tX += (int) (graphicInfo.getWidth() / 2 - bb.getWidth() / 2);
                }
                tl.draw(g, (float) tX, textY);
                textY += tl.getDescent() + tl.getLeading() + (interline - 1.0f) * tl.getAscent();
            }

            // restore originals
            g.setFont(originalFont);
            g.setPaint(originalPaint);
        }
    }
}

查看流程图代码：

        BpmnModel bpmnModel = repositoryService.getBpmnModel(processDefinitionId);
        // activiti7移除了静态方法创建，需要DefaultProcessDiagramGenerator实例。
        // ProcessDiagramGenerator diagramGenerator = new DefaultProcessDiagramGenerator();
        // 由于是创建的新实例，这里的DiagramGenerator就不用注入到配置类里面了，当然ActivitiConfiguration配置类也移除了set的方法。
        ProcessDiagramGeneratorImpl diagramGenerator = new ProcessDiagramGeneratorImpl();
        InputStream is = diagramGenerator.generateDiagram(bpmnModel, "宋体", "宋体", "宋体");
        try {
            HttpServletResponse response = ServletUtil.getResponse();

            // 响应svg到客户端
            // response.setContentType("image/svg+xml");
            // IOUtils.copy(is, response.getOutputStream());

            // 转换svg为png响应
            response.setContentType("image/png");
            new PNGTranscoder().transcode(new TranscoderInput(is), new TranscoderOutput(response.getOutputStream()));

        } catch (Exception e) {
            throw new RuntimeException(e);
        }

效果：

流程进度高亮

ActivitiUtil

import org.activiti.bpmn.model.BpmnModel;
import org.activiti.bpmn.model.FlowNode;
import org.activiti.bpmn.model.SequenceFlow;
import org.activiti.engine.history.HistoricActivityInstance;
import org.springframework.util.CollectionUtils;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author penglibo
 * @date 2023-11-24 17:29:08
 * @since jdk 1.8
 */
public class ActivitiUtil {

    /**
     * 获取已经流转的线
     * @param bpmnModel                 流程图模板
     * @param historicActivityInstances 历史实例
     */
    public static List<String> getHighLightedFlows(BpmnModel bpmnModel, List<HistoricActivityInstance> historicActivityInstances) {
        // 高亮流程已发生流转的线id集合
        List<String> highLightedFlowIds = new ArrayList<>();
        // 全部活动节点
        List<FlowNode> historicActivityNodes = new ArrayList<>();
        // 已完成的历史活动节点
        List<HistoricActivityInstance> finishedActivityInstances = new ArrayList<>();

        for (HistoricActivityInstance historicActivityInstance : historicActivityInstances) {
            FlowNode flowNode = (FlowNode) bpmnModel.getMainProcess().getFlowElement(historicActivityInstance.getActivityId(), true);
            historicActivityNodes.add(flowNode);
            if (historicActivityInstance.getEndTime() != null) {
                finishedActivityInstances.add(historicActivityInstance);
            }
        }

        FlowNode currentFlowNode = null;
        FlowNode targetFlowNode = null;
        // 遍历已完成的活动实例，从每个实例的outgoingFlows中找到已执行的
        for (HistoricActivityInstance currentActivityInstance : finishedActivityInstances) {
            // 获得当前活动对应的节点信息及outgoingFlows信息
            currentFlowNode = (FlowNode) bpmnModel.getMainProcess().getFlowElement(currentActivityInstance.getActivityId(), true);
            List<SequenceFlow> sequenceFlows = currentFlowNode.getOutgoingFlows();

            /**
             * 遍历outgoingFlows并找到已已流转的 满足如下条件认为已已流转： 1.当前节点是并行网关或兼容网关，则通过outgoingFlows能够在历史活动中找到的全部节点均为已流转 2.当前节点是以上两种类型之外的，通过outgoingFlows查找到的时间最早的流转节点视为有效流转
             */
            if ("parallelGateway".equals(currentActivityInstance.getActivityType()) || "inclusiveGateway".equals(currentActivityInstance.getActivityType())) {
                // 遍历历史活动节点，找到匹配流程目标节点的
                for (SequenceFlow sequenceFlow : sequenceFlows) {
                    targetFlowNode = (FlowNode) bpmnModel.getMainProcess().getFlowElement(sequenceFlow.getTargetRef(), true);
                    if (historicActivityNodes.contains(targetFlowNode)) {
                        highLightedFlowIds.add(targetFlowNode.getId());
                    }
                }
            } else {
                List<Map<String, Object>> tempMapList = new ArrayList<>();
                for (SequenceFlow sequenceFlow : sequenceFlows) {
                    for (HistoricActivityInstance historicActivityInstance : historicActivityInstances) {
                        if (historicActivityInstance.getActivityId().equals(sequenceFlow.getTargetRef())) {
                            Map<String, Object> map = new HashMap<>();
                            map.put("highLightedFlowId", sequenceFlow.getId());
                            map.put("highLightedFlowStartTime", historicActivityInstance.getStartTime().getTime());
                            tempMapList.add(map);
                        }
                    }
                }

                if (!CollectionUtils.isEmpty(tempMapList)) {
                    // 遍历匹配的集合，取得开始时间最早的一个
                    long earliestStamp = 0L;
                    String highLightedFlowId = null;
                    for (Map<String, Object> map : tempMapList) {
                        long highLightedFlowStartTime = Long.parseLong(map.get("highLightedFlowStartTime").toString());
                        if (earliestStamp == 0 || earliestStamp >= highLightedFlowStartTime) {
                            highLightedFlowId = map.get("highLightedFlowId").toString();
                            earliestStamp = highLightedFlowStartTime;
                        }
                    }

                    highLightedFlowIds.add(highLightedFlowId);
                }

            }

        }
        return highLightedFlowIds;
    }
}

查看流程进度代码：

// 定义businessKey,一般为流程实例key与实际业务数据的结合
            String businessKey = apply.getDefKey() + ":" + apply.getId();
            // 如果流程结束(驳回)，当前流程实例为空
            ProcessInstance process = runtimeService.createProcessInstanceQuery()
                    .processDefinitionKey(apply.getDefKey())
                    .processInstanceBusinessKey(businessKey)
                    .singleResult();

            // 获取历史流程实例来查询流程进度
            HistoricProcessInstance processInstance = historyService.createHistoricProcessInstanceQuery().processInstanceBusinessKey(businessKey).singleResult();
            if (null == processInstance) {
                log.error("流程信息不存在");
                return;
            }
            // 获取流程中已经执行的节点，按照执行先后顺序排序
            List<HistoricActivityInstance> historicActivityInstances = historyService.createHistoricActivityInstanceQuery()
                    // 这里，如果流程结束的话，process会为空，所以查询历史流程，这样也能看到结束的流程进度信息。
                    .processInstanceId(null == process ? processInstance.getId() : process.getId())
                    .orderByHistoricActivityInstanceStartTime().asc().list();
            BpmnModel bpmnModel = repositoryService.getBpmnModel(processInstance.getProcessDefinitionId());
            // highLightedActivities（需要高亮的执行流程节点集合的获取）以及
            // highLightedFlows（需要高亮流程连接线集合的获取）
            // 高亮流程已发生流转的线id集合
            List<String> highLightedFlowIds = ActivitiUtil.getHighLightedFlows(bpmnModel, historicActivityInstances);

            // 高亮已经执行流程节点ID集合
            List<String> highLightedActivitiIds = historicActivityInstances.stream().map(HistoricActivityInstance::getActivityId).collect(Collectors.toList());

            Set<String> activityIds = runtimeService.createExecutionQuery().processInstanceId(processInstance.getId()).list()
                    .stream().map(org.activiti.engine.runtime.Execution::getActivityId).collect(Collectors.toSet());
            // activiti7移除了静态方法创建，需要DefaultProcessDiagramGenerator实例
            // ProcessDiagramGenerator diagramGenerator = new DefaultProcessDiagramGenerator();
            // 由于是创建的新实例，这里的DiagramGenerator就不用注入到配置类里面了，当然ActivitiConfiguration配置类也移除了set的方法。
            ProcessDiagramGeneratorImpl diagramGenerator = new ProcessDiagramGeneratorImpl();
            // 使用默认配置获得流程图表生成器，并生成追踪图片字符流
            InputStream is = diagramGenerator.generateDiagram(bpmnModel,
                    highLightedActivitiIds,
                    highLightedFlowIds,
                    "宋体",
                    "微软雅黑",
                    "黑体",
                    new Color[]{ProcessDiagramCanvas.COLOR_NORMAL, ProcessDiagramCanvas.COLOR_CURRENT},
                    activityIds
            );

            HttpServletResponse response = ServletUtil.getResponse();

            // 响应svg到客户端
            // response.setContentType("image/svg+xml");
            // IOUtils.copy(is, response.getOutputStream());

            // 转换svg为png响应
            response.setContentType("image/png");
            new PNGTranscoder().transcode(new TranscoderInput(is), new TranscoderOutput(response.getOutputStream()));

效果：

bpmn-js

流程设计：

- 官网：https://bpmn.io/
- 仓库：https://github.com/bpmn-io/bpmn-js

流程进度高亮：

源码仓库地址：

https://gitee.com/cmmplb/spring-boot-activiti