Author | Three Paintings Alibaba Technical Expert
Guide: The value of technology dissemination is not only reflected in the shortening of the path of our application construction through commercial products and open source projects, to accelerate the speed of the online business, but also in the improvement of work efficiency, product performance optimization and user experience improvement by excellent engineers. Experience sharing to improve our professional ability. The author of this article, Alibaba's three technical experts, shared his and his team's ideas and experience in drawing a good architectural diagram, which was first published on Alibaba's internal technology sharing platform. Zi Jing, Peng Sheng, and Yu Le also contributed to this article.
When we want to describe our system with one or several pictures, do we often encounter the following situations:
- Can't start with the canvas, delete it again?
- Use a picture to describe my system, and make products, operations, and development understandable?
- It is not clear who the audience is after drawing half of the picture?
- Is the drawn picture a product picture, a functional picture, a technical picture or a hodgepodge?
- There are a few frames on the picture, do you want to add some frames?
- I ’m not satisfied with the layout ...
If you have the same confusion, this article will introduce a method of drawing to make the architecture diagram clearer.
First sort out some basic concepts
1. What is architecture
Architecture is an abstract description of the entities in the system and the relationships between the entities. It is a series of decisions.
Architecture is structure and vision.
The system architecture is the embodiment of the concept, the allocation of the correspondence between the function of the object / information and the formal elements, and the definition of the relationship between the elements and the relationship between the elements and the surrounding environment.
Doing a good job is a complex task and a big topic, so I won't go into it in this article. With the architecture in place, stakeholders need to understand and follow relevant decisions.
2. What is an architecture diagram
The system architecture diagram is an overall view that abstractly represents the overall outline of the software system and the interrelationships and constraints between the various components, as well as the physical deployment of the software system and the evolution direction of the software system.
3. The role of the architecture diagram
A picture is worth a thousand words. For stakeholders to understand and follow architectural decisions, it is necessary to pass on architectural information. Architecture diagram is a good carrier. So, drawing the architecture diagram is to:
- Solve communication barriers
- Reach a consensus
- Reduce ambiguity
4. Architecture diagram classification
Collected a lot of information, there are many categories, there is a more popular 4 + 1 view, which is the scene view, logical view, physical view, process view and development view.
- Scene view
The scene view is used to describe the relationship between the participants of the system and the functional use cases, reflecting the final requirements of the system and the interaction design, usually represented by use case diagrams.
- Logical view
The logical view is used to describe the component relationships, component constraints and boundaries after the system software functions are disassembled, and reflects the overall composition of the system and how the system is constructed. It is usually represented by UML component diagrams and class diagrams.
- Physical view
The physical view is used to describe the mapping relationship between system software and physical hardware, and reflects how the system components are deployed to a set of computer nodes, which is used to guide the deployment and implementation process of the software system.
- Process flow view
The process flow view is used to describe the communication sequence between system software components, the input and output of data, and reflects the functional flow and data flow of the system. It is usually represented by a sequence diagram and a flowchart.
- Development view
The development view is used to describe the module division and composition of the system, as well as the composition design refined to the internal package, to serve developers, and reflect the system development implementation process.
The above five architectural views represent different features of a software system from different angles, and are combined together to describe the system architecture as an architectural blueprint.
What kind of architecture diagram is a good architecture diagram
The above classification is a summary of previous experience, and the pictures are also taken from the Internet, so are these pictures good? Are we going to draw such pictures according to the gourd scoop?
Let ’s not worry about the quality of these diagrams. We thought about the classification and function of these diagrams and summarized them. We believe that before drawing a good architecture diagram, we should first clarify its audience and then think clearly What information to pass on to them, so do n’t draw a physical view to draw a physical view, or a logical view to draw a logical view, but according to the different audiences, the information conveyed should be accurately expressed in a picture, and finally The figure may be in such categories. So, a direct criterion for the quality of the drawing is whether the audience has accurately received the information they want to convey.
After clarifying these two points, from the perspective of the audience, a good architecture diagram does not need to be explained, it should be self-describing, and must have consistency and sufficient accuracy to be able to echo the code.
Common problems encountered in drawing architecture diagrams
1. What does the box represent?
Why apply a box instead of a circle, does it have any special meaning? Using boxes or other shapes at will may cause confusion.
2. What do dashed and solid lines mean? What does the arrow mean? What does color mean?
Random use of lines or arrows may cause misunderstandings.
3. Conflict between runtime and compile time? Level conflict?
Architecture is a complex task, and using only a single diagram to represent the architecture can easily cause inexplicable semantic confusion.
The drawing method recommended in this article
The C4 model uses containers (applications, data storage, microservices, etc.), components, and code to describe the static structure of a software system. These kinds of pictures are relatively easy to draw, and the main points of drawing are also given, but the most important thing is that we believe that it clearly indicates the possible audience and meaning of each kind of picture.
The following case comes from the C4 official website, and then add some of our understanding to see how to better express the software architecture.
1. Context Diagram (System Context Diagram)
This is an imaginary Internet banking system to be built. It uses an external mainframe banking system to access customer accounts and transaction information, and sends emails to customers through an external email system. It can be seen that it is very simple and clear. I believe that no explanation is required, and all of them are clearly understood. It contains the system itself that needs to be built, the system's customers, and peripheral systems that interact with this system.
use
Such a simple diagram can tell us what the system is to build; who its users are, who will use it, and how it will fit into the existing IT environment. The audience of this picture can be internal personnel of the development team, external technical or non-technical personnel. which is:
- What is the system built
- Who will use it
- How to integrate into the existing IT environment
How to draw
In the middle is its own system, surrounded by users and other interacting systems. The key to this diagram is to sort out the users and high-level dependencies of the system to be built. It only takes a few minutes to sort out the drawing.
2. Container Diagram
The container map is an expansion of the system to be built in the context map.
In the above picture, in addition to users and peripheral systems, the system to be built includes a web application based on java \ spring mvc to provide the function entrance of the system, a mobile app based on the xamarin architecture provides the function entrance of the mobile terminal, and a java-based api application provides services , A mysql database is used for storage, and the interaction between the various applications is written on the arrow line.
When looking at this picture, I will not pay attention to whether it is a rectangular box or a rounded box, whether it is a solid arrow or a dotted arrow, and even the direction of the arrow does not attract too much attention.
We have many ways of drawing, all of which define the meaning of frames and lines. This requires that the person drawing the picture and the person looking at the picture clearly understand these definitions in order to read the information in the whole picture. The reality is that this is often It is a very high requirement, so many pictures can only see a rough meaning.
use
The audience for this picture can be developers inside or outside the team, or it can be an O & M person. Uses can be listed as:
- Shows the overall shape of the software system
- Reflects high-level technical decisions
- How the responsibilities in the system are distributed and how the containers interact
- Tell developers where to write code
How to draw
Represented by a block diagram, the internal may include names, technical choices, responsibilities, and the interaction between these block diagrams. If external systems are involved, it is best to define the boundaries.
3. Component Diagram
The component diagram is to expand a container and describe its internal modules.
use
This diagram is mainly for internal developers, how to organize and construct the code. Its uses are:
- Describes which components / services the system consists of
- Clarified the relationship and dependencies between components
- Provides a framework for how software development breaks down delivery
4. 类图(Code/Class Diagram)
This picture is obviously for technical personnel, it is more common, so I won't introduce it in detail.
Case Studies
The following is the architecture diagram of an internal real-time data tool. As an architectural diagram that should be self-described, I won't explain much here. If there is something that you ca n’t understand, it must be that the painting is not good enough.
There may be many methodologies for drawing the architecture diagram. This article mainly introduces the method of C4, and the theory of C4 is constantly evolving. But no matter which drawing method is used, we return to the original intention of drawing and better communication. We don't have to be restricted by the frame in the process of drawing. In short, think about it before painting: to whom to draw pictures, to see what, how to understand without explanation.
Reference materials:
About the Author
Three paintings, Alibaba technical expert. I have been engaged in the research and development of workflow engines for many years, and now focus on the architecture and development of high-concurrency mobile Internet applications, and the contributors of this article are from the Alibaba Retail Communication Department.
Book donation benefits
Write down in the Alibaba public account message area before 10:00 on April 15th, what efforts have you made to become an architect?
- The top 2 who have won the most praises will receive 1 book of "Alibaba Cloud Operation and Maintenance Architecture Practice Cheats" published by the Machinery Industry Press;
- The 3-5th place with the most likes will receive 1 Amoy doll;
- The 6-10th place with the most praises will receive one CNCF genuine fingertip top.
" Alibaba Cloud Native focuses on microservices, serverless, containers, service mesh and other technical fields, focuses on cloud native popular technology trends, cloud native large-scale landing practices, and is the public number that understands cloud native developers best."