diagram-design: Draw branded diagrams with your agent

What it does

Diagram Design is a set of instructions an AI coding assistant follows when it needs to make a diagram rather than merely describe one. The assistant chooses an appropriate diagram form, explains a visual plan, and writes one HTML file containing SVG — an editable graphic format that opens in a browser. The source covers architecture maps, timelines, comparison views, impact-versus-effort quadrants, and other common diagram jobs, and includes guidance for matching a website’s colours and fonts.

How to use it

Install the skill in an agent host that reads Agent Skills, then describe the subject, audience, and comparison or relationship you want to show. The input is your plain-language brief; the agent proposes a diagram direction and returns an editable HTML file containing the SVG graphic, which you can open in a browser and revise.

Common use cases

• Give a coding agent a system description and ask for an architecture map that makes the main components and connections readable.
• Turn a set of options into an impact-versus-effort quadrant for a planning discussion.
• Ask for a branded explainer with your chosen colours and fonts, then open the generated HTML to review or share it.