Diagram Design Skill: Branded Visuals for AI Agents

Where this fits

You're building an agent that needs to explain a system architecture to a stakeholder, document a security review, or generate a user journey map for a product spec. Hand-coding SVG is slow, and generic diagram tools produce ugly, unbranded output. The diagram-design skill turns a natural-language request into a polished, self-contained HTML/SVG/PNG diagram—with your company's fonts, colors, and visual language baked in.

Why agents benefit

• One skill, 39 visual types — from flowcharts to Wardley maps, Sankey diagrams, and UML class diagrams. The agent picks the right layout for the task without extra tooling.
• Brand token onboarding — point the skill at a website URL, and it extracts colors, typography, and spacing to apply to every diagram. No manual style config.
• Redraw existing sources — pass in .drawio or Mermaid .mmd files and get a cleaner, resized, or restyled version. Perfect for modernizing legacy documentation.
• Accessible and motion-aware — semantic patterns, callouts, and optional sketchy styling make output suitable for presentations, docs, or interactive demos.
• Self-contained output — each diagram is a single HTML file with inline SVG/CSS, so it's easy to embed, share, or convert to PNG without dependencies.

Practical scenarios

Security architecture review

Your agent audits a cloud deployment and needs to visualize the data flow, trust boundaries, and encryption layers. It calls diagram-design with a description of the network segments and security controls, producing a clear, color-coded architecture diagram that highlights risk areas for the report.

Onboarding documentation for a new service

When a developer asks for a sequence diagram of an OAuth flow, the agent generates a branded sequence diagram with callouts explaining each step. The output matches the company's design system, so it drops directly into internal wikis or slide decks.

Converting legacy Mermaid diagrams

A team has years of Mermaid diagrams in their repo but wants a consistent, modern look. The agent reads each .mmd file, redraws it with the current brand tokens, and outputs HTML files that are easier to maintain and more visually appealing.

Add it to your agent workflow

Install the skill with:

npx skills add cathrynlavery/diagram-design --skill diagram-design

Then invoke it in your agent's tool loop. For example, to create a flowchart:

Use diagram-design to create a flowchart titled "Payment Processing" with nodes for auth, validation, and settlement. Apply the brand tokens from https://example.com. Output as HTML.

The skill handles the rest—selecting the right template, applying styles, and returning a ready-to-use file.

Compare before adopting

Before committing, evaluate the skill against alternatives like Mermaid CLI, PlantUML, or hand-rolled SVG generators. Check the quality of output for your specific diagram types—some tools excel at flowcharts but fail at radar charts. Review the maintenance freshness: the skill is actively updated (version 2.6) and has a large star count (24k+), which signals community trust. Also consider workflow fit: does it integrate with your agent's existing file handling and brand token storage? Test it on a few real diagrams to see if the editorial design system matches your needs.

Why it is worth tracking

This skill stands out for its breadth and polish. The 39 diagram types, brand onboarding, and source redrawing capabilities are rare in a single package. With 24,192 stars and an active author, it's a strong candidate for any agent that produces visual artifacts. Track it now, and evaluate it when your agent needs to move beyond plain text into branded, professional diagrams. For a deeper look, see the skill page on OpenAgentSkill.