Architecture of www.Joymononline.in - Context diagram

It is very important as Application Architect to make sure the architecture diagrams are in sync with what is there in the code. Often the code and architecture will be going in 2 different directions. If we try to map a box in architecture diagram in to code, sometimes we will not able to locate, it might be spread across many components or one component may be doing duties of one or more boxes. This is because architects and developers talk 2 different languages. Architects follows their own diagram conventions and tools where developers have only one tool Visual Studio or Eclipse to code. One famous solution is to generate the code from the architecture modeling tools. But in the age of agile, people are getting away from this mechanism.

One of the solution to this is to adopt a diagraming strategy which make sure both the sides are in sync. Simon Brown has put forward one mechanism in his book "Software Architecture for Developers" to solve this issue. We can summarize it as "C4 Architecture Model" where the entire system is documented as 4 different diagrams which we arranged in a fashion that we can zoom in / out to get more details or holistic view. There are many videos about the modeling. Its easy as preparing 4 diagrams, context diagram, container diagram, component diagrams and class diagrams respectively

Below is an attempt to document my personal site using the C4 architecture model. At least diagrams

Joymononline.in - Context Diagram

Context diagram usually is a high level diagram to get a bird eye view about the system. It can be shared to business people and they can easily understand.

This is my personal portfolio site. This is not just another collection of HTML files. There are some integration points with other systems as well. Lets see how the context diagram looks.

Users

There is only one set of users hitting into the site as it don't have authentication or authorization. All public users. The content is edited via ASPX files or by modifying in other systems

External Systems

This represents what at the external applications JoymonOnline.in is connected to. At this point there are 4 external systems for different purposes.

• Blogger - used to pull the recent blog posts via RSS feed
• StackOverflow - Used to show the badge in Resume page. Just an img src pointing to SO url.
• Github - for storing content in git pages. This helps to update the content without redeploying the site. Earlier it was Evernote. Then moved to http page as there are limitation on the API usage.
• LinkedIn- Used for showing badge. This is just an img src to LinkedIn

This gives a context about the system ie here its JoymonOnline.in site. In the C4 architecture model the next level is container diagram. That is nothing but a zoom-in of JoymonOnline.in web site.