Visualizing SaaS/Cloud Architectures, Version 0.1

In a previous post, I wondered why nobody had come up with a "universal" way to visualise SaaS/Cloud architectures. In this blog post, I'll give it a very first try, using an example loosely based upon a project I'm working on.

Example application

For the purpose of this blog post, I'll assume my application is a simple blogging application, directly based off of the starter app. sports a NodeJS web application, using ExpressJS as a web server, MongoDB as (NoSQL) database, MongooseJS as Object-Document Mapper and AngularJS for the frontend. All in all a relatively simple, yet "modern" web stack. Since I'm only prototyping at the moment, I use Heroku for the deployment of my application, and use MongoHQ for hosting my database.

Visually, I would describe my architecture like this:

Although this simple drawing is, euhm simple, it allows me to explain to fellow devs how the application in broad terms works. I can easily explain the story of what happens when a user visits the front page, and how requests go back and forth between browser, server and database. So for a 0.1 iteration of visualizing and communicating a software architecture, this simple set of boxes and arrows works fine, doesn't it?

Different views

When you carefully read the previous paragraph, you'll notice I'm mixing different aspects: I'm describing the major building blocks of the application (i.e. single page web application as frontend, a web server and a database), their technological implementation (i.e. AngularJS, ExpressJS and MongoDB respectively) and their operational environments in production (i.e. a browser, Heroku and MongoHQ respectively). This next drawing reflects the operational aspects of the application. I added in green how my application runs in dev (hint, it runs on my machine), and in red, how it runs in production.

Wrapping up

Through this little exercise I learned that a universal visualisation toolkit for SaaS/Cloud architectures would at least contain the following:

  1. pictogramsfor the most commonly used building blocks in SaaS apps (think web server, application server, database, queueing server, cache server, browser, ...)
  2. a visual cue that indicates which technologiesare used for each of the above (think AngularJS, MongoDB, ...)
  3. a visual cue that indicates who is providingthese different components for different environments (think Heroku, MongoHQ, ...)
  4. arrows to indicate who's communicating with whom.

That's it for now. In a follow up post, I'll be exploring how to use these visualisations when brainstorming about improvements. In the mean time, I'm curious to hear from you how you communicate your SaaS/Cloud architectures.