August 10, 2018

Show IH: Stackdraft - create and present 3D cloud architecture diagrams

Hi all,

This is my very first post on IH. I've been silently following this community for a while now and I am thankful for all the insights and experiences you have shared with others, such as myself.

My name is Michał Karnicki and I wanted to share what I've spent the last 6 months on, days and nights, and most of my savings. I'm equally excited and nervous to share it with you all :)!

https://www.stackdraft.io is a fully bootstrapped project.

The longer version of this story is actually available on the Pricing page, so I'll keep it short and sweet. Stackdraft allows you to create AND present 3D cloud architecture diagrams. You're not fixed to a single cloud provider or the isometric projection. It currently support AWS, GCP and DigitalOcean icon sets, but I have plans for more fancy 3D models as well, besides what is already available. Inspired by both the good sides and limitations of other diagramming solutions, I decided to try create my own. And that's how Stackdraft was born.

Stackdraft is in Beta, that's why there's an Early Adopters plan on the pricing page. I'm hoping to get some initial users seriously interested in the project as a tool for their work, close registration (so I'm not overwhelmed - haha I wish, eh ;)?), and use the feedback from them to polish the tool. If you're interested in cloud architectures, please help me shape the future of Stackdraft and consider subscribing - there's 14 day trial, 30 day money back guarantee, and it currently costs a BigMac set per month :).

There is a famous quote by Reid Hoffman, the founder of LinkedIn: If you are not embarrassed by the first version of your product, you've launched too late.

So here I am! More than happy to answer your questions :). Thank you for checking out Stackdraft!

Project page:

https://www.stackdraft.io

Twitter:

https://twitter.com/stackdraft_io

My own Twitter:

https://twitter.com/mkarnicki

  • if you check out my Twitter Media, it shows the story how I started from nothing and worked on the most basic things, up to the ready product. Enjoy!

PS I would connect my own product, but I don't have 3 updates yet - I literally just launched on Product Hunt :)

EDIT: There's a stackdraft presentation video at the bottom of the website, check it out :)

EDIT2: All right folks, the waters are steady, looks like I might get some sleep now :). If there's any more questions, I'll answer them tomorrow. Thanks!


  1. 2

    This is looking really good. I would seriously consider getting rid of the self deprecating aspects of the texts, though.

    Sure, you want to add a personal touch, but I would go for a different kind of emotion.

    Especially the text that the user is greeted with should be simple, captivating and ideally convey a benefit - not a feature.

    Something like "Stackdraft makes your most complex architecture diagrams presentable" could be parsed a lot more easily, for example.

    You mention that you have many plans for the future ... that was intriguing ... but then I found no details except for SVG export and thicker lines - nothing I would get excited about.

    Still, overall I am interested. I will follow the project ...

    1. 1

      This is worth a separate, another reply. I just noticed you became the first person to enroll for the trial. You are officially real user #1. Thank you!

      I have updated the landing page copy, I also changed the text on the pricing page with the following:

      My head is full of ideas for the project well beyond generic 2D/3D diagramming, which I'm confident will be of great value to cloud architects and devops teams in their work: custom 3D models for cloud resources, infrastructure cost calculation, visual diffing, live infrastructure scan, more presentation capabilities. The future is exciting!

      You're awesome! :)

    2. 1

      Hi Andreas!

      Thank you, I really can't express how happy I am to receive your feedback! You can tell it's my first launch haha.

      I can't agree more with captivating benefits, not features. I'll try to address this ASAP.

      I admit I was afraid to disclose the plans, but now I think that's ridiculous... I'll add it to the page:

      • fully 3D cloud resource models (you've probably seen fancy AWS isometric icons - problem is, they're flat! I've already started working on those models) [2018-09-04 edit: first AWS models are in! :)]

      • cost calculation

      • visual diffing (what's gone, what's new - like a change proposal)

      • live scan of your infrastructure (a few tools already have that)

      • more presentation features, including but not limited to, animations specific to given resources (an animated Kinesis stream is definitely more enticing, than a 3D brick)

      I'll add these on the pricing page, right under the Early Adopter plan.

      Once again, thank you so much! This is very first public feedback I received (other than a few folks who tested the tool internally).

      PS Hope you don't mind me stealing that tag line, love it!

  2. 1

    I am interested about the stack and how did you make it.

    1. 2

      Sure thing @primelabs !

      Laravel, Vue, Quasar Framework. The core drafter area is a mix of Vue, TailwindCSS and, most importantly, the amazing three.js library.

      Runs on Nginx, PostgreSQL, Redis, on DigitalOcean. Currently using small infra, but configured to easily scale up when required.

      User registration and user dashboard leverages Laravel Spark, but because it uses Bootstrap (4) and jQuery, I'll want to re-work it to run solely on Vue and TailwindCSS, which I can't recommend enough.

      Happy to answer any other questions you may have :)!

      1. 2

        More than happy. Thanks Michal. :D

        1. 1

          You're most welcome! The 3D part was certainly the most challenging (some algebra comes certainly useful when doing matrix transformations), but three.js really enabled this work :) Give it a try, it's fun!

          1. 1

            The first thing that came into my mind was that it must be using three.js. Was interested because even though I knew about three.js didn't know about its particular use cases. Your app fits perfectly with three.js and it is exciting to see three.js potential.

            Thanks again.

            1. 2

              Right on! And yet, this is a quite simple three.js use. For more fancy examples, check out https://threejs.org/examples , they're amazing :)