cathrynlavery/diagram-design

What it solves

This project provides a set of high-quality, editorial-style diagrams that can be generated by AI agents (like Claude Code, Codex, and GitHub Copilot) to replace generic, low-quality visual outputs. It eliminates the need for manual design tools like Figma or the "slop" of generic diagramming tools, allowing users to create brand-consistent visuals directly through natural language prompts.

How it works

It functions as a "skill" or plugin for various AI agent hosts. The system uses self-contained HTML and SVG files with no external dependencies or JavaScript. It separates semantic patterns (which describe the behavior of the diagram) from the layout grammars, allowing a wide variety of diagram types to be rendered. A key feature is its onboarding process, where the agent fetches a user's website to extract brand colors and typography, mapping them to semantic tokens (e.g., paper, ink, accent) to ensure every generated diagram matches the user's brand identity.

Who it’s for

Content creators, developers, and technical writers who need professional, brand-aligned architecture sketches, flowcharts, and data models without spending time in manual design software.

Highlights

• Extensive Library: Supports a vast array of types including Architecture, Sequence, State Machine, ER/Data Model, Sankey, Wardley maps, and Database schemas.
• Brand Integration: Automatically extracts colors and fonts from a provided URL to customize the visual style.
• **Zero Dependencies: Outputs static HTML/SVG that can be opened in any browser without a build step.
• Agent Compatible: Works across multiple platforms including Claude Code, Codex, GitHub Copilot, Factory Droid, and Pi.
• Accessibility: Includes automatic WCAG AA contrast checks and accessible SVG naming.