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.
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 ;)
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!
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 :)
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.
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!
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.
This is awesome. I built a lightweight home status server called Stylus that would probably pair very well with this:
https://github.com/mmastrac/stylus
It works by automatically changing CSS classes, and it looks like the underlying isoflow library should support this.
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.
[1] https://www.clivemaxfield.com
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.
Note that your "Built with the Isoflow library" link at the bottom to isoflow 404's to https://github.com/isoflow/isoflow
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 ;)
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
Node version? Could not get it running with 22 or 24 on linux.
Works on 24.3.0 for me, though many a warning is thrown.
Got it working with no issues on v20.11.0
Good to know! Thanks :)
24.3 for me, whats the issue you're getting?
Can you export to other formats than JSON?
Which formats would you like to see?
Not OC but I'd like iage (png/jpg)
NB: it's using isoflow
If this could be hosted on GH pages, is there any demo link?
https://codesandbox.io/p/sandbox/github/markmanx/isoflow
^ ISOFLOW have an online demo you can use :)
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!
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 :)
At least for the layering + using text aspect, D2 support this:
defining diagrams as multiple layers like so
A fleshed out example hosted on our web service: https://app.terrastruct.com/diagrams/664641071Whoa 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.
Wonder why Mermaid has more hype than this.
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!
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.
[0] https://www.ilograph.com