content / skill
Diagram Design
Draws 44 kinds of diagrams as one self-contained HTML and SVG file, in colors and fonts matched to your project or brand.
At a glance
- Purpose
- Draws 44 kinds of diagrams as one self-contained HTML and SVG file, in colors and fonts matched to your project or brand.
- Runs in
- Chat app with skills, Local agent with shell
- Operating systems
- macOS, Linux, Windows
- Needs
- Runtime: Not stated; Needs internet: Yes; Needs accounts or API keys beyond your agent: Not stated
- Files and data
- Reads files: Yes; Writes files: Yes; Sends data to other services: Not stated
- Tool type
- Skill
- Delivery
- From GitHub
- Version
- Latest on the main branch
- Access
- Code on GitHub
- Compatibility
- According to the README, the skill works with Cursor, Claude Code, Codex, GitHub Copilot, Gemini CLI, Cline, Windsurf, Amp, Factory Droid, Pi, Kiro, OpenCode, Zed, Warp, Roo, and Kilo.
- External costs
- The repository is MIT-licensed and states no price for itself. By default a diagram loads three fonts from Google Fonts over the network; choosing system fonts avoids that request. The README names no other paid service for the skill itself.
- Permissions
- The skills act through your coding agent with the access you give it. According to the README, the skill writes a local HTML file, loads fonts from Google Fonts by default unless you choose system fonts, and, when you onboard a brand, fetches the homepage of the website you name, shows a proposed change and writes the extracted colors and fonts to the skill's references/style-guide.md. It says saved brand profiles live in ~/.diagram-design/profiles/, and the cross-agent installer links or copies the skill into each agent skills folder you select.
- Usage terms
- MIT License, as stated in the repository. See its LICENSE file for the exact terms.
Code on GitHub
cathrynlavery/diagram-design
MITEditorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, and Pi. 44 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.
Topics: agent-skills claude-code codex data-visualization diagrams drawio mermaid svg
Public GitHub data fetched · 0 days old
Skill folders in this repository (1)
Folders that contain a SKILL.md file, from GitHub's file list on .
What it does
Diagram Design adds a skill to AI coding agents that draws diagrams. According to the README, you describe what you want, such as an architecture diagram or a quadrant chart, and the agent picks one of 44 diagram types and writes a single self-contained HTML file with inline SVG that opens directly in a browser.The README describes an editorial style rather than a generic template: nodes placed on a 4px grid, hairline strokes, no drop shadows, and one accent color reserved for the one or two things that matter most. It can also redraw an existing Mermaid, draw.io, or Excalidraw diagram in that style.
The README says an onboarding flow can fetch a website you name, extract its color palette and font stack, and map them to the skill's paper, ink, muted, and accent roles, after checking the ink-on-paper contrast against WCAG AA and proposing an adjusted value if it fails. Diagrams can also be exported to SVG or PNG, and the skill ships slash commands for exporting, importing, and managing brand profiles on hosts that support them.
Who it is for
Designers and engineers who want an AI coding agent to produce diagrams in a consistent, on-brand style instead of a generic template.Example tasks
Ask the agent for an architecture diagram of an app's frontend, backend, and database.Ask for a quadrant chart ranking projects by impact against effort.
Ask for a sequence diagram of a call that includes a token refresh step.
Onboard the skill to a website so new diagrams match that site's palette and fonts.
Import an existing Mermaid or draw.io diagram and redraw it in the skill's editorial style.