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

Posted 2022-05-03 小哈里

文章目录

• • • 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