我们在工作生活中时常会有画图的需求，不管是梳理结构/流程还是做可视化汇报/展示都需要一手画图的能力。什么？不想画？能直接从网络复制为啥要自己费精力？一方面，有一些图可能涉及面很窄网上真不一定有；另一方面，网络上的图可能已经是十年前的而且可能有错；再者画图的过程也是你将自己掌握的知识体系化并沉淀的过程，从网络上copy一张图并不能帮你更深地理解它背后的知识。
下面介绍一些常用的绘图工具。
下面就是用代码画的TCP三次握手的时序图，短短20行就搞定，是不是还挺简单的？
下面这张图片来自网络，用于描述应用部署流程，使用plantUML绘制，是不是也一目了然？
好兄弟：markdown
markdown的好处有很多：
1）轻量&迅速（想想你打开《XXX毕业设计》论文的时候）；
2）上手简单，常用的符号就那么多，15分钟妥妥地从入门到精通；
3）跨平台，可转多种格式；
4）高效，纯键盘操作，抛弃你的鼠标（VIM党在哪里？）。
当然，也有一些缺陷：
1）不支持个性化调整。比如领导要求标题居中，改不了啊，差评！（请出门右转打开Word开启你的排版之路）；
2）不同编辑器语法支持不一样，标准化做得不太好（但在向统一和标准化的方向发展中）。当然，这些缺陷在广大程序员眼中都不值一提。
编辑器的话分为本地和在线，本地就是自己想怎么玩怎么玩儿，在线更适用于临时记录或者多人协作的场景。本地工具强推Typora!免费！苹果美学！所见即所得(“WhatYouSeeIsWhatYouMean”)的终极倡导者。语法支持相对完善，提供多种模板，还可以加入emoji表情:rofl:。
当然，还支持多种代码画图的插件，比如js-sequence、flowchart.js、memaid等。如果没用过这些插件的话别着急，咱们在下一章会一个一个描述。可惜Typora专注于成为一个小而美的编辑器，如果它再增加一个笔记整理的功能，那么印象笔记，有道云笔记啥的都可以统统扔掉了:yum:。
markdown语法学习不是本篇的重点，给个「链接」自行探索吧，《真·10分钟从入门到精通》。最后顺带提一下其他的markdown编辑器，各位观众老爷们可以按个人的喜好来选择。
注：有一些可能存在低版本不兼容的问题。本地(Offline)Ulysses——支持mac和iOS，收费，有文档整理功能。Mou——完全免费，国产编辑器的代表，对中文的兼容性最好。比较有意思的功能是支持竖排（算是致敬中国传统文化吧）。比较可惜的是已不再更新，如果mac升级到Sierra之后就不再兼容了（现在都已经是BigSur了:sweat:）
simplenote——完全免费，全平台支持，可同步。就跟名字一样，十分简洁轻量。VSCode——没错，就是他，万能的VSCode。装个插件就可以一边码代码一边写笔记！
一不小心列举了这么多。。。。青菜萝卜各有所爱，如果实在选择困难症的话就用Typora吧。
在线（Online）stackedit.io——支持Mermaid，emoji表情，LaTeX公式甚至还有曲谱！CherryEditor——极简风格，支持emoji，还支持文字颜色调整，图片格式调整（悬浮左右对齐等）。预览列与编辑列实时对应（应该有人能get到这一点，很多markdown编辑器的预览列都没办法对应到编辑列上:expressionless:）dillinger/MarkdownJournal/Editor.md——这几个都中规中矩，看个人喜好吧。markdown-plus——除了支持mermaid还支持chartjs（分分钟想抛弃excel有没有），在线demo打不开请转战github，喜欢可以支持app。
另外还有一些其他工具并非markdown编辑器，但是他们普遍对markdown支持良好，也能提供非常棒的书写体验：
腾讯文档——多人协作时可优先考虑；语雀——阿里蚂蚁金服出品；团队知识库，也可以用作自己的笔记整理，提供windows/mac客户端；markdown方面支持PlantUML;工具一览
websequence
语法简单，基本没什么学习成本，教程在此可选格式和配色，都是已提供好的实时预览免费版的功能就已经完全够用了，但是不能缩放，导致图很大的情况下图片分辨率堪忧，大家酌情购买升级版MermaidLiveEditor
支持流程图、时序图、类图、状态图、甘特图、ER图、饼状图，而且都有示例实时预览，而且你都不用保存为图片，直接以图片链接形式插入markdown中支持调整配色和主题，不过要修改配置文件，比较麻烦。想偷懒直接用默认的就好导出为图片时，可调整图片的分辨率和大小文档在此js-sequence-diagrams支持手绘风格/普通风格（国外有一些博主特别喜欢这种手绘潦草风。。）无法修改配色语法欠缺，比如不支持激活框、分支/循环语义等，仅适用于特别简单的时序图
厉害之处在于，js-sequence-diagrams支持的语法可以简化为下面这张图，而这张图作者也是通过代码用RailroadDiagramGenerator工具生成的。:rofl:
yuml.me支持类图、活动图、用例图支持选择图片的大小和方向（从上往下/从左往右）手绘风格//Chainelementslikethis[Customer]<>-orders*>[Order]++-0..*>[LineItem]//Addnotes[Order]-[note:AggregateRootalaDDD{bg:wheat}]//Addmoredetail[IDisposable;Customer|+forname:string;+surname:string;-password:string|login(user,pass)]
plantUML支持的图更多，功能也更加强大，语法也更复杂，学习请找plantUML的用户指南websequence中的付费功能在这里是免费的默认配色为黄色（个人感觉不怎么好看），支持调整配色plantuml的真实案例，找到合适的可以直接拿过来改改变成自己的。有点“PPT模板”的意思了
flowchart.js
需要先定义开始/结束（start/end）、条件框（condition）、流程/子流程（operation/subroutine）这些元素，然后用->将它们连起来，流程图就ok了。
专为流程图设计可改配色在线编辑，实时预览可作为插件集成在其他markdown编辑器中
那些代码画不了的图怎么办？
诚然，上面提到的代码画图方法还是只能把我们从一些相对简单和基本的时序图/流程图等里面解放出来。那么如果要画的图足够复杂，必须得自己动手怎么办？
莫慌，下面这些工具都很好用。
LucidChart
以下是在processOn上随便找到的一张微服务架构图，质量还算可以了。
draw.io
有些人认为是mac上最好的绘图工具，颜值高，功能齐全。缺点也跟mac有关系：1）只支持mac和iOS系统；2）收费（US$12.49/month）；3）多版本协作不便
visualparadigm
非常强大的工具套件，主要面向企业级用户。在上述提供的在线版中也能提供相对不错的绘图体验，图的分类更加细化，不过免费版功能相对受限。值得一提的是，可以找到很多云厂商（阿里云、腾讯云、AWS、GoogleCloud等）的架构图和解决方案图，可作为模板来使用（可编辑），但保存需升级到付费版。
Axure
产品经理们用来做原型图的工具，功能非常强大。（如果不知道什么是原型图请跳过）
sketch
更偏向设计一些，功能强大，会有图层、蒙版等偏向PS的概念。也可以用来画一些非常好看的架构图。社区提供了丰富的教程和素材资源以及插件。
Visio
微软家的老牌绘图工具，不过多介绍。
没错，最后还是它，万能的VSCode！。想干啥都有插件。
值得一提的是，这个插件是可以支持代码编辑的，你可以拆分编辑器，一半是图片，一半是其XML。通过修改XML代码来实现调整图片的目的。如果可以将代码简化一下并支持只能自动调整配色和分布，个人感觉将是代码画图的终极形态！
关于配色多BB两句
colorhunt.co
提供现成的配色方案，你可以直接记住色号，然后在画图的时候使用即可。非常地简单。
khroma
不相信自己，要试试AI的能力吗？你只需要先随便选择50个颜色，然后让AI为你生成配色方案吧。
另外还有一点就是多看其他配色优秀的图，努力提升自己的审美和对颜色的敏感度。