如何使用Python与SocketIO创建动态流程图追踪代码运行过程

方案说明 #

你调研的SocketIO+Graphviz组合完全可以实现需求，另外还有更轻量的优化方案：Python SocketIO后端 + Mermaid.js前端渲染，不需要后端生成流程图文件，前端直接动态修改节点状态，响应速度更快。

核心逻辑 #

• 后端用Python搭建SocketIO服务，业务代码每执行完一个步骤，就向所有连接的前端推送当前完成的步骤信息
• 前端提前初始化流程图的固定结构，监听SocketIO的状态推送事件，收到消息后直接修改对应节点的样式（比如标红），不需要重绘整张流程图

关键代码示例 #

后端（Python + Flask-SocketIO） #

首先安装依赖：
pip install flask flask-socketio eventlet

from flask import Flask, render_template
from flask_socketio import SocketIO
import time
import threading

app = Flask(__name__)
socketio = SocketIO(app, cors_allowed_origins="*")

# 模拟业务执行流程，可替换为你自己的代码逻辑
def business_process():
    steps = ["加载数据", "清洗数据", "特征提取", "模型训练", "结果导出"]
    for step_idx, step_name in enumerate(steps):
        # 模拟步骤执行耗时
        time.sleep(3)
        # 推送步骤完成消息到前端
        socketio.emit("step_update", {"step_idx": step_idx, "step_name": step_name, "status": "done"})

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == "__main__":
    # 单独开线程运行业务流程，避免阻塞SocketIO服务
    threading.Thread(target=business_process, daemon=True).start()
    socketio.run(app, host="0.0.0.0", port=5000, debug=True)

前端（HTML + JS + Mermaid.js） #

在templates目录下新建index.html，内容如下：

<!DOCTYPE html>
<html>
<head>
    <title>执行流程监控</title>
    <script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
    <script type="module">
        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
        mermaid.initialize({ startOnLoad: true });
    </script>
</head>
<body>
    <div class="mermaid">
        graph LR
        A[加载数据] --> B[清洗数据]
        B --> C[特征提取]
        C --> D[模型训练]
        D --> E[结果导出]
        class A pending;
        class B pending;
        class C pending;
        class D pending;
        class E pending;
        classDef pending fill:#fff,stroke:#333;
        classDef done fill:#f00,stroke:#333,color:#fff;
    </div>

    <script>
        const socket = io();
        // 节点ID映射，和上面流程图的节点ID对应
        const stepNodeMap = {
            0: "A",
            1: "B",
            2: "C",
            3: "D",
            4: "E"
        }
        // 监听步骤更新消息
        socket.on("step_update", (data) => {
            const nodeId = stepNodeMap[data.step_idx];
            // 修改节点样式为已完成（标红）
            const svg = document.querySelector(".mermaid svg");
            const targetNode = svg.getElementById(nodeId);
            targetNode.setAttribute("class", "node done");
        })
    </script>
</body>
</html>

可选方案：Graphviz实现 #

如果需要后端控制流程图的生成逻辑，可以用如下流程：

1. 后端预先定义好流程图的DOT语法结构
2. 每完成一个步骤，就修改对应节点的样式属性，用graphviz库渲染成SVG字符串
3. 通过SocketIO把SVG字符串推送到前端，前端直接替换页面上的流程图内容即可

效果参考 #

内容的提问来源于stack exchange，提问作者redbean_ricecake