4 ms·

Javascript and html version needed.

kjhughes 5y ago
- Dagre (deprecated, unfortunately): https://github.com/dagrejs https://github.com/dagrejs - Viz.js (via Emscripten): https://github.com/mdaines/viz.js https://github.com/mdaines/viz.js; Online demo: http://viz-js.com/ http://viz-js.com/
- dylanowen 5y ago
  Viz.js had some hard coded memory limits last time I checked. You can work around them on load, but it's annoying. Edit: GraphQL Voyager has the memory increase hack https://github.com/APIs-guru/graphql-voyager/blob/54a178142ae8554c41c92e785ea8886f18927017/src/utils/index.ts#L21 https://github.com/APIs-guru/graphql-voyager/blob/54a178142a...
- AtNightWeCode 5y ago
  I think dagre was ok but oversold the quality of the algos it used a bit. In many cases it can be better to use a SVG file generated from Graphviz directly instead.
- tunesmith 5y ago
  An alternative to dagre-d3 is d3-dag: https://github.com/erikbrinkman/d3-dag https://github.com/erikbrinkman/d3-dag I've had good success with cytoscapejs as well, integrating with react so the graph will animate layout on transition. I use elk, which is apparently superior to sugiyama (the algorithm graphviz uses for force-directed dag layouts).
dylanowen 5y ago
https://github.com/hpcc-systems/hpcc-js-wasm https://github.com/hpcc-systems/hpcc-js-wasm was pretty easy to integrate into my last project
- RBerenguel 5y ago
  Agreed, I have a kind-of-live graphviz editor in a webpage, with autocomplete and a few more things. Was fun to hack together
nxpnsv 5y ago
https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/
- kasperset 5y ago
  One of my favorite applications in R that can make Graphviz like plots: http://rich-iannone.github.io/DiagrammeR/index.html http://rich-iannone.github.io/DiagrammeR/index.html
- berkes 5y ago
  I used to generate most of my diagrams in PlantUML[0], but recently found that my not-taking app, Joplin[1], has Mermaid built in. PlantUML has the benefit that you can include it in your builds, e.g. parse any .plantuml files in `make doc` or in your CI. But I like Mermaid more: its easier to read, less quirky and easily integratable in the markdown (or note-taking apps) without the need for extra build steps. [0] https://plantuml.com/ https://plantuml.com/ [1] https://joplinapp.org/ https://joplinapp.org/
  - jodrellblank 5y ago
    Dendron[1] note taking extension for VS Code has Mermaid support builtin to its markdown renderer as well. That's how I recently found that Mermaid can't handle graphs with no flow https://github.com/mermaid-js/mermaid/issues/1227 https://github.com/mermaid-js/mermaid/issues/1227 [1] https://wiki.dendron.so/notes/ba97866b-889f-4ac6-86e7-bb2d97f6e376/ https://wiki.dendron.so/notes/ba97866b-889f-4ac6-86e7-bb2d97...
0x138d5 5y ago
Depending on what you're doing Cytoscape.js might also work. https://js.cytoscape.org/ https://js.cytoscape.org/
- istillwritecode 5y ago
  I found cytoscape to be annoying because it assumes you are using npm.
  - tunesmith 5y ago
    Not sure what you mean, you can install it other ways, and the dist is packaged up in a variety of ways. (https://github.com/cytoscape/cytoscape.js https://github.com/cytoscape/cytoscape.js)
jdlshore 5y ago
There's viz.js. I use it at objectplayground.com to visualize JavaScript object layouts. This file shows how I use it: https://github.com/jamesshore/object_playground/blob/master/src/viz_visualizer.js https://github.com/jamesshore/object_playground/blob/master/...

- Dagre (deprecated, unfortunately): https://github.com/dagrejs https://github.com/dagrejs - Viz.js (via Emscripten): https://github.com/mdaines/viz.js https://github.com/mdaines/viz.js; Online demo: http://viz-js.com/ http://viz-js.com/

dylanowen 5y ago
Viz.js had some hard coded memory limits last time I checked. You can work around them on load, but it's annoying. Edit: GraphQL Voyager has the memory increase hack https://github.com/APIs-guru/graphql-voyager/blob/54a178142ae8554c41c92e785ea8886f18927017/src/utils/index.ts#L21 https://github.com/APIs-guru/graphql-voyager/blob/54a178142a...
AtNightWeCode 5y ago
I think dagre was ok but oversold the quality of the algos it used a bit. In many cases it can be better to use a SVG file generated from Graphviz directly instead.
tunesmith 5y ago
An alternative to dagre-d3 is d3-dag: https://github.com/erikbrinkman/d3-dag https://github.com/erikbrinkman/d3-dag I've had good success with cytoscapejs as well, integrating with react so the graph will animate layout on transition. I use elk, which is apparently superior to sugiyama (the algorithm graphviz uses for force-directed dag layouts).

dylanowen 5y ago

https://github.com/hpcc-systems/hpcc-js-wasm https://github.com/hpcc-systems/hpcc-js-wasm was pretty easy to integrate into my last project

RBerenguel 5y ago
Agreed, I have a kind-of-live graphviz editor in a webpage, with autocomplete and a few more things. Was fun to hack together

nxpnsv 5y ago

https://mermaid-js.github.io/mermaid/#/ https://mermaid-js.github.io/mermaid/#/

kasperset 5y ago
One of my favorite applications in R that can make Graphviz like plots: http://rich-iannone.github.io/DiagrammeR/index.html http://rich-iannone.github.io/DiagrammeR/index.html
berkes 5y ago
I used to generate most of my diagrams in PlantUML[0], but recently found that my not-taking app, Joplin[1], has Mermaid built in. PlantUML has the benefit that you can include it in your builds, e.g. parse any .plantuml files in `make doc` or in your CI. But I like Mermaid more: its easier to read, less quirky and easily integratable in the markdown (or note-taking apps) without the need for extra build steps. [0] https://plantuml.com/ https://plantuml.com/ [1] https://joplinapp.org/ https://joplinapp.org/
- jodrellblank 5y ago
  Dendron[1] note taking extension for VS Code has Mermaid support builtin to its markdown renderer as well. That's how I recently found that Mermaid can't handle graphs with no flow https://github.com/mermaid-js/mermaid/issues/1227 https://github.com/mermaid-js/mermaid/issues/1227 [1] https://wiki.dendron.so/notes/ba97866b-889f-4ac6-86e7-bb2d97f6e376/ https://wiki.dendron.so/notes/ba97866b-889f-4ac6-86e7-bb2d97...

0x138d5 5y ago

Depending on what you're doing Cytoscape.js might also work. https://js.cytoscape.org/ https://js.cytoscape.org/

istillwritecode 5y ago
I found cytoscape to be annoying because it assumes you are using npm.
- tunesmith 5y ago
  Not sure what you mean, you can install it other ways, and the dist is packaged up in a variety of ways. (https://github.com/cytoscape/cytoscape.js https://github.com/cytoscape/cytoscape.js)

jdlshore 5y ago

There's viz.js. I use it at objectplayground.com to visualize JavaScript object layouts. This file shows how I use it: https://github.com/jamesshore/object_playground/blob/master/src/viz_visualizer.js https://github.com/jamesshore/object_playground/blob/master/...