Show HN: Clouddraw – draw cloud architecture diagrams with ease

by shobankr • 6 years ago

76 47 6 years ago

shobankr10• 6 years ago

Clouddraw allows you to create beautiful cloud architecture diagrams with ease.

I downloaded and organized more than 1000 official images from AWS, Google Cloud, Azure, Firebase and others like Digitalocean, Slack etc and built this tool. I use this to generate quick architecture diagrams for my personal projects.

Here are some of the features

Offline support - Save your diagram offline in browser local storage to continue later.

PNG - Export your diagrams to png to embed anywhere.

Keyboard shortcuts

Font Awesome support

Embed anywhere - You can embed your diagram anywhere and show up-to-date diagrams in your documentation (coming soon).

There is no signup required. You can start creating your diagrams right away.

edoceo• 6 years ago

There is no signup required. You can start creating your diagrams right away.

Killer feature right here. Thanks!

shobankr10• 6 years ago

Thank you :)

momothereal• 6 years ago

Is there a good spot to suggest missing icons?

I know there's a Pro offering to upload custom icons, but I can think of a few crucial resources that are missing. Off the top of my head:

- Cloudflare

- Kubernetes (there's icons for a lot of its components, but the main logo is missing)

- Resources that can be run on bare-metal/on-prem: nginx, ElasticSearch, RabbitMQ, ...

Or is the intention to only show commercial cloud logos?

Edit: also a few bugs I noticed in the search bar:

- Can't Ctrl-A (select all)

- The (x) button doesn't do anything

shobankr10• 6 years ago

I will add a page to report bugs and suggestions soon. I am adding more and more logos. I will add your suggestions too.

Did not expect a sudden surge of visitors from HN :) . I am fixing the bugs one by one.

robertlagrant3• 6 years ago

You can maybe make some money by maintaining and selling a Confluence plugin for enterprises :)

shobankr10• 6 years ago

Hey! that's a great suggestion. Thank you.

mtmail• 6 years ago

You can add 'Show HN' to the title for more visibility on the https://news.ycombinator.com/show page

shobankr10• 6 years ago

Thank you. I have changed the title.

zxienin• 6 years ago

draw.io does a decent job. Does clouddraw bring edge in anything specific?

4ndrewl• 6 years ago

I also like draw.io - I found out recently that it's open source and has a 'desktop' (ie electron) version https://github.com/jgraph/drawio-desktop/releases/tag/v13.6....

robertlagrant3• 6 years ago

It's also fully embeddable - there's a version that runs inside VSCode!

joekrill• 6 years ago

I checked it out and created a diagram, then I clicked the icon in the upper left corner thinking it was some sort of menu. But it just took me to the main home page -- but without saving anything at all or even prompting me. So I basically lost all the work I did without warning. Is that supposed to happen?

Create as many diagrams as you want. Save your diagrams locally to pause and continue later.

I found the save button, but it seems to just take a single snapshot and reload that automatically if I leave and return. So it seems like you can only have one diagram going at a time? But even if I want to start a new diagram, I can't figure out how to do that without manually clicking each individual icon and deleting them, one-by-one.

Maybe I need to signup for this additional functionality to work?

shobankr10• 6 years ago

1. The diagram is saved in the localstorage only when the save button (or Ctrl + S) is pressed. I think I should add a warning message when navigated away without saving.

2. I am also adding a feature to export diagram and save in your computer and import later.

3. I just realized that there is no way to start a new diagram without deleting the existing icons :). I will add this feature too.

Thanks for the feedback and trying out the app.

The signup feature (coming soon) will enable you to save diagrams in the cloud and edit anywhere. Right now everything happens in your browser.

david927• 6 years ago

It seems you did a nice job, from what I can see. (It wasn't working for me on Firefox 80. I couldn't draw anything.)

A small suggestion for #1 above: Don't have a save. Make it save to localstorage on Mouse-up and on a timer.

Also, the combo box is a bit slow. Maybe have an alternative view for the icons, such as tree view with buckets for AWS, Azure, etc.?

webwanderings• 6 years ago

No love for OpenShift?

It's nice though.

shobankr10• 6 years ago

I will add OpenShift icons soon. Let me know if any other icons family is missing.

freedomben• 6 years ago

+1 for OpenShift icons. I do a lot of OpenShift and could really use a tool that makes the diagrams look great. I'll try it out and if it's good, I'll probably pay you money :-)

varikin• 6 years ago

What about B2 Object Storage?

randiantech• 6 years ago

I was playing around a bit and it really looks promising! There's some key missing features (like, selecting multiple items) and bugs (ctrl + v not working for me at least), but as an MVP is remarkable. Thanks for sharing.

shobankr10• 6 years ago

Thanks for the feedback. I will take a look at the bugs :)

simlevesque2• 6 years ago

The feature I want in all of these is images for every CloudFormation elements. I know that only a handful of them have their own icons and it makes it hard to draw the full extent of an architecture. Draw.io was a pain for this.

mdaniel2• 6 years ago

https://aws.amazon.com/architecture/icons/ may interest OP, as it offer all the sanctioned graphics in PNG and SVG

Regrettably, there does not appear to be an Atom nor RSS feed, so I guess one of the IFTTT style web page watchers is the only way to know that new icons are available :-(

simlevesque2• 6 years ago

it only contains a small portion of every item in a AWS network sadly.

etxm• 6 years ago

This looks like a cool project and I like to support developers that share their projects here and on Twitter.

Looks great, felt pretty snappy to use. Replace the demo on the home page with a good screen shot of a diagram. It’s a bunch of random interactions so it just looks like a mess of icons and arrows.

That said, software diagramming is broken.

Pretty icons are great and all, but without common annotations and consistency; what’s the point?

I’ve seen so many diagrams, with bidirectional arrows between an EC2 instance and an RDS instance.

ec2 <—-> rds

Great. The EC2 goes in and out of the RDS instance?

Using common annotations like making the arrow from the requestor and having some details of the request goes a long way.

ec2 —[r/w public]—> rds

Maybe even use the schema and roleARN to give some useful request auth context.

Using solid arrows for sync and dashed for async.

If both sides of an arrow make requests... don’t use two sided arrows, draw an arrow for each and annotate appropriately.

And LucidCharts, Visio, etc? Instant docrot.

I’d love to see more diagrams as code, along side the code they represent so diagram changes and code changes can happen in the same PR. PlantUML, mermaid, and mingrammers’s diagrams are great options here.

I really like Simon Brown’s C4 modeling [1]. It really helps teach you to diagram systems by focusing on what the system does, not how pretty the diagram is.

C4 Builder is also great. [2]

[1] https://c4model.com/

[2] https://github.com/adrianvlupu/C4-Builder

WrtCdEvrydy• 6 years ago

with bidirectional arrows between an EC2 instance and an RDS instance.

My problem is who made the diagram... a developer only sees EC2 connecting to RDS, a network guy sees a two-way data flow.

bradknowles• 6 years ago

A network guy will understand TCP connections and the fact that reply packets are sent back by the other end.

andrewfromx• 6 years ago

i found https://excalidraw.com/ from HN awhile go and love it. This looks similar.

jeswin2• 6 years ago

Very nice. Quick feedback on UI (on an Android phone): the hamburger menu didn't work, the text has some alignment issues, the padding for the I'm interested button is gone.

Best of luck.

shobankr10• 6 years ago

Thanks for reporting it. I will fix it as soon as possible.

yalogin• 6 years ago

I am sorry, I don't get the value add here. Can I not use power point, keynote or other applications and create a box and label it "slack" or "AWS"? Why should I use this?

jeswin2• 6 years ago

One feature idea: it could be used to generate a Kubernetes configuration files. A visual configuration and management tool. I have worked with multiple clients (as a consultant) who would have used K8S if setting it up/configuring on the cloud was easier.

I was exploring it myself, but don't have time to pursue it now.

jedberg• 6 years ago

Or the opposite -- draw a diagram from a k8s config file.

DoctorOW• 6 years ago

Is there a difference between this and https://www.cloudskew.com/ previously featured here?

agustif• 6 years ago

Hey thanks I was actually looking for this one

cj• 6 years ago

Anyone have recommendations for making networking diagrams, specifically AWS VPC diagrams that show things like private/public subnets, security groups, load balancers, autoscaling groups, etc.

I tried a bunch of tools a few months ago, and none of the purpose-built diagraming tools worked well in creating that sort of visualization.

ralphael• 6 years ago

http://draw.io

cagenut• 6 years ago

I've been using tools like this since visio and they're always helpful but never quite right. One of my dreams if I won a small lottery would be to make something like this but for VR. I think the spatial/3rd-dimesion factor would unlock a lot of possibility for visualizing these complex systems without being forced to collapse or slice it as much.

tedmiston2• 6 years ago

I like the idea. I have tried a bunch but haven't found "the one" cloud architecture diagram that I truly love yet.

I would be more into it if the diagram could be exported / represented as code so I could keep an updateable source in my git repo.

I also think things like VPCs should be able to be represented as containers of other components vs just another icon.

robertlagrant3• 6 years ago

I really like Miro.

AngeloR• 6 years ago

The only thing I've really found that works for me has been ilograph[1] that allows you to draw your diagram and then create different "views" into it depending on what the focus of the diagram is. Here's a wonderful demo of what it would look like converting some AWS architecture diagrams into ilograph ones[2].

I'm not affiliated with this project at all - I just really love it.

[1] https://www.ilograph.com/ [2] https://blog.ilograph.com/posts/fixing-aws-architecture-diag...

tedmiston2• 6 years ago

Oh that is very interesting. First time seeing a cloud architecture diagram tool with support for different views.

whymauri• 6 years ago

Any thoughts on this versus draw.io? Like new or missing features, etc?

fluffernutter• 6 years ago

Confirmed not working on Firefox.

It's 2020, just for the record.

shobankr10• 6 years ago

I tested it in Chrome and Edge and did not give much thought of FF in the final stages. Just realized not all icons are displayed. I will take a look at it soon.

mdaniel2• 6 years ago

As an FYI, your Terms and Conditions page mentions the non-existing domain clouddraw.live

gitgud• 6 years ago

A lot of negativity here, so here's some positive feedback:

The UI is very clean and easy to use. I like the minimalism and the restrained scope of the project. A lot of diagram creators try to do too much and end up being confusing and hard to pick up.

Looks like a great little tool!

Show HN: Clouddraw – draw cloud architecture diagrams with ease

Related Stories