How-to · Design & Creative · By Cathryn Lavery

How to use Diagram Design in your AI agent

Install and use the Diagram Design skill in Claude Code, Cursor, Codex, Gemini CLI, OpenCode, and Windsurf — with sample prompts.

What you'll get

Diagram Design makes clean, editorial-style diagrams as a single web page you can open by double-clicking. It covers 45 types, including flowcharts, timelines, org charts, quadrants, funnels, customer journey maps, Gantt charts, and Sankey diagrams. It can pick up your brand colors and fonts from your website, and it can redraw messy draw.io, Mermaid, or Excalidraw diagrams so they look presentable.

Step 1 — Get the skill source URL

The Diagram Design skill lives at:

Open ↗

Step 2 — Add it to your AI agent

Copy one of these prompts and paste it into your AI tool. The agent will fetch and install the skill for you.

Claude Code

Add the agent skill from https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design to my project.

Cursor

Install this agent skill: https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design

Codex

Add this skill to .codex/skills/: https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design

Gemini CLI

Add the skill at https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design to my .gemini/skills/ directory.

OpenCode

Install this agent skill from https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design

Windsurf

Add this skill: https://github.com/cathrynlavery/diagram-design/tree/main/skills/diagram-design

Step 3 — Try these prompts

Once the skill is installed, ask your AI things like:

  • You need a quadrant of projects by impact versus effort for a planning meeting
  • You want a customer journey map or service blueprint for a strategy deck
  • You have an ugly flowchart and want it to look professional
  • You want every diagram your team makes to match your brand

What this skill does

  • Draws 45 diagram and chart types, from flowcharts to user journeys and 2x2 matrices
  • Matches your brand by pulling colors and fonts from your website
  • Redraws existing draw.io, Mermaid, or Excalidraw diagrams in a cleaner style
  • Sizes diagrams for docs, slides, social posts, or print
  • Exports to PNG or SVG when you ask
SkillDiagram Design
Made byCathryn Lavery
CategoryDesign & Creative
SourceView original ↗