Isoflow – Infrastructure Diagrams(isoflow.io)
isoflow.io
Isoflow – Infrastructure Diagrams
https://isoflow.io/
24 comments
I have suffered through Gliffy + Confluence for months, so I love seeing new software in this space. This looks very nice, but seems to be missing a lot of important features: boxes to segment networks (a la VPC), directed connections (arrows, filled or not, dashed, etc) and text boxes.
I really, really like how good this looks, especially the isometric view. It adds some personality that makes otherwise boring diagrams interesting to look at.
Finally, I want to say how awesome it is that you can try out the app without an account and with only one-click. Nothing "sells" your product better than your product, and this website is a textbook example of how this should be executed.
I really, really like how good this looks, especially the isometric view. It adds some personality that makes otherwise boring diagrams interesting to look at.
Finally, I want to say how awesome it is that you can try out the app without an account and with only one-click. Nothing "sells" your product better than your product, and this website is a textbook example of how this should be executed.
Try out miro.com, the tool wasn't built for infrastructure diagrams, but you can do some amazing visualizations once you get comfortable with the tools there.
That said, I love this MVP! I created a quick diagram of some video systems I maintain and the experience was pretty good. <3 the svg export
That said, I love this MVP! I created a quick diagram of some video systems I maintain and the experience was pretty good. <3 the svg export
What's wrong with gliffy?
From an aesthetic point, it is okay, and I like that it includes logos for almost every service imaginable. From an editing perspective, it is a mess. For example:
- you can select a rectangle object that has a transparent middle by clicking in the empty space
- you cannot option/alt + drag to copy an item or group of items
- "refactoring" is not easy because even when items are grouped you cannot move them as a group
- arrows sometimes don't update their endpoints, even when they have been connected to an item
- slow performance in the browser, especially for larger diagrams.
- saving is slow and versioning is even slower
These are just a few I thought of off the top of my head. These papercuts on their own are annoyances, but together makes it feel like the software is using me and not the other way around.
- you can select a rectangle object that has a transparent middle by clicking in the empty space
- you cannot option/alt + drag to copy an item or group of items
- "refactoring" is not easy because even when items are grouped you cannot move them as a group
- arrows sometimes don't update their endpoints, even when they have been connected to an item
- slow performance in the browser, especially for larger diagrams.
- saving is slow and versioning is even slower
These are just a few I thought of off the top of my head. These papercuts on their own are annoyances, but together makes it feel like the software is using me and not the other way around.
I like that you bring up refactoring. The biggest pain I have experienced with IT drawings is maintenance. If you are using a GUI these things are usually hard to maintain/refactor. As a matter of fact, I have experienced whole organizations just switching to graphviz, plant or other text based diagram tools just because of that!
I want tolike this. I hatethe state of infrastructure diagramming, but one of my primary complaints is that I dont like the inability to run the prettier ones locally.I don't want to trust enumeration of my system to yet another company.
That said, this is quite pretty.
That said, this is quite pretty.
Draw.io/ diagrams.net runs locally according to the documentation. E.g, you download the JavaScript app when visiting g the page and everything from there on is handled in the browser.
You can also install it in a rocker container.
https://github.com/jgraph/drawio
You can also install it in a rocker container.
https://github.com/jgraph/drawio
The thing with draw.io is that the pretty isometric views are only for AWS. I'd love to have something like https://www.cloudcraft.co/ that can be run locally for not cloud-based infraestructures.
Draw.io has been a blessing for me. I have used Visio in the past but I always experienced extreme frustration with that product. Over the past couple of years I have switched all my diagraming needs over to draw.io. It doesn’t seem targeted at any specific genre (network,flowchart, etc) but it is able to meet my needs. Unlike Visio it’s UI and operation is perfect for someone like me who just wants to draw and not spend a month learning a product. I have it deployed on prem as a server but it also has a locally installable application that doesn’t require a server. Kudos to the team that develops and maintains that project.
Seconded. I love the iso view and the way the edges drag, reminds me of SimCity2000.
All these online tools make me slightly uneasy. I avoided draw.io for a long time, expecting it to fold one day and take my data with it.
All these online tools make me slightly uneasy. I avoided draw.io for a long time, expecting it to fold one day and take my data with it.
Can’t you run draw.io locally, though?
On windows, yes. Linux, no.
They've had an Electron version out for at least a year now. I use it every day on Ubuntu.
https://github.com/jgraph/drawio-desktop
https://github.com/jgraph/drawio-desktop
That can't be right, I use draw.io on my mint laptop, from https://github.com/jgraph/drawio-desktop/releases
There's a VS Code extension to view and edit them. Perhaps that works on Linux?
https://github.com/hediet/vscode-drawio
https://github.com/hediet/vscode-drawio
Good point. If this is a big concern, I'm happy to enable data export as JSON. Of course, you'd still need a visualiser that can read the data structure and display appropriate icons, but at least you'd have the raw data.
They changed name, but other than that, they never hooded your data (to my knowledge)
I still use it
I still use it
Good point. Would a JSON import / export feature help, so you can save and load your data locally without it ever having to touch the server?
Yes I think so. I have been using the blockdiag series of programs (nwdiag, seqdiag, rackdiag, etc) to keep it programmatic and version controlled, etc, so a json import/export feature would be great.
One thing that I would love to see from these diagram tools is to have the different components be aware of which other components can be connected too and how they will interact.
I think that will create a set of new features and possibilities for the tools.
For example don’t allow an nginx component to be connected to a MySQL server(not sure if it’s possible though, you get the point) or require a load balancer when a browser wants to connect to multiple nodes, etc, that kind of logic.
That can then be expanded into having it suggesting architecture patterns or even generating definition files for you.
Just an idea
I think that will create a set of new features and possibilities for the tools.
For example don’t allow an nginx component to be connected to a MySQL server(not sure if it’s possible though, you get the point) or require a load balancer when a browser wants to connect to multiple nodes, etc, that kind of logic.
That can then be expanded into having it suggesting architecture patterns or even generating definition files for you.
Just an idea
> One thing that I would love to see from these diagram tools is to have the different components be aware of which other components can be connected too and how they will interact.
Visio does this. It's really a shame that Visio's SVG renderer is so bad, since its PDF and raster output is really good. But SVG is the standard now, and the PDFs it generates aren't easily converted to SVG.
> That can then be expanded into having it suggesting architecture patterns or even generating definition files for you.
I don't know about the former, but I think Visio can do the latter.
Visio does this. It's really a shame that Visio's SVG renderer is so bad, since its PDF and raster output is really good. But SVG is the standard now, and the PDFs it generates aren't easily converted to SVG.
> That can then be expanded into having it suggesting architecture patterns or even generating definition files for you.
I don't know about the former, but I think Visio can do the latter.
As long as there’s an override...
I like my diagrams to have semantic/structural meaning and text-based source code, which is why I love ilograph.com.
This looks interesting, thanks for sharing. I have been looking for more structural/text-based options. Any other related tools you have tried?
I’m a fan of Mermaid.js for state diagrams etc., but this seems like a good higher-level tool.
I’m a fan of Mermaid.js for state diagrams etc., but this seems like a good higher-level tool.
Super pretty! UX-wise it might be a bit too minimal, you could take some inspiration from https://excalidraw.com/ (which itself is inspired by many other drawing tools). Concrete example: If you only have 6 "things" to choose from, why not place them directly in the UI, saving one click + menu expansion (similar to the tool bar up top of Excalidraw).
Hey congratulations, I love the ease of use and the aesthetic of this app! A few suggestions to improve quality of life:
1. Add hotkeys for each tool
2. Make delete actually delete things rather than going "back" in the browser
3. Make escape return the user to the "move" tool
4. When you use the "add" tool and add something, the menu closes but the tool stays selected at which point clicking it again deselects it rather than reopening the menu
5. Don't export the "cursor" square when you export the diagram. Perhaps also an export to image rather than svg would be valuable for the kinds of purposes people would use this tool for
At the moment the tool looks great and gets the job done, but I find myself hitting a wall in terms of what I can do with it (mainly around those points I've mentioned).
1. Add hotkeys for each tool
2. Make delete actually delete things rather than going "back" in the browser
3. Make escape return the user to the "move" tool
4. When you use the "add" tool and add something, the menu closes but the tool stays selected at which point clicking it again deselects it rather than reopening the menu
5. Don't export the "cursor" square when you export the diagram. Perhaps also an export to image rather than svg would be valuable for the kinds of purposes people would use this tool for
At the moment the tool looks great and gets the job done, but I find myself hitting a wall in terms of what I can do with it (mainly around those points I've mentioned).
Looks great, congrats on launching! Feature requests:
1) make the site mobile friendly
2) connect to the cloud backend and automatically import all the services, let me make the connections between them. If it's a large scale deployment it would make set up a lot easier
1) make the site mobile friendly
2) connect to the cloud backend and automatically import all the services, let me make the connections between them. If it's a large scale deployment it would make set up a lot easier
That's quite a nice balance between "auto import and connect everything, dven the stuff you don't want e.g Terraform" and "set it all up yourself".
I'd like to add to that suggestion, let me dis/allow resources from thr automated import with a grep patterm e.g. aws.iam* would allow only iam policies into the import. Negations and such are logical extensions.
I'd like to add to that suggestion, let me dis/allow resources from thr automated import with a grep patterm e.g. aws.iam* would allow only iam policies into the import. Negations and such are logical extensions.
Thanks for the feedback cloudking, will add this to the feature request list.
Looks like cloudcraft to me from a few years ago but more general. Still looking for a multi-dimensional / multi-planar tool that can let me show the same functional components with different graph coloring and edges. A control / management diagram won’t look like a dataflow nor anything similar to how I want to do a network segmentation diagram for auditors and security engineers. Every time I write a new diagram for a different audience it feels like I’m repeating half my work. Heck, I’m not sure if anyone else has this frustration even
Hi devonkim,
Thanks for checking out Isoflow, I'd love to know more about how you use diagrams in your work. The intention is to take Isoflow in the direction you're describing (i.e. being able to show different processes on top of the same diagram), so would really love to get your thoughts on what you think are the most important aspects. Please reach out to me through the 'contact' tab on Isoflow if you're up for discussing further. Thanks again for the feedback.
Thanks for checking out Isoflow, I'd love to know more about how you use diagrams in your work. The intention is to take Isoflow in the direction you're describing (i.e. being able to show different processes on top of the same diagram), so would really love to get your thoughts on what you think are the most important aspects. Please reach out to me through the 'contact' tab on Isoflow if you're up for discussing further. Thanks again for the feedback.
If your goal is for this to be used for engineering rather than just visual presentation, my advice is to support defining the actual system structure as text, and then use the UI to design views of that structure.
Bonus points if it consumes the text via git.
Bonus points if it consumes the text via git.
Thanks for the advice, I'm currently updating the data structure and will keep this in mind
Check out http://pathway.io
It's does what you described and more.
It's does what you described and more.
[deleted]
https://arcentry.com/ was nice, but they shuttered the service.
https://shutdownlikeaboss.com/post/190564787340/wolfram-disc...
https://shutdownlikeaboss.com/post/190564787340/wolfram-disc...
Hey! If this is your app first of all congrats.
If you fancy a pivot - I’ve seen lots of similar apps for cloud architecture, but this engine would be perfect for logistics (warehousing in particular) which I think is underserved (and the industry I am in!). If this existed for a sensible price I would definitely be a customer!
If you fancy a pivot - I’ve seen lots of similar apps for cloud architecture, but this engine would be perfect for logistics (warehousing in particular) which I think is underserved (and the industry I am in!). If this existed for a sensible price I would definitely be a customer!
I'd love to learn more about your thoughts on this. I've built Arcentry (https://arcentry.com/) and we've tried to pivot into Industrial Monitoring and Control (see https://vimeo.com/supralayer), but ultimately had to abandon the idea do to complexities in the data layer. Logistics might be a more suitable field though - would love to get your thoughts. You can reach me at [email protected]
Could you explain more or maybe link to some example of what you have in mind? With my UI hat on, it’s interesting to see how people represent complicated systems visually, or how they’d like to. Even if the specific application isn’t immediately relevant, it might be useful inspiration later.
Love the isometric views. I was actually looking to build a similar diagramming tool (but for a different usecase). Do you mind sharing which libraries/tools you've used here?
If you're looking to productize this in future, best of luck in advance.
If you're looking to productize this in future, best of luck in advance.
Thanks Jeswin.
I'm using Mithril for the UI and Paperjs for the actual diagram editor.
I'm using Mithril for the UI and Paperjs for the actual diagram editor.
This looks very pretty. I guess there’s no option to self-host or run locally? My company wouldn’t allow internal diagrams on a 3rd party cloud service, unfortunately. Especially infra / networking, given the security implications...
Aside: Is it just me or these days a lot of web designs have magenta/purple themes?
Very pleasant to the eye! Reminds me of http://www.zachtronics.com/exapunks/
Very nice environment. Please add more nodes, probably generic ones too. In addition, I want to be able to add labels to connectors too. Keep up the good work!
I like this a ton. It's much nicer to use then Gliffy or Lucidchart. It does need more options though Boxes and more choices of arrows especially.
It remembered me the BeOS icons! Nice job, btw.
Beautiful aesthetic! Just a note, the front page has my pet peeve typo "it's" on it.
Needs ability to import Azure and AWS icons. Also import popular framework logos and icons.
I still use PowerPoint to do these! Will try this next time I am building one.
I liked the idea and the looks of this. The user experience can be better.
Too limited IMO to be useful.
sheetengine - Isometric HTML5 JavaScript Display Engine - CodePlex Archive https://archive.codeplex.com/?p=sheetengine
Isomer – an isometric graphics library for HTML5 canvas https://jdan.github.io/isomer/
Traviso - Isometric Javascript Engine http://www.travisojs.com/