diagram-design

Diagram Design is a collection of 39 editorial-quality diagram types delivered as self-contained HTML and SVG files, designed as a skill or plugin for AI coding assistants including Claude Code, Codex, GitHub Copilot, Factory Droid, Pi, Kiro, and OpenCode. The project's core philosophy is that diagrams should match the visual quality of the surrounding content rather than looking like generic rounded-box templates. Each diagram type ships in three static variants: minimal light, minimal dark, and full-editorial. All output is self-contained with no build step, JavaScript, or external image dependencies. The 39 types cover a wide range of use cases including architecture diagrams, flowcharts, sequence diagrams, state machines, ER/data models, timelines, swimlanes, quadrants, radar charts, loops/flywheels, nested hierarchies, trees, org charts, layer stacks, Venn diagrams, pyramids/funnels, bar charts, treemaps, line charts, Gantt charts, scatter plots, high-level stacks, processes, medallion architectures, data flows, data platform integrations, security matrices, Sankey diagrams, fishbone diagrams, Wardley maps, Kanban boards, user journeys, deployment diagrams, dependency graphs, UML class diagrams, story maps, database schemas, polar charts, and waterfall charts. A key differentiator is the brand-matching onboarding flow. The skill can fetch a website's homepage, extract the dominant color palette and font stack, map detected values to semantic roles (paper, ink, muted, accent, link), and apply them across every diagram. It performs WCAG AA contrast checks automatically and emits a fidelity receipt documenting sampled URLs, exact color roles, font families, and any fallbacks. Profiles can be saved and shared across multiple client projects using a `.diagram-design` marker file. The tool also supports importing existing diagrams from draw.io, Mermaid, or Excalidraw and redrawing them in the Diagram Design system at a chosen format, size, and detail level. Semantic patterns describe behavior separately from layout, so concepts like queues, policy traces, or trust boundaries can use the nearest existing type without expanding the type count. Optional accessible motion is available for ordered explanations, with reduced-motion support and a static default. Accessibility is built in by default: every SVG includes role="img", aria-labelledby, and title/desc elements with per-diagram ID prefixes to prevent conflicts when multiple diagrams are inlined on one page. Installation is available through each host's native plugin marketplace or via direct Git clone for editable installs. The shared skill lives at `skills/diagram-design/` and is compatible across all supported Agent Skills hosts.