不止VSCode：程序员高效工作的画图工具一览编辑器插件markdown流程图

我们在工作生活中时常会有画图的需求，不管是梳理结构/流程还是做可视化汇报/展示都需要一手画图的能力。什么？不想画？能直接从网络复制为啥要自己费精力？一方面，有一些图可能涉及面很窄网上真不一定有；另一方面，网络上的图可能已经是十年前的而且可能有错；再者画图的过程也是你将自己掌握的知识体系化并沉淀的过程，从网络上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编辑器，各位观众老爷们可以按个人的喜好来选择。

注：有一些可能存在低版本不兼容的问题。

一不小心列举了这么多。。。。青菜萝卜各有所爱，如果实在选择困难症的话就用Typora吧。

另外还有一些其他工具并非markdown编辑器，但是他们普遍对markdown支持良好，也能提供非常棒的书写体验：

工具一览

websequence

MermaidLiveEditor

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

flowchart.js

需要先定义开始/结束（start/end）、条件框（condition）、流程/子流程（operation/subroutine）这些元素，然后用->将它们连起来，流程图就ok了。

那些代码画不了的图怎么办？

诚然，上面提到的代码画图方法还是只能把我们从一些相对简单和基本的时序图/流程图等里面解放出来。那么如果要画的图足够复杂，必须得自己动手怎么办？

莫慌，下面这些工具都很好用。

LucidChart

ProcessOn

以下是在processOn上随便找到的一张微服务架构图，质量还算可以了。

draw.io

ZenFlowchart

亿图图示OmniGraffle

有些人认为是mac上最好的绘图工具，颜值高，功能齐全。缺点也跟mac有关系：1）只支持mac和iOS系统；2）收费（US$12.49/month）；3）多版本协作不便

visualparadigm

非常强大的工具套件，主要面向企业级用户。在上述提供的在线版中也能提供相对不错的绘图体验，图的分类更加细化，不过免费版功能相对受限。值得一提的是，可以找到很多云厂商（阿里云、腾讯云、AWS、GoogleCloud等）的架构图和解决方案图，可作为模板来使用（可编辑），但保存需升级到付费版。

Axure

产品经理们用来做原型图的工具，功能非常强大。（如果不知道什么是原型图请跳过）

sketch

更偏向设计一些，功能强大，会有图层、蒙版等偏向PS的概念。也可以用来画一些非常好看的架构图。社区提供了丰富的教程和素材资源以及插件。

Visio

微软家的老牌绘图工具，不过多介绍。

VSCode

没错，最后还是它，万能的VSCode！。想干啥都有插件。

值得一提的是，这个插件是可以支持代码编辑的，你可以拆分编辑器，一半是图片，一半是其XML。通过修改XML代码来实现调整图片的目的。如果可以将代码简化一下并支持只能自动调整配色和分布，个人感觉将是代码画图的终极形态！

关于配色多BB两句

colorhunt.co

提供现成的配色方案，你可以直接记住色号，然后在画图的时候使用即可。非常地简单。

khroma

不相信自己，要试试AI的能力吗？你只需要先随便选择50个颜色，然后让AI为你生成配色方案吧。

另外还有一点就是多看其他配色优秀的图，努力提升自己的审美和对颜色的敏感度。