Render output in Graph object

mdaines / viz-js

Graphviz in your browser

https://viz-js.com/

MIT License

4.11k stars 353 forks source link

Render output in Graph object #279

Open alan-khosro opened 3 days ago

alan-khosro commented 3 days ago

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 commented 2 days ago

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:

https://github.com/mdaines/viz-js/blob/3e6692b09ed59e9ce63e5a125fb6a02726e6ef0a/packages/viz/src/viz.mjs#L58-L61

mdaines commented 2 days ago

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

alan-khosro commented 2 days ago

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/