What is a Technology System Map?

Oscar de la Hera Gomez
A flower that represents Digital Craft with the text "Technology Systems Map" beneath it.

An outline of the elements that are used across a system including how they connect together, what their use is and how they produce the desired outcome.

A technology systems map (TSM) lays out all the technological elements that are used by a system and describes what their purpose is, highlights if, how and where the elements connect as well as how they produce the desired result.

An example of a TSM is found below, which demonstrates how we use:

  • Fortrabbit to host our Headless Craft CMS.
  • Fortrabbit has a service that enables us to backup a database.
  • Craft CMS uses AWS to store and backup assets (i.e. images and videos).
  • Craft CMS connects to GatsbyJS through the GraphQL to produce a static website.
  • The GatsbyJS website uses Google Analytics as well as several other services, which are hosted on AWS.
  • The website is made available through Route53, S3 and Cloudfront (Content Delivery Network).
A diagram demonstrating the architecture behind the new delasign website that makes use of Craft CMS, Fortrabbit, GraphQL, GatsbyJS and a series of AWS services.

A technology system map of the 2021 delasign website


A Technology Systems Map (TSM) is a component of a Technology Design System and is destined to streamline communication by helping organizations understand how a system works across all points, what technologies are used and how they connect together.

Through the use of annotated lines, labels and notes on a TSM, organizations can visually describe security decisions, helping development teams identify what sits where (i.e. public or on a VPN/DMZ) and how resources are accessed.

When expanding on existing features after being separated from a project, these maps help organizations understand what already exists and what technologies are being used, enabling them to coherently add other modular components within the existing system.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.
delasign logo

Book a Free Consultation.

An icon of an email.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details