cathrynlavery/diagram-design

This project is a skill for AI coding assistants like Claude Code, Codex, and Pi that generates polished, editorial style diagrams instead of the generic rounded boxes these tools usually produce. The author, who writes online and runs a side business, got tired of asking an AI for a diagram and getting back something that looked nothing like the rest of her site, and did not want to spend thirty minutes fighting with Figma every time. So she built this instead. It covers 27 diagram types: architecture diagrams, flowcharts, sequence diagrams, state machines, entity relationship diagrams, timelines, swimlanes, quadrants, nested hierarchies, tree diagrams, org charts, venn diagrams, layer stacks, pyramids, radar charts, loops, bar and line charts, gantt charts, scatter plots, and several data pipeline specific layouts. Each diagram type comes in three static visual styles: minimal light, minimal dark, and full editorial. The output is self contained HTML and SVG files that open directly in a browser, with no build step, no JavaScript framework, and no external image files needed. The skill can also redraw existing draw.io or Mermaid diagrams into this cleaner format. You install it as a plugin inside Claude Code, Codex, or Pi using a short command that points at this GitHub repository, then the assistant can generate any of the 27 diagram types on request, matching your brand style by reading your website. It is aimed at anyone who writes documentation, technical explanations, or content and wants diagrams that look designed rather than auto generated, without hiring a designer or learning diagramming software.