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:

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})

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

npm install vanjs-graph

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

import * as vanGraph from "vanjs-graph"

Alternatively, you can import VanGraph from CDN via a <script type="text/javascript"> tag:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/van-graph.nomodule.min.js"></script>

https://cdn.jsdelivr.net/npm/[email protected]/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:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.2.nomodule.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@viz-js/[email protected]/lib/viz-standalone.js"></script>

Try on jsfiddle

vanGraph.show(states, options) => Promise<SVGSVGElement>

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].