Diagram Design: diagrams that match your brand

About this Skill

Diagram Design gives an AI agent a shared design system and references for choosing and laying out diagrams. Describe the content and destination, and the agent writes HTML with inline SVG. The project documents 45 visual types, with light, dark, and editorial variants, plus optional motion. Its design favors restrained accents, clear typography, and small, focused diagrams.

Why we picked it

A useful choice when a diagram needs a consistent visual style for a blog, presentation, or product explanation. The project combines layout guidance, brand tokens, and import/export workflows. This listing links to Cathryn Lavery's original repository; the animation is the author's demonstration.

What it helps with

• Explain an application's components, connections, deployment, or data flow.
• Prepare process, sequence, prioritization, and quantitative diagrams for an article or presentation.
• Redraw an existing Mermaid, draw.io, or Excalidraw source in a consistent brand style.
• Reuse different client palettes and typography through saved brand profiles.

Outputs and visual style

The main deliverable is an HTML file containing inline SVG. The author also provides SVG extraction and PNG rendering workflows. Architecture, flowcharts, sequence diagrams, timelines, organizational structures, and charts share the same typography and color roles.

Keep the relationship structure small enough to read. For dense systems, ask for an overview and a separate detail diagram. SVG and PNG exports contain the diagram itself; the surrounding editorial header and cards are excluded.

Official repository and installation guideDiagram Design Skill instructionsOfficial SVG and PNG export guide

Install the original skill

The cross-agent installer finds skills/diagram-design/SKILL.md and installs its supporting references, assets, and scripts into the host roots you select. Hosts with a native plugin marketplace can use the author's corresponding marketplace instructions for plugin commands and updates.

Official repository and installation guide

Make your first diagram

1. Give the agent a concrete brief

   For example: create an architecture diagram of a web app with a frontend, API, Postgres database, and Redis cache. Specify the reader and whether the output is for a document or a slide.

2. Choose a brand setup

   On first use, the skill asks whether to match a website, use supplied design tokens, load a saved profile, or keep its default style. Website onboarding proposes colors and fonts for review.

3. Review the plan and open the output

   The agent chooses a visual type and size, then writes the HTML. Open it in a browser and check labels, connections, spacing, and readability before publishing or exporting.

Official repository and installation guideDiagram Design Skill instructions

Redraw existing diagram sources

Give the agent a draw.io source, a Mermaid file or Markdown block, or an Excalidraw scene. It preserves the meaningful components and relationships while rebuilding the visual layout. Choose a destination size, a detail level, and an audience; the import workflow reports content that was merged or omitted.

Excalidraw import expects .excalidraw or .excalidraw.json scene data, rather than a PNG or SVG export. A redraw is a new presentation of the source; it is not a round-trip editor for the original canvas format.

Official repository and installation guide

Choose the workflow for your task

The output is HTML and SVG that you can revise with your agent or edit in code. Diagram Design does not provide a drag-and-drop diagram editor. If your diagram changes frequently in a Git repository and textual diffs matter, consider maintaining a Mermaid source alongside the published visual.

The author's documentation and preview demonstrate the available workflow. This SkillHey listing does not certify that every supported agent, diagram type, or export path has been independently tested.

Official repository and installation guide

Before you use it

• Use an Agent Skills-compatible host with local file access. The common installation command uses npx; native plugin installation differs by host.
• Static HTML diagrams open in a browser without an application build. Default fonts load from Google Fonts; request system fonts when you need offline output.
• The documented PNG export uses Python and Playwright with Chromium. SVG-only export does not require rasterization.
• The skill is MIT-licensed and free to install. Your chosen agent or model provider may charge for usage; review the resulting diagram for layout and factual accuracy.

Supported agents