如何用Drawio绘制好看的动态图？一文读懂
目录
前言
在当今这个信息爆炸的时代，视觉内容的吸引力往往能决定信息传播的广度与深度。动态图作为一种兼具视觉冲击力与信息传达效率的媒介，正被越来越多的人所青睐。从社交媒体上的趣味科普，到企业内部的流程演示，再到创意设计领域的动画展示，动态图的身影无处不在。而 Drawio，这款功能强大且易于上手的绘图工具，正为动态图的创作提供了一个极具潜力的平台。
如何绘制这种可以表示流动的设计图呢？对于许多初涉动态图创作领域的朋友来说，可能会觉得无从下手。一方面，动态图涉及到动画效果的实现，这似乎需要专业的动画制作软件和复杂的技术知识；另一方面，如何在动态图中融入创意，使其既美观又富有信息量，也是一个不小的挑战。但其实，只要你掌握了正确的方法和技巧，利用 Drawio 这样的工具，绘制好看的动态图并非遥不可及。
本文正是基于这样的初衷而诞生的。我们深知，每一个想要尝试动态图创作的人都怀揣着对美好视觉效果的追求，但又可能被各种技术难题和创意瓶颈所困扰。因此，我们精心编写了这篇文章，旨在为你提供一份清晰、实用、全面的 Drawio 动态图绘制指南。无论你是设计新手，还是希望在动态图创作上更进一步的进阶者，都能从本文中找到有价值的内容。绘制好看的动态图，不仅是一项技能的学习，更是一场创意与技术的奇妙之旅。通过本文的阅读，我们希望你能够掌握 Drawio 这个强大的工具，开启属于你的动态图创作之路。无论你是为了工作中的项目展示，还是为了个人兴趣的表达，都能通过绘制动态图来实现自己的创意，创造出令人眼前一亮的视觉作品。让我们一起走进 Drawio 的世界，探索动态图创作的无限可能吧！
一、Drawio绘制动态图
在接下来的篇章中，我们将从 Drawio 的基本功能入手，带你熟悉这款工具的操作界面和核心功能。我们会详细讲解如何利用 Drawio 的图库资源和绘图工具来搭建动态图的基础框架，这就好比是建造房屋时先搭建好稳固的结构。接着，我们将深入探讨动画效果的添加技巧，包括如何设置元素的运动路径、如何控制动画的播放节奏，以及如何通过组合动画效果来创造出复杂而流畅的动态场景。这些动画效果的设置就像是给房屋增添精美的装饰，让整个动态图“活”起来。这里将介绍两个版本的Drawio如何来绘制动态图，其它版本的软件使用大同小异。跟着博文一起来实操吧。
1、20.8.x如何绘制动态图
首先演示在20.8的版本中如何绘制动态图，不同的版本的软件，动图设置的操作方式有所不同，大家请结合自己的实际情况进行选择。首先我们打开Drawio20.8，界面如下：
然后打开一个库中存在流程模板，为了演示动态的流向，我们插入一个流程模板，点击“调整图形”，插入“模板”打开如下页面：
然后点击“插入”将流程插入编辑窗口中，如下图所示：
下面点击每个流动线，然后在右侧的样式编辑中点击属性，如下图所示：
在属性中，在Flow Animation的复选框中勾选，如下图所示：
在编辑窗口就能看到连接线编程了流动的效果。首先于系统截图，这里没有办法展示出流动的效果，大家可以使用实操来查看具体效果。为了加强显示效果，可以在样式这里对线条进行加粗，如下图所示：
经过以上步骤，基本就可以实现在20.8.x版本中实现流动图的设置。
2、24.7.x如何绘制动态图
如果您使用的Drawio是24.7.x的版本，版本查看如下：
24.7.x版本的Drawio与20.8有一些差异。首先，我们同样插入一个业务模拟流程，如下图：
然后在编辑窗口中选择需要设置流动效果的方向，然后在右侧的设置栏中可以看到如下界面：
在24.7.x的版本中在这里设置之后就可以达到动态流动的效果了。经过以上两种方式的简单讲解，相信大家对于如何在Drawio中绘制流动图就有了基本的了解。虽然在软件中查看效果时，已经出现了动态的效果，但是我们将成果导出时，肯定也是需要生成动态效果的。但是别人又不一定安装drawio软件，因此如何把设计图稿整理成普通电脑也能直接查看的格式呢？转成图片是一种比较常见的做法。下面我们就来讲讲如何将drawio的设计图稿转成动态图。
二、导出动图的两种方式
为了实现将Drawio中的实际图稿转为普通电脑也能直接查看的动态图，其实我们有三种技术实现方式。下面将分别就三种不同的方式进行简单的介绍。第一种方式是将drawio转换为html文件，第二种是将drawio转为svg文件，第三种是将drawio转为gif文件。
1、drawio转为html
html也是一种比较通用的格式，而且大多数的终端上都默认安装得有浏览器，因此使用html作为源文件，也是一种常见的方式，在Drawio中将文件转为的html的方法如下。在完成目标文件的设计之后，我们点击文件，导出为html，操作界面如下：
然后在打开的设置界面中进行对即将生成的html文件进行设置，如下图所示：
参数设置完毕后，点击“导出”按钮实现html页面的导出。在本地的磁盘目录中就可以看到下列文件：
我们可以点击html文件，将文件在默认浏览器中打开，可以看到以下效果：
感兴趣的话，可以打开源码或者在浏览器中打开检查模式查看，如下图：
可以很在网页中实际内嵌了一个svg来进行效果呈现：
生成的页面源码框架如下：
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html>
<head>
<title>未命名绘图</title>
<meta charset="utf-8"/>
</head>
<body><div class="mxgraph" style="max-width:100%;border:1px solid transparent;" data-mxgraph="{}"></div>
<script type="text/javascript" src="https://viewer.diagrams.net/js/viewer-static.min.js"></script>
</body>
</html>
在网页中的data-mxgraph标签中，则包含了需要展示的内容：
data-mxgraph="{"highlight":"#0000ff","nav":true,"resize":true,"toolbar":"zoom layers tags lightbox","edit":"_blank","xml":"<mxfile modified=\"2025-10-01T12:20:47.529Z\" host=\"Electron\" agent=\"5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.8.10 Chrome/106.0.5249.199 Electron/21.3.5 Safari/537.36\" etag=\"C_xJNHuFUMBCBM_-7ssm\" version=\"20.8.10\" type=\"device\"><diagram id=\"Ht1M8jgEwFfnCIfOTk4-\" name=\"Page-1\">7Zxbc9o4FIB/TR6TsXznEUPodqa72zbb6SMjbAFujUVlEZL++pVsCV9kqGkxdqmTTGIdSbZ8zqdzdCN3xmTz8obA7fpvHKDoTteClztjeqfrAFg6+8Mlr0JiATuTrEgYCFkueAq/IyHUhHQXBigpFaQYRzTcloU+jmPk05IMEoL35WJLHJWfuoUrpAiefBip0s9hQNfyxexRnvEXCldr8WhXd7KMDZSFxZskaxjgfUFkPN4ZE4Ixza42LxMUce1JvWT1ZkdyDw0jKKZNKnx6/P7+03j871syuw8Td2VNnG/3wDZF6+irfGUUMA2IJCZ0jVc4htFjLvUI3sUB4vfVWCov8w7jLRMCJvyCKH0V5oQ7iploTTeRyE0oJHTMzcMEMY6RlM3CKBK3RXEgS+AtijNJIT+hBH9FExxhkrbbmM00zc1zpLkMJllGeD+OQ2aTEMeiDar+hEoTvCM+OqU0UzDMWrxC9GRJNyvJdVp4iLDQG4Q3iJJXVoCgiDXuuUwdFPCuDuVEVaYY+FoosMVhTJPCnd9zASsgOqJuCCpFN7y3RTecNa1g6VaxArvI2iBThZfJRSmBZ9Fo3QyNrubW0aj/InnO706eafWTPH0g7zR5bmPyzF6QZwhucp/nmKfJG52u0BZ5xs2Qd8UI3JxG6/ek0bS6odEeaGyRRku7NI0FHn7G3M5g7jbN3U4oVJyF49r1g6bDPbK2imo5Nee6MfvYg465sR9VaMuNuQPXbQbVUT+CqlmByzaNK8DlaANcZ8MlI18Dpwn6FSMdMJj7fHODxubW+2VuubJ7A+ZuZyXAMhqHiX6sQSlhwhhdYyrlDEtKPwCp8TK61Q+QRjKISZD08njjxxWAa1+DvNtZUmqJvMbL6H0lDxin511dkXc724ntkGc3HxcZvSAPaNWVy+tET7mL8AyjnXi18QZ+Z2NTXZtEeBd8htRfK7ThHY3CmNlRHgfgFlzimBYsy75nvCneisAgRKW8mWGarl7Im4aE3SgbE8ecTX4/hk2hjjdhvdGuY2iZfrGcACbrA+HPiNDQZ3zDBYre4yQUt19gSvGmUGAchSueQXk/8KBI+axViJR7AH9D0T2ALtNCK/yRMNlm6liGL7wdXrKGW565eVnxkxsPcJ+YDwRlAL/1eXs8lsyuyqV8rv19qn3Di/g7eND/ukp7cd27J1voh/Hqv7QzW6e6D39v9HISdrlXY1WGdI6AUtvnpzQc4bvXhfMZUnb5eYPcaKgD9umfp4HU65OaxEl3iJqgf4jaRxG1I/Z0b0HY1YpfFV2s9vjM1aCUuSzSIm43I1YU7h2saTRFJFVYIkcndQAjXmJOww2aL2CS1m3A6SWwrC6ZWp1T6QxU9orK7He3WJrdO0tXwfId3CwCePlI7riPmnleJJ9q1gQ4f0wkjzLNnx/M3QuNN5VtTLtzPkfHx5vT1xhu8PTCvpDlmVOHZZ6HKvsyvdEfg2qQ6j5YXM112tWBpu3qD1bHdMrlp9rZ0Ac2G9I+7BDLGYL1Twfrb6kCr0WZ4gENt5kHlMO7FhgDCmMyQlcHhbNdnHmpToaLR4L1b09gFpXnS6nczljUza6jsdzFHpYr+xaPz12uvMRkpod8GifiMV+drPpFNnwO/WF2fUl3SVOVXm1YqFU/eaO7jSC02wvYNXs6n5+kh1TQEltT7Nry2A8bUU60O4vlTHjqge9LlQTVtFMWADXF71EWVNNOWQCqtweV54NqAwsCJVW6vVZ5vlZoIPsxvNqedqRHFXjer0OKnticmGt1z2hswHgtvpzWbfrIOjeb5s7Z5Tx1uHOYOg4lxBxcQbHPi0af7qsRWtJ8dv8uTU2NU96m5CkadDr2VhQyDROhuWrH1tIyUQS3Sbg46IrF2x1Jwmf0ESWZSrXLdGBnVN1AMNQoYsiPFxd7sAFaOx1nqbtcSr8t7+fX8VfA82Ak0MxINdwc6QN9M6escphA1QwKgGvVmVNrzZzqjtB/aLONIB2m5r8S6aUOrxXslQ+A6K6uwGXXsNXiiFPd1hnQugW0Doe8ukNL3ZrJJzOGOmnxdv5X1NFWoe44ANwgh4tUp/N9SNdzvPjC7tLwrMUFkASa5j5UTqXpes2S93WpVDdkJgQnyf3Y95kyavj7iJkhOqFy4gADzG6PSoKj63lG16qM6CzHbjTDlgO/Fj68om67FFcfq6gNRyhu6AjFqBqoHdAMx/Zcoj3s0PyZOzQKi1bD3cKfYJEl8/+ilp0/z/8ZnfH4Pw==</diagram></mxfile>"}
2、drawio转为svg
除了可以将drawio转为html之外，在24.7.x版本中，也可以选择将文件转为svg，同样是可以实现动态流动图的展示的。转为svg的方法与转为html类型，差别就是数据格式的有点不一样。导出svg的样式设置如下窗口如下：
这里只需要设置缩放比例，边框宽度和其它的一些属性即可。同样我们可以在浏览器中直接打开这个生成的svg文件，如下图所示：
可以通过html的调试来看到生成svg内容，如下所示：
这个与HTML的生成机制又有一点差别。需要注意的是，不同版本的drawio生成svg可能存在不一致，尤其是展示效果的不一致，比如使用20.8导出的svg，放到浏览器中后，流动的效果就没有了，但是使用24.7版本导出的svg，放到浏览器中后又是可以正常浏览的。因此，如果你在进行转换遇到这种问题，优先检查一下drawio的版本。
3、drawio转为GIF
虽然在实际工作中，使用html格式已经满足绝大多数的要求，如果不满足，我们可以选择使用转为svg的模式，但如果别人需要gif这种格式又改如何处理呢？不要急，其实已经有了现成的框架，但是需要使用外部的资源，比如在线工具来提供支撑，不知道有没有一些私有框架或者工具来进行设置。这里提出一种解决办法，使用在线工具来进行辅助生成，这款工具就是：svg-top-gif工具。可以在浏览器中打开网站：
然后在页面中上传需要处理的文件，需要注意的是，这里上传的文件如果是有商业秘密或者有隐私性的文件，请不要使用这种方案。
上传完成后，然后设置一些生成参数，如下图所示：
最后点击生成即可，生成完毕后可以将生成的gif文件下载到本地，方便在展示时使用。如下图：
关于参数设置，大家可以进行尝试，可以看看不同的参数，它的效果是什么？究竟有什么影响，在此不进行赘述。
三、总结
以上就是本文的主要内容， 本文详细的讲解了如何使用不用版本的Drawio来绘制动态图，以及如何将drawio导成流动图。我精心编写了这篇文章，旨在为你提供一份清晰、实用、全面的 Drawio 动态图绘制指南。无论你是设计新手，还是希望在动态图创作上更进一步的进阶者，都能从本文中找到有价值的内容。绘制好看的动态图，不仅是一项技能的学习，更是一场创意与技术的奇妙之旅。通过本文的阅读，希望你能够掌握 Drawio 这个强大的工具，开启属于你的动态图创作之路。
- 点赞
- 收藏
- 关注作者
评论（0）