本文介绍一种通过文本代码来画常用图的方法，包括脑图、UML图、原型界面等。 只需要一个链接就可以展示图、修改图、随时随地传送图等，可以消除常常忘记可编辑 原图的文件在哪里、不便修改、图中内容不可复制、不可重定向等各种烦恼。
工具简介
画图的工具很多，不过我们经常会遭遇以下麻烦：
- 图片放大之后变得模糊
- 事后发现图片有错误想修改，取找不到对应的可编辑的文件。 改动小还可以ps或者干脆重新画，图内容比较多且改动大就麻烦了。
- 分享或转移不方便。如果是远程地址的话，还可能被平台删除或者链接转移了， 再也定位不到原来的图片。
- 图片中的文字无法拷贝
- 图片中的某个子图很难被重用，往往需要多次画类似的图，而不是拷贝过来稍微修改就能搞定。
- 图片的改动无法引入git等版本控制工具，无法随心所欲的快速回退到指定想要的里程碑版本。 往往只能使用工具自带的撤销命令一次次撤销。
- 图片无法与其对应的工具合为一体，即图片是图片，工具是工具，无法从图片反推到所使用 的工具及其对应的代码。
- 画图效率太低，不断选择画图组件按钮，鼠标拖来拖去，整体布局调来调去，太费时费力。
- 画图速度赶不上思维的速度
如果你遇到了上面的麻烦，并且不止一次，更可气的是，这些麻烦还将不断地重复出现，挥之不去， 隆重推荐你使用 plantuml 对应的 远程工具。
想法落地流
头脑中有某种想法或者事情需要理解、表达或者落实时，一般会经过以下几个过程：
- 头脑中酝酿或者“触景生情”
- 大脑中构思或大脑中对话或自言自语
- 纸上涂涂画画或罗列构图
- 思维导图发散或收敛思维
- 归纳出架构图或宏观概念图形成概念框架
- 从客户的视角对系统绘制用例图
- 绘制组件图对框架图进行初步细化，寻找已有的构件对架构进行搭积木式地实现
- 对还没有的组件借助类图进行实体结构化分解
- 对某些特定时刻的结构状态通过对象图进行具象化
- 对某个具有复杂状态的对象通过状态图给出有限状态机
- 对某些需要存储或落盘的状态信息通过实体关系图映射成多层二维关系，以便存储和检索
- 对有工作量的各个项目通过工作分解图进行分解
- 工作分解后通过甘特图展示工作排期
- 通过PERT图识别出关键逻辑或者风险点
- 具体开发实现时可以通过活动图和顺序图识别出数据流和控制流，在具体实现的过程中用到嵌入式硬件的可能还需要时序图
- 软件或逻辑上的可靠性通过部署图落实到硬件或现实上的可靠性。部署的过程中可能需要用到网络图对网络进行规划。
需要指出的是，上述落地流并不是每个项目或想法都需要其中的所有步骤，也不需要严格按照以上先后顺序来完成。 你可以跳过某些步骤或调整某些步骤的顺序，甚至并行某些步骤、合并其中的某些步骤、或者再细化某些步骤等。
图模板
使用方法
plantuml 是一个用文本就可以画各种图的开源工具，详细介绍可参考前面提供的网址。为了帮助 大家快速使用起来，并且达到能够应付绝大数使用场景，本文将提供各种实用模板。你只要复制粘贴 到远程工具适当修改即可。 至于其他非常个性化的需求可参考这个网站自行搜寻。
模板
这里为大家准备了各种常用图的模板，根绝自己的需要选择即可。如果你不知道自己的想法适合用那种图表现出来，快速浏览 一下本文的各种模板对应的图形之后，或许就有了答案。看看例图和对该图的基本用途的描述大概就可以知道此时此刻你 需要那种图了。然后结合上述“使用方法”这一节即可呈现效果。
脑图(思维导图)
思维导图主要用于发散思维，以某个中心论题进行发散分解。当你想解决一个问题却无从下手时，可以试试思维导图随性的先画起来， 想到什么就画什么，然后逐步横向展开和纵向分层延伸，层层深入，直到脉络较为清晰为止。一次性完成不了也没关系，想起来就追加上去就行。 其灵活性可见一斑。
样例代码可点击这里 ，效果见下图。
工作分解图
工作分解图的语法和脑图非常类似，只是比脑图多了一个限制：不支持多中心节点。另一方面， 与脑图再外观上的区别是：布局从上往下，连线也随之不同。
与脑图样例对应的工作分解图为 样例1 ，样例2 ，相应的图如下：
顺序图
顺序图用于展示各个相关对象交互（请求与响应，即消息传递与应答）的先后顺序。
顺序图的作用
- 描述对象之间依赖关系的动态转换时序
- 展示对象之间的数据流或消息流
- 顺序图为一种动态建模方法，可弥补静态建模的不足
在顺序图中流动的消息有以下三种：
- 简单消息：实线+常规箭头表示。是从一个对象到另一个对象的控制流的转移。
- 异步消息：实线+一半的箭头。消息发出了以后，发送对象不必等到接收对象的应答，就可以继续自己的操作。
- 同步消息：实线+实心三角形表示。消息发出了以后，发送对象必须等到接收对象的应答，才能继续自己的操作。
顺序图的样例代码可点击这里 ，效果图如下：
用例图
用例图描述了系统外的参与者与系统内的功能模块（用例）之间的交互关系，是外部用户（被称为参与者）所能观察到的系统功能的模型图。 用例图的主要目的是帮助开发团队以一种可视化的方式理解系统的功能需求。这简单道出了几个要素：
- 外部用户视角（不用关心系统内部是如何完成各种功能的）
- 参与者（外部用户）
- 用例（系统功能）：系统功能可以认为是产品需求适当分解之后的产物。应根据需要控制系统功能的划分粒度
- 参与者与用例之间的交互关系
- 系统边界
源代码样例 ，效果图如下：
类图
类图用于描述各个概念实体的性质和具有的行为特征，以及各个概念实体之间的静态结构关系和逻辑归属。这些关系包括：
- 继承关系
- 实现关系
- 依赖关系
- 关联关系
- 聚合关系
- 组合关系
类图的源代码样例 ，效果图如下：
对象图
对象图可以看成是类图的某一时刻的具体状态变迁（属性值和行为上的变化）。对象图是类图的具体化，侧重在属性值经过行为方法的作用发生的变化， 即对象图是类图的某个类的某个状态（即对象）经过其行为（类中的方法）或受到其他类的某个行为的影响而产生的状态（属性值）变化。 对象图与类图的绘制极其类似，有区别的地方有下面几个：
- 类图中的某些绘图特性是无法用到对象图
- 绘图的关键字不同：类图中的类使用 class 声明，对象图中的对象使用 object 声明
- 具体化程度不同：类图中的成员变量和函数可以看做是一种声明；对象图中的变量和函数是需要赋予具体的值，某些部分需要关注值的变化过程。 在全局变量赋值时需要用到map对全局数组或映射关系进行描述。
- 一个类可以同时存在多个对象，这些对象之间也可以存在某种关联。
源代码样例 ，效果图如下：
PERT 图
PERT(Program Evaluation and Review Technique)即计划评估和审查技术 PERT图的优点在于，可以让项目负责人更明确工作重点，聚焦于可能需要采取纠正措施的关键问题上，使控制工作更加有效。 当然，它也有局限性，需要事前对项目的工作（包括每个独立的活动）进行较准确的描述和预估（所需时间、资源等
源代码样例 ，效果图如下：
组件图
组件一般提供了一组接口或通讯协议，只要满足了这些接口或通讯协议就可以为其他系统所用。组件可独立于某个具体的系统而存在，可单独运行，当然系统中所用到的 某个组件也可以用其他更优的类似组件替换。可见，组件摆脱了具体实现或具体语言等的束缚，具有更强的跨系统的可重用特性。组件图主要强调系统的逻辑实现。
组件图的源代码样例 ，效果图如下：
部署图
部署图描述了一个系统运行时的硬件或软件组件处理节点的物理分布和部署及通信方式的静态视图。部署图主要强调系统的物理实现，从物理层面保障系统的可用性、可靠性、稳定性和安全性。 源代码样例 ，效果图如下：
状态图
状态图用来描述某个对象在其生命周期中的所有可能状态及其触发事件。通常用于表示单个对象在其生命周期中行为。 源代码样例 ，效果图如下：
架构图
架构有很多种，比如组织架构和软件架构（产品架构，业务架构，系统架构，技术架构，模型架构，数据架构）等。 软件架构指的是软件系统的顶层设计（Rank），它定义了系统由哪些角色（Role）组成，角色之间的关系（Relation）和运作规则（Rule）。 架构也可以简单理解为系统需要用到哪些积木、积木如何配合进行系统构造。
分层架构图建议用 PPT 的各种形状加文本框完成，也可以使用工具Visio和diagrams等，因为其兼简单美观和灵活性为一体。当然也可以用本文介绍的 plantuml 完成，不过比较复杂，具体见 样例1 ，样例2 ，效果图如下：
更复杂的架构图有样例 ，效果图如下：
实体关系图
实体关系图通过具有属性的实体间的驱动（用动词描述）和数量关系来对现实世界建立信息概念模型。 源代码样例 ，效果图如下：
甘特图
甘特图描述的是项目或活动的起止时间、项目之间在时间上的关系以及项目的进度情况。借助甘特图可以发现正在并行做的项目集、 整个大项目的起止时间、项目的时间人员资源的调配情况、项目进度的风险点等。 源代码样例 ，效果图如下：
网络图
源代码样例 ，效果图如下：
线框图
这种图主要是在画UI图的初期用到，用于产品和开发确认UI的原型，因使用场景比较窄且复杂，这里就不给出样例了。 感兴趣的伙伴可以自行参考这里。
时序图
玩过单片机控制的同学应该对时序图还有印象。这里有个样例 ，效果图如下：
活动图或流程图
活动图描述的是一个活动到另一个活动之间的控制流。通过控制流来表征活动间的约束关系。有利于识别并行活动。强调对象间的控制流程，活动图在本质上是一种能支持并发行为的流程图。 源代码样例 ，效果图如下：
辅助图像布局
plantuml 不建议刻意地去控制图像的布局，不过你还是可以通过以下手段调整布局：
- 改变某些图形的声明顺序，改变图形分布的相对位置
- 改变箭头的方向(up/down/left/right)，改变箭头两端的图形相对位置
- 用虚拟箭头(up/down/left/right)把没有关系的元素串起来（所谓虚拟箭头，就是带方向但是箭头颜色和背景一致）。
- 改变箭头连线的长度（如 ———>）
- 改变图形的尺寸或间距
- 通过隐藏箭头(hidden)把某些图形按某个方向排列在一起
- 通过package等把多个图形捆绑在一起作为一个整体来布局，改变参与布局的图形粒度
- 通过 left to right direction 或者 up to down direction 来控制整体布局，改变画布的延展方向
建议在画图完成之前不要使用辅助图像布局，先充分展现其自动布局。虽然在图像布局上可以有不小的作为，但不要过于追求图像规整布局。如果你有图像布局规整的洁癖，建议你还是用那些 可以借助鼠标拖放的画图工具。
一切皆在链接中
plantuml 在线画图工具中，画图的源代码、各种格式的图像都可以在链接（URL）里获取到。 这就意味着只要有这个链接，任何人都可以修改图像并且输出一个新的链接指向新的已修改过的图像。同时也意味着， 只要你找不到这个链接，那么源代码和修改对应图像的可能性也一起丢失了。因此，建议使用链接地址去分享或展示 你的图像，而不是下载图像文件。
在线画图工具没有自动补全或语法高亮或格式化，不是很友好。建议你使用线下工具先把源代码写好，然后再粘贴到在线工具得到URL。
不要执迷某种工具
需要指出的是，不要执迷某种工具，重要的是把你的思想或目标可视化。你不仅可以用本文的工具，还可以：
- 头脑中绘图或“放电影”
- 纸上、白板或电子绘板等手工绘图
- 具有画面感的文字，如类比熟悉的事物
- 其他任何绘图软件或具有绘图模块的软件
- 其他类似的图形或者自创图形集