Генерация учебных SVG-диаграмм в HTML

★ 7.1 · design

concept-diagrams is a Claude Code skill that generates flat, minimal educational SVG diagrams and packages them into a single self-contained HTML file that renders in any modern browser with no server or dependencies required. The skill relies on a built-in design system featuring 9 color palettes with 7 stops each, two fixed type sizes, strict spacing rules, and automatic light/dark mode adaptation via CSS classes — no per-mode SVG needed. It covers physics setups, chemistry mechanisms, biology, anatomy cross-sections, architectural floor plans, process lifecycles, hub-spoke system integrations, and quantitative charts. The workflow has Claude pick a diagram type, lay out elements according to the design system, paste the SVG into templates/template.html, and save the output as a standalone .html file. For dedicated infrastructure architecture or hand-drawn whiteboard aesthetics, the related skills architecture-diagram and excalidraw are recommended instead.