Caveats (2.x)

Rendering Graphs With User Input

When rendering graphs with user input, or any other graph that may include syntax errors, you will probably need to recreate the Viz instance after catching syntax errors thrown by the render functions. Syntax errors can sometimes cause the Graphviz DOT parsing code to enter an error state it can't recover from, meaning that all subsequent input will throw errors.

For example:

let viz = new Viz();

function handleInput(src) {
  viz.renderSVGElement(src)
  .then(element => {
    // Display the element
  })
  .catch(error => {
    // Create a new Viz instance
    viz = new Viz();

    // Possibly display the error
  })
}

Graphviz Errors Always Reject

In some cases, the Graphviz dot program will produce both output and an error message. For example, Graphviz can drop an edge and print an error message but still write an output file. However, the promises returned from Viz.js will always reject if there is an error during rendering. See #123.

Fonts

When used in Viz.js, Graphviz only knows about font metrics for Courier, Times, Helvetica, and Arial, even though it will include other font names in its output if they are specified. When another font name is specified, Graphviz will fall back to using the metrics for Times. This can result in a label being drawn outside of its node.

If you would like to use other fonts, one workaround is to choose a font with similar metrics to Times and to add extra space around labels using the margin attribute.