在Panel中绘制交互式层级流程图的最佳Python包推荐

所需依赖安装 #

Windows环境无兼容性问题，直接通过pip安装：

pip install panel bokeh pandas

数据结构准备 #

先定义层级数据与节点元数据：

# 层级结构数据
hierarchy_data = {
    'A': ['B', 'C'],
    'B': ['D'],
    'C': ['D', 'E'],
    'D': ['F'],
    'E': [],
    'F': []
}

# 节点元数据示例
node_metadata = {
    'A': '根节点，统筹B、C两个分支',
    'B': '二级节点，仅关联D节点',
    'C': '二级节点，关联D、E两个分支',
    'D': '三级节点，仅关联F节点',
    'E': '三级节点，无后续分支',
    'F': '末级节点，无后续分支'
}

1. 静态层级流程图实现 #

基于Bokeh绘图引擎，用Panel包装生成静态流程图：

import panel as pn
from bokeh.plotting import figure
from bokeh.models import ColumnDataSource, LabelSet

pn.extension('bokeh')

def create_static_flowchart(data):
    # 转换数据为节点坐标、边列表
    nodes = list(data.keys())
    # 手动设置节点坐标（可根据需求调整或自动计算）
    node_coords = {
        'A': (0, 5), 'B': (-2, 3), 'C': (2, 3),
        'D': (0, 1), 'E': (3, 1), 'F': (0, -1)
    }
    x = [node_coords[n][0] for n in nodes]
    y = [node_coords[n][1] for n in nodes]
    
    # 整理边数据
    edges = []
    for parent, children in data.items():
        for child in children:
            edges.append((node_coords[parent][0], node_coords[parent][1],
                         node_coords[child][0], node_coords[child][1]))
    
    # 创建Bokeh绘图对象
    p = figure(width=600, height=400, tools='', x_axis_label='', y_axis_label='',
               x_range=(-4, 4), y_range=(-2, 6))
    
    # 绘制节点间连线
    for edge in edges:
        p.line([edge[0], edge[2]], [edge[1], edge[3]], line_width=2, color='#666666')
    
    # 绘制节点与标签
    source = ColumnDataSource(data=dict(x=x, y=y, nodes=nodes))
    p.circle('x', 'y', size=20, color='#4285F4', source=source)
    
    labels = LabelSet(x='x', y='y', text='nodes', level='glyph',
                      x_offset=0, y_offset=0, source=source, text_font_size='14pt')
    p.add_layout(labels)
    
    return pn.pane.Bokeh(p)

# 生成并显示静态流程图
static_flow = create_static_flowchart(hierarchy_data)
static_flow.show()

2. 交互式流程图（点击节点加载元数据） #

在静态图基础上添加点击事件，点击节点时展示对应元数据：

def create_interactive_flowchart(data, metadata):
    # 复用坐标与数据处理逻辑
    nodes = list(data.keys())
    node_coords = {
        'A': (0, 5), 'B': (-2, 3), 'C': (2, 3),
        'D': (0, 1), 'E': (3, 1), 'F': (0, -1)
    }
    x = [node_coords[n][0] for n in nodes]
    y = [node_coords[n][1] for n in nodes]
    
    edges = []
    for parent, children in data.items():
        for child in children:
            edges.append((node_coords[parent][0], node_coords[parent][1],
                         node_coords[child][0], node_coords[child][1]))
    
    # 创建带点击工具的绘图对象
    p = figure(width=600, height=400, tools='tap', x_axis_label='', y_axis_label='',
               x_range=(-4, 4), y_range=(-2, 6))
    
    # 绘制连线
    for edge in edges:
        p.line([edge[0], edge[2]], [edge[1], edge[3]], line_width=2, color='#666666')
    
    # 节点数据源，包含元数据字段
    source = ColumnDataSource(data=dict(
        x=x, y=y, nodes=nodes,
        desc=[metadata[n] for n in nodes]
    ))
    
    # 绘制节点，设置选中样式
    renderer = p.circle('x', 'y', size=20, color='#4285F4', source=source,
                        selection_color='#EA4335', nonselection_alpha=0.3)
    
    # 创建元数据显示组件
    metadata_display = pn.widgets.Div(width=600, height=100, background='#f0f0f0')
    
    # 点击事件回调函数
    def show_metadata(attr, old, new):
        if new.indices:
            idx = new.indices[0]
            metadata_display.object = f"<h4>节点 {source.data['nodes'][idx]} 元数据</h4><p>{source.data['desc'][idx]}</p>"
        else:
            metadata_display.object = "<h4>点击节点查看元数据</h4>"
    
    source.selected.on_change('indices', show_metadata)
    
    # 组装面板布局
    return pn.Column(pn.pane.Bokeh(p), metadata_display)

# 生成并显示交互式流程图
interactive_flow = create_interactive_flowchart(hierarchy_data, node_metadata)
interactive_flow.show()

3. 多图并排展示 #

通过Panel的Row布局实现多个流程图并排：

# 创建第二个示例层级数据
hierarchy_data2 = {
    'X': ['Y', 'Z'],
    'Y': ['M'],
    'Z': ['N'],
    'M': [],
    'N': []
}

node_metadata2 = {
    'X': '新根节点，包含Y、Z分支',
    'Y': '二级节点，关联M',
    'Z': '二级节点，关联N',
    'M': '末级节点',
    'N': '末级节点'
}

# 创建两个交互式流程图
flow1 = create_interactive_flowchart(hierarchy_data, node_metadata)
flow2 = create_interactive_flowchart(hierarchy_data2, node_metadata2)

# 组装并排布局并显示
multi_flow = pn.Row(flow1, flow2, width=1400)
multi_flow.show()

补充说明 #

• 节点坐标可手动调整，也可通过拓扑排序算法自动计算层级位置
• 若无需交互功能，直接使用静态流程图代码即可
• 所有依赖包均支持Windows环境，无需额外配置Graphviz或NetworkX

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