How to create beautiful animated gif images like ByteByteGo All In One

How to create beautiful animated gif images like ByteByteGo All In One

如何像 Bytebytego 一样创建漂亮的 gif 动画图像

Tools

1. Draw.io 🚀

Flow Animation ✅

https://app.diagrams.net/#G1HlTgHJmodHqEkq_-AAse-oDA4p8PjWwS

https://drive.google.com/file/d/1HlTgHJmodHqEkq_-AAse-oDA4p8PjWwS/view?usp=sharing

https://draw.io

https://app.diagrams.net/

arc demo

2. Diagram as Code

Diagrams lets you draw the cloud system architecture in Python code.

# Clustered Web Services
from diagrams import Cluster, Diagram
from diagrams.aws.compute import ECS
from diagrams.aws.database import ElastiCache, RDS
from diagrams.aws.network import ELB
from diagrams.aws.network import Route53

with Diagram("Clustered Web Services", show=False):
    dns = Route53("dns")
    lb = ELB("lb")

    with Cluster("Services"):
        svc_group = [ECS("web1"),
                     ECS("web2"),
                     ECS("web3")]

    with Cluster("DB Cluster"):
        db_primary = RDS("userdb")
        db_primary - [RDS("userdb ro")]

    memcached = ElastiCache("memcached")

    dns >> lb >> svc_group
    svc_group >> db_primary
    svc_group >> memcached

https://diagrams.mingrammer.com/

3. PPT / Keynotes

animation -> gif

screen to gif tools / screen recorder

LICEcap (macOS ✅ Windows ✅)

https://www.cockos.com/licecap/

ScreenToGif (Windows only ❌)

4. SVG animation

https://www.linkedin.com/posts/mr-deepak-bhardwaj_linkedin-architecturedesign-tipsandtricks-activity-7084124097374257152-2tjS/

Cloudairy

A Collaborative Workspace for creating animated diagrams, mind maps and project planning.

https://cloudairy.com/

https://app.cloudairy.com/cloudchart/123e7b2f-4927-48b3-8317-b080f58caee9?a_id=a8246c89-d8f2-4e07-b90e-5bee7b948e9d

https://miro.com/diagramming/

Excalidraw 手绘风格

Hand-drawn look & feel

https://excalidraw.com/

demos

webp

https://blog.bytebytego.com/p/ep109-top-6-tools-to-turn-code-into

gif

https://blog.bytebytego.com/p/ep156-software-architect-knowledge

(🐞 反爬虫测试！打击盗版⚠️）如果你看到这个信息, 说明这是一篇剽窃的文章，请访问 https://www.cnblogs.com/xgqfrms/ 查看原创文章！

refs

Diagrams / Go Diagrams https://diagrams.mingrammer.com/
Mermaid https://mermaid.js.org/
Markmap https://markmap.js.org/repl
PlantUML https://plantuml.com/zh/archimate-diagram
ASCII editors / ASCII diagrams https://asciiflow.com/#/

https://blog.bytebytego.com/p/diagram-as-code

https://tanulb.medium.com/building-animations-for-quality-documentation-6573c0d18e4c

https://www.reddit.com/r/aws/comments/155gj5t/which_tool_is_used_to_make_deployment_diagrams/

https://icepanel.medium.com/top-8-diagramming-tools-for-software-architecture-2fc61d095b93

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---