动态流程架构图绘制软件

大家好,今天给大家介绍几款简单好用、也挺有趣的流程图绘制软件。

同时也分享个一键将流程图动画化的工具。可以实现以下动画效果。

这种动图记录下了我们绘制流程图的步骤,有助于梳理思路,回顾整个思考过程。

我想了下,如果课堂上老师把课堂讲过的内容画成流程图,然后一键生成动画,是不是有助于学生们回顾和记忆课堂内容,有读者从事教育行业的可以尝试一下。

本期工具实现的一些效果

最简单的流程图。

草图模式流程图。

你可以自己给图配色

也可以从工具自带样式库里选择一种配色模式一键配色。

具体的工具使用,大家可以亲自去尝试下。

工具推荐:

一、draw.io(网址:www.draw.io

draw.io是一个很流行的开源项目,可以绘制各种图表,包括流程图,泳道图,组织结构图等等。

下图是draw.io创建文件的截图,可以看到支持很多种图表类型。

它内置的形状也非常丰富:

如果你是第一次进入网站,可能是英语界面,按照下图可更改语言为中文。

使用我就不介绍了,大家鼠标随便点点就会,说一下我流程图样式调整的几个选项,如何画出我上面那种草图形式。:

  • 鼠标移动到形状上,可以拖动形状到中间面板上。或者直接点按形状也可以移到面板上。
  • 上图红色矩形框选的是样式调整的几个选项。选中草图,点击上面第一个红色矩形框住的颜色,就可以调整左边矩形的中间填充颜色,假如我选择浅蓝色,就会出现下面的样式。
  • 不勾选草图就是最简单的无任何样式的黑框,适合一些比较正式的文件,如下图。

二、excalidraw

excalidraw其实是一款开源的手绘风白板工具,画出的示意图个性活泼,不呆板

文章开头的动图就是用它绘制,然后使用第三部分的工具转化成动画的。下面是演示动画:

它还支持扩展图标库:点击右上角素材库即可添加图标。

三、excalidraw-animate

excalidraw-animate是一个将excalidarw中绘制的示意图按照步骤动画化的工具。

项目地址:https://github.com/dai-shi/excalidraw-animate

不过原网址不支持中文手绘字体,我自己也搭建了一个修改了一下,支持手绘字体,使用的手绘字体是"沐瑶软笔手写体"。

网址:draw.lingchenbox.xyz(支持中文手绘风格)

使用演示:

总结:

分享了三个工具,draw.ioexcalidrawexcalidraw-animate

相关网址:1是功能强大的绘图软件,2是可以画出活泼俏皮风格示意图的白板工具,3是将流程图一键转动画的工具。

  1. https://www.draw.io 或者 https://app.diagrams.net/
  2. https://www.excalidraw.com (不支持中文手绘字体) 或者 https://excalidraw.lingchenbox.com (支持中文手绘字体)
  3. https://draw.lingchenbox.com (支持中文手绘字体)

另外我其实也测试了其余几款流程图软件,包括:yEd Graph Editor、Graphviz、SimpleDiagrams、Dia等,但是有一些问题不如今天推荐的几款,比如软件较老,风格比较难看;不好上手,还得需要学习成本;或者需要登录才能使用等。

比较下来,专业画图,还是draw.io ,免费开源,在线即用 。甚至有些国内收费工具也是基于它改的。不想在线也可以下载桌面客户端,不联网也可使用。

如果想绘制活泼一点的流程图,把绘制流程图的步骤记录下来,并一键生成动画,方便演示或者整理思路。那就使用excalidraw 配合和excalidraw-animate

如果你想绘制的图更有设计感,也可以选择一些付费的流程图软件,这个就不做推荐了,大家可自行搜索。

相关推荐
ITPUB-微风2 小时前
Service Mesh在爱奇艺的落地实践:架构、运维与扩展
运维·架构·service_mesh
大腕先生7 小时前
微服务环境搭建&架构介绍(附超清图解&源代码)
微服务·云原生·架构
文军的烹饪实验室7 小时前
处理器架构、单片机、芯片、光刻机之间的关系
单片机·嵌入式硬件·架构
猫头虎-人工智能7 小时前
NVIDIA A100 SXM4与NVIDIA A100 PCIe版本区别深度对比:架构、性能与场景解析
gpt·架构·机器人·aigc·文心一言·palm
阿里妈妈技术7 小时前
提效10倍:基于Paimon+Dolphin湖仓一体新架构在阿里妈妈品牌业务探索实践
架构
JAMES费8 小时前
figure机器人技术架构的演进初探——Helix人形机器人控制的革新
架构·机器人
程序员侠客行10 小时前
Spring事务原理详解 三
java·后端·spring·架构
WeiLai111214 小时前
面试基础--微服务架构:如何拆分微服务、数据一致性、服务调用
java·分布式·后端·微服务·中间件·面试·架构
菜鸟一枚在这15 小时前
深入剖析抽象工厂模式:设计模式中的架构利器
设计模式·架构·抽象工厂模式
Swift社区15 小时前
【微服务优化】ELK日志聚合与查询性能提升实战指南
spring·elk·微服务·云原生·架构