Introducing A New Cross-Cutting Architecture Diagram: The Critical Path | by Allen Helton | May, 2022

This new structure diagram spans ranges 1–3 of the C4 mannequin to provide the quickest view at your system doable

Photograph by charlesdeluvio on Unsplash

Structure diagrams are a surprise. They assist create a shared understanding about utility structure, enterprise processes, and information flows between you and the stakeholders of your app.

Round a yr in the past, I wrote a publish in regards to the 5 types of architecture diagrams which described most of the diagrams we use at present. It walks you thru how and why you must create diagrams just like the circulate, service, persona, infrastructure, and developer diagrams.

They loosely adapt to the c4 model for diagramming software program structure. There are nuanced variations and each assist drive essential details about your app in numerous methods.

The opposite day, I used to be prepping for a tabletop exercise for an utility on the point of go reside and I used to be studying by means of my checklist of structure diagrams. However one thing was lacking.

I wanted a diagram that reveals crucial paths by means of the system so I may put together a sensible catastrophe situation. One thing that generalized the structure, however was additionally particular sufficient to provide me sufficient element to know the place the break factors are in my utility.

Not one of the diagrams I spoke about in my different article cowl that situation. I wanted a brand new sort.

I wanted the crucial path diagram.

The crucial path diagram is supposed to be a map of your whole ecosystem. It traces the information circulate of the key enterprise processes from system to system. All jumps, fan outs, webhooks, and so forth are documented so you may simply determine factors of failure.

Vital path diagram instance

With this diagram, you may observe the information by means of all the system. It traces how the information is transferred internally in your utility and it follows all of the jumps between techniques. If a main enterprise course of ends in 3 or 4 purposes being up to date, that is the right diagram as an instance it.


Any such diagram has a bit of little bit of one thing for everybody. It has element from the highest to the underside, making it invaluable for folks from assist, your product staff, and builders.


You don’t must put all of the element for each API within the crucial path diagram. You need to generalize and group comparable endpoints collectively. You probably have a set of endpoints that every one technically observe the identical circulate ( for instance, API Gateway to Lambda to DynamoDB to DynamoDB streams), you may embody that sample one time.

When speaking about information flows, I imply the trail by means of your system a enterprise course of follows. If we take an instance from Gopher Holes Unlimited, we are able to see what occurs when a brand new gopher is added to the system.

Knowledge circulate for including a brand new gopher


  • Initiator — The place the enterprise course of or information circulate begins. Represented within the diagram as a star
  • Software — A definite stand-alone utility that performs an element within the ecosystem
    Identified Apps — An utility that you simply personal or know the way it’s structured internally. Represented within the diagram as a outlined white field
    third Social gathering Apps — Purposes you don’t personal nor know the way they work. Represented within the diagram as a black field
  • Knowledge Stream — A sequence of linked traces that present the development of information by means of your system. Represented by dashed traces for async calls and stable traces for synchronous calls. When exhibiting a number of information flows, it’s best to arrange them by colour.
  • Infrastructure — For identified apps, this reveals generalized particulars about how the applying is constructed and what companies manipulate the information because it flows by means of the system. Represented by photos of the companies concerned.
  • UI Interplay — Actions like filling out types or performing searches that often begin a knowledge circulate. Represented by a rectangle with a label

In our instance above, the initiator of the information circulate begins on the “Add New Gopher UI interplay. For this enterprise course of, the interplay is a wizard within the UI that walks a consumer by means of including all the mandatory information components for a gopher. After we hint the arrows, we begin on the star.

The circulate makes use of the search mechanism to search for present gophers. That search endpoint makes use of AppSync to seek out gophers from DynamoDB, a helper Lambda perform, and by calling an API within the Nationwide Rodent Registry.

As soon as information is submitted, it goes by means of the first information ingest circulate, which works API Gateway to DynamoDB to DynamoDB streams to Step Capabilities (that sample is described in this post).

As soon as accomplished, an SNS subject publishes a message which is picked up by Zapier to move the information alongside to the third celebration apps Varmint Hunters Collective and Small Animal Preservation Society. It additionally publishes to the Nationwide Rodent Registry, which takes in information through an ALB on high of an auto-scaling EC2 fleet.

As soon as the information reaches the integrators through SNS, our information circulate is completed. By tracing the arrows, we see that 4 techniques are up to date when a brand new gopher is added. Feels like an essential information circulate!

This enterprise course of is an ideal instance of why the crucial path diagram is essential. It makes positive you may see crucial information flows. Or probably the most fragile. Or the busiest. Constructing a crucial path diagram will present you every service information passes by means of, making it simpler to isolate downside areas earlier than they change into a difficulty.

Placing all your main information flows on the identical diagram will make it seem dense and complex. This may make it laborious to observe and seem overly complicated. It’d flip folks away from trying to determine what’s going on.

On the flip facet it additionally helps to indicate complicated, excessive site visitors, or big blast radius areas of your app. Displaying that information density is essential, however not at all times.

That mentioned, making your crucial path diagram interactive is vital to creating seem easier and simpler to observe.

I draw all of my diagrams in a free utility known as (previously When constructing crucial path diagrams, I put every information circulate in its personal layer. I then add buttons in the important thing that toggle the visibility of the layer, making it simple to indicate/cover whole flows.

Vital path diagram key

These buttons reside within the key so they’re consolidated in a single place. Shoppers of the diagram can click on a button to cover all the information circulate traces or click on it once more to carry it again. Diagrams.internet provides a complete step-by-step tutorial on the best way to create layers and make buttons that present and conceal them.

To see the interactive model of the Gopher Holes Limitless crucial path diagram, click here.

There are a number of use instances for the crucial path diagram.

  • System chart — Lists out all purposes concerned in your ecosystem and the way they’re coupled
  • Catastrophe Planning — Identifies potential bottlenecks and areas with a excessive blast radius if a catastrophe had been to happen
  • Structure Diagram Lite — Reveals the kinds of structure at play. Gopher Holes Limitless is a serverless utility, the Nationwide Rodent Registry is a containerized auto-scaling ec2 app, and so forth…

Every one in all these use instances is important to constructing a manufacturing readiness plan. With the crucial path diagram, all of the items are put in entrance of you and offered in a method that each generalizes and particulars how information will get from level A to level B.

You may’t full a puzzle with out all of the items.

Evaluating this to the C4 mannequin, one of these structure diagram accommodates components from the primary three ranges ( Context, Containers, and Parts). This offers an attention-grabbing, cross-cutting mixture of element at a look. However the crucial path diagram needs to be supplemented with different kinds of diagrams. It doesn’t stand by itself to attract the complete image.

You want that final degree of element. You want the nuance of extra detailed diagrams to indicate dependencies or specifics about how issues are linked. An infrastructure diagram offers drill-in element for those who want it whenever you’re strolling by means of catastrophe eventualities. Within the C4 mannequin, that is degree 4 ( Code).

The crucial path diagram is a good instrument to place in your again pocket. It’s an “mixture” diagram, which means it combines essential items from a number of different kinds of diagrams into one.

It’s used to get an enormous image of your whole ecosystem. By offering sufficient element to identify throttling and ache factors, however abstracting element out far sufficient to maintain you out of the weeds, it’s nice for sharing with everybody across the group. A crucial path diagram will be invaluable for builders, assist, tech assist, and your SRE staff.

This diagram doesn’t substitute others in your toolbox, however it needs to be used as an enhancement and a place to begin when constructing system diagrams.

For those who’re a options architect, a major a part of your job is building a shared understanding with the stakeholders of your utility. Constructing a crucial path diagram or actually any sort of diagram will significantly improve your probabilities of constructing that understanding.

Attempt it out, let me know what you suppose, and share what you construct!

Completely satisfied coding!

More Posts