[HN Gopher] Vizdom: Diagrams as Code
___________________________________________________________________
Vizdom: Diagrams as Code
Author : s0l0ist
Score : 78 points
Date : 2024-09-01 13:57 UTC (9 hours ago)
(HTM) web link (vizdom.dev)
(TXT) w3m dump (vizdom.dev)
| lloydatkinson wrote:
| How does this compare to D2 and Mermaid?
| petepete wrote:
| One thing is they're open source.
|
| > the Rust WebAssembly binary included in this library is
| closed-source.
| smodo wrote:
| 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.
| s0l0ist wrote:
| 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.
| hatmatrix wrote:
| Or PlantUML - or is that not in the running anymore?
| gtf21 wrote:
| "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 wrote:
| 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.
| cpill wrote:
| 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..."
| cdchn wrote:
| I don't think its even OCD side project its just a
| contrived "how 2 make saas business?"
| throwadobe wrote:
| Looks like this uses DOT? Click on "Editor" at the top
| s0l0ist wrote:
| 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.
| genezeta wrote:
| > 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.
| thelastparadise wrote:
| 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
| s0l0ist wrote:
| 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.
| thelastparadise wrote:
| > 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?
| s0l0ist wrote:
| 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.
| ReleaseCandidat wrote:
| > 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
| s0l0ist wrote:
| 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.
| jitl wrote:
| Can you explain the licensing? There's several comments noting
| some closed source WASM blob.
| s0l0ist wrote:
| 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.
| jitl wrote:
| 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
| s0l0ist wrote:
| Yes exactly!
| alixanderwang wrote:
| 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/
| s0l0ist wrote:
| Thanks! Love your product! I didn't mean to say you don't
| have it. I'll edit my other post.
| alixanderwang wrote:
| 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!
| s0l0ist wrote:
| Definitely!
| fyaliwnyfjsd wrote:
| Current user of D2, would really love a TypeScript API with
| Deno support.
| Veuxdo wrote:
| "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
| s0l0ist wrote:
| 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.
| lazyasciiart wrote:
| I've been using this GitHub service
| https://github.com/dreampuf/GraphvizOnline
| foundry27 wrote:
| 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.
| Veuxdo wrote:
| Thanks for the kind words! I appreciate the feedback and
| understand where you're coming from.
| smusamashah wrote:
| 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.
| s0l0ist wrote:
| Ah yeah, it's been bugging me as well lol.
|
| I definitely need to update that at some point.
| smusamashah wrote:
| 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/
| s0l0ist wrote:
| 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.
| s0l0ist wrote:
| I also wanted to give a shoutout to Greg who built the amazing
| Leptos rust framework that powers everything.
|
| Read more here: https://leptos.dev/
| unshavedyak wrote:
| Looks like their website is struggling, alt:
| https://github.com/leptos-rs/leptos
| cpill wrote:
| 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
| s0l0ist wrote:
| 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.
| helix278 wrote:
| There is a .NET library that also wraps DOT and provides
| programmability: https://github.com/Rubjerg/Graphviz.NetWrapper
| lttlrck wrote:
| "digramming"
| szundi wrote:
| Ah we can directly edit the saved model file now, perfect
| moltar wrote:
| This 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 wrote:
| 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 definitely something I want to support.
| hal0x2328 wrote:
| Have you looked at PlantUML?
| echoangle wrote:
| 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?
___________________________________________________________________
(page generated 2024-09-01 23:00 UTC)