5 ms·
OpenFLOW – Quickly make beautiful infrastructure diagrams local to your machine
- ram_rattle 1y agoLooks dope, Thanks for doing this
- Valodim 1y agoSo if this can be hosted as a github page, why not make the "quick start" section a link to just use the PWA?
- tankenmate 1y agoFYI, they changed their name to FOSSFlow about an hour ago.
- x0z 1y agoHahaha yes, after popular demmand I realised my mistake
- careful_ai 1y agoKudos—OpenFLOW feels like reclaiming infrastructure from CLI sprawl. Low-code network management with observability baked in is a powerful combo. The secret sauce is that it keeps humans in the loop: scripting flows is easy, but visualizing and validating them in real-time makes it production-ready. That human-checkpoint mindset is where dynamic tooling meets trust.
- x0z 1y agoI've not done anything special here, just wrapped the community edition of ISOFLOW https://github.com/markmanx/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 1y agoI'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?
- kevlened 1y agoThe docs for the icons: https://isoflow.io/docs/isopacks https://isoflow.io/docs/isopacks Collections of SVGs for the icons: https://github.com/markmanx/isopacks/tree/main/collections https://github.com/markmanx/isopacks/tree/main/collections
- rixed 1y agoI 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- 1y agoThank you for the parenthetical there. When I read your first line I thought, "surely they didn't.." They did.
- deleted 1y ago[deleted]
- martypitt 1y agoDiagrams 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 https://github.com/isoflow/isoflow
- x0z 1y agoThanks! 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 1y agoit 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 1y agoI'll add it to the todo
- Animux 1y agoIf this could be hosted on GH pages, is there any demo link?
- x0z 1y agohttps://codesandbox.io/p/sandbox/github/markmanx/isoflow https://codesandbox.io/p/sandbox/github/markmanx/isoflow ^ ISOFLOW have an online demo you can use :)
- zero0529 1y agoCan you export to other formats than JSON?
- x0z 1y agoWhich formats would you like to see?
- typeofhuman 1y agoNot OC but I'd like iage (png/jpg)
- zero0529 1y agoI think some Image formats or vector graphics would be cool!
- 9dev 1y agoThis 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 :)
- aqula 1y agoSomething like the C4 model? https://c4model.com/diagrams https://c4model.com/diagrams
- alixanderwang 1y agoAt least for the layering + using text aspect, D2 support this: defining diagrams as multiple layers like so x -> y layers: { inside_x: { a -> b } } A fleshed out example hosted on our web service: https://app.terrastruct.com/diagrams/664641071 https://app.terrastruct.com/diagrams/664641071
- aitchnyu 1y agoWonder why Mermaid has more hype than this.
- pjbk 1y agoI 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 https://www.clivemaxfield.com
- progx 1y agoNode version? Could not get it running with 22 or 24 on linux.
- pelagicAustral 1y agoGot it working with no issues on v20.11.0
- x0z 1y agoGood to know! Thanks :)
- x0z 1y ago24.3 for me, whats the issue you're getting?
- BigJ1211 1y agoWorks on 24.3.0 for me, though many a warning is thrown.
- mmastrac 1y agoThis is awesome. I built a lightweight home status server called Stylus that would probably pair very well with this: https://github.com/mmastrac/stylus https://github.com/mmastrac/stylus It works by automatically changing CSS classes, and it looks like the underlying isoflow library should support this.
- Valodim 1y agoLooks great! One recommendation, move the screenshots more to the top of the readme. It says "Stylus (style + status)" first sentence, and leaves the reader with a dangling "so what is the style?!" until way lower, after a theory of operation section ;)
- mmastrac 1y agoThanks for that feedback, will totally do that. I should probably update the sample screenshots to be a little more visually appealing, as well.
- h1fra 1y agoNB: it's using isoflow
- dr_kretyn 1y 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 1y agoYou can just not post if your criticism is mean spirited.
- dr_kretyn 1y agoIt 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 1y agoNah, 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.
- fennecbutt 1y agoBeauty is in the eye of the beholder.
- donatj 1y agoI am unclear exactly, what is this doing on top of Isoflow? Seems like Isoflow is doing a lot of the heavy lifting here?
- x0z 1y agoNo 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 1y agoYou 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?
- gtirloni 1y agoThis 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 1y agoI had the same issue. I found this and it works decently well and OSS. https://mermaid-to-excalidraw.vercel.app/ https://mermaid-to-excalidraw.vercel.app/
- cybrox 1y agoI love the idea of mermaid but the syntax is somewhat convolutes and the integrations in tools like GitLab are very unstable.
- LtdJorge 1y agoI don't know why, but I find the syntax pretty decent when you get used to it. It's declarative.
- SOLAR_FIELDS 1y agoThat's more of a takedown of whoever built the Gitlab tool than Mermaid itself. In the world where LLM's are very good at mermaid diagrams is the syntax even that terribly important?
- EatFlamingDeath 1y agoWhat a terrible take
- x0z 1y agoThanks! That'd definitely be interesting to look into, I'll put it on my TODO
- mgoetzke 1y agoMarkdown integration would be really great.
- Yesman85 1y agoIf it can consume terraform state and visualize it, that would be amazing.
- aqula 1y agoThis is something I'm working on. I'll probably do a separate post some time. https://marketplace.visualstudio.com/items?itemName=infragram.infragram https://marketplace.visualstudio.com/items?itemName=infragra...
- soco 1y agoAnd for the next level of wishful thinking, filter that Terraform state and show only main components...
- x0z 1y agoThis is the first project I've had that's gained any traction, my todo is filling up so fast! Definitely want to make Terraform state imports a main
- x0z 1y agoIt's on the list ;)
- prima-facie 1y agoThere's also diagrams.mingrammer.com which is a fantastic tool.
- b0a04gl 1y agowhat 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
- x0z 1y agoThat'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
- jamesponddotco 1y agoCloudcraft[1][2] can do that with your cloud provider, AWS or Azure. As a bonus, the diagrams also look quite cool. [1]: https://www.cloudcraft.co/ https://www.cloudcraft.co/ [2]: I’m part of the Cloudcraft team at DataDog, so obviously, I’m biased.
- x0z 1y agoI 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
- oddlama 1y agoI'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! [1]: https://github.com/oddlama/nix-topology https://github.com/oddlama/nix-topology
- knorker 1y agoIt'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 https://en.wikipedia.org/wiki/OpenFlow It is unrelated, right? Just a name clash with an overlapping domain?
- x0z 1y agoHahahah 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!
- fnord77 1y agoI'm inclined to agree with Edward Tufte - the 3D part doesn't add any information to the diagrams, so it is superfluous
- StrangeOrange 1y agoInteresting 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.
- deleted 1y ago[deleted]
- kingnothing 1y agoIf you care, Snowflake launched a product called Openflow less than a month ago. Yours will probably be very difficult to discover.
- esseph 1y agoThere's also a network telemetry protocol called OpenFlow that every network engineer knows. https://en.wikipedia.org/wiki/OpenFlow https://en.wikipedia.org/wiki/OpenFlow
- burnt-resistor 1y agoThis is immediately what I thought of. Terrible name collision.
- liotier 1y agoReading the title, I expected cute network diagrams from aggregated OpenFlow telemetry !
- foobiekr 1y agoI was going to note the same thing. The networking openflow is the first hit on google and bing; why do people not websearch?
- esseph 1y ago"OpenRouter" is another one that drives me nuts. "You mean FRR?" https://frrouting.org/ https://frrouting.org/
- jayde2767 1y agoPretty cool app, OP. Thanks for sharing the details.