Running/Executing the file

[cpretzer]

Hi,

I'm interested in playing with vizdom, and it's not clear how to run the examples from this repo.

Are the files meant to be embedded in the rendered files for larger applications? Or is there a command that I can use to process the files to render their output?

[s0l0ist]

Hi @cpretzer, the examples are to show you how to run an example JS/TS file, but they make a lot of assumptions about the runtime which will not work out of the box (mainly used in my development). There's no command to execute all the examples at this time. I'm working on improving this repo.

Here's a basic example of using node (v20.16.0) which will position and render the graph and save it to a file so you can view it locally:

Local rendering

const fs = require("node:fs");
const { DirectedGraph } = require("@vizdom/vizdom-ts-node");

// Create a new graph
const graph = new DirectedGraph();

// Add vertices
const v0 = graph.new_vertex({
  render: {
    label: "Hello",
  },
});
const v1 = graph.new_vertex({
  render: {
    label: "World!",
  },
});

// Add an edge between the vertices
graph.new_edge(v0, v1, {
  render: {
    label: "Foo Bar",
  },
});

// Position the graph
const positioned = graph.layout();

// Finally, obtain an SVG
fs.writeFileSync("./graph.svg", positioned.to_svg().to_string());

Done!

Online rendering

If instead you want to view the graph without performing layout/positioning/rendering and then opening the SVG in Chrome or some other tool to visualize it, you can signup for a free Vizdom account which will allow you to view it online in real-time.

Simply signup for a free account, then follow the onboarding instructions. I'll post them here for simplicity:

Export the following variables. The onboarding instructions provide these values for you and also tell you how to generate the client secret:

export VIZDOM_CLIENT_ID="<client_id>"
export VIZDOM_CLIENT_SECRET="<client_secret>"
export VIZDOM_GRAPH_ID="<graph_id>"

Then, run the following file containing the following contents:

const { DirectedGraph } = require("@vizdom/vizdom-ts-node");

// Create a new graph
const graph = new DirectedGraph(
  {}, // <-- optional layout and render attributes.
  {
    client_id: process.env.VIZDOM_CLIENT_ID || "",
    client_secret: process.env.VIZDOM_CLIENT_SECRET || "",
    graph_id: process.env.VIZDOM_GRAPH_ID || "",
  }
);

// Add vertices
const v0 = graph.new_vertex({
  render: {
    label: "Hello",
  },
});
const v1 = graph.new_vertex({
  render: {
    label: "World!",
  },
});

// Add an edge between the vertices
graph.new_edge(v0, v1, {
  render: {
    label: "Foo Bar",
  },
});

Done! Once you run the program, it should sync to Vizdom and you may view it in the account.