原型设计工具介绍之Drawio希望分能高

原型设计工具是为了帮助设计师更快速和高效地创建用户界面原型的工具。这些工具通常采用所见即所得的方式，并带有预设的UI元素和组件，以及能够生成原型演示和交互的功能。在软件工程领域，原型设计工具在需求分析和交互设计阶段中发挥着至关重要的作用。对于我们软件工程专业的学生来说，在我们学习以及实践过程中，我们要很多图，包括数据流图、实体关系图、系统顺序图等等，而原型设计工具则是我们绘制这些图的非常实用的工具。常用的原型设计工具包括Axure、Sketch、Figma、AdobeXD等，在课程中，老师也向我们介绍了不少原型设计工具，包括Axure，墨刀，staruml等等原型设计工具。

在这里我要向大家推荐一款我一直在使用，并且体验感很不错的原型设计工具——Drawio

Drawio

Drawio是非常受欢迎的原型设计工具，它提供了一个开源的绘图工具，可用于创建、维护和共享图表和图形。它支持多种类型的图表和图形，包括流程图、网络拓扑图、组织结构图、UML和ER图等。Drawio拥有易于使用的用户界面，可以导出多个文件格式，并且可与GoogleDrive和OneDrive等云存储服务集成。作为一个开源工具，Drawio能够让开发者自由调整和扩展其功能，使其成为开发者们喜爱的原型工具之一。

Drawio的特点

1.开源、免费：Drawio是一个开源的绘图工具，任何人都可以免费使用它。

2.多种图表和图形类型：Drawio支持多种类型的图表和图形，包括流程图、网络拓扑图、组织结构图、UML和ER图等。

3.易于使用：Drawio拥有易于使用的用户界面，无需任何编程技能，即可使用它来创建想要的原型。

4.跨平台：Drawio作为一个基于浏览器的工具，可以在各大主流浏览器中使用，也提供了VSCode插件和本地软件版本，让用户能够在不同的平台上使用它，给了用户更多选择的空间。

VScode插件形式

当然也可以下载

Drawio的使用方法（以网页版为例）

1.打开Drawio

主界面如图所示，可以看到整个界面非常干净清爽，干练整洁，功能区划分清楚明白。左边是选择所需要使用的是哪种类型的图形，右边是对所绘制的图形进行细节上的调整，同时画布以栅格网状平铺，便于用户绘图对齐，绘制出整齐的图。用户根据文字提示以及简单明了的图标，任意点击探索一会儿就会轻松掌握这款工具。当然了，当新手第一次接触这款工具时，Drawio也会用教导流程引导用户上手，之后如果还有疑惑的可以在帮助中点击视频查看，可见，这款工具对用户是非常友好的。

2.选择图表类型

如上图所示，Drawio有丰富的图表类型，在左侧列表框处的是最通用的类型，用户还可以根据自己的喜好和需求添加多种不同类型的图形类型。点击蓝色按钮添加更多图形就可以很方便的添加自己所需要的图形，绘制各种类型的图表。

3.绘制图表

可以选择导入文件进行绘制也可以自行开始绘制

可以看到，导入文件的方法有很多种,包括Onedrive、Github、Gitlab、浏览器、设备以及URL

根据自己的思路以及想法，选取合适的图形放置与画布中，再添加文字描述，箭头联系等等使得一张有丰富内涵的图产生

4.导出图表

从图中可以看到，可以导出为PNG、JPEG、SVG、PDF、VSDX、HTML、XML、URL等多种格式，既可以生成多种图片格式，也可以生成源文件，使得下次依旧可以继续编辑，极大程度上方便了用户。

也是因为他的这个特点，我们小组采用了这个工具作为辅助实验的工具，方便协同完成作图。

实例

在本学期的另一门课程软件工程I中，在学习结构化建模方法过程建模时，我们小组需要画出该课程项目的数据流图DFD。我们首先在其中构思整体的框架，然后找到所需要的图形类型，也就是下面这两项

随后我们将所需要的图形添加至画布中间，根据自己的需求进行编辑，得到

在将各个图形之间通过箭头联系起来，通过右侧的工具栏进行微调，得到完整的图。

最后将图导出为所需要的格式，这里我们选择的时png格式

总结

在使用这款工具前，我也尝试过其他的工具，但是与这些工具的缘分就没有那么的久远，主要是这些工具要么强制性收费再使用，要么导出图片收费或者图片去水印收费，要么上手体验不是很顺畅，要么对新手不是非常友好。

而Drawio则很好的解决了上述的问题，开源免费、多种图表类型、易于使用，而且多种输入格式和输出格式，满足各种需求，团队之间还可以互相协作编辑，大大的提升了效率。

对于我们现阶段而言，选择一款好的原型设计工具是非常重要的，不仅可以帮助我们学习软件工程的知识，在画图时事半功倍，提高我们的专业素养和实践能力，同时也能未来的职业发展需求打好基础。因此我将这款非常不错的原型开发工具推荐给大家。