API (1.x)

Viz(src[, options])

• src <string> The graph to render in the DOT language.
• options <Object>
  • format <string> The output format, and may be one of "svg", "xdot", "plain", "ps", "json", or "png-image-element".
  • engine <string> The Graphviz engine to use, and may be one of "circo", "dot", "fdp", "neato", "osage", or "twopi".
  • scale <number> The scale factor for the "png-image-element" format. If this is not specified, window.devicePixelRatio will be used if available, and 1 if not.

Parses src and renders a graph according to the options given. Output is a string, except when using the "png-image-element" format, when it is an instance of HTMLImageElement.

For example:

result = Viz("digraph { a -> b; }");
result = Viz("digraph { a -> b; }", { format: "png-image-element", scale: 2 });
result = Viz("graph { n0 -- n1 -- n2 -- n3 -- n0; }", { engine: "neato" });
result = Viz("digraph { x -> y -> z; }", { format: "plain" });

If Graphviz encounters an error, Viz will throw an Error object with the error message.

images and files Options

Two additional options keys are provided for working with images and files:

• images <Object[]> Image dimensions to use when rendering nodes with image attributes. This is an array of objects, { href, width, height }. href may be a filename ("example.png"), a relative or absolute path ("/images/example.png"), or a URL ("http://example.com/image.png"). Dimensions may be specified with units: in, px, pc, pt, cm, or mm. If no units are given or dimensions are given as numbers, points (pt) are used. Graphviz does not actually load image data when this option is used — images are referenced with the dimensions given, eg, in SVG by an <image> element with width and height attributes.
• files <Object[]> Files to make available to Graphviz using Emscripten's in-memory filesystem. This is an array of objects, { path, data }. path is a string and may be given as an absolute or relative path, and data is a string. Files are created relative to the root, which is the working directory.

For example, here's how to indicate to Graphviz that there is a 400x300 image called "test.png":

result = Viz("digraph { a[image=\"test.png\"]; }", {
  images: [
    { href: "test.png", width: "400px", height: "300px" }
  ]
});

totalMemory Option

An additional, advanced option is provided for working with the Emscripten module instance.

• totalMemory <number> The total memory available for the Emscripten module instance. This should be a power of 2. The default of 16MB should be sufficient for most cases — only consider using a larger number if you run into the error "Cannot enlarge memory arrays".

Viz.svgXmlToPngImageElement(svgXml[, scale[, callback]])

• svgXml <string> An SVG XML string, as would be obtained from the Viz function using the "svg" format option.
• scale <number> The scale factor for the output. If this is not specified, window.devicePixelRatio will be used if available, and 1 if not.
• callback <Function> An optional Node-style callback. If specified, it is given two arguments, (err, image). If not specified, Viz.svgXmlToPngImageElement returns an instance of HTMLImageElement.

Converts svgXml to a PNG HTMLImageElement. If callback is specfied, image is loaded by the time the callback is invoked.

Viz.svgXmlToPngBase64(svgXml, scale, callback)

• svgXml <string> An SVG XML string, as may be obtained from the Viz function using the "svg" format option.
• scale <number> The scale factor for the output. If this is given as undefined, window.devicePixelRatio will be used if available, and 1 if not.
• callback <Function> A Node-style callback. It is given two arguments, (err, data).

Converts svgXml to a PNG represented as a Base64 string. This function requires a callback, unlike svgXmlToPngImageElement.