What is Diagram Design?
Diagram Design is an agent skill for turning natural-language requests into diagrams for technical documentation, articles, and presentations. It covers architecture, sequences, flowcharts, data models, deployment layouts, and quantitative charts. The agent selects a layout and writes a self-contained HTML file with inline SVG that opens directly in a browser.
The skill installs into compatible Agent Skills hosts, with native plugin packages available for several clients. Its design system uses semantic color roles, typography rules, orthogonal connectors, and layout budgets. Brand onboarding extracts colors and fonts from a website or local design material, while named profiles let separate projects retain different visual identities.
Existing draw.io, Mermaid, and Excalidraw files can be redrawn in this design system, with a record of content merged, collapsed, or omitted. Output quality and layout consistency depend on the model. Later changes require another agent request or direct SVG editing, rather than a drag-and-drop canvas or a dedicated diagram source language.
Key capabilities
- Diagram generation Produces architecture diagrams, process flows, sequences, data models, charts, and other visual types from natural-language requests.
- Brand profiles Extracts palette and typography tokens and saves named profiles for reuse across projects.
- Source redrawing Imports draw.io, Mermaid, and Excalidraw content while replacing the original styling and layout.
- File export Extracts standalone SVG or rasterizes diagrams to PNG through Playwright and Chromium.
- Output validation Includes self-checks and repository validation tools for markup, accessibility, rendering, and geometry.
- Offline output Supports system fonts to remove the generated diagram's default Google Fonts requests.
Where Diagram Design fits
Diagram Design fits the publication stage of technical communication: illustrating an application architecture, preparing a migration overview, or redrawing an existing diagram for a presentation. Import settings control destination size, detail, and audience wording, but source coordinates, fonts, and colors are not preserved. The import fidelity record needs review before the result is used.
Before deployment, teams need to confirm host discovery, the chosen installation's update mechanism, and local export dependencies. PNG export requires Playwright and Chromium. Brand extraction and default font loading introduce network access; system fonts remove font requests from generated files, but do not establish that the AI host itself operates offline.
Install
npx skills add cathrynlavery/diagram-designReviews of Diagram Design
Be the first to share your experience with Diagram Design.
Write a review
Loading review form…