ipycytoscape/Dash Plotly Cytoscape如何实现多行表格样式节点标签

\n换行失效是因为Cytoscape默认对label字段采用纯文本渲染模式，会自动过滤所有空白控制字符，不需要换复杂的实现方案，按下面两种方式配置即可实现和TensorFlow plot_model一致的节点标签效果，同时适配ipycytoscape和Dash Plotly Cytoscape环境。

• 方案1：开启HTML标签渲染（优先推荐，无额外依赖）
  底层Cytoscape.js原生支持HTML格式标签，只需要修改节点样式配置即可，不需要生成额外资源：

  1. 把节点样式中的text-wrap参数设为wrap，开启文本换行解析
  2. 标签内容中用<br>代替\n实现换行，还可以直接用行内HTML标签实现加粗、改字色等排版效果，完全对齐plot_model的标签样式
  3. 神经网络可视化推荐搭配dagre布局，天然适配PyTorch计算图的有向无环结构，自动做层级排版不会错位

  ipycytoscape 示例代码：

  import ipycytoscape
  
  cyto = ipycytoscape.CytoscapeWidget()
  # 添加卷积层示例节点
  cyto.graph.add_node(
      ipycytoscape.Node(
          data={
              "id": "conv2d_1",
              # 用<br>换行，行内标签实现样式区分
              "label": "<b>Conv2d</b><br><span style='color:#666'>Output shape: (32, 32, 64)</span><br><span style='color:#999'>Params: 1792</span>"
          },
          style={
              "width": 180,
              "height": 70,
              "background-color": "#f0f8ff",
              "border-color": "#4682b4",
              "border-width": 2,
              "text-valign": "center",
              "text-halign": "center",
              "font-size": 12,
              # 核心配置：开启换行解析
              "text-wrap": "wrap"
          }
      )
  )
  cyto.set_layout(name="dagre", rankDir="TB") # TB代表从上到下排版，和plot_model默认方向一致
  display(cyto)
  

  Dash Plotly Cytoscape配置逻辑完全一致，只需要把上述样式规则写入组件的stylesheet参数即可，不需要修改标签写法。

• 方案2：自定义背景图节点（适合复杂定制化排版）
  如果需要实现带图标、特殊色块标记的高度自定义标签，可以用Pillow预生成每个层的标签图片，直接作为节点背景加载，不需要依赖Cytoscape本身的文本渲染：

  1. 用Pillow生成对应尺寸的透明背景PNG图，绘制好需要的文字、边框、装饰元素
  2. 将图片转成base64编码格式，赋值给节点的background-image样式属性
  3. 把节点原生label设为空字符串，调整节点宽高和图片尺寸匹配避免拉伸

  标签图片生成示例代码：

  from PIL import Image, ImageDraw, ImageFont
  import base64
  from io import BytesIO
  
  def gen_layer_img(layer_name, out_shape, params, w=180, h=70):
      # 生成和plot_model配色一致的标签底图
      img = Image.new("RGBA", (w, h), (240, 248, 255, 255))
      draw = ImageDraw.Draw(img)
      draw.rectangle([(0,0), (w-1, h-1)], outline=(70,130,180,255), width=2)
      # 加载对应字体，可替换为本地字体路径
      font_bold = ImageFont.truetype("Arial Bold.ttf", 12)
      font_normal = ImageFont.truetype("Arial.ttf", 10)
      # 逐行绘制文字
      draw.text((w/2, 20), layer_name, fill=(0,0,0,255), font=font_bold, anchor="mm")
      draw.text((w/2, 38), f"Output: {out_shape}", fill=(102,102,102,255), font=font_normal, anchor="mm")
      draw.text((w/2, 54), f"Params: {params}", fill=(153,153,153,255), font=font_normal, anchor="mm")
      # 转base64供Cytoscape加载
      buf = BytesIO()
      img.save(buf, format="PNG")
      return f"data:image/png;base64,{base64.b64encode(buf.getvalue()).decode()}"
  
  # 节点配置时直接引用生成的图片地址即可
  node_config = {
      "data": {"id": "conv2d_1", "label": ""},
      "style": {"background-image": gen_layer_img("Conv2d", "(32,32,64)", "1792")}
  }
  

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