7 ms·

Show HN: Cloudcraft – Create AWS diagrams

281 points by Rezo 11y ago

mej10 11y ago
Looks cool! I am going to draw out some diagrams using this next week.
cddotdotslash 11y ago
This kind of tool was sorely needed. I've used countless online diagraming tools with support for AWS icons and every one takes an unnecessarily long amount of time to get working. I ultimately settled on making my own diagrams in PowerPoint using the AWS PPT template. This tool is much easier to use and makes things look great without much effort.
- Rezo 11y ago
  Thanks! I think by focusing solely on AWS instead of trying to create a generic diagram drawing tool it's possible to create a much better experience.
  - deleted 11y ago
    [deleted]
  - miles932 11y ago
    As one of the original guys making those iso diagrams, we asked internal AWS folks to build a tool like this for years. Nice work!
    - robbles 11y ago
      What did you use for making them? I've been curious about those great looking diagrams for years.
joeyspn 11y ago
Am I the only one who thinks that adding a CloudFormation export (json) to this tool would be awesome?
- Rezo 11y ago
  It's on the roadmap :) https://trello.com/b/mv14mX1U/cloudcraft-roadmap https://trello.com/b/mv14mX1U/cloudcraft-roadmap
  - discordianfish 11y ago
    CloudFormation import would be great as well!
    - dblooman 11y ago
      Agreed, this would be my most used feature.
    - Rezo 11y ago
      With a read-only IAM role installed in your account it could provide import of current resources and a live view of your environment.
    - joesmo 11y ago
      Export would be even better, but then I suppose it becomes a completely different tool.
  - joeyspn 11y ago
    Great! cloudcraft looks way better than CF Designer.. https://aws.amazon.com/cloudformation/details/#designer https://aws.amazon.com/cloudformation/details/#designer
Rezo 11y ago
A word of warning, the UI doesn't work too well on mobile devices yet, it's sized for desktops. I hope to fix this in the near future. Here's an actual screenshot kindly posted by Jeff Barr of what the UI looks like https://twitter.com/jeffbarr/status/674357220847443968 https://twitter.com/jeffbarr/status/674357220847443968
- jon-wood 11y ago
  Please don't dump time into making it mobile friendly. Nobody with any sense is trying to diagram their infrastructure from a mobile phone, so you may as well focus on higher value features. Preferably ones you can charge for so I'm not mourning the loss of this great tool in six month's time!
  - Rezo 11y ago
    I hear you, but I at least want to make it work on tablet sizes for some quick editing or presentation, and for viewing the results on phones (probably no editing).
lbotos 11y ago
Some feedback: "In the delta of your current understanding and the reality of the cloud, lies cost savings and insight." This sentence was a little confusing. Maybe: Cloudcraft make it easy and clear where your could is and where it could go. Something a little simpler and more direct.
- Rezo 11y ago
  Thank you, as a non-native English speaker this is extremely valuable feedback. I'll rework the text. One idea is that could literally run a infrastructure diff of your architecture and your live environment, for example after a deployment or between two points in time: You may have resources left over by accident, or not captured in the design.
  - WillAbides 11y ago
    I like the delta sentence. It is artful. The only reason the intent is unclear is a lack of context. I didn't see anything else on the page that references difs or deltas. I am looking forward to trying cloudcraft on Monday when I have to document a cluster of ec2 instances.
    - jewbacca 11y ago
      I agree, I love the original construction. It's extremely compelling, big-league copy. How about just tuning slightly simpler: "Somewhere in the difference between your current understanding and the reality of the cloud, lies cost savings and insight."
  - biot 11y ago
    I must echo the other reply: the "delta" phrase communicates far more than the "simpler" rewording does, to the point where the simplified text reads as little more than meaningless marketing fluff. Perhaps it would be clearer to word it as "Between your current understanding ..." instead of "In the delta of your current understanding ..." But keep the rest the same; it's a beautiful sentence.
  - 11y ago
bitwarrior 11y ago
Static resources go right in the garbage!
- Rezo 11y ago
  It's supposed to be a S3 Bucket, but I can see how it looks like a trashcan ;)
redmaverick 11y ago
Why is it free? Are you planning to monetize it in the future?
- Rezo 11y ago
  I was thinking of offering features for larger teams like collaborative editing and sync with a live AWS environment as addons in the future if it proves popular. Drawing diagrams is and will remain free.
  - andreasklinger 11y ago
    you could add basic alert/load/utilization analytics and offer it as it management (or just big tv in room) overview dashboard.
    - jon-wood 11y ago
      This would be a fantastic feature, and should be pretty doable considering how much Cloudwatch exposes in the way of metrics.
lobsterloga 11y ago
what would be super cool if given AWS credentials, it'll auto draw the diagram for you? The tool is awesome, btw! Thank you VERY MUCH.
newman314 11y ago
This is very nice. It would be great to have vCloud Director support at some point.
sylvinus 11y ago
Great tool! How do you extend the grid?
- Rezo 11y ago
  Resizing the grid is one of the top next things (https://trello.com/b/mv14mX1U/cloudcraft-roadmap https://trello.com/b/mv14mX1U/cloudcraft-roadmap), but it also requires adding panning and zooming of the canvas itself so it's going to a take a little while.
awjr 11y ago
This is so damn sexy (and really useful)! Kudos
teddythetwig 11y ago
Amazon recently introduced a tool similar to this called cloudformations designer.
- narsil 11y ago
  The visuals aren't 3D. The OP's mirrors AWS' own architecture diagrams in their guides and case studies. It's unfortunate CloudFormations Designer doesn't create visuals like the ones AWS' own designers use.
chr15 11y ago
How are you getting accurate pricing for AWS components? I know Amazon's Simple Calculator uses an undocumented pricing endpoint, but that endpoint could change and become inaccurate.
- praetorian84 11y ago
  Check out https://aws.amazon.com/blogs/aws/new-aws-price-list-api/ https://aws.amazon.com/blogs/aws/new-aws-price-list-api/
- Rezo 11y ago
  Pages like https://aws.amazon.com/ec2/pricing https://aws.amazon.com/ec2/pricing use a JSONP request to get a big messy chunk of pricing data. I have parsed that, and serve it with a custom API that does the calculations from the Cloudcraft backend to the React-based frontend. However, AWS just announced a proper pricing API! Check out https://aws.amazon.com/blogs/aws/new-aws-price-list-api https://aws.amazon.com/blogs/aws/new-aws-price-list-api This will make life much easier, it does however not yet cover all services, for example ElastiCache is still missing while Cloudcraft already serves pricing for it.
  - chr15 11y ago
    Yup, that JSON is the response from the endpoint I'm referring to. Congrats on shipping!
omginternets 11y ago
I like the idea a lot, but I'm not a fan of the fancy 3d visualization. Is there a way to have a simpler (2D) representation?
- luckydata 11y ago
  the 3d representation comes straight from the official "corporate" style used by Amazon. I think it's only logic for him to use that style, plus that perspective has the benefit of fitting more information in less space comparatively to a flat 2d diagram.
- Gigablah 11y ago
  There are lots of tools that already do 2D diagrams with AWS icons.
mikejholly 11y ago
This is excellent! Well done. Would be awesome if it supported non-AWS (more generic) resources as well.
impostervt 11y ago
Is the grid/menu/etc all custom, or are you using some UI libraries?
- Rezo 11y ago
  The grid and everything on it is custom made on top of HTML5 Canvas, that's probably 80% of the code, many of the elements are isometrically projected at runtime. The menus and dialogs are done using Material-UI (http://www.material-ui.com http://www.material-ui.com) and React.js
  - impostervt 11y ago
    Please consider open sourcing that grid. It's very cool by itself and could be used for a lot of other things.
ceejayoz 11y ago
This is sorely needed and really well done thus far. I've always envied the beautiful AWS diagrams they feature in their case studies.
edjboston 11y ago
This is awesome. Wouldn't it be cool is this were wired up to an orchestration tool like Terraform to visualize TF states? Another level would be container infrastructure. Our new project is Docker/Kubernetes so the AWS infrastructure mostly just vanilla resources. It would be fantastic to have a similar tool for the internals of our micro SOA. Great job!
- Rezo 11y ago
  Thanks, I added Terraform import & export to https://trello.com/b/mv14mX1U/cloudcraft-roadmap https://trello.com/b/mv14mX1U/cloudcraft-roadmap What type of components would you need to map your service internals? BTW, I think it's key to stay clear of trying to become an orchestration/deployment tool in itself, but integrating with formats like CloudFormation and Terraform should be doable.
- drivers99 11y ago
  Terraform can generate graphs of your dependencies using the unix "dot" program. And then there is terraforming which can create terraform scripts from your existing infrastructure. So maybe if you can change terraform to output a file that cloudcraft can use. I'm not sure if has an import. I don't want to have to sign up just to play with it.
motles 11y ago
dope.
Svenstaro 11y ago
Clicking "pricing" doesn't seem to do anything for me.
- enraged_camel 11y ago
  It scrolls down to the Pricing section where it says: "Cloudcraft is entirely free to use! You can use it to create professional AWS visualizations and diagrams for any use, in both commercial and non-commercial projects. "What you create is yours. We support and encourage you to export to Wikis, documentation, formal RFPs, posters on your team wall..."
alexchamberlain 11y ago
Just wondering what the motivation was for making this free?
yranadive 11y ago
FWIW react components are alerting :) "Warning: Failed propType: Invalid prop `value` of type `string` supplied to `DropDownMenu`, expected `object`. Check the render method of `SelectField`." The app is beautiful. The most important you hit right on target is the perspective. Visually this perspective allows the best understanding.
- Rezo 11y ago
  Thanks, the warning is an upstream component bug (https://github.com/callemall/material-ui/issues/2267 https://github.com/callemall/material-ui/issues/2267) but it's fortunately harmless.
efm 11y ago
This solves a real problem, beautifully. Minor complaint. I couldn't find how to restart the tutorial.
- Rezo 11y ago
  Thank you. You can restart the tutorial from the "User" icon in the top-right corner.
jafingi 11y ago
Wow. Really awesome! Great work.
cypret 11y ago
Great job with this, I can't wait to play around with it more. The bane of my life is creating graphics but this is something I will actually use.
mariocesar 11y ago
Something interesting to do from now on: Search in Google `site:https://cloudcraft.co/view` https://cloudcraft.co/view` You will see the shared links from existing diagrams. Right now Google had just indexed one https://cloudcraft.co/view/d3908616-4d96-4d5c-8747-6856e88010aa?key=0yi62tykmzbmx6r0 https://cloudcraft.co/view/d3908616-4d96-4d5c-8747-6856e8801...
- Rezo 11y ago
  Sorry to spoil the fun, but I've disallowed /view/ from robots.txt to prevent accidental shares. I think this one must have been from someone sharing on Twitter or some other public place where Google would have picked it up.
  - swalberg 11y ago
    robots.txt only tells spiders not to request a certain path. The search engine can still infer the content of the page from the link or surrounding text, and show it. Google usually annotates these in the SERPs with something like "Google is not displaying the contents of the page because it's been blocked with robots.txt"
  - mariocesar 11y ago
    An open library will be something really cool to have! Give it a though, I'm eager to see what others diagrams
jsz0 11y ago
Looks good. I was able to put together a fairly complex diagram in about 15 minutes. Thats better than I can do with most traditional diagramming applications. In that way having limited options helps because there's less things to get distracted by. Anytime I try to make a diagram in Visio or Omnigraffle I spend (at least) 15 minutes just adjusting fonts, sizing, etc. It ends up being a very frustrating experience. So much so that I've mostly gone back to making paper diagrams.
obulpathi 11y ago
Wondering if there are any plans to support Google Cloud?
narsil 11y ago
Awesome! This is solving a real problem when it comes to visualizing infrastructure. I recently provided AWS with feedback at a focus group in SF on releasing a tool like this. So far, I've had to use Gliffy to create diagrams using Amazon's official Simple Icons. [0] Minor note: my screen is fairly narrow, and the Preview/Export buttons hide the action buttons for EC 2 nodes. I notice the element has a z-index of 1. It might be better to ensure the Preview/Export buttons are always hidden by any boxes appearing when the user clicks a component. [0] https://aws.amazon.com/architecture/icons/ https://aws.amazon.com/architecture/icons/
frik 11y ago
How have you created the beautiful 3D icons? The look better than from the AWS icon template site. :)
rurounijones 11y ago
You have a "sign in with google" option. Can we get others? (sign in with Github would be nice, that is the nexus of all my dev related stuff and use it in a bunch of other dev related services.)

281 points by Rezo 11y ago

mej10 11y ago

Looks cool! I am going to draw out some diagrams using this next week.

This kind of tool was sorely needed. I've used countless online diagraming tools with support for AWS icons and every one takes an unnecessarily long amount of time to get working. I ultimately settled on making my own diagrams in PowerPoint using the AWS PPT template. This tool is much easier to use and makes things look great without much effort.

Rezo 11y ago
Thanks! I think by focusing solely on AWS instead of trying to create a generic diagram drawing tool it's possible to create a much better experience.
- deleted 11y ago
  [deleted]
- miles932 11y ago
  As one of the original guys making those iso diagrams, we asked internal AWS folks to build a tool like this for years. Nice work!
  - robbles 11y ago
    What did you use for making them? I've been curious about those great looking diagrams for years.

joeyspn 11y ago

Am I the only one who thinks that adding a CloudFormation export (json) to this tool would be awesome?

Rezo 11y ago
It's on the roadmap :) https://trello.com/b/mv14mX1U/cloudcraft-roadmap https://trello.com/b/mv14mX1U/cloudcraft-roadmap
- discordianfish 11y ago
  CloudFormation import would be great as well!
  - dblooman 11y ago
    Agreed, this would be my most used feature.
  - Rezo 11y ago
    With a read-only IAM role installed in your account it could provide import of current resources and a live view of your environment.
  - joesmo 11y ago
    Export would be even better, but then I suppose it becomes a completely different tool.
- joeyspn 11y ago
  Great! cloudcraft looks way better than CF Designer.. https://aws.amazon.com/cloudformation/details/#designer https://aws.amazon.com/cloudformation/details/#designer

Rezo 11y ago

A word of warning, the UI doesn't work too well on mobile devices yet, it's sized for desktops. I hope to fix this in the near future. Here's an actual screenshot kindly posted by Jeff Barr of what the UI looks like https://twitter.com/jeffbarr/status/674357220847443968 https://twitter.com/jeffbarr/status/674357220847443968

jon-wood 11y ago
Please don't dump time into making it mobile friendly. Nobody with any sense is trying to diagram their infrastructure from a mobile phone, so you may as well focus on higher value features. Preferably ones you can charge for so I'm not mourning the loss of this great tool in six month's time!
- Rezo 11y ago
  I hear you, but I at least want to make it work on tablet sizes for some quick editing or presentation, and for viewing the results on phones (probably no editing).

lbotos 11y ago

Some feedback: "In the delta of your current understanding and the reality of the cloud, lies cost savings and insight." This sentence was a little confusing. Maybe: Cloudcraft make it easy and clear where your could is and where it could go. Something a little simpler and more direct.

Rezo 11y ago
Thank you, as a non-native English speaker this is extremely valuable feedback. I'll rework the text. One idea is that could literally run a infrastructure diff of your architecture and your live environment, for example after a deployment or between two points in time: You may have resources left over by accident, or not captured in the design.
- WillAbides 11y ago
  I like the delta sentence. It is artful. The only reason the intent is unclear is a lack of context. I didn't see anything else on the page that references difs or deltas. I am looking forward to trying cloudcraft on Monday when I have to document a cluster of ec2 instances.
  - jewbacca 11y ago
    I agree, I love the original construction. It's extremely compelling, big-league copy. How about just tuning slightly simpler: "Somewhere in the difference between your current understanding and the reality of the cloud, lies cost savings and insight."
- biot 11y ago
  I must echo the other reply: the "delta" phrase communicates far more than the "simpler" rewording does, to the point where the simplified text reads as little more than meaningless marketing fluff. Perhaps it would be clearer to word it as "Between your current understanding ..." instead of "In the delta of your current understanding ..." But keep the rest the same; it's a beautiful sentence.
- 11y ago

bitwarrior 11y ago

Static resources go right in the garbage!

Rezo 11y ago
It's supposed to be a S3 Bucket, but I can see how it looks like a trashcan ;)

redmaverick 11y ago

Why is it free? Are you planning to monetize it in the future?

Rezo 11y ago
I was thinking of offering features for larger teams like collaborative editing and sync with a live AWS environment as addons in the future if it proves popular. Drawing diagrams is and will remain free.
- andreasklinger 11y ago
  you could add basic alert/load/utilization analytics and offer it as it management (or just big tv in room) overview dashboard.
  - jon-wood 11y ago
    This would be a fantastic feature, and should be pretty doable considering how much Cloudwatch exposes in the way of metrics.

lobsterloga 11y ago

what would be super cool if given AWS credentials, it'll auto draw the diagram for you? The tool is awesome, btw! Thank you VERY MUCH.

newman314 11y ago

This is very nice. It would be great to have vCloud Director support at some point.

sylvinus 11y ago

Great tool! How do you extend the grid?

Rezo 11y ago
Resizing the grid is one of the top next things (https://trello.com/b/mv14mX1U/cloudcraft-roadmap https://trello.com/b/mv14mX1U/cloudcraft-roadmap), but it also requires adding panning and zooming of the canvas itself so it's going to a take a little while.

awjr 11y ago

This is so damn sexy (and really useful)! Kudos

teddythetwig 11y ago

Amazon recently introduced a tool similar to this called cloudformations designer.

narsil 11y ago
The visuals aren't 3D. The OP's mirrors AWS' own architecture diagrams in their guides and case studies. It's unfortunate CloudFormations Designer doesn't create visuals like the ones AWS' own designers use.

chr15 11y ago

How are you getting accurate pricing for AWS components? I know Amazon's Simple Calculator uses an undocumented pricing endpoint, but that endpoint could change and become inaccurate.

praetorian84 11y ago
Check out https://aws.amazon.com/blogs/aws/new-aws-price-list-api/ https://aws.amazon.com/blogs/aws/new-aws-price-list-api/
Rezo 11y ago
Pages like https://aws.amazon.com/ec2/pricing https://aws.amazon.com/ec2/pricing use a JSONP request to get a big messy chunk of pricing data. I have parsed that, and serve it with a custom API that does the calculations from the Cloudcraft backend to the React-based frontend. However, AWS just announced a proper pricing API! Check out https://aws.amazon.com/blogs/aws/new-aws-price-list-api https://aws.amazon.com/blogs/aws/new-aws-price-list-api This will make life much easier, it does however not yet cover all services, for example ElastiCache is still missing while Cloudcraft already serves pricing for it.
- chr15 11y ago
  Yup, that JSON is the response from the endpoint I'm referring to. Congrats on shipping!

omginternets 11y ago

I like the idea a lot, but I'm not a fan of the fancy 3d visualization. Is there a way to have a simpler (2D) representation?

luckydata 11y ago
the 3d representation comes straight from the official "corporate" style used by Amazon. I think it's only logic for him to use that style, plus that perspective has the benefit of fitting more information in less space comparatively to a flat 2d diagram.
Gigablah 11y ago
There are lots of tools that already do 2D diagrams with AWS icons.

mikejholly 11y ago

This is excellent! Well done. Would be awesome if it supported non-AWS (more generic) resources as well.

impostervt 11y ago

Is the grid/menu/etc all custom, or are you using some UI libraries?

Rezo 11y ago
The grid and everything on it is custom made on top of HTML5 Canvas, that's probably 80% of the code, many of the elements are isometrically projected at runtime. The menus and dialogs are done using Material-UI (http://www.material-ui.com http://www.material-ui.com) and React.js
- impostervt 11y ago
  Please consider open sourcing that grid. It's very cool by itself and could be used for a lot of other things.

ceejayoz 11y ago

This is sorely needed and really well done thus far. I've always envied the beautiful AWS diagrams they feature in their case studies.

edjboston 11y ago

This is awesome. Wouldn't it be cool is this were wired up to an orchestration tool like Terraform to visualize TF states? Another level would be container infrastructure. Our new project is Docker/Kubernetes so the AWS infrastructure mostly just vanilla resources. It would be fantastic to have a similar tool for the internals of our micro SOA. Great job!

Rezo 11y ago
Thanks, I added Terraform import & export to https://trello.com/b/mv14mX1U/cloudcraft-roadmap https://trello.com/b/mv14mX1U/cloudcraft-roadmap What type of components would you need to map your service internals? BTW, I think it's key to stay clear of trying to become an orchestration/deployment tool in itself, but integrating with formats like CloudFormation and Terraform should be doable.
drivers99 11y ago
Terraform can generate graphs of your dependencies using the unix "dot" program. And then there is terraforming which can create terraform scripts from your existing infrastructure. So maybe if you can change terraform to output a file that cloudcraft can use. I'm not sure if has an import. I don't want to have to sign up just to play with it.

motles 11y ago

dope.

Svenstaro 11y ago

Clicking "pricing" doesn't seem to do anything for me.

enraged_camel 11y ago
It scrolls down to the Pricing section where it says: "Cloudcraft is entirely free to use! You can use it to create professional AWS visualizations and diagrams for any use, in both commercial and non-commercial projects. "What you create is yours. We support and encourage you to export to Wikis, documentation, formal RFPs, posters on your team wall..."

alexchamberlain 11y ago

Just wondering what the motivation was for making this free?

yranadive 11y ago

FWIW react components are alerting :) "Warning: Failed propType: Invalid prop `value` of type `string` supplied to `DropDownMenu`, expected `object`. Check the render method of `SelectField`." The app is beautiful. The most important you hit right on target is the perspective. Visually this perspective allows the best understanding.

Rezo 11y ago
Thanks, the warning is an upstream component bug (https://github.com/callemall/material-ui/issues/2267 https://github.com/callemall/material-ui/issues/2267) but it's fortunately harmless.

efm 11y ago

This solves a real problem, beautifully. Minor complaint. I couldn't find how to restart the tutorial.

Rezo 11y ago
Thank you. You can restart the tutorial from the "User" icon in the top-right corner.

jafingi 11y ago

Wow. Really awesome! Great work.

cypret 11y ago

Great job with this, I can't wait to play around with it more. The bane of my life is creating graphics but this is something I will actually use.

mariocesar 11y ago

Something interesting to do from now on: Search in Google `site:https://cloudcraft.co/view` https://cloudcraft.co/view` You will see the shared links from existing diagrams. Right now Google had just indexed one https://cloudcraft.co/view/d3908616-4d96-4d5c-8747-6856e88010aa?key=0yi62tykmzbmx6r0 https://cloudcraft.co/view/d3908616-4d96-4d5c-8747-6856e8801...

Rezo 11y ago
Sorry to spoil the fun, but I've disallowed /view/ from robots.txt to prevent accidental shares. I think this one must have been from someone sharing on Twitter or some other public place where Google would have picked it up.
- swalberg 11y ago
  robots.txt only tells spiders not to request a certain path. The search engine can still infer the content of the page from the link or surrounding text, and show it. Google usually annotates these in the SERPs with something like "Google is not displaying the contents of the page because it's been blocked with robots.txt"
- mariocesar 11y ago
  An open library will be something really cool to have! Give it a though, I'm eager to see what others diagrams

jsz0 11y ago

Looks good. I was able to put together a fairly complex diagram in about 15 minutes. Thats better than I can do with most traditional diagramming applications. In that way having limited options helps because there's less things to get distracted by. Anytime I try to make a diagram in Visio or Omnigraffle I spend (at least) 15 minutes just adjusting fonts, sizing, etc. It ends up being a very frustrating experience. So much so that I've mostly gone back to making paper diagrams.

obulpathi 11y ago

Wondering if there are any plans to support Google Cloud?

narsil 11y ago

Awesome! This is solving a real problem when it comes to visualizing infrastructure. I recently provided AWS with feedback at a focus group in SF on releasing a tool like this. So far, I've had to use Gliffy to create diagrams using Amazon's official Simple Icons. [0] Minor note: my screen is fairly narrow, and the Preview/Export buttons hide the action buttons for EC 2 nodes. I notice the element has a z-index of 1. It might be better to ensure the Preview/Export buttons are always hidden by any boxes appearing when the user clicks a component. [0] https://aws.amazon.com/architecture/icons/ https://aws.amazon.com/architecture/icons/

frik 11y ago

How have you created the beautiful 3D icons? The look better than from the AWS icon template site. :)

rurounijones 11y ago

You have a "sign in with google" option. Can we get others? (sign in with Github would be nice, that is the nexus of all my dev related stuff and use it in a bunch of other dev related services.)