作为技术人，我们如何画出精美的技术配图？我把我画上百张图片的经验，分享给你们
小林写这么多篇图解文章，你们猜我收到的最多的读者问题是什么？没错，就是问我是使用什么画图工具，看来对这一点大家都相当好奇，那干脆不如写一篇介绍下我是怎么画图的。
如果我的文章缺少了自己画的图片，相当于失去了灵魂，技术文章本身就很枯燥，如果文章中没有几张图片，读者被劝退的概率飙飙升，剩下没被劝退的估计看着看着就睡着了。所以，精美的图片可以说是必不可少的一部分，不仅在阅读时能带来视觉的冲击，而且图片相比文字能涵盖更多的信息，不然怎会有一图胜千言的说法呢？
这时，可能有的读者会说自己不写文章呀，是不是没有必要了解画图了？我觉得这是不对，画图在我们工作中其实也是有帮助的，比如如果你想跟领导汇报一个业务流程的问题，把业务流程画出来，肯定用图的方式比用文字的方式交流起来会更有效率，更轻松些；如果你参与了一个比较复杂的项目开发，你也可以把代码的流程图给画出来，不仅能帮助自己加深理解，也能帮助后面参与的同事能更快的接手这个项目；甚至如果你要晋升级别了，演讲 PTT 里的配图也是必不可少的。
不过很多人都是纠结用什么画图工具，其实小林觉得再烂的画图工具，只要你思路清晰，确定自己要表达出什么信息，也是能把图画好的，所以不必纠结哪款画图工具，挑一款自己画起来舒服的就行了。
“小林，你说的我都懂，我就是喜欢你的画图风格嘛，你就说说你用啥画的？”
咳咳，没问题，直接坦白讲，我用的是一个在线的画图网址，地址是：
- https://draw.io
用它的原因是使用方便和简单，当然最重要的是它完全免费，没有什么限制，甚至还能直接把图片保存到 GoogleDrive 、 OneDrive 和 Github，我就是保存到 Github，然后用 Github 作为我的图床。
既然要认识它，那就先来看看它长什么样子，它主要分为三个区域，从左往右的顺序是「图形选择区域、绘图区域、属性设置区域」。
其中，最左边的「图形选择区域」可以选择的图案有很多种，常见的流程图、时序图、表格图都有，甚至还可以在最左下角的「更多图形」找到其他种类的图形，比如网络设备图标等。
再来，最右边「属性设置区域」可以设置文字的大小，图片颜色、线条形状等，而我最常用颜色板块是下面这三种，都是比较浅色的，这样看起来舒服些。
我最近常用的一个图形是圆角方块图，它的位置如下图，但是它默认的颜色过于深色，如果要在方框图中描述文字，则可能看不清楚，这时我会在最右侧的「属性设置区域」把方块颜色设置成浅色系列的。另外，还有一点需要注意的是，默认的字体大小比较小，我一般会调成 16px 大小。
如果你不喜欢上图的带有「划痕」的圆角方块图形，可以选择下图中这个最简洁的圆角方框图形。
这个简洁的圆角方框图形，再搭配颜色，能组合成很多结构图，比如我用过它组成过 CPU Cache 的结构图。
那直角方框图形，我主要是用来组成「表格」，原因自带的表格不好看，也不方便调。
如果觉得直直的线条太死板，你可以把图片属性中的「Comic」勾上，于是就会变成歪歪扭扭的效果啦，有点像手绘风格，挺多人喜欢这种风格。
比如，我用过这种风格画过 TCP 三次握手流程的图。
方块图形再加上菱形，就可以组合成简单程序流程图了，比如我画过存储器缓存流程图。
所以，不要小看这些基本图形，只要构思清晰，再基本的图形，也是能构成层次分明并且好看的图。
基本的图形介绍完后，相信你画一些简单程序流程图等图形是没问题的了，接下来就是各种图形 + 线条的组合的了。
通过一些基本的图形组合，你还可以画出时序图，时序图可以用来描述多个对象之间的交互流程，比如我画过多个线程获取互斥锁的时序图。
再来，为了更好表达零拷贝技术的过程，那么用图的方式会更清晰。
前面也提到，图形不只是简单图形，还有其他自带的设备类图形，比如我用网络设备图画过单播、广播、多播通信的区别图。
你要说，我画过最复杂的图，那就是写 TCP 流量控制的时候，把整个交互过程 + 文字描述 + 滑动窗口状况都画出来了，现在回想起来还是觉得累人。
还有好多好多，我就比一一列举，这半年下来，小林至少画了 500+ 张图了，每一张图其实还是挺费时间的，相信画过图的朋友后，都能体会到这种感觉了。但没办法，谁叫小林是图解工具人呢，画图可以更好的诠释文章内容，但最重要的是，把你们吸引过来了，这是件让我非常高兴的事情，也是让我感觉画图这个事情值得认真做。
另外，细心的读者也发现了，小林贴代码的时候，使用的是图片的形式，原因是代码通常都是比较长，在手机看文章用图片的呈现的方式会更舒服清晰。
在这里也推荐下这个代码截图网址：
- https://carbon.now.sh/
网站页面如下图，代码显示的效果是不是很美观？
文字的分享有局限性，关键还是要你自己动手摸索摸索，形成自己一套画图的方法论，练习的时候可以先从模仿画起，后面再结合工作或文章的需求画出自己心中的那个图。
作为技术人，我们如何画出精美的技术配图？我把我画上百张图片的经验，分享给你们相关推荐
- 九大操作系统掌门人齐聚岳麓，六代技术人跨代对话，共同见证技术大时代
10月23日,"长沙 · 中国1024程序员节"在湖南长沙市盛大开幕.大会以硬核技术和开源文化为议题,囊括岳麓尖峰对话.2020开源技术英雄大会.10+场热门技术分论坛/峰会:&q ...
- 为什么画出的人物是平面，怎样才能画出有立体感的人物
初学者为什么画出的人物总是平面?怎样才能人物有立体感?想画出有立体感的人物的教程有哪些?想必这些问题都是初学者比较伤脑筋的问题,那么初学者到底怎样才能画出有立体感的人物呢? 今天小编就在网络上收集整理 ...
- 【转】技术人如何加速成长？提升你的思维和学习方式【思想上勤奋、借事修人、第一性原理、结构化思维/金字塔原理、复盘、解构和重组】
原创 涵爸 阿里技术 收录于话题 #技术人成长之路 阿里妹导读:每个人都会经历一个新人的阶段,不管是初入职场,还是到一个新的工作环境.作为技术新人,我们常常会面临哪些困惑?普通人和非凡人的差异在哪里 ...
- python从键盘输入10个整数算出奇数偶数的和_画出流程图，并编程实现： 从键盘上输入10个整数型的数值，分别统计奇数和偶数的个数。_概率论与数理统计答案_学小易找答案...
[填空题]photography club [简答题]几个基本概念:(答案上传到超星平台) 什么是数据? 数据库和数据库表 实体和记录.字段 数据库系统和数据库管理系统 数据库管理员(DataBase ...
- Python编程的Turtle 库画出“精美碎花小清新风格树”，速取代码！
作者 | 1_bit 责编 | 王晓曼 出品 | CSDN博客 开始 使用Turtle画树,看了一下网上的代码,基本上核心的方法是使用递归:其次通过递归传参更笔的粗细从而改变绘制时的线段,更改树的躯干 ...
- 教你一招用 Python Turtle 库画出“精美碎花小清新风格树”，速取代码！ | 原力计划...
作者 | 1_bit 责编 | 王晓曼 出品 | CSDN博客 开始 使用Turtle画树,看了一下网上的代码,基本上核心的方法是使用递归:其次通过递归传参更笔的粗细从而改变绘制时的线段,更改树的躯干 ...
- 一篇文教你使用python Turtle库画出“精美碎花小清新风格树”快来拿代码！
Turtle库手册可以查询查询 python图形绘制库turtle中文开发文档及示例大全,手册中现有示例,不需要自己动手就可以查看演示. 文章修改记录 修改记录 1:2020年5月17日 12:06: ...
- 计算机电路图用什么画,初学者怎么用电脑画出精美的电路图?
电路图由各种电路元件符号组成,是一种表示各元器件组成及器件关系的原理布局图.有了电路图,技术员们就能轻松的进行施工.规划和交流.电路图也可以说是每个电路施工技术人员必须要掌握的一种基本技能.接下来,小 ...
- python画圆弧组成的花瓣代码_Python编程的Turtle 库画出“精美碎花小清新风格树”，速取代码！...
作者 | 1_bit 责编 | 王晓曼 出品 | CSDN博客 开始 使用Turtle画树,看了一下网上的代码,基本上核心的方法是使用递归:其次通过递归传参更笔的粗细从而改变绘制时的线段,更改树的躯干 ...
最新文章
- oracle rownum分页 出现重复数据
- 企业怎样做好计算机应急响应工作
- 软件设计原则（三）里氏替换原则 -Liskov Substitution Principle
- 使用URI设计松散耦合的Metro应用程序
- java怎么判断数据类型_数据类型判断
- 489 - Hangman Judge
- DB2数据库SQL语法大全推荐word版
- 如何才能招到马云这样的人才？海尔张瑞敏这样说...
- visio防火墙可以连接什么_画流程图，就是要用Visio软件!
- 2019 世界读书日，让程序员疯狂的 13 本豆瓣高分技术书！
- 纯新手入门机器/深度学习自学指南（附一个月速成方案）
- 学生选课系统代码--分析1
- 私塾 java_JAVA私塾
- 《物联网Android程序开发案例式教程》Demo3：登录页面
- SystemGenerator：数字信号处理之开发准备、流程预演
- Tensorflow-gpu2.0.0安装【显卡型号：GTX1050 TI】
- hbase 0.98.1集群安装
- ITest：京东数科接口自动化测试实践
- linux系统根文件系统构建
- 阿里云个人账户如何变更为企业用户