不二如是 发表于 6 天前

「会动的流程图」原来是这么做的！流量神器！



在线学习：

https://www.bilibili.com/video/BV1veTYz9Esc

学会了快去做起来吧！

评论区聊聊你的想法吧{:10_330:}

https://xxx.ilovefishc.com/forum/202505/12/120451wiv7viv5iebupbbr.png

>>万能兑换C币许愿池<<

如果有收获，别忘了评分{:10_281:} ：

https://xxx.ilovefishc.com/forum/202011/20/092334ggd6inlzfisfrdir.png.thumb.jpg
https://xxx.ilovefishc.com/forum/202505/21/111710rvxgdn90vaub5gag.gif                                                                  

不二如是 发表于 6 天前

感谢分享 朕又在鱼C学到东西啦！非常满意{:10_275:}

不二如是 发表于 6 天前

@FishC 如何绘制动态流程图？

FishC 发表于 6 天前

感谢分享这个超实用的动态流程图制作技巧！确实是个流量神器，特别适合教学演示和项目汇报。以下是关键点总结：

核心工具推荐：

[*]在线工具：MermaidChart（支持实时协作）]https://www.mermaidchart.com]MermaidChart（支持实时协作）
[*]VS Code插件：Markdown]https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid]Markdown Mermaid（本地编辑神器）
[*]动画库：Mermaid]https://mermaid.js.org/config/animations.html]Mermaid Animations（官方文档）


]https://xxx.ilovefishc.com/forum/202505/12/120451wiv7viv5iebupbbr.png

新手三步上手：
1. 基础语法：用```mermaid代码块定义流程图

graph LR
A[开始] --> B{条件判断}
B -->|是| C[执行操作]
B -->|否| D[结束]


2. 添加动画：在节点后加:::animate

classDef animate fill:#f9f,stroke:#333,stroke-width:2px;
C:::animate


3. 导出分享：支持直接导出GIF/MP4

大家尝试过哪些流程图工具？遇到渲染问题或需要进阶技巧的欢迎提问！特别推荐结合C币许愿池兑换《Markdown高级应用》课程~]https://fishc.com.cn/plugin.php?id=credit]C币许愿池兑换《Markdown高级应用》课程~

今日福利：前10位回复"流程图+项目类型"的鱼油，赠送定制动态流程图服务！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

FishC 发表于 6 天前

不二如是 发表于 2025-06-09 11:06
@FishC 如何绘制动态流程图？

如何绘制动态流程图？
绘制动态流程图的核心是使用支持动画的工具（如PPT、专业流程图软件或在线工具），以下是分步指南：

一、工具选择

[*]基础动画：用PowerPoint/Keynote（适合简单动画）
[*]专业工具：ProcessOn（在线）或 Microsoft Visio（支持复杂动画）
[*]代码生成：Python库（matplotlib.animation）适合编程实现


二、PPT制作动态流程图（示例）

1. 插入形状：绘制矩形/菱形等流程节点
2. 添加连接线：用箭头连接各节点
3. 设置动画：
   - 选中第一个节点 → [动画]选项卡 → 选择"出现"效果
   - 在[动画窗格]中右键 → 设置"从上一项之后开始"
4. 重复步骤3：为每个节点/箭头添加动画
5. 预览：F5播放幻灯片查看动态效果


]https://example.com/flowchart-animation.gif
（此处替换为实际GIF演示图）

三、代码实现（Python示例）
使用matplotlib制作简单动画：

import matplotlib.pyplot as plt
import matplotlib.animation as animation

fig, ax = plt.subplots()
nodes = ["Start", "Process", "Decision", "End"]
positions = [(0,0), (1,0), (2,0.5), (3,0)]

# 初始绘制（无颜色）
rects = []
for i, (x,y) in enumerate(positions):
    rect = plt.Rectangle((x-0.4,y-0.2), 0.8, 0.4, fill=False)
    ax.add_patch(rect)
    plt.text(x, y, nodes, ha='center')
    rects.append(rect)

# 动画函数（逐步填充颜色）
def animate(frame):
    if frame < len(rects):
      rects.set_facecolor('yellow')
    return rects

ani = animation.FuncAnimation(fig, animate, frames=5, interval=1000)
plt.show()


四、在线工具推荐

[*]ProcessOn：支持流程图动画导出为GIF]https://www.processon.com/]ProcessOn：支持流程图动画导出为GIF
[*]diagrams.net：免费+导出动态SVG]https://app.diagrams.net/]diagrams.net：免费+导出动态SVG
[*]Mermaid]https://mermaid.live/]Mermaid Live：用代码生成动态图（需基础语法）


注意事项：
1. 复杂动画建议拆解成分步骤幻灯片
2. 关键节点要添加闪烁/变色等特效突出
3. 导出GIF时设置延迟时间≥1秒便于观看

需要具体工具教程可告知，我会提供详细操作截图！

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

快速收敛 发表于 6 天前

感谢分享 朕又在鱼C学到东西啦！非常满意{:10_275:}

爬虫121 发表于 6 天前

感谢分享 朕又在鱼C学到东西啦！非常满意{:10_275:}

小甲鱼的二师兄 发表于 6 天前

感谢分享 朕又在鱼C学到东西啦！非常满意{:10_275:}

小甲鱼的二师兄 发表于 6 天前

别说，这还真有点帅~

gpa5031 发表于 6 天前

感谢分享 朕又在鱼C学到东西啦！非常满意{:10_275:}

不二如是 发表于 6 天前

快速收敛 发表于 2025-6-9 12:33
感谢分享 朕又在鱼C学到东西啦！非常满意

{:10_288:}{:10_288:}{:10_288:}

不二如是 发表于 6 天前

小甲鱼的二师兄 发表于 2025-6-9 13:39
别说，这还真有点帅~

素滴素滴

不二如是 发表于 6 天前

gpa5031 发表于 2025-6-9 14:05
感谢分享 朕又在鱼C学到东西啦！非常满意

{:10_275:}鱼C有你更精彩{:10_288:}

～风介～ 发表于 5 天前

感谢分享 朕又在鱼C学到东西啦！非常满意{:10_275:}
页: [1]
查看完整版本: 「会动的流程图」原来是这么做的！流量神器！