diff --git a/README.md b/README.md index d3330c0b..40e2dbe5 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ This is a collection of packages for working with Graphviz in JavaScript. The main package, [viz](./packages/viz), is a WebAssembly build of Graphviz with a simple JavaScript wrapper. -With Viz.js, you can easily render a graph written in [Graphviz's DOT language](https://www.graphviz.org/doc/info/lang.html) and display it as an SVG element in a webpage: +With Viz.js, you can easily render a graph diagram as an SVG element to display it in a webpage: ```js import { instance } from "@viz-js/viz"; diff --git a/packages/examples/parcel/index.js b/packages/examples/parcel/index.js index d8a6bb5b..0d464e88 100644 --- a/packages/examples/parcel/index.js +++ b/packages/examples/parcel/index.js @@ -1,9 +1,19 @@ import { graphvizVersion } from "@viz-js/viz"; +function randomNode() { + return Math.ceil(Math.random() * 10); +} + +function randomGraph() { + return { + edges: Array.from({ length: 10 }, () => ({ tail: randomNode(), head: randomNode() })) + }; +} + document.getElementById("version").appendChild(document.createTextNode(graphvizVersion)); import("@viz-js/viz") .then(module => module.instance()) .then(viz => { - document.getElementById("output").appendChild(viz.renderSVGElement("digraph { a -> b }")); + document.getElementById("output").appendChild(viz.renderSVGElement(randomGraph())); }); diff --git a/packages/examples/parcel/package.json b/packages/examples/parcel/package.json index b9830e01..8cdbbbfa 100644 --- a/packages/examples/parcel/package.json +++ b/packages/examples/parcel/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "private": true, "dependencies": { - "@viz-js/viz": "3.1.0", + "@viz-js/viz": "3.1.0-dev", "parcel": "^2.9.3" }, "browserslist": "> 0.5%, last 2 versions, not dead", diff --git a/packages/viz/README.md b/packages/viz/README.md index cbcaa13d..94d80b40 100644 --- a/packages/viz/README.md +++ b/packages/viz/README.md @@ -8,7 +8,7 @@ Viz.js is published on NPM as `@viz-js/viz`. ## Usage -Call `instance()`, which returns a `Promise` that resolves to a new `Viz` instance. Then call any of the instance's `render` methods to render a graph written in [the DOT language](https://www.graphviz.org/doc/info/lang.html). The `renderSVGElement()` method is convenient for displaying a graph in a webpage. The instance can be reused for multiple `render` calls. +Call `instance()`, which returns a `Promise` that resolves to a new `Viz` instance. Then call any of the instance's `render` methods to render a graph. A graph can be written in [the DOT language](https://www.graphviz.org/doc/info/lang.html) or as a plain JavaScript object. The `renderSVGElement()` method is convenient for displaying a graph in a webpage. The instance can be reused for multiple `render` calls. ```js -``` - -```js - -