Render output in Graph object

[alan-khosro]

Render methods accept Dot syntax or Graph object instance.
Render methods output in many different formats (dot, SVG, Jason, etc).

Would you have an output format option in "Graph" format (renderGraph method) ? Or a convert method from renderJSON to Graph format.

Use case: I'd like to do some transformation of edges before drawing. The convenient way is:

graph = viz.render(dot, {format: "Graph"})
graph = manipulate(graph)
SVG = viz.render(graph, {format: 'svg'})

Interestingly, renderJSON is not the same as Graph format!

If there is a way to do so, without a new feature, please let me know.

[mdaines]

This isn't currently a way to do this. As you allude to, it might be possible to fake it by converting the JSON output to a graph object.

At some point, I'd like Viz.js to provide a way to manipulate graphs as can be done when using Graphviz as a library.

Being able to ask Viz.js for output as a graph object seems useful, so I'll also consider that for a future version.

Interestingly, renderJSON is not the same as Graph format!

I suppose that's a bit confusing. renderJSON is just asking Graphviz to render in json format and parsing the returned string:

viz-js/packages/viz/src/viz.mjs

Lines 58 to 61 in 3e6692b

	renderJSON(src, options = {}) {
	const str = this.renderString(src, { ...options, format: "json" });
	return JSON.parse(str);
	}

[mdaines]

By the way, what sort of transformation would you like to do on the edges of the graph before drawing?

[alan-khosro]

I am gradually building a version of Graphviz only for "cloud architecture diagram" as a hubby. Recently, I moved to your library since I wanted it to be mostly client side (browser) visualization.
For such a specific use case, I'd like to add a bunch of sugar-coated notations that make it easier and more convenient to draw cloud diagrams such as

• reverse arrows (like a <- b <- c means a -> b -> c [dir=back])
• subgraph connections (like node1^ -> node2^ means from node1's parent subgraph to node2's parent subgraph)
• themes (similar to mermaid.js themes)
• etc

Some of these sugar-coats are easier (and more accurate) to apply to Dot notation and some to "Graph/JSON" notation.

I do tons of cloud diagrams and hate using lucid, etc. or even memaidJS. So, a week ago, I decided to build a tool using graphviz + a bunch of sugar-costing transformations, as I need them when doing my day job. There might be others seeking similar tool based on GraphViz.

https://diagraph.invisement.com/