产品经理，设计师，前端工程师必备的绘图工具（原型图，思维导图，UML，流程图，架构图）

文章目录

1 传达意图的图
2 原型图工具（Axure，墨刀，摹客....）
3 思维导图与UML工具
- 3.1 专业工具（Visio， Edraw，OmniGraffle，XMind，MindMaster）
- 3.2 在线工具（drawio，ProcessOn，百度脑图，语雀）
- 3.3 代码工具（PlantUML，Mermaid）
4 参考资料

1 传达意图的图

原型图：做一些自用的生产力平台时需要写需求文档
思维导图：用于整理思路或编写大纲。
UML（用例图、流程图、时序图、架构图）：用于编写系统文档。

2 原型图工具（Axure，墨刀，摹客…）

Axure RP

Axure RP是一款专业设计师不容错过的免费原型设计工具，设计师可以用它快速创建应用软件或Web线框图、流程图、原型和规格说明文档。
作为一款专业的设计工具，它能快速、高效的创建原型
网站地址：https://www.axure.com/

墨刀

墨刀致力于简化产品制作和设计流程，采用简便的拖拽连线操作，作为一款在线原型设计软件，墨刀支持云端保存，实时预览，一键分享，及多人协作功能，让产品团队快速高效地完成产品原型和交互设计。
使用墨刀，用户可以快速制作出可直接在手机运行的接近真实 app 交互的高保真原型，使创意得到更直观的呈现。
网站地址：https://modao.cc/

摹客

Mockplus是一款更快更简单的免费原型设计工具，产品设计师5分钟即可创建交互原型。
快速原型设计、精细团队管理、高效协作设计、轻松多终端演示，是原型设计的不二之选。
网站地址：https://www.mockplus.cn/?home=1

xiaopiu

xiaopiu是一个在线原型设计平台(同时也有Windows、Mac客户端)，可以随时随地创作原型，实时保存，实时和他人协同，一键分享，并且提供多款各行业项目模板以及丰富的组件库和页面库来帮助用户快速构建自己的原型。该软件能够帮助你快速实现一些简单的页面交互时间，相对上面的Axure来讲，UI效果更好。
网站地址：https://www.xiaopiu.com/

Proto.io

一款专注于移动端原型开发的软件，可以建立全交互式的移动App原型。设计师可以直接在真实的移动设备上对原型设计进行测试。
并且可以使用iOS或Android上的浏览器以全屏模式运行原型。不过这是款在线设计工具，设计师在进行原型设计时需要保持经常在线。
网站地址：https://proto.io/

3 思维导图与UML工具

3.1 专业工具（Visio， Edraw，OmniGraffle，XMind，MindMaster）

Visio

Office Visio 是office软件系列中的负责绘制流程图和示意图的软件，具有专业外观的图表。
Visio更适合绘制复杂项目的流程图和线框，更复杂的模板，更丰富的共享组件、布局，学习成本增加，软件也是重量级的。

Edraw

亿图图示是国产软件，操作方便，最好用的是有许多模板可用，在图示绘制领域都是非常专业的软件。
兼容Windows、Mac、Linux三大系统，并且可以在网页端在线打开。在云服务上，最新版的亿图图示很好的支持云同步功能，绘制的图示文件可以快速的同步到亿图的账户中，亿图还支持导入visio的文件进行编辑。
但是不花钱就变小。
官网地址：https://www.edrawsoft.cn/

OmniGraffle

Mac Only，付费、略贵，Mac 上最贵最好用的绘图工具，大部分的图都可以很容易画出来。
官网地址：https://www.omnigroup.com/omnigraffle

XMind（思维导图）

XMind 是世界上最受欢迎的思维导图软件，作为开源的商业软件，XMind 简单易用，稳定高效，支持多平台、多语言、多格式导出，不仅能绘制思维导图，还能绘制鱼骨图、二维图、树状图、逻辑图以及组织架构图等。
官网地址：https://www.xmind.cn/

MindMaster（思维导图）

MindMaster在2017年上线，同样支持多类思维导图的高效绘制。而且仅用了1年时间，其产品下载量就破百万次，其研发公司亿图软件也于2019年被上市公司万兴科技超6倍估值并购。
官网地址：https://www.edrawsoft.cn/mindmaster/

3.2 在线工具（drawio，ProcessOn，百度脑图，语雀）

draw.io

开源免费，能满足工作上写文档时的多数画图需求
官网地址：
https://github.com/jgraph/drawio
https://www.diagrams.net/

ProcessOn

ProcessOn是一个在线作图工具的聚合平台，它可以在线画流程图、思维导图、UI原型图、UML、网络拓扑图、组织结构图等等
图标类型和长相都还不错，但存在的问题主要是收费及安全问题，毕竟企业内部的一些流程图和架构图，不适合放公网服务。
官网地址：https://processon.com/

百度脑图（思维导图）

百度脑图官方版是款由百度为用户创造的思维导图制作工具。百度脑图可以以树状图、逻辑图以及流程图的形式将自己的想法直观的展现出来，让工作项目更加有效、有序的进行。
“好用的完全不像是百度的产品”。各种格式的导入导出非常强大，免费。
移动端速度慢，无法阅读分享
官网地址：https://naotu.baidu.com/

语雀（思维导图）

语雀，是蚂蚁集团旗下的在线文档编辑与协同工具。语雀使用了“结构化知识库管理”，形式上类似书籍的目录。
支持思维导图+流程图+绘图。易用、美观，高效、协作：在线多人协作，自由画板，比起 XMind 会更舒服，可以任意组合。编辑能力比起 OmniGraffle 还有不少差距，内置模板和组件还太不够丰富。
官网地址：https://www.yuque.com/yuque/blog/ygdcs3

3.3 代码工具（PlantUML，Mermaid）

PlantUML

PlantUML 是一个开源工具，能让你通过纯文本的方式来生成 UML 图。除了 UML 图外，PlantUML 也支持思维导图、甘特图。
语法简单明了，但需要装java，用plantuml.jar包。设几个环境变量，可移植性不高，支持png, svg图片导出。
官网地址：https://plantuml.com/zh/
https://github.com/plantuml/plantuml/releases/tag/v1.2022.4

Mermaid（美人鱼图）

Mermaid是一种基于Javascript的绘图工具，使用类似于Markdown的语法。
饼状图：使用pie关键字
流程图：使用graph关键字
序列图：使用sequenceDiagram关键字
甘特图：使用gantt关键字
类图：使用classDiagram关键字
状态图：使用stateDiagram关键字
用户旅程图：使用journey关键字
官网地址：
https://github.com/mermaid-js/mermaid

4 参考资料

https://www.zhihu.com/question/20177573
https://www.jianshu.com/p/2d9b16f37976
https://www.zhihu.com/question/20144020

产品经理，设计师，前端工程师必备的绘图工具（原型图，思维导图，UML，流程图，架构图）相关推荐

优秀web前端工程师必备_优秀的Web工程师的技能和素质
优秀web前端工程师必备 In this one-on-one episode of the Versioning Show, Tim and David talk about what makes ...
工程师、产品经理、数据工程师是如何一起工作的？
做为一名工程师,免不了与产品经理打交道,如果公司大一些,数据量多一些,还会有数据工程师这个角色.今天会和你主要聊一聊在工作中,产品经理和数据工程师在哪些方面对我们工程师的帮助最大,以及我从他们身上都学 ...
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏）、动画组件库、3D组件库】
Vue常用的组件库大全[前端工程师必备] (一)移动端常用组件库 1)Vant ui 2)Cube UI 3)VUX 4) NuTUI 5)Mint ui 6)Varlet UI 7)OnsenUI ...
软件测试转行做产品经理,转型产品经理，测试工程师的出路！
原标题:转型产品经理,测试工程师的出路! 干了5年以上软件测试的QA要面临的最大挑战之一就是如何转型! 去带领测试队伍? 去负责项目管理? 去担当产品经理? 还是裸辞了去看世界? 最后一个跑题了- ~ ...
数据分析的工作内容是什么，数据分析师、数据产品经理和数据挖掘工程师三个岗位之间，有什么联系和区别？
数据分析工作内容: a.临时取数分析,比如双11大促活动分析:产品的流量转化情况.产品流程优化分析,等等: b.报表需求分析–比如企业常见的日报.周报.月报.季报.年报.产品报表.流量转化报表.经营分 ...
前端工程师必备九大网站
01 GitHub https://github.com/ 这个网站托管着很多优质的开源项目,像你可能听说过的 Linux,React,Vue,Webpack,JQuery等都在这个网站上开源.你可以 ...
小啊呜产品读书笔记001：《邱岳的产品手记-10》第19讲产品经理如何与开发打交道（上）：打破思维的边界第20讲产品经理如何与开发打交道（下）：合作与共赢
小啊呜产品读书笔记001:<邱岳的产品手记-10>第19讲产品经理如何与开发打交道(上):打破思维的边界 & 第20讲产品经理如何与开发打交道(下):合作与共赢一.今日阅读计 ...
摹客，前端工程师必备开发神器
工欲善其事,必先利其器! 相信每个前端都经历过用PS手动切图的原始手法,有时候偷懒,还会直接用QQ截图,现在想想真是初生牛犊不怕虎,怎么方便怎么来~ 当时就在想,如果能有一款神器,帮我解放切图这种&q ...
奇虎360WEB平台部招贤纳士之产品经理、开发工程师
部门介绍招聘部门:WEB平台部 WEB平台部是奇虎360的技术支持部门,为公司各业务线提供互联网行业全方位的技术支持和解决方案.WEB平台部包含业内知名的前端团队奇舞团,测试团队Qtest,基础研发 ...
前端工程师必备的17个实用网站
前端框架.素材网站目录一.配色类网站二.图标类网站三.插件类网站四.素材类网站五.字体类网站六.工具类七.UI框架 UI框架: http://element-cn.eleme.io/# ...