Show HN: Cloudcraft – Create AWS diagrams | Hacker News Reader

Show HN: Cloudcraft – Create AWS diagrams

cloudcraft.co

281 pointsRezo72 comments

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.

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.

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.

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

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.

"`diff` for your AWS infrastructure" might work.

Or if we want to be picky: Cloudcraft allow you to dump your own understanding into a diagram, which may or may not be correct.

I was hoping from the article wording of a tool using some form of read only grant to amazon to draw the diagram for you, but this is just seems one step above dia.

I am working on import from AWS via a read-only role into Cloudcraft right now :)

I'll be back!

　　　　　　 /^|

　　　　　 ./　!°

　　　　　/　 /_＿,,..

　　　　/　　`(_t＿,__〕

　　　 /　　　 '(_t＿,__〕

　　　/　　　　｛_i＿,__〕

　／　　　ノ　 {_i＿_)

／　　　　　　＿,..-'"

　　　　　　／

～～～～～～～～～～～

just signed up - please notify me when this feature is out!!!

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.

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.

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!

What did you use for making them? I've been curious about those great looking diagrams for years.

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

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!

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

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!

Thanks, I added Terraform import & export to 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.

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.

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

It's on the roadmap :) https://trello.com/b/mv14mX1U/cloudcraft-roadmap

CloudFormation import would be great as well!

Agreed, this would be my most used feature.

With a read-only IAM role installed in your account it could provide import of current resources and a live view of your environment.

Export would be even better, but then I suppose it becomes a completely different tool.

Great! cloudcraft looks way better than CF Designer..

https://aws.amazon.com/cloudformation/details/#designer

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.

Static resources go right in the garbage!

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

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.

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/

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

Something interesting to do from now on: Search in Google `site: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-6856e8801...

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.

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"

An open library will be something really cool to have! Give it a though, I'm eager to see what others diagrams

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

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.

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

This is excellent! Well done.

Would be awesome if it supported non-AWS (more generic) resources as well.

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

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.

Check out https://aws.amazon.com/blogs/aws/new-aws-price-list-api/

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

Yup, that JSON is the response from the endpoint I'm referring to. Congrats on shipping!

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

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.

you could add basic alert/load/utilization analytics and offer it as it management (or just big tv in room) overview dashboard.

This would be a fantastic feature, and should be pretty doable considering how much Cloudwatch exposes in the way of metrics.

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.

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

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?

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.

There are lots of tools that already do 2D diagrams with AWS icons.

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

This solves a real problem, beautifully.

Minor complaint. I couldn't find how to restart the tutorial.

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

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

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

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.

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

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) and React.js

Please consider open sourcing that grid. It's very cool by itself and could be used for a lot of other things.

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

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

Just wondering what the motivation was for making this free?

Wondering if there are any plans to support Google Cloud?

Great tool! How do you extend the grid?

Resizing the grid is one of the top next things (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.

Wow. Really awesome! Great work.

dope.

Reply on news.ycombinator.com