Vizdom: Diagrams as Code | Hacker News Reader

Vizdom: Diagrams as Code

vizdom.dev

110 pointss0l0ist64 comments

"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 don't think its even OCD side project its just a contrived "how 2 make saas business?"

Ah ok thanks for clarifying!

Looks like this uses DOT? Click on "Editor" at the top

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.

> So for now it’s only present in the webapp.

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.

TBBQF I have no idea what the value proposition of this project is actually supposed to be.

Edit: It seems to have almost 100% feature overlap with graphviz, but it is a paid SaaS? I don't get it...

Edit 2: This has to be a troll post. "Up to 3 graphs" for free --are you kidding me? I can run `dot` a million times in a second for free

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.

> You can create and render as many graphs as you like with the package offline - only the real-time sync is limited.

Why wouldn't I just use graphviz then?

You know what? You’re right! That’s confusing. I’ll try and make it better.

Really good feedback and I’m being serious. Wish I saw that earlier.

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.

Cool, thanks - it makes sense to build on or be (directly) inspired by these other projects.

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:

- https://terrastruct.com/blog/post/generate-diagrams-programm...

- https://d2lang.com/tour/api/

Thanks! Love your product! I didn’t mean to say you don’t have it. I’ll edit my other post.

No worries at all, the API is definitely a bit hidden. Anyway, best of luck and feel free to reach out if you want to chat diagrams!

Definitely!

Current user of D2, would really love a TypeScript API with Deno support.

"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.

[0] https://www.ilograph.com

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.

Thanks for the kind words! I appreciate the feedback and understand where you're coming from.

Neat product! I like the interactivity.

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.

I’ve been using this GitHub service https://github.com/dreampuf/GraphvizOnline

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.

A minor nitpick on the editor page https://vizdom.dev/editor/

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.

Ah yeah, it’s been bugging me as well lol.

I definitely need to update that at some point.

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.

Can you explain the licensing? There’s several comments noting some closed source WASM blob.

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

Yes exactly!

Other 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

[2]: https://play.d2lang.com/

[3]: http://magjac.com/graphviz-visual-editor/

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.

The 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/

> 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

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.

Then use a different password manager. Bitwarden has no problems with that. PaSsw0rd123$56_!

There is a .NET library that also wraps DOT and provides programmability: https://github.com/Rubjerg/Graphviz.NetWrapper

I also wanted to give a shoutout to Greg who built the amazing Leptos rust framework that powers everything.