Excellent PPT is of great help to both promotion and technology sharing. A good powerpoint presentation usually contains lots of pictures. A picture illustrates things vividly. A picture is worth a thousand words.

This article is for programmers, introduces the development of related fields of drawing techniques. Want to light up the drawing skills, might as well have a look ~

Do figure technique

Drawing is divided into three steps: content, presentation, optimization.


Content is the essence of a graph. In order to draw and draw, like “young people do not know the taste of sorrow, for new words strong sorrow.” Therefore, the first thing to do is to think clearly about the content to be expressed. Extract the relationship between the subject and the subject from the content of the description.

For example, we’ll introduce Vue. The introduction of Vue official website is as follows:

Vue: Progressive JavaScript framework.

Easy to use: Already know HTML, CSS, JavaScript? Read now Guide start building apps! .

Flexibility: A thriving ecosystem that can scale between a library and a complete set of frameworks.

Efficient: 20kB min+gzip running size; Super fast virtual DOM; The most effortless optimization.

We can preliminarily refine the main body: Vue, introduction, ease of use and description, flexibility and description, efficiency and description.

Further refining, you can classify ease of use, flexibility, and efficiency as Vue’s strengths. Break down the description of your strengths into key words.

Subjects are subordinate to each other.


Now that you’ve figured out what you want to say, the next step is to choose the right way to present it. This article describes scenarios suitable for graphing content.

The flow chart

Flowchart: A diagram representing an algorithm with a description of a specific graphical symbol.

Flowcharts are good for showing the flow of information, content, etc. There is a sequential relationship between subjects. Algorithms are often represented by flow charts. The following figure describes the algorithm for solving the equation using dichotomy:

Swimlane diagram, also known as cross – functional flow chart, is a special flow chart. The swimlane map is based on the flow chart, adding a functional dimension. For example, the following figure describes the ordering process of Ele. me:

Draw flow chart, recommend several tools:


Professional powerful drawing tool, support real-time online collaboration, can be used for prototype diagram, UML, BPMN, network topology diagram and other graphics drawing.

Website: www.processon.com/

The two images above, both made with PressOn.


Security-first diagramming for teams. Bring your storage to our online tool, or go max privacy with the desktop app.

Website: www.diagrams.net

Diagrams.net was formerly called draw.io. VSCode has an integrated draw. IO plug-in that allows you to draw with Draw. IO in VSCode. As shown below:

Plug-in address: marketplace.visualstudio.com/items?itemN…

Markdown Preview Mermaid Support

Adds Mermaid diagram and flowchart support to VS Code’s builtin markdown preview

Plug-in address: marketplace.visualstudio.com/items?itemN…

This is a VSCode plugin that allows you to draw a flowchart using Markdown’s extended syntax:

graph TD;

Render effect:

Let me copy a little bit of an example

graph TD; T [travel] t -- -- > c1 [summer] c1 > which cd1} {temperature more than thirty degrees which cd1 - > | | is p1 ((go to the mall)) p1 - > d [stay 2 hours] d > h [home] which cd1 -- - > | no | p2 () (go to the seaside) t - > C2 / winter c2 - > cd3 {} temperature below 30 degrees cd3 - > | | is p1 cd3 - > whether | | p2 p2 - > d3 [stay] 1 hour d3 -- -- -- -- > > h h t

Render effect:

Architecture diagram

Architecture diagram: A diagram describing the relationship between an overall structure and its components.

Architecture diagrams are suitable to represent a large structure and the relationships of its components. For example: business architecture, application architecture, data architecture, and technical architecture. The following is an architecture diagram with the front and back ends separated

Recommended article: “the article read how architecture diagram drawing” (zhuanlan.zhihu.com/p/269201440…

You can use Keynote, Power Point for easel composition. The architecture diagram is basically made up of rectangles, text, and Keynote is perfectly capable.

The following image was also drawn in Keynote:

Mind mapping

Mind mapping, also known as mind mapping, is an effective graphical thinking tool for expressing divergent thinking. It is simple but effective, and it is a revolutionary thinking tool.

Mind mapping is suitable for presenting information with subordinate and relational relationships between subjects.

Here are some tools for mind mapping


The biggest advantage of MindNode is its beauty, but the disadvantage is that it supports only Mac. This is the mind map for this article. The paid version supports multiple themes:

Liverpoolfc.tv: mindnode.com/


a full-featured mind mapping and brainstorming tool, designed to generate ideas, inspire creativity, brings efficiency both in work and life. Millions and millions of people love it.

Website: www.xmind.net/


There are many other diagrams, such as: UML diagrams, pie charts, line charts, Gantt charts, etc. I won’t go through them all here. Recommend a website:

Figure of

A dictionary of visual diagrams. The easy-to-use chart dictionary provides scientific visualization suggestions for your study and work.

Address: tuzhidian.com/introduce

To optimize the

Finally, let’s do some optimization on the graph. The direction of optimization includes: typesetting and color matching.


Good typography should follow four principles: alignment, contrast, repetition and intimacy.

Principles of alignment,

Alignment means that no element can be placed on the page, and each item should have some visual connection to something on the page.

Alignment keeps content organized, rigorous and beautiful. In general, we just left align the content.

Recommended article: “the design is too messy?” alignment “principle certainly didn’t learn to” (zhuanlan.zhihu.com/p/112299210)

Contrast principle

Contrast: to emphasize differences between two or more things.

Contrast helps to prioritize and highlight the main points. Comparisons are commonly used in drawing: size, color.

Recommended article: the picture taiping? Did you learn to contrast principle “(zhuanlan.zhihu.com/p/108677853)

Repeat principle

Repetition refers to the repetition of visual elements. Functionally the same thing should have the same UI.

Repetition reinforces consistency. Different pictures everywhere, give a person’s feeling is patchwork, will look very uncomfortable. Here’s an example:

Recommended article: “Do you Use repetition to design typography?” (www.shejidaren.com/chongfu-yua)…

Close the principle

Intimacy refers to the fact that related items should be close to each other.

The intimacy principle is the same as the proximity principle. The intimacy principle is categorization, putting similar things together. The intimacy principle keeps the content in order.

Recommended article: “Use the Principle of intimacy to make typography less messy” (www.shejidaren.com/qinmi-xing-…)

The color

Matching refers to the matching of colors.

Different colour brings different visual effect to the person, produce different psychological experience thereby. Through reasonable color matching, can better reflect the content of the performance. Do color matching, to learn color theory and color matching method. To be lazy, you can choose directly from the color matching website:

  • Color Hunt: colorhunt co/palettes/Po…
  • webgradients.com/

Recommended reading: Zhihu Question: How to Learn Color Matching? (www.zhihu.com/question/22)…

Introduction to Design books recommended

I recommend a book I’ve read before. It’s easy to read and easy to understand.

The last

This paper introduces the drawing techniques in general. Later, I will do some in-depth content on common diagrams (flow charts, mind maps, etc.)

Follow the public account: front-end GoGoGo, help you promotion and salary ~