concept-diagrams
Minimal SVG diagrams as standalone HTML files.
npx skills add HezaoHezao/poirot --skill concept-diagrams --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Concept Diagrams ## Overview Generate production-quality SVG diagrams with a unified flat, minimal design system. Output is a single self-contained HTML file that renders identically in any modern browser, with automatic light/dark mode. ## Scope **Best suited for:** - Physics setups, chemistry mechanisms, math curves, biology - Physical objects (aircraft, turbines, smartphones, mechanical watches) - Anatomy, cross-sections, exploded layer views - Floor plans, architectural conversions - Narrative journeys (lifecycle of X, process of Y) - Hub-spoke system integrations (smart city, IoT) - Educational / textbook-style visuals in any domain **Look elsewhere first for:** - Software/cloud architecture with dark tech aesthetic → use `architecture-diagram` - Hand-drawn whiteboard sketches → use an excalidraw-style tool ## Workflow 1. Decide on the diagram type (see below) 2. Lay out components using the Design System rules 3. Write the full HTML page with inline SVG + CSS 4. Save as a standalone `.html` file via `write_file` 5. User opens it directly in a browser — no server, no dependencies ``` write_file("diagram.html", "<full HTML with inline SVG + CSS>") ``` ## Diagram Types | Type
- Overview
- Scope
- Workflow
- Diagram Types
- Design System
- Philosophy
- Color Ramps (light/dark aware)
- SVG Structure
- Pitfalls
What does the concept-diagrams skill do?
Minimal SVG diagrams as standalone HTML files.
How do I install it?
Run `npx skills add HezaoHezao/poirot --skill concept-diagrams --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From HezaoHezao/poirot, a repository with 139 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.