# How to add light motion to a diagram that explains steps in order with diagram-design

Repo: [cathrynlavery/diagram-design](https://github.com/cathrynlavery/diagram-design) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Turn on optional motion so a process diagram reveals its steps one after another.

**Who it is for:** Technical writer or educator presenting a process (request flow, pipeline) where order matters

**The problem:** A static diagram shows all steps at once, which makes sequences harder to follow in a talk or doc.

**The outcome:** An HTML diagram with optional motion that walks a viewer through the steps in order, with a static version still available.

## Steps

1. Install the skill with: npx skills add cathrynlavery/diagram-design
2. Ask your agent to draw an ordered process and request optional motion for it.
3. Open the HTML file in a browser and check that the steps appear in the intended order.
4. Keep the static version as the default for places where motion is not wanted.

## Prompt to paste into your agent

```text
Use diagram-design to draw <process name> as an ordered diagram with the optional motion enabled. Confirm the step order is right and keep a static version alongside it.
```

## Caveat

The README says static HTML is the default and motion is optional for ordered explanations only, so it will not suit every diagram type.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/cathrynlavery-diagram-design/add-motion-to-ordered-explanations/