6 ms·
Vizdom: Diagrams as Code
- lloydatkinson 2y agoHow does this compare to D2 and Mermaid?
- petepete 2y agoOne thing is they're open source. > the Rust WebAssembly binary included in this library is closed-source.
- deleted 2y ago[deleted]
- smodo 2y agoD2 is open, they just have an optional proprietary layout algo. Of course one might contend that the rest is ‘just’ tooling but I find D2 provides a very quick and easy way to rough out diagrams without touching a mouse. The open source algorithms are good enough for me.
- s0l0ist 2y agoI’d say for the majority use-case (as I see it), they’re excellent for manual diagram curation. Especially, D2 for software arch diagrams. Mermaid is great at many things. It’s kind of hard to write up a fair comparison - it’s apples to oranges. I can say that vizdom performs very fast hierarchical layouts (currently the only supported type). Example 14 in the live editor runs in about 1 second on my M1 Mac - but if you refresh the page it CloudFront will complain since the graph state is all in the URL and it’s too long.
- hatmatrix 2y agoOr PlantUML - or is that not in the running anymore?
- gtf21 2y ago"Diagrams as Code" has been around a long time (e.g. DOT), not sure what this is really bringing as an improvement, especially as seems to require an account (at least it does when I click "get started" and, as someone else points out, is closed source.
- s0l0ist 2y agoThe npm package is free to use, but closed source until I have bandwidth. To be clear, you don’t need an account to use the npm package which has all of the functionality to perform layout and rendering. An account is only needed if you want to sync the graph and have a web page to view renderings. This is useful if you’ve instrumented a long lived application with Vizdom, but don’t want to produce a local layout/rendered image because you can’t really “view” it if the service is running in the cloud.
- gtf21 2y agoAh ok thanks for clarifying!
- cpill 2y agoan account. to make a diagram. sigh diagrams-as-a-service. sign. "turn your OCD side project into a business: turn something that people do for free and don't really care that much about into a paid subscription service because..."
- cdchn 2y agoI don't think its even OCD side project its just a contrived "how 2 make saas business?"
- robertlagrant 2y agoThis seems unjustified. If people want it, they'll buy it. If not, no harm done. If you could e.g. embed the diagrams into Confluence pages, that's something people will definitely pay for.
- throwadobe 2y ago
- ReleaseCandidat 2y ago> Please note that while Vizdom is freely available for use under the Apache License 2.0, the Rust WebAssembly binary included in this library is closed-source. So, the examples are open source (and the README). https://github.com/vizdom-dev/vizdom https://github.com/vizdom-dev/vizdom
- s0l0ist 2y agoI’m the author, I just got tired of using a DSL and wanted a way to programmatically write/build a graph and quickly see the rendering. DLS-based diagramming tools like Terrastruct, mermaid, or graphviz definitely have their perks and are very well established for manual graph curation. But I found the lack of programmatic tooling (except terrastruct) a bit of a pain point.
- jitl 2y agoCan you explain the licensing? There’s several comments noting some closed source WASM blob.
- s0l0ist 2y agoSure! It’s Apache 2.0 licensed, but yes the binary wasm blob is what does all the work and is closed source for the time being. It’s about 25k lines of rust code compiled to do the following: - Layout/position a directed graph - Compute a bounding box for text labels and produce font glyphs for the rendering engine - Generate an SVG - Optionally, sync to a Vizdom account Fun fact, the majority of that wasm blob is what is powering the web application itself. You can see it in action using the editor view/diff on the site.
- alixanderwang 2y agoCongrats on the launch! I'm the author of D2 (Terrastruct). I won't comment on comparisons you want to make as it's your launch, but just to clarify, we do have a programmatic API: - https://terrastruct.com/blog/post/generate-diagrams-programmatically https://terrastruct.com/blog/post/generate-diagrams-programm... - https://d2lang.com/tour/api/ https://d2lang.com/tour/api/
- smusamashah 2y agoOther than Graphviz (can try one of its other visual editors[3]), other generic text to diagram tools/langs in this space are Pikchr[1] and D2[2]. UPDATE: Just realized that Vizdom here is not a new language, but a Graphviz editor. [1]: https://pikchr.org/home/pikchrshow https://pikchr.org/home/pikchrshow [2]: https://play.d2lang.com/ https://play.d2lang.com/ [3]: http://magjac.com/graphviz-visual-editor/ http://magjac.com/graphviz-visual-editor/
- s0l0ist 2y agoI also wanted to give a shoutout to Greg who built the amazing Leptos rust framework that powers everything. Read more here: https://leptos.dev/ https://leptos.dev/
- unshavedyak 2y agoLooks like their website is struggling, alt: https://github.com/leptos-rs/leptos https://github.com/leptos-rs/leptos
- cpill 2y agothe diagram on the front page I thought was documenting the huge amount of code next to it but it turns out it's the other way around! huge amount of code is generating the simple diagram. you must really hate dsl's. the point of the DSL is it saves you writing the huge amount of code to do something simple. so your premise here is people aren't writing enough code that's right more code that we have to maintain just to draw diagrams. play something simple like a DSL with something difficult like more code. heaps of it! and then charge money for it :D
- s0l0ist 2y agoTradeoffs are real. My example displays a few more knobs and yes, it’s more verbose. I’d say my premise isn’t that “DSLs are bad”, but more along the lines of if a DSL isn’t what you’re looking for, I may have something for you. Particularly if you need your application to generate a view of a graph _during runtime_ so that it is your real-time source of truth. I find that DSLs and “as code” solutions for several products have their own niche. Take for example Terraform vs Pulumi.
- Terretta 2y agoThe L in DSL is "Language", so it's a programming language that is domain, or niche, specific. These are code. Diagramming is a domain, and within diagramming are any number of diagram type domains, leading to concise code for particular niches. Compare 25+ of these niches here: https://kroki.io/ https://kroki.io/
- helix278 2y agoThere is a .NET library that also wraps DOT and provides programmability: https://github.com/Rubjerg/Graphviz.NetWrapper https://github.com/Rubjerg/Graphviz.NetWrapper
- lttlrck 2y ago"digramming"
- szundi 2y agoAh we can directly edit the saved model file now, perfect
- moltar 2y agoThis is very nice and something I’ve been looking for for a while. Any chance icons can be included? I want to design AWS diagrams and use service logos.
- s0l0ist 2y agoThank you! Custom icons - not yet. I’ve been mulling over how to do it on server and client that isn’t hacky and that plays nice with edge intersections (how edges will point to the bounding box of the icon/logos) It’s definitely something I want to support.
- s0l0ist 2y agoAlso, if you're using python today, take a look at https://diagrams.mingrammer.com/ https://diagrams.mingrammer.com/ It's pretty good - uses Graphviz under the hood, but supports many cloud icons/logos. Not completely sure if it allows you to provide any icon, but it wouldn't surprise me.
- hal0x2328 2y agoHave you looked at PlantUML?
- moltar 2y agoYes, but is it "as [TypeScript] code"?
- echoangle 2y agoI still don’t get what exactly this does. There are Graphviz wrappers so I can already create Diagrams programmatically, what is the advantage of using this?
- s0l0ist 2y agoIf you're already happy with Graphviz wrappers, then the only real benefit is that you can sync the graph to a Vizdom account so you don't have to build anything to view the diagram somewhere outside of local development - it saves you from needing to save the positioned graph to a file to view it (then delete it) or coming up with a way to serve the SVG. Not to mention the act of performing layout (obtaining positioning data) is relatively expensive for non-trivial graphs. When syncing to a Vizdom account, your application doesn't need to spend cycles to position/render anything. Instead, your graph is positioned and rendered in the dashboard in your browser upon loading (technically, it is also rendered on the server due to my global SSR config). Also a few of the JS wrappers don't come with a build of Graphviz that allows memory growth, so for somewhat medium/large graphs, the WebAssembly panics. For all other wrappers, it works just fine I'd assume - mainly an issue with not passing the correct build args to Emscripten.
- taspeotis 2y ago> Modern digramming
- dacapoday 2y agofor new register: password require at least 16 characters and contain: an uppercase letter, a lowercase letter, a number, and a symbol. Its too complex for even Chrome built-in secure password generator to come up with, let alone a human.
- rad_gruchalski 2y agoThen use a different password manager. Bitwarden has no problems with that. PaSsw0rd123$56_!
- awwaiid 2y agoDoing a layout algorithm is very difficult, and the DOT code made me curious, so I decompiled the wasm and looked around a bit. I see this appears to use or build on Dagre (https://github.com/dagrejs/dagre/wiki https://github.com/dagrejs/dagre/wiki), though I've seen no citation of that work. What's up with that? How much of this is original work vs pulling together tools in a new way or improving their API?
- s0l0ist 2y agoThank you for pointing this out - it was an error. I actually even forgot to credit the dependencies the binary was built from! However, that is now resolved. The latest distribution has license mentions for: - Dagrejs - NotoSans Font - *Others (an html file generated via `cargo about` that list all deps used in the final dist) That being said, I did want to point out that I did take significant influence from Dagrejs which is why you see that the layouts produced look very similar - it is a rough translation into rust. There are changes to some DFS traversals, other optimizations that are rust-specific, and countless bug fixes. I actually spent a lot of time attempting to reproduce the layouts that Dagre generates, but there are some examples that do not produce the same results. At this point, I think it is close enough and would rather spend time writing a new set of algos for better edge crossing minimization and cluster support.
- awwaiid 2y agoCool, thanks - it makes sense to build on or be (directly) inspired by these other projects.
- marcyschidler 2y ago[dead]