
Show HN: Clouddraw – draw cloud architecture diagrams with ease - shobankr
https://clouddraw.app/
======
joekrill
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?

~~~
shobankr
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
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.?

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

~~~
momothereal
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

~~~
shobankr
Hi

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.

------
etxm
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/](https://c4model.com/)

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

~~~
WrtCdEvrydy
> 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
A network guy will understand TCP connections and the fact that reply packets
are sent back by the other end.

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

~~~
AngeloR
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/](https://www.ilograph.com/) [2]
[https://blog.ilograph.com/posts/fixing-aws-architecture-
diag...](https://blog.ilograph.com/posts/fixing-aws-architecture-diagrams-
vod/)

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

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

~~~
mdaniel
[https://aws.amazon.com/architecture/icons/](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 :-(

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

------
DoctorOW
Is there a difference between this and
[https://www.cloudskew.com/](https://www.cloudskew.com/) previously featured
here?

~~~
agustif
Hey thanks I was actually looking for this one

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

------
yalogin
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?

~~~
jeswin
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
Or the opposite -- draw a diagram from a k8s config file.

------
andrewfromx
i found [https://excalidraw.com/](https://excalidraw.com/) from HN awhile go
and love it. This looks similar.

------
cj
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
[http://draw.io](http://draw.io)

------
gitgud
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!

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

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

------
mtmail
You can add 'Show HN' to the title for more visibility on the
[https://news.ycombinator.com/show](https://news.ycombinator.com/show) page

~~~
shobankr
Thank you. I have changed the title.

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

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

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

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

~~~
4ndrewl
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....](https://github.com/jgraph/drawio-
desktop/releases/tag/v13.6.2)

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

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

------
webwanderings
No love for OpenShift?

It's nice though.

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

~~~
freedomben
+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 :-)

------
fluffernutter
Confirmed not working on Firefox.

It's 2020, just for the record.

~~~
shobankr
Hi

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.

