[HN Gopher] OpenFLOW - Quickly make beautiful infrastructure dia...
___________________________________________________________________
OpenFLOW - Quickly make beautiful infrastructure diagrams local to
your machine
Author : x0z
Score : 258 points
Date : 2025-07-01 06:29 UTC (16 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| x0z wrote:
| 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 wrote:
| 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?
| rixed wrote:
| 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- wrote:
| Thank you for the parenthetical there. When I read your
| first line I thought, "surely they didn't.."
|
| They did.
| gnatolf wrote:
| Curious what's the argument for/against that here. I
| agree it's at least unusual.
| mh- wrote:
| I don't have any good argument in either direction, if
| I'm being honest. Just feels.. weird.
| martypitt wrote:
| 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
| x0z wrote:
| 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 wrote:
| 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 wrote:
| I'll add it to the todo
| Animux wrote:
| If this could be hosted on GH pages, is there any demo link?
| x0z wrote:
| https://codesandbox.io/p/sandbox/github/markmanx/isoflow
|
| ^ ISOFLOW have an online demo you can use :)
| zero0529 wrote:
| Can you export to other formats than JSON?
| x0z wrote:
| Which formats would you like to see?
| typeofhuman wrote:
| Not OC but I'd like iage (png/jpg)
| zero0529 wrote:
| I think some Image formats or vector graphics would be cool!
| 9dev wrote:
| 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 :)
| alixanderwang wrote:
| At 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
| aitchnyu wrote:
| Wonder why Mermaid has more hype than this.
| nullify88 wrote:
| 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.
| 9dev wrote:
| 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.
|
| Does that make sense?
| alixanderwang wrote:
| Yeah we do this with globs. a.class:
| backend b.class: frontend # hide
| everything **: suspend layers: {
| backend: { # show backend stuff **:
| unsuspend { &class: backend }
| } }
|
| see more here: https://d2lang.com/blog/c4/
| billyp-rva wrote:
| 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
| x0z wrote:
| 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!
| pjbk wrote:
| 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
| progx wrote:
| Node version? Could not get it running with 22 or 24 on linux.
| pelagicAustral wrote:
| Got it working with no issues on v20.11.0
| x0z wrote:
| Good to know! Thanks :)
| x0z wrote:
| 24.3 for me, whats the issue you're getting?
| BigJ1211 wrote:
| Works on 24.3.0 for me, though many a warning is thrown.
| mmastrac wrote:
| 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.
| h1fra wrote:
| NB: it's using isoflow
| dr_kretyn wrote:
| "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 wrote:
| You can just not post if your criticism is mean spirited.
| dr_kretyn wrote:
| 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 wrote:
| 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.
| donatj wrote:
| 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 wrote:
| 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 wrote:
| 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?
| gtirloni wrote:
| 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.
| cybrox wrote:
| I love the idea of mermaid but the syntax is somewhat
| convolutes and the integrations in tools like GitLab are very
| unstable.
| SOLAR_FIELDS wrote:
| That'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?
| x0z wrote:
| Thanks! That'd definitely be interesting to look into, I'll put
| it on my TODO
| mgoetzke wrote:
| Markdown integration would be really great.
| Yesman85 wrote:
| If it can consume terraform state and visualize it, that would be
| amazing.
| x0z wrote:
| It's on the list ;)
| wooptoo wrote:
| There's also diagrams.mingrammer.com which is a fantastic tool.
| b0a04gl wrote:
| 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
| x0z wrote:
| 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
| jamesponddotco wrote:
| Cloudcraft[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/
|
| [2]: I'm part of the Cloudcraft team at DataDog, so obviously,
| I'm biased.
| x0z wrote:
| 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
| oddlama wrote:
| 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!
|
| [1]: https://github.com/oddlama/nix-topology
| knorker wrote:
| 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 wrote:
| 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!
| esseph wrote:
| Definitely rebrand... This is going to confuse a lot of
| people!
| mh- wrote:
| 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.
| fnord77 wrote:
| I'm inclined to agree with Edward Tufte - the 3D part doesn't add
| any information to the diagrams, so it is superfluous
| StrangeOrange wrote:
| 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.
| kingnothing wrote:
| If you care, Snowflake launched a product called Openflow less
| than a month ago. Yours will probably be very difficult to
| discover.
| esseph wrote:
| There's also a network telemetry protocol called OpenFlow that
| every network engineer knows.
|
| https://en.wikipedia.org/wiki/OpenFlow
| foobiekr wrote:
| I was going to note the same thing. The networking openflow
| is the first hit on google and bing; why do people not
| websearch?
| esseph wrote:
| "OpenRouter" is another one that drives me nuts.
|
| "You mean FRR?" https://frrouting.org/
| jayde2767 wrote:
| Pretty cool app, OP. Thanks for sharing the details.
___________________________________________________________________
(page generated 2025-07-01 23:00 UTC)