8 ms·

Isoflow – Infrastructure Diagrams

313 points by willemlabu 6y ago

arminiusreturns 6y ago
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.
- kortex 6y ago
  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.
  - kossae 6y ago
    Can’t you run draw.io locally, though?
    - buddhiajuke 6y ago
      On windows, yes. Linux, no.
      - vyrotek 6y ago
        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
      - colemannugent 6y ago
        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
      - xarope 6y ago
        That can't be right, I use draw.io on my mint laptop, from https://github.com/jgraph/drawio-desktop/releases https://github.com/jgraph/drawio-desktop/releases
  - wodenokoto 6y ago
    They changed name, but other than that, they never hooded your data (to my knowledge) I still use it
  - markmanx 6y ago
    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.
- wodenokoto 6y ago
  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 https://github.com/jgraph/drawio
  - AbraKdabra 6y ago
    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/ https://www.cloudcraft.co/ that can be run locally for not cloud-based infraestructures.
  - roamerz 6y ago
    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.
  - williesleg 6y ago
    really riking rhe rocker.
- markmanx 6y ago
  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?
  - arminiusreturns 6y ago
    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.
xixixao 6y ago
Super pretty! UX-wise it might be a bit too minimal, you could take some inspiration from https://excalidraw.com/ 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).
jeswin 6y ago
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.
- markmanx 6y ago
  Thanks Jeswin. I'm using Mithril for the UI and Paperjs for the actual diagram editor.
estebarb 6y ago
It remembered me the BeOS icons! Nice job, btw.
css 6y ago
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.
- zufallsheld 6y ago
  What's wrong with gliffy?
  - css 6y ago
    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.
    - theK 6y ago
      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!
- 6y ago
devonkim 6y ago
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
- devenson 6y ago
  Check out http://pathway.io http://pathway.io It's does what you described and more.
- markmanx 6y ago
  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.
  - dqpb 6y ago
    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.
    - markmanx 6y ago
      Thanks for the advice, I'm currently updating the data structure and will keep this in mind
sbr464 6y ago
https://arcentry.com/ https://arcentry.com/ was nice, but they shuttered the service. https://shutdownlikeaboss.com/post/190564787340/wolfram-discontinuing-arcentry https://shutdownlikeaboss.com/post/190564787340/wolfram-disc...
kostarelo 6y ago
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
- achn 6y ago
  As long as there’s an override...
- formerly_proven 6y ago
  > 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.
ManuelKiessling 6y ago
I like my diagrams to have semantic/structural meaning and text-based source code, which is why I love ilograph.com.
- theptip 6y ago
  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.
jrott 6y ago
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.
philprx 6y ago
If you liked this you will like these: sheetengine - Isometric HTML5 JavaScript Display Engine - CodePlex Archive https://archive.codeplex.com/?p=sheetengine https://archive.codeplex.com/?p=sheetengine Isomer – an isometric graphics library for HTML5 canvas https://jdan.github.io/isomer/ https://jdan.github.io/isomer/ Traviso - Isometric Javascript Engine http://www.travisojs.com/ http://www.travisojs.com/
ashnehete 6y ago
I liked the idea and the looks of this. The user experience can be better.
cloudking 6y ago
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
- dom_hutton 6y ago
  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.
- markmanx 6y ago
  Thanks for the feedback cloudking, will add this to the feature request list.
neilpanchal 6y ago
Aside: Is it just me or these days a lot of web designs have magenta/purple themes?
bredren 6y ago
I still use PowerPoint to do these! Will try this next time I am building one.
lajr 6y ago
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).
Closi 6y ago
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!
- Chris_Newton 6y ago
  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.
- wolframhempel 6y ago
  I'd love to learn more about your thoughts on this. I've built Arcentry (https://arcentry.com/ https://arcentry.com/) and we've tried to pivot into Industrial Monitoring and Control (see https://vimeo.com/supralayer 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 wolfram@arcentry.com
2ion 6y ago
Too limited IMO to be useful.
leoncvlt 6y ago
Very pleasant to the eye! Reminds me of http://www.zachtronics.com/exapunks/ http://www.zachtronics.com/exapunks/
plusangel 6y ago
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!
deleted 6y ago
[deleted]
ramchip 6y ago
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...
gfaure 6y ago
Beautiful aesthetic! Just a note, the front page has my pet peeve typo "it's" on it.
guiltygods 6y ago
Needs ability to import Azure and AWS icons. Also import popular framework logos and icons.

313 points by willemlabu 6y ago

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.

kortex 6y ago
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.
- kossae 6y ago
  Can’t you run draw.io locally, though?
  - buddhiajuke 6y ago
    On windows, yes. Linux, no.
    - vyrotek 6y ago
      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
    - colemannugent 6y ago
      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
    - xarope 6y ago
      That can't be right, I use draw.io on my mint laptop, from https://github.com/jgraph/drawio-desktop/releases https://github.com/jgraph/drawio-desktop/releases
- wodenokoto 6y ago
  They changed name, but other than that, they never hooded your data (to my knowledge) I still use it
- markmanx 6y ago
  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.
wodenokoto 6y ago
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 https://github.com/jgraph/drawio
- AbraKdabra 6y ago
  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/ https://www.cloudcraft.co/ that can be run locally for not cloud-based infraestructures.
- roamerz 6y ago
  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.
- williesleg 6y ago
  really riking rhe rocker.
markmanx 6y ago
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?
- arminiusreturns 6y ago
  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.

xixixao 6y ago

Super pretty! UX-wise it might be a bit too minimal, you could take some inspiration from https://excalidraw.com/ 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).

jeswin 6y ago

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.

markmanx 6y ago
Thanks Jeswin. I'm using Mithril for the UI and Paperjs for the actual diagram editor.

estebarb 6y ago

It remembered me the BeOS icons! Nice job, btw.

css 6y ago

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.

zufallsheld 6y ago
What's wrong with gliffy?
- css 6y ago
  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.
  - theK 6y ago
    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!
6y ago

devonkim 6y ago

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

devenson 6y ago
Check out http://pathway.io http://pathway.io It's does what you described and more.
markmanx 6y ago
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.
- dqpb 6y ago
  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.
  - markmanx 6y ago
    Thanks for the advice, I'm currently updating the data structure and will keep this in mind

sbr464 6y ago

https://arcentry.com/ https://arcentry.com/ was nice, but they shuttered the service. https://shutdownlikeaboss.com/post/190564787340/wolfram-discontinuing-arcentry https://shutdownlikeaboss.com/post/190564787340/wolfram-disc...

kostarelo 6y ago

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

achn 6y ago
As long as there’s an override...
formerly_proven 6y ago
> 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.

ManuelKiessling 6y ago

I like my diagrams to have semantic/structural meaning and text-based source code, which is why I love ilograph.com.

theptip 6y ago
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.

jrott 6y ago

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.

philprx 6y ago

If you liked this you will like these: sheetengine - Isometric HTML5 JavaScript Display Engine - CodePlex Archive https://archive.codeplex.com/?p=sheetengine https://archive.codeplex.com/?p=sheetengine Isomer – an isometric graphics library for HTML5 canvas https://jdan.github.io/isomer/ https://jdan.github.io/isomer/ Traviso - Isometric Javascript Engine http://www.travisojs.com/ http://www.travisojs.com/

ashnehete 6y ago

I liked the idea and the looks of this. The user experience can be better.

cloudking 6y ago

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

dom_hutton 6y ago
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.
markmanx 6y ago
Thanks for the feedback cloudking, will add this to the feature request list.

neilpanchal 6y ago

Aside: Is it just me or these days a lot of web designs have magenta/purple themes?

bredren 6y ago

I still use PowerPoint to do these! Will try this next time I am building one.

lajr 6y ago

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).

Closi 6y ago

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!

Chris_Newton 6y ago
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.
wolframhempel 6y ago
I'd love to learn more about your thoughts on this. I've built Arcentry (https://arcentry.com/ https://arcentry.com/) and we've tried to pivot into Industrial Monitoring and Control (see https://vimeo.com/supralayer 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 wolfram@arcentry.com

2ion 6y ago

Too limited IMO to be useful.

leoncvlt 6y ago

Very pleasant to the eye! Reminds me of http://www.zachtronics.com/exapunks/ http://www.zachtronics.com/exapunks/

plusangel 6y ago

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!

deleted 6y ago

[deleted]

ramchip 6y ago

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...

gfaure 6y ago

Beautiful aesthetic! Just a note, the front page has my pet peeve typo "it's" on it.

guiltygods 6y ago

Needs ability to import Azure and AWS icons. Also import popular framework logos and icons.