LessAI ToolsAI plugin directory
← Back to plugins

Task skills

Diagram Design

cathrynlavery/diagram-design

Turn plain-language explanations into architecture, process, and timeline diagrams.

Get started ↓

What is Diagram Design?

Prepared by LessAI Tools from public project documentation

For developers and product teams explaining systems, processes, or plans. Diagram Design supplies diagram layouts and visual rules so an AI assistant can create a self-contained HTML file with SVG graphics, optionally matching a supplied website's colors and fonts. It requires an Agent Skills-compatible assistant. The skill is MIT-licensed; assistant or model usage is billed separately where applicable. Image export workflows may require browser tools.

Diagram Design setup documentation

Setup requirements have not been reviewed yet. Check the project’s setup guide.

Setup and usage guide ↗

Based on public documentation; not individually installed and tested here.

Diagram Design use cases

  • Create architecture diagrams, flowcharts, and timelines
  • Match an existing brand's colors and fonts
  • Produce HTML and SVG for viewing in a browser

Official project & documentation

View source code ↗Project website ↗Setup and usage guide ↗

The project’s original description

Editorial 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.

Alternatives to Diagram Design for similar tasks

Matches the main use case first, then shared tasks and stars. Setup methods may differ.

  • Anthropic Skills · Frontend Design — Plan, build and critique an interface with deliberate layout, typography and interaction choices.
  • Taste Skill — Give a public-facing website a deliberate visual direction, then check the result in a browser.
  • OpenMontage — Give a coding assistant a guided workflow for research, scripts, media, and video assembly.

Sources and ranking

This directory lists AI development plugins with public source code and a clear purpose. Browse by task, then open an introduction to learn what a project does, who it is for, and what you need to get started. It covers selected projects, not every AI plugin.

How do the three plugin types differ?

Tool connections (MCP) let AI assistants use external tools such as browsers, code repositories and databases. MCP is the protocol used for these connections.

Reusable skills give a compatible AI assistant instructions and guidance for a particular task.

Editor plugins run inside the software you use to write code, adding AI chat, completions or suggested edits.

How does “Most starred” work?

Projects are sorted by their total GitHub stars. Stars indicate interest; they are not downloads, active users or quality scores. A skill pack counts as one project. Daily star growth is not shown without historical records.

What does “Recently updated” mean?

It uses the most recent code push, which may not be a new release. The 7-day filter checks that project update time; ranking still uses all-time stars. Each introduction shows when its star count was collected. Failed updates keep the last saved data.

Introductions are based on public project documentation. These projects have not each been installed and tested here. Check the project documentation for setup, compatibility and service costs. Refreshing this list only reads saved data; it does not start collection.

UTC+8

Pass a useful find along

Pick a draft and a platform. You can edit before posting.