diagram-design: Agent Skill Generating 39 Clean Architecture and Business Diagrams

An overview of diagram-design, an open-source AI agent skill that creates 39 clean business and technical diagrams as standalone HTML with SVG export.

tau · September 11, 2026

#diagram-design #AgentSkills #ClaudeCode #Codex #Architecture #DevTools #OpenSource #Diagrams

diagram-design: Agent Skill Generating 39 Clean Architecture and Business Diagrams

An open-source skill named 'diagram-design' (cathrynlavery/diagram-design), authored by Cathryn Lavery, has been introduced to help developers generate 39 types of business and software architecture diagrams directly within terminal-based AI coding agent environments like Claude Code, Codex, and Pi. The tool turns conversational instructions into standalone, single-file HTML diagrams rendered in any modern web browser, featuring automated brand style extraction, slide-ready PNG exports, and Figma-compatible SVG generation.

Example layout of 39 business and architecture diagram types generated with the diagram-design AI agent skill

Image source: @yozm_it via X

Visualizing system architectures, user interaction flows, and project roadmaps is a fundamental requirement across software engineering and product planning. However, conventional manual drawing tools require substantial time, while generic AI diagram outputs often suffer from visual clutter, exaggerated drop shadows, and unrefined formatting. By contrast, diagram-design prioritizes clean editorial aesthetics, combining restrained palettes, sharp typography, and structured spatial hierarchy to deliver production-grade technical illustrations on demand.

39 Diagram Types and Standalone Single-HTML Architecture

The core capability of diagram-design lies in its extensive catalog of 39 business and engineering diagram types tailored for practical documentation workflows.

  • Comprehensive Diagram Catalog: The skill covers the full spectrum of day-to-day visual planning assets. These include software architecture maps showing connections across frontends, backends, and databases, operational flowcharts tracing logic and decision paths, milestone timelines, hierarchical pyramids for concept tiers, and Gantt charts for tracking project phases and deliverables.
  • Self-Contained Single-HTML Output: Diagrams are compiled into standalone HTML files that open natively in any browser with a simple double-click. By packaging layout logic and styling in an isolated file without requiring local dev servers or external build configurations, the output makes sharing, inspecting, and reviewing architecture designs frictionless across teams.
  • Editorial Design Discipline: Rather than defaulting to heavy 3D bevels, garish gradients, or busy decorative artifacts commonly seen in automated diagram generators, diagram-design adheres to a minimalist editorial aesthetic. Clean lines, controlled whitespace, and clear typographic hierarchy ensure that generated visuals are immediately suitable for both technical documentation and executive slide decks.

Automated Brand Theme Extraction and Dual Export Workflows

Adapting generic diagrams to conform with corporate design systems or deck styling usually requires painstaking manual color adjustments. diagram-design automates this process through built-in brand inspection.

  • Website-Driven Brand Theming: Users can supply a target website URL directly to the agent. The skill analyzes the target page's styling rules to automatically extract signature color palettes and typography pairings, applying matching theme tokens across the generated diagram to ensure cohesive visual branding.
  • High-Resolution PNG for Slide Decks: The skill supports direct PNG exports, allowing engineers and technical leads to paste crisp visual assets directly into Keynote, PowerPoint, or Google Slides presentations without manual screenshotting or resolution degradation.
  • Vector SVG Export for Figma Workflows: For teams requiring advanced graphic integration, diagram-design exports clean vector SVG files. This bridges the gap between terminal engineering workflows and design teams, allowing designers to import assets straight into Figma for fine-grained vector manipulation, design library alignment, and marketing asset preparation.

AI Coding Agent Integration and Practical Considerations

diagram-design functions as a modular skill integrated directly into popular terminal AI coding companions such as Claude Code, Codex, and Pi. The operational interface relies entirely on conversational natural-language prompting.

  • Conversational Architecture Drafting: Users can initiate complex diagram generation with plain-language prompts—such as "Draw my app structure with frontend, backend, and DB"—prompting the agent to identify subsystem relationships and output a structured, publication-ready HTML diagram in seconds.
  • Prerequisite Agent Environments: Because the project is architected as an AI agent skill rather than a standalone desktop application, users must have an operational terminal coding agent environment configured prior to installation.
  • Recommended Vector Editing Workflow: While single HTML files provide immediate browser previewing, granular manipulation of individual vector paths or geometric nodes is best handled outside the browser. When extensive custom adjustments are required, exporting to SVG and refining the diagram inside a dedicated vector tool such as Figma remains the recommended production practice.

Sources