Animated Mermaid Examples — 4 Motion Styles
Four animation styles — charge for request flows, pulse for retries, laser for keynotes, subtle for docs. Live examples + free Mermaid editor.
Follow the workflow, open the example in the editor, then export or save the cleaner result.
A guide for using Beauty Diagram animation styles as a review and presentation layer on top of the same Mermaid source. Each example below maps an animation style to the kind of flow it helps the reader understand.
View Mermaid sourcePlain-text diagram syntax — copy or edit directly.
1flowchart LR2 Ingest[Receive event] --> Validate{Valid?}3 Validate -->|yes| Queue[Send to queue]4 Validate -->|no| Reject[Reject event]5 Queue --> Worker[Worker processes job]6 Worker --> Done[Mark complete]7 Worker -->|retry| QueueTheme and animation variants
What animation actually communicates in a diagram
Static diagrams have to fake two things with arrows alone: time and direction. A good animation encodes both directly — the eye sees the order in which steps happen, and where the energy of the flow is moving. That is why animation is most useful for diagrams whose meaning depends on sequence (retries, queues, request paths, multi-stage approvals) and least useful for diagrams whose meaning is structural (entity relationships, taxonomies, layouts). Decide which kind of diagram you are presenting before you decide whether to animate it at all.
Match the animation style to the flow shape
Beauty Diagram exposes four animation styles, and each one is tuned for a different shape of flow. Picking the right one is the difference between motion that clarifies and motion that distracts. The pre-rendered examples below show the same Mermaid source under each style, so the comparison is about visual fit rather than artistic preference.
- Subtle — quiet reveal in source order, for documentation review
- Charge — directional pulses along edges, for request paths and pipelines
- Pulse — recurring emphasis on the same edge, for retries and handoffs
- Laser — high-contrast accent motion, for keynote moments and hero shots
Subtle reveal: documentation reading order
Subtle reveal animates nodes and edges in the order they appear in the source, so the reader's eye follows the same path the author intended. It is the safest default for documentation, technical specs, and walkthroughs that will be read at the reader's own pace. The motion is quiet enough that a screenshot of any single moment still works as a static image, which matters when the same page also gets printed or PDF-exported.
Charge and pulse: directional flow and retry emphasis
Charge sends a moving accent along each edge in the direction the data travels. It works best for diagrams that describe a request path, an event pipeline, or a stage-by-stage process, because the motion answers the question the reader is already asking — which way does this flow? Pulse, on the other hand, repeats emphasis on the same edge, which is what you want when an edge is meant to fire more than once: retry loops, polling, recurring schedules, or a queue worker that picks up work repeatedly. The retry-and-queue example in this guide is a textbook case for pulse rather than charge, because the worker-to-queue edge fires every retry attempt.
Laser is a presentation accent, not a default
Laser is the loudest style — bright, fast, and visually heavy. Use it when a diagram is the visual centrepiece of a keynote slide, a launch announcement, or a hero shot on a marketing page, and the audience is watching the screen rather than reading at their own pace. For documentation, laser is almost always wrong: it pulls attention to the motion itself rather than to the structure of the flow. A good rule of thumb is that if the diagram appears next to body copy, laser is probably the wrong choice.
When to keep the diagram static
Animation is not always an upgrade. Skip it when the diagram is dense (more than roughly a dozen nodes), when the destination format does not preserve motion (printed handouts, PDF exports, static images embedded in third-party tools), or when the audience includes anyone with motion sensitivity or relies on assistive technology that does not interact well with animated SVG. In all of these cases, a clean static export of the same source delivers the message without the cost.
Pair theme and motion together, with a static fallback ready
Theme and motion shape each other. A high-contrast theme like Obsidian can carry a louder animation style, while a softer documentation theme like Atlas usually works better with subtle reveal. As a rule, treat the static SVG export as the source of truth — animation is a rendering option layered on top. That way the same Mermaid source can land as an animated hero on a landing page, a quietly-revealing diagram in the docs, and a printable static image in a PDF, all without rewriting the diagram itself.