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:

5

Update:

  • edges now have descriptions, and the edge paths will be routed around nodes / the descriptions
  • foundation for rendering markdown is in place

markdown example (live):

image
image519×820 32.7 KB

I also made this (semi-hacky) diagram (it's pure SVG and CSS!):

2026-05-30deployprocess

There's plenty of polishing to do, especially around minimizing edge paths crossing when the rank-dir is not top-to-bottom.

am happy to have help for polishing, though I shall lead with:

  • about 70% (?) of this has been LLM coded, though I thought out and wrote down a lot of how the layout should be computed myself.

    a lot of flex containers, and routing edge paths through the coordinates of the flex nodes

  • tests aren't great -- they're not how I'd write them, but they kept the project relatively sane.

  • code is relatively organised how I'd organise it, except I'd split the logic into even smaller logic-structs