Master Diagramming: Design Principles to Make Your Tech Charts Stand Out

Foreword

As developers, we inevitably need to draw diagrams—whether technical architecture or business process charts. Based on personal experience, the author shares a method for creating diagrams to provide useful ideas and help in both work and life.

1. Diagram Types

Code implementation diagram

Technical architecture diagram

Business process diagram

Technical flow diagram

Interaction sequence diagram

2. Definition of a Good Diagram

Clear structure: distinct primary and secondary points, easy to understand

Visually appealing: encourages reading

Complete content: self‑contained information loop

3. Key Points

How to make diagram structure clearer? Apply four design principles.

How to make diagrams more beautiful? Use color‑wheel techniques and golden‑ratio composition.

How to make diagrams more complete? Adopt an end‑to‑start design mindset, prioritize the user, and add necessary annotations.

1. Design Sense: Four Principles

Proximity: group related elements together, separate unrelated ones

Alignment: create a unified, orderly layout

Contrast: enhance visual effect and aid information organization

Repetition: unify style for a cohesive look

2. Aesthetic: Color Wheel Usage

Primary colors: red, yellow, blue

Complementary colors: main color with accent

Equidistant triadic colors: pleasant combinations

Same‑level colors: harmonious palettes for multi‑color scenes

3. Aesthetic: Golden Ratio Composition

Golden ratio 0.618: overall size proportion (width : height ≈ 1 : 1.618)

Fibonacci sequence approximates the golden ratio as it grows

4. Completeness: End‑to‑Start Design

Think first: define purpose and desired outcome before drawing

List all elements: legends, arrows, titles, annotations, etc.

User‑first: ensure a viewer can grasp the diagram without extra context

By adopting these four key points—four design principles, color‑wheel usage, golden‑ratio composition, and end‑to‑start design—your diagrams will be significantly improved.

Conclusion

Understanding and applying the four key points will make your diagrams clearer, more attractive, and more complete, regardless of style preferences.

Further Reading

Design Book for Everyone: https://book.douban.com/subject/26657933/

Wikipedia: Golden Ratio https://zh.wikipedia.org/wiki/%E9%BB%84%E9%87%91%E5%88%86%E5%89%B2%E7%8E%87

Book: The 7 Habits of Highly Effective People https://book.douban.com/subject/5325618/