NodeJS Graphviz - 尝试添加图像作为标签会抛出错误代码 1

Question

我正在尝试使用图像作为 Graphviz 中的节点。我正在使用 npm grapghviz 项目来执行此操作。然而，尽管许多教程指出您可以通过我在下面概述的方法来完成此操作，但 .output 函数只会抛出一个错误，只有数字

1

并且没有任何消息。

我已尝试以下操作：

  const imagePath = path.join(__dirname, "myImage.png");
  g.addNode(node.Name, {
    shape: "record",
    label: `<f0> | <img src="${myImage}" width="100" height="100"/> | <f1>`, // Image in the record node
    style: "filled",
    fillcolor: "#FF5733", // Background color
    color: "#C70039",     // Border color
    penwidth: 2           // Border width
})

使用类似 html 的标签和表格

  g.addNode(node.Name, {
    label: `<TABLE CELLSPACING="2" CELLPADDING="2" BORDER="0"><TR><TD><IMG SRC="${imagePath}"/></TD></TR></TABLE>>`,
    shape: "plaintext",
  });

这可行，但没有桌子看起来很奇怪。长文本使节点变大而图像变小。

  g.addNode(node.Name, {
    label: "A Service",
    shape: "square",
    image: imagePath
  });

本质上，我正在尝试制作看起来像这样的节点..但无法做到这一点，因为在输出到 png 或 svg 时它总是抛出错误 1。

Answer 1

• 根据answer，

  record

  不处理图像。

• HTML 式标签 绝对适用于 cli graphviz 应用程序。
  

  file.dot

  中的示例脚本：

  graph G {
    "img" [label=<<TABLE><TR><TD><IMG SRC="image.png"/></TD></TR></TABLE>>]
  }
  

  命令：

  dot -Tpng file.dot > file.png

  
  结果：
  
  但不适用于 [电子邮件受保护] NPM 包，即使使用
  解析上面的工作文件

  const util = require('util');
  const graphviz = require('graphviz');
  graphviz.parse("file.dot", function(graph){ graph.output("png","file.png") }, ...
  

  所以我猜这是软件包中的错误。

• 它只需要与

  image

  属性一起使用...

因此，为了将图片定位在左侧，如您的示例所示，我们需要将节点的 shape 更改为矩形并将图片与左侧对齐。

为了对齐图像，我们需要以下节点属性：

• width

  和

  height

  设置节点大小

• fixedsize

  “冻结”节点大小

• labelloc

  如有必要，可将图像放置在文本上方或下方

• imagescale

  使图像适合节点内

• imagepos

  对齐节点中的图像

而且

imagepos

会有问题，因为在代码中使用这个属性时，包会产生错误：

DEBUG: Warning : Invalid attribut `imagepos' for a node
D:\yourproject\node_modules\graphviz\lib\deps\attributs.js:192
  return(quotedTypes.indexOf(attrs[data].type) !== -1);
                                         ^

TypeError: Cannot read property 'type' of undefined
    at mustBeQuoted (D:\yourproject\node_modules\graphviz\lib\deps\attributs.js:192:42)
    ...

它不理解此属性（如 GitHub 上的包存储库问题中提到）。

幸运的是，您可以轻松修复此错误！
为此，请通过添加以下行来编辑文件

\node_modules\graphviz\lib\deps\attributs.js

：

var attrs = {
  ...
  "imagepath" : { "usage" : "G", "type" : "string" },
  "imagepos" :  { "usage" : "N", "type" : "string" }, //👈 add this line

现在

imagepos

已被正确识别。

脚本：

const graphviz = require('graphviz');

// Create digraph G
var graph = graphviz.digraph("G");

graph.addNode( "node name", {
  label: "A Service",
  shape: "box",
  image: "image.png",
  imagepos: "ml",
  imagescale: true,
  fixedsize: true,
  width: 3,
  height: 1,
});

// Generate a PNG output
graph.output( "png", "file.png" );

结果：