"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.
The 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.
an 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..."
This 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.
I wrote some functionality to parse DOT to feed it into the layout engine before I got everything working. It was a great way to validate more complex graphs with a DSL that is already prevalent. So for now it’s only present in the webapp.
DOT parsing isn’t part of the npm package, but I’m not totally opposed to include it! It may add 1-2Mb more to the wasm bundle.
Just so you know, I find this terribly confusing. You see the homepage with your code, then you think "oh, I'll try this editor here..." and then it turns out it's Dot? All examples are written in Dot? Why? Didn't it say "no DSLs"? Didn't it show some TypeScript in the homepage?
It can very easily make people get the wrong idea about what your project is.
Yeah I’ll admit, that isn’t clear. I used DOT to test it a while back and opened that up for folks who also wanted to mess with DOT, but that isn’t the value prop today.
You can create and render as many graphs as you like with the package offline - only the real-time sync is limited.
Doing 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), 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?
Thank 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.
I’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.
Congrats 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:
"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 a bit of a pain point."
Hi, creator of Ilograph[0] here. I agree with this if the DSL doesn't provide an IDE with autocomplete and instant-rendering (which I think applies to the technologies you mentioned).
With auto-complete and instant-rendering, I think a DSL is much preferable to Python (the most common "diagrams-as-code" language). Python is a programming language for writing, well, programs. It feels like complete overkill for creating static diagrams.
This looks really interesting and I love how well put-together it feels! I wish your offline desktop software version had a one-time payment option though. Forcing SaaS subscriptions for non-SaaS is a big turn-off IMO.
For me (and my narrow use-case), I just couldn’t find a simple tool to sync my graph to somewhere that I could view it easily - especially after I’ve instrumented my application and deployed to the cloud.
Yeah that and http://magjac.com/graphviz-visual-editor/ are decent. But they will crash on medium/large graphs because the WebAssembly build of Graphviz that they use under the hood isn't compiled to allow memory growth.
The example drop down should either have names instead of Example 1..n. Or it should be changeable via keyboard. I have reached example 10 so far I think, but I have to keep track of example number in my head, open the dropdown, scroll the list and click the next number every single time. Edit: Yup, can't just go through all examples like this.
Sounds like an interesting app. But I just wanted to comment that I don't need an account to use draw.io and I can download an xml of the diagram just fine from them. I noticed you didn't mention them in your comment, so perhaps they are not a competition?
Yeah not really competition as I see it. If you create graphs rarely or need to craft one manually then there are better tools out there.
Maybe my landing page is terrible, but you don’t need an account to download the npm package and start doing things locally.
That being said, I’m more interested in helping individuals who want to programmatically generate graphs - hundred+ updates to them per day, similar to how an APM/telemetry libs work. You instrument once and get the benefits of a real-time graph.
Sure! 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.
I free to redistribute the WASM blob to my end users? The blob itself is Apache? I know binaries can be under Apache without being source available but I just want o make sure I understand correctly
Ah yeah while I do have a live editor for playing with DOT, it’s not a graphviz replacement nor is it primarily what Vizdom is all about. I actually launched a tech preview earlier this year and those two pages were all I really had.
the 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
Tradeoffs 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.
> 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.
I 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?
If 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.
for 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.
I’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.
D2 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.
Thank 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 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.
