Docs Diagrams

Read docs/styleguides/DIAGRAM.md first. It is the shape, color, and layout language. This skill is the process for applying it to an image that already exists.

Decide whether to convert

Answer in order. Stop at the first yes.

1. Is it a screenshot of a UI? → Keep the image. Mermaid draws graphs, not product surfaces.
2. Does meaning live in where things sit rather than what connects to what? → Keep the image. ELK places nodes automatically and will move them. The agents overview image, where tool, LLM, and memory sit deliberately beneath the agent, loses its point the moment a layout engine touches it.
3. Is it boxes joined by arrows, and would it survive being redrawn by someone who only read the node and edge labels? → Convert.