This looks amazing. I find Mermaid.js ugly and the syntax difficult/buggy but unfortunately it's one of the best supported diagram tools in static site generators. It'd be awesome to have Isoflow diagrams embedded in Markdown like that.
Tsarp 58 minutes ago [-]
I had the same issue. I found this and it works decently well and OSS.
It works by automatically changing CSS classes, and it looks like the underlying isoflow library should support this.
pjbk 17 hours ago [-]
I always loved the isometric diagrams on Clive Maxfield's [1] books about electronics. Since a lot of circuits are non-planar (flip flops, semiconductor layers, FPGA architecture), adding a perspective view makes things uncluttered, and easier to understand and remember. I think it translates well to many technologies.
This is immediately what I thought of. Terrible name collision.
ram_rattle 46 minutes ago [-]
Looks dope, Thanks for doing this
x0z 23 hours ago [-]
I've not done anything special here, just wrapped the community edition of ISOFLOW https://github.com/markmanx/isoflow
and made it dead easy to set up and run.
You can now export and load JSON backups of your diagrams allowing you to essentially have as many as you want, which the community version of ISOFLOW restricts. Enjoy!
lovelearning 15 hours ago [-]
I'm not very familiar with Node.js. Any idea where in isoflow's code are the graphics for those 3D-style icons? Are they SVG or what? Is it possible to add custom icons?
I was curious also.
The SVGs for the isoflow library of icons is in node_modules/@isoflow/isopacks/dist/isopacks.md
(yes, svg within base64 within markdown)
mh- 11 hours ago [-]
Thank you for the parenthetical there. When I read your first line I thought, "surely they didn't.."
They did.
gnatolf 10 hours ago [-]
Curious what's the argument for/against that here. I agree it's at least unusual.
mh- 10 hours ago [-]
I don't have any good argument in either direction, if I'm being honest. Just feels.. weird.
11 hours ago [-]
donatj 15 hours ago [-]
I am unclear exactly, what is this doing on top of Isoflow? Seems like Isoflow is doing a lot of the heavy lifting here?
x0z 15 hours ago [-]
No you're absolutely right, isoflow is doing 90% of the work here, I'm not hiding that, they just don't have a ready to use version like this of their community pack. That's all this is.
smokel 11 hours ago [-]
You aren't hiding it, but the announcement and first paragraphs in the README suggest otherwise. It comes off as a bit disingenuous, perhaps you are not aware of this?
martypitt 21 hours ago [-]
Diagrams look great - well done.
Reminds me of a similar project years ago that was doing the same thing - they ultimately struggled with monetization and folded (I forget the name) -- however this one is MIT OSS, so I'm guessing that's not a key concern right now.
Thanks! I can't take any credit at all for the icons/design that's all Isoflow, but their community edition is designed to steer you to the pro version.
No plans at all for money making, just want people to enjoy using it.
Thank you for pointing out the link, I'll get on that ;)
busssard 16 hours ago [-]
it would be great to have an easier time to add my custom icon svg or even links to svg and then scaling them automatically to size
this way i could tell the LLM that will be generating my JSON to include the following links as X and create the output JSON immediately
x0z 14 hours ago [-]
I'll add it to the todo
Animux 20 hours ago [-]
If this could be hosted on GH pages, is there any demo link?
Pretty cool app, OP. Thanks for sharing the details.
zero0529 18 hours ago [-]
Can you export to other formats than JSON?
x0z 17 hours ago [-]
Which formats would you like to see?
zero0529 14 hours ago [-]
I think some Image formats or vector graphics would be cool!
typeofhuman 17 hours ago [-]
Not OC but I'd like iage (png/jpg)
knorker 14 hours ago [-]
It's a bit confusing to see "openflow" diagrams that include network components, that have nothing to do with OpenFlow. https://en.wikipedia.org/wiki/OpenFlow
It is unrelated, right? Just a name clash with an overlapping domain?
x0z 14 hours ago [-]
Hahahah yes so funnily enough my dad works with the IETF, and I showed him this project and he said "I was really confused why you called it that when that's a standard"
Might be due a rebrand already!
mh- 11 hours ago [-]
I'm not one to pile onto the "you can't name it something that's already taken" comments, but given the name recognition within your target audience already, yeah. Plus, this will just be really hard to google.
esseph 12 hours ago [-]
Definitely rebrand... This is going to confuse a lot of people!
Yesman85 15 hours ago [-]
If it can consume terraform state and visualize it, that would be amazing.
aqula 54 minutes ago [-]
This is something I'm working on. I'll probably do a separate post some time.
There's also diagrams.mingrammer.com which is a fantastic tool.
h1fra 17 hours ago [-]
NB: it's using isoflow
progx 17 hours ago [-]
Node version? Could not get it running with 22 or 24 on linux.
BigJ1211 17 hours ago [-]
Works on 24.3.0 for me, though many a warning is thrown.
x0z 17 hours ago [-]
24.3 for me, whats the issue you're getting?
pelagicAustral 17 hours ago [-]
Got it working with no issues on v20.11.0
x0z 17 hours ago [-]
Good to know! Thanks :)
fnord77 13 hours ago [-]
I'm inclined to agree with Edward Tufte - the 3D part doesn't add any information to the diagrams, so it is superfluous
StrangeOrange 13 hours ago [-]
Interesting visuals change the way in which people engage with a diagram. You can think of it as an aspect of storytelling. Personally I find my eyes much more likely to be drawn to these isometric diagrams, compared to a 2D equivalence. The 3D aspect draws my eyes in and keeps them there. So what's being added doesn't need to be raw information that changes the facts of a diagram, it can be an aid to processing. There's a reason that visual design is a thing.
9dev 18 hours ago [-]
This is a little tangential, but I've wondered for a while if there's a better way to visualise the composition of software systems.
Often, there's not only a single way to look at one: There's a user interaction flow through components, but those components also consist of hardware; the hardware might be virtual and composed of several, spread, sub-components, or even containers. You can go down this path pretty deep, and arrive at several different representations of the system that are either impossible to visualise at the same time, or make it incomprehensible.
Ideally, I would want to have a way to document different facets of the system individually, but linked to each other, and be able to change my perspective at anytime. This would allow to flip between UX, network traffic, firewall boundaries, program flow, logical RPC flow, and so on; all while being able to view connected components for a given component at anytime. For example, inspecting an application, then viewing its network ports, then its runtime container, the hypervisor the container runs on, the cloud provider that sits in, and so on.
My idea so far is a graph database that contains all components and the edges between them. The tool would have to be as extensible as possible, so using something like HCL to describe the graph would be great, with extensions for all kinds of components and edges. And finally a viewer to render visual representations of one or more composable layers to flick through, and export etc.
I never got around to working on it yet, but if anyone else had the same idea, I'd be open to collaborating :)
Terrastruct looks really nice, and kind of like a 2D version of the 3D thing I'm thinking of; if you could attach key-value properties to nodes and vertices, and had different rendering modes that made use of any of these properties to render the item differently, that would probably be pretty close. For example, a layer that displays a physical network might only consider vertices with a `kind` attribute of "physical link"; that limits the layer to all nodes with a matching vertex between them, and the layer would also only display those attributes of the nodes relevant for the current view.
Whoa as an infrastructure guy I had always dreamed of diagrams like this. And while I've used Miro and some OSS homebrew stuff, nothing was as polished as this. Well done.
aitchnyu 16 hours ago [-]
Wonder why Mermaid has more hype than this.
billyp-rva 17 hours ago [-]
There are quite a few tools that offer this model-based approach; you define your resources in a model, then use them in multiple perspectives to show different aspects like you describe. Some, like Ilograph[0] (my project), offer interactivity and zooming.
Some very good points, I totally agree, I suppose as you said you get to a point in your abstraction where it either loses meaning or becomes too complex to view. I think it would be a fantastic thing to try! Go build it!
17 hours ago [-]
b0a04gl 15 hours ago [-]
what if we can make these diagrams synchronized with reality. you need the diagram to pull from the same source of truth as your actual infrastructure - whether that's terraform state, kubernetes manifests, or service discovery. that way diagrams become less historical artifacts and more of living documentation
oddlama 10 hours ago [-]
I've written something like this for NixOS a while back [1], which generates infrastructure diagrams directly from the source of truth (albeit not as pretty as isoflow). I'm sure this could be applied to other declarative tech stacks aswell!
[2]: I’m part of the Cloudcraft team at DataDog, so obviously, I’m biased.
x0z 14 hours ago [-]
I absolutely love cloudcraft, full disclosure one of our team at work wanted to use it, but we're a public sector org(no money), so I threw this together for him
x0z 15 hours ago [-]
That's a great thought, I'd need to make some kind of translation between manifests and the json, getting knowledge of those relationships might be tricky?
Service discovery is another route, would hate to get someones IT department angry for aggressive port scanning though lol
dr_kretyn 16 hours ago [-]
"beautiful" here is definitely subjective. I only see a diagram and it looks like from PowerPoint presentation from the marketing team to the sales team.
Why JS world frequently uses "beautiful" or "modern" to describe its project? Often that hides something else.
swalsh 16 hours ago [-]
You can just not post if your criticism is mean spirited.
dr_kretyn 13 hours ago [-]
It wasn't mean spirited but now I can see it that indeed it came out as such. Apologies. And thanks for pointing it out!
MisterTea 9 hours ago [-]
Nah, its okay. I too think beautiful is used too often in contexts where it feels exaggerated. Nature can be beautiful. People can be beautiful. But a blue and grey computer diagram? It certainly looks good to me but I would not use the word beautiful. Perhaps if it were exceptionally artistic using a unique aesthetic I would use that word. But that's just like, my opinion, man.
Rendered at 05:31:58 GMT+0000 (Coordinated Universal Time) with Vercel.
https://mermaid-to-excalidraw.vercel.app/
In the world where LLM's are very good at mermaid diagrams is the syntax even that terribly important?
https://github.com/mmastrac/stylus
It works by automatically changing CSS classes, and it looks like the underlying isoflow library should support this.
[1] https://www.clivemaxfield.com
https://en.wikipedia.org/wiki/OpenFlow
"You mean FRR?" https://frrouting.org/
Collections of SVGs for the icons: https://github.com/markmanx/isopacks/tree/main/collections
(yes, svg within base64 within markdown)
They did.
Reminds me of a similar project years ago that was doing the same thing - they ultimately struggled with monetization and folded (I forget the name) -- however this one is MIT OSS, so I'm guessing that's not a key concern right now.
Note that your "Built with the Isoflow library" link at the bottom to isoflow 404's to https://github.com/isoflow/isoflow
No plans at all for money making, just want people to enjoy using it.
Thank you for pointing out the link, I'll get on that ;)
this way i could tell the LLM that will be generating my JSON to include the following links as X and create the output JSON immediately
^ ISOFLOW have an online demo you can use :)
It is unrelated, right? Just a name clash with an overlapping domain?
https://marketplace.visualstudio.com/items?itemName=infragra...
Often, there's not only a single way to look at one: There's a user interaction flow through components, but those components also consist of hardware; the hardware might be virtual and composed of several, spread, sub-components, or even containers. You can go down this path pretty deep, and arrive at several different representations of the system that are either impossible to visualise at the same time, or make it incomprehensible.
Ideally, I would want to have a way to document different facets of the system individually, but linked to each other, and be able to change my perspective at anytime. This would allow to flip between UX, network traffic, firewall boundaries, program flow, logical RPC flow, and so on; all while being able to view connected components for a given component at anytime. For example, inspecting an application, then viewing its network ports, then its runtime container, the hypervisor the container runs on, the cloud provider that sits in, and so on.
My idea so far is a graph database that contains all components and the edges between them. The tool would have to be as extensible as possible, so using something like HCL to describe the graph would be great, with extensions for all kinds of components and edges. And finally a viewer to render visual representations of one or more composable layers to flick through, and export etc.
I never got around to working on it yet, but if anyone else had the same idea, I'd be open to collaborating :)
https://c4model.com/diagrams
defining diagrams as multiple layers like so
A fleshed out example hosted on our web service: https://app.terrastruct.com/diagrams/664641071Does that make sense?
[0] https://www.ilograph.com
[1]: https://github.com/oddlama/nix-topology
[1]: https://www.cloudcraft.co/
[2]: I’m part of the Cloudcraft team at DataDog, so obviously, I’m biased.
Why JS world frequently uses "beautiful" or "modern" to describe its project? Often that hides something else.