Disposition -- graph generation app (like GraphViz)

announcements
1

heya, I've built a data structure to SVG diagram generator in a similar space to GraphViz:

image
image444×565 14.6 KB

Try it out here:
(best to click on the examples, the editor isn't so friendly on mobile)

Links:

Things you may care about:

  1. This generates diagrams from structured input.
  2. Generated node / edge positions are predictable / stable.
  3. Playground is pure client side logic.
  4. Light and dark mode works with :root.dark or media query.
  5. Diagram is stylable, with sensible(ish) defaults.
  6. Simple SVG output (no script, no foreignObject), so should be able to upload to other places without quality loss.

There's no CLI app yet, and I haven't worked very much on "good errors for parseable input that contain mistakes".

2

Is there a documentation page about the format? And can the styles (edge curved/orthongonal etc) be supplied via YAML? (It's going to feel really nice if I can just copy and paste someone else's work without having to follow manual UI instructions)

3

Thanks for sharing this crate!

It's great to see it supports node interaction and auto layout, and even better that it's all in pure Rust! Love it!

It would be perfect for rendering call graphs like the unsafety-propagation-graph I built with VueFlow and Dagre.

4

heya, the closest are the comments on example_input.yaml, paired with the API docs for InputDiagram. The entity_tooltips field isn't used just yet -- I haven't figured out how to place nodes in "the right place" / in a way that they don't exceed the SVG bounds.

yeaps! The Text tab has the full structure in YAML. If you edit a diagram using the input elements first, the text area will have the updated serialized structure; and you can edit the YAML directly (need to unfocus from the text area for the changes to take place).

There is a base_diagram.yaml (code version) where I've put the default theme, so it's possible to write one's own theme and merge the diagram data over it separately.

Related, I wanted a good text editor + LSP as a first class experience as well, but that would mean porting Monaco / CodeMirror to be a dioxus component, and figuring out how to integrate LSP into it, which is another substantial project.

wow that's cool :smiley: