On

what is an architecture diagram

before we talk about what an architecture diagram is, let’s first talk about what an architecture is.

Software architecture refers to the top-level design (Rank) of the software system, which defines which roles the system is composed of, the relationship between the roles (Relation) and the rules of operation (Rule), as shown in the following figure.

back to our question, what is the architecture diagram, literally speaking, the architecture diagram = architecture + diagram, it is an expression of your current architecture, of course, the field of architecture design is a lot, such as business architecture, system architecture, technical architecture, model architecture and so on…

for different types of architecture, of course, you need to use different architecture diagrams to represent it, we all know that the mapping of the real world to the software world is a continuous abstraction process, the method of which is to constantly establish a model, so the process of architecture is actually the process of modeling, and the architecture diagram shows the way you model.

why draw architecture diagrams

since the process of architecture is the process of modeling, why do we have to spend time and effort to draw architecture diagrams? isn’t it enough to use code or text directly? i think this question can be answered from 2 points:

  • from a technical point of view: compared with other manifestations, the architecture diagram can more easily indicate the structure of the current system, reduce the cognitive barrier between colleagues or customers, and achieve unified cognition.
  • FROM THE PERSPECTIVE OF READING: THE EXPRESSIVENESS OF THE FIGURE IS MUCH HIGHER THAN THE EXPRESSIVENESS OF THE TEXT, WHICH IS WHY PEOPLE OFTEN SAY “A PICTURE IS BETTER THAN A THOUSAND WORDS, NO FIGURE NO BB”.

schema diagram classification

ACCORDING TO THE DIFFERENT RESPONSIBILITIES OF OUR WORK, THE ARCHITECTURE DIAGRAM WE NEED TO REFLECT WILL ALSO BE DIFFERENT, SUCH AS YOU ARE A PD, YOU CONSIDER MORE PRODUCT ARCHITECTURE, SUCH AS YOU ARE A FRONT-END, YOU CONSIDER MORE OF THE FRONT-END TECHNICAL SYSTEM AND MODULE ARCHITECTURE, THEN HERE IS A SUMMARY OF OUR COMMON DIFFERENT ARCHITECTURE CLASSIFICATIONS, MAINLY THE FOLLOWING.

now that we know the classification of architectures, how do we start drawing an architecture diagram? here are a few paths that you can refer to:

  • figure out the type of architecture diagram you want to draw
  • abstract key elements from the architecture diagram
  • comb through the relationships between the various elements: containment relationships, reference relationships, sibling relationships, and so on
  • it is connected and clearly identified based on the above information.

LET’S TAKE A LOOK AT DESCRIPTIONS OF A FEW COMMON ARCHITECTURES AND THEIR SCHEMATICS, AND COMPARE THEM WITH OUR 4RS ABOVE.

business architecture

Corresponds to rank in our 4R, which is the top-level structure.

business architecture refers to the use of a set of methodologies/logic to demarcate the boundaries of the business involved in the product (project), the core point is to identify the business boundaries through different color modules, and group them, without considering specific technical points.

usage scenarios:

  • product personnel plan business
  • REPORT BUSINESS TO HIGH P
  • training the business system for new employees

for example, the business architecture diagram of an e-commerce system is as follows.

application architecture

Corresponds to the Role in our 4R, which is the constituent role.

application architecture is the overall architecture of the entire system implementation, it is necessary to point out the hierarchy of the system, the principles of system development, the application services at each level of the system, identify the role through different colors, and layer the design from top to bottom.

usage scenarios:

  • overall reference schema planning design
  • architecture training

for example, the following figure divides the system into data layer, service layer, communication layer, and presentation layer, and subdivides the application services at each level.

technical architecture

Corresponds to the Relation in our 4R, which is the role relationship.

the application architecture itself is only concerned with which application systems are needed and which platforms are needed to meet the needs of the business objectives, not what technologies you need to use throughout the build process.

the technical architecture is to respond to the technical requirements of the application architecture, and according to the identified technical needs, the technology selection is carried out, and the relationship between each key technology and technology is clearly described. the problems solved by the technical architecture include: layering at the pure technical level, the choice of development framework, the choice of development language, and the choice of technology involving non-functional requirements.

for example, the following technical architecture diagram of the front-end team of meituan-dianping wine tour.

sequence diagram

Corresponds to the Rule in our 4R, which is the operating rule.

A SEQUENCE DIAGRAM, ALSO KNOWN AS A TIMING DIAGRAM, IS A TYPE OF UML INTERACTION DIAGRAM. IT SHOWS DYNAMIC COLLABORATION BETWEEN MULTIPLE OBJECTS BY DESCRIBING THE CHRONOLOGICAL ORDER IN WHICH MESSAGES ARE SENT BETWEEN OBJECTS IN A SPECIFIC SCENARIO.

for example, the following sequence diagram of the user login process.

C4 MODEL

Here is another recommendation of a popular C4 architecture model, its official website is: https://c4model.com/

THE C4 ARCHITECTURE MODEL CONSISTS OF A SERIES OF LAYERED SOFTWARE ARCHITECTURE DIAGRAMS THAT DESCRIBE CONTEXT, CONTAINERS, COMPONENTS, AND CODE. THE HIERARCHY OF THE C4 DIAGRAM PROVIDES DIFFERENT LEVELS OF ABSTRACTION, EACH RELATED TO A DIFFERENT AUDIENCE.

C4 stands for Context, Container, Component, and Code, and is a series of hierarchical charts that can be used to describe different levels of software architecture, each suitable for a different audience. Think of it as a Google Map of code.

summary

WELL, FINALLY, LET’S SUMMARIZE IT, THIS ARTICLE MAINLY EXPLAINS WHAT IS SOFTWARE ARCHITECTURE DESIGN, BASED ON THE 4RS OF SOFTWARE ARCHITECTURE, WE CAN MAP TO BUSINESS ARCHITECTURE, APPLICATION ARCHITECTURE, TECHNICAL ARCHITECTURE AND TIME SERIES PROCESS, AND ALSO RECOMMEND THE MORE POPULAR C4 ARCHITECTURE MODEL IN RECENT YEARS.

at the end of the article, i recommend the following drawing tools that i use:

  • architecture diagram: draw.io local version, there are a lot of preset standards inside, very powerful.
  • processOn: A web version of the tool, it is also very powerful, and if you have synchronization needs, you can use it.
  • UML Diagram: https://plantuml.com/zh/, there are many examples, and VScode/webstorm have corresponding plugins that can be easily written in the editor

FINALLY, A GOOD ARCHITECTURE DIAGRAM CAN NOT ONLY GRAPHICALLY DESCRIBE THE ABSTRACT DESIGN OF THE BUSINESS FIELD, BUT ALSO HAVE A BEAUTIFUL DISPLAY, WHICH SHOULD HELP THE READER BETTER UNDERSTAND THE HIERARCHY OF THE CURRENT SYSTEM, AND ALSO HELP DEVELOPERS TO BETTER DESIGN AND IMPROVE THE SYSTEM.

in addition, in the usual work, we draw the most a kind of diagram, that is, the flow chart, such as the following

what does the circle mean? what does a diamond mean? limited by space, let’s talk about the flowchart in detail next time, to talk about the relationship and meaning of the various graphics in detail, so that you can easily understand the flowchart of others.

well, today’s content is here, if you think the article is helpful to you, welcome to like and forward, i am hockor, we will see you next time.

resources: