Skip to content
pele-animate
Docs
Icons
Playground
Changelog
GitHub
npm
☀
Playground
Editor
Preview
Mermaid source
flowchart LR %% pa: 1=C 2=C>L 3=L>S 4=S>L 5=L>C C@{ icon: "http-get", form: "square", h: 88, label: "Request" } L@{ icon: "load-balancer", form: "square", h: 88, label: "Load balancer" } S@{ icon: "cloud-computing", form: "square", h: 88, label: "Cloud service" } C -->|request| L L -->|forward| S S -->|response| L L -->|reply| C
Load an example…
Icons: request, load balancer and cloud service
Flowchart: cache hit or miss, with pins and an edge pin
Sequence: API request with a cache miss
Architecture: request path through CDN, API, cache, database and worker
State: media player with loading, error and retry
C4 context: player app and the systems around it
Block: video pipeline with a storage branch
Class: media types, player and license
ER: customer orders and product suppliers
Timeline: product history in two phases
User journey: watching a protected video
Git graph: feature branch, merge and release
Gantt: plan, build and ship
Icons: laptop sending a request to a server
Pins: request, validate, respond with a shortcut
Edge pins: a reply as its own step
Stroke
1.5
Preview width
100%
Colors
Lines and icons
Group fill
Node fill
Background
Text
Reset colors
Step controls (click to step)
Copy share link
Copy Mermaid
Copy code snippet
Light and dark follow the site theme (button in the header).