VanGraph: Helper Library to Visualize Dependency Graph Among States and DOM Nodes

VanGraph is a library that helps you visualize dependency graph among states and DOM nodes with the help of Graphviz. Here is the sample usage:

``js
const firstName = van.state("Tao"), lastName = van.state("Xin")
const fullName = van.derive(() => ${firstName.val} ${lastName.val})

// Build the DOM tree...

// To visualize the dependency graph among firstName, lastName, fullName, and all the
// derived states and DOM nodes from them.
vanGraph.show({firstName, lastName, fullName})
`

Checkout a demo in CodeSandbox.

Installation

$3

The library is published as NPM package vanjs-graph. Run the following command to install the package:

`shell
npm install vanjs-graph
`

To use the NPM package, add this line to your script:

`js
import * as vanGraph from "vanjs-graph"
`

$3

Alternatively, you can import VanGraph from CDN via a
`

https://cdn.jsdelivr.net/npm/vanjs-graph@0.1.0/dist/van-graph.nomodule.js can be used for the non-minified version.

Note that: you need to import VanJS and @viz-js/viz before VanGraph for it to be used properly:

`html


`

Try on jsfiddle

Documentation

`js
vanGraph.show(states[, options]) => Promise
`

The parameter states represents a collection of State objects whose dependency graph we want to visualize. All the State objects and their dependents will be rendered in the dependency graph. states can either be specified as a plain object, e.g.: {firstName, lastName, fullName}, or as an array, e.g.: [firstName, lastName, fullName]. If states is specified as an array, the variable names won't be shown in the rendered graph.

options is a plain object with the following properties:
* rankdir: Type string. Default "LR". Optional. Corresponding to the graph attribute rankdir in Graphviz.

The function returns a Promise so that you can await the result and then attach SVGSVGElement` to the main DOM tree.