这个图无法直接渲染，请帮我修改后渲染：graph TD subgraph "协议解析流程" ...

python
from graphviz import Digraph
from IPython.display import Image, display

# Create the main directed graph
dot = Digraph('protocol_parse', format='png')
dot.attr(rankdir='TB', charset='utf-8')
dot.attr('node', shape='rectangle', style='rounded,filled', fillcolor='white')

# ========= Main Flow Nodes =========
dot.node('A', '原始网络数据\nPcap / Raw')
dot.node('B', '协议判断')
dot.node('C', 'DNS 解析')
dot.node('D', 'ALPN 协商')
dot.node('E', 'HTTP/3 解析')
dot.node('F', 'HTTP/1.1 解析')
dot.node('G', 'HTTP/2 解析')

# ========= DNS Nodes =========
dns_nodes = {
    'C1': '1. 解析 DNS 报头\n事务 ID、标志位',
    'C2': '2. 解析查询问题\nQNAME、QTYPE',
    'C3': '3. 解析应答记录\nRR、RDATA',
    'C4': '解析完成:\nIP / CNAME 等'
}
for nid, label in dns_nodes.items():
    dot.node(nid, label)

# ========= HTTP/1.1 Nodes =========
http1_nodes = {
    'F1': '1. 文本解析\n请求行 / 状态行',
    'F2': '2. 解析 Headers (K-V)\n关键: 查找 \\r\\n\\r\\n',
    'F3': 'Body 长度?',
    'F4': '读取指定长度 Body',
    'F5': '分块读取 Body',
    'F6': '请求/响应\n重组完成'
}
for nid, label in http1_nodes.items():
    dot.node(nid, label)

# ========= HTTP/2 Nodes =========
http2_nodes = {
    'G1': '0. 客户端发送 Magic Preface',
    'G2': '1. 循环解析二进制帧\n关键: 9 字节帧头',
    'G3': 'Frame 类型?',
    'G4': '2. HPACK 解压\nHeader Block',
    'G5': '读取 Body 数据',
    'G6': '处理控制帧',
    'G7': '3. 根据 Stream ID 归属',
    'G8': '请求/响应流\n重组完成'
}
for nid, label in http2_nodes.items():
    dot.node(nid, label)

# ========= HTTP/3 Nodes =========
http3_nodes = {
    'E1': '1. 依赖 QUIC 层提供\n有序 Stream 数据\n关键: QUIC Stream 管理',
    'E2': '2. 解析 HTTP/3 二进制帧',
    'E3': 'Frame 类型?',
    'E4': '3. QPACK 解压\nHeader Block\n(需与 Decoder Stream 交互)',
    'E5': '读取 Body 数据',
    'E6': '归属到对应请求',
    'E7': '请求/响应\n重组完成'
}
for nid, label in http3_nodes.items():
    dot.node(nid, label)

# ========= Notes Nodes =========
notes = {
    'Note1': 'DNS\n必要性: 域名到 IP 的转换',
    'Note2': 'HTTP/1.1\n关键: 文本解析\n缺点: 队头阻塞',
    'Note3': 'HTTP/2\n关键: 二进制分帧, HPACK\n必要性: 多路复用',
    'Note4': 'HTTP/3\n关键: 基于 QUIC, QPACK\n必要性: 减少延迟'
}
for nid, label in notes.items():
    dot.node(nid, label, shape='note', fillcolor='#cde4ff')

# ========= Edge Connections =========
# Main flow
dot.edge('A', 'B')
dot.edge('B', 'C', label='UDP 53')
dot.edge('B', 'D', label='TCP/TLS 握手')
dot.edge('B', 'E', label='QUIC 握手')
dot.edge('D', 'F', label='ALPN=http/1.1 或无')
dot.edge('D', 'G', label='ALPN=h2')

# DNS edges
dot.edge('C', 'C1')
dot.edge('C1', 'C2')
dot.edge('C2', 'C3')
dot.edge('C3', 'C4')

# HTTP/1.1 edges
dot.edge('F', 'F1')
dot.edge('F1', 'F2')
dot.edge('F2', 'F3')
dot.edge('F3', 'F4', label='Content-Length')
dot.edge('F3', 'F5', label='chunked')
dot.edge('F4', 'F6')
dot.edge('F5', 'F6')

# HTTP/2 edges
dot.edge('G', 'G1')
dot.edge('G1', 'G2')
dot.edge('G2', 'G3')
dot.edge('G3', 'G4', label='HEADERS')
dot.edge('G3', 'G5', label='DATA')
dot.edge('G3', 'G6', label='SETTINGS')
dot.edge('G4', 'G7')
dot.edge('G5', 'G7')
dot.edge('G6', 'G2')
dot.edge('G7', 'G8')

# HTTP/3 edges
dot.edge('E', 'E1')
dot.edge('E1', 'E2')
dot.edge('E2', 'E3')
dot.edge('E3', 'E4', label='HEADERS')
dot.edge('E3', 'E5', label='DATA')
dot.edge('E4', 'E6')
dot.edge('E5', 'E6')
dot.edge('E6', 'E7')

# Highlight key nodes
highlight_nodes = ['G4', 'E4']
for n in highlight_nodes:
    dot.node(n, _attributes={'fillcolor': '#f9f', 'stroke': '#333', 'penwidth': '2'})

key_nodes = ['F2', 'G2', 'E1']
for n in key_nodes:
    dot.node(n, _attributes={'fillcolor': '#ff9', 'stroke': '#333', 'penwidth': '2'})

# Render and display
output_path = '/mnt/data/protocol_parse_flowchart'
dot.render(output_path, cleanup=True)
display(Image(filename=output_path + '.png'))