Diagram Title

--- name: Concept Diagrams slug: concept-diagrams category: Frontend description: Generate minimal SVG diagrams as self-contained HTML files with automatic light/dark mode. Ideal for educational visuals, process flows, and technical illustrations. github: "https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams" language: Python stars: 185 forks: 8 install: "npx degit https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams ~/.claude/skills/concept-diagrams" installs_to: ~/.claude/skills/concept-diagrams source_path: poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams/SKILL.md collection_size: 37 category_size: 567 collection_url: "https://dirskills.com/collections/HezaoHezao/poirot" added: 2026-08-11T07:20:44.062Z last_synced: 2026-08-11T07:20:44.062Z canonical_url: "https://dirskills.com/skills/concept-diagrams" --- # Concept Diagrams Generate minimal SVG diagrams as self-contained HTML files with automatic light/dark mode. Ideal for educational visuals, process flows, and technical illustrations. **Install:** ```bash npx degit https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams ~/.claude/skills/concept-diagrams ``` ## README # 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", "") ``` ## Diagram Types | Type | When | |------|------| | **Process flow** | Sequential steps, lifecycle, pipeline | | **Hub-spoke** | Central system + connected components (IoT, smart city) | | **Exploded layers** | Component breakdown, cross-section | | **Comparison** | Side-by-side, before/after | | **Cycle** | Circular process, feedback loop | | **Hierarchy** | Org chart, taxonomy, tree | | **Timeline** | Chronological events | ## Design System ### Philosophy - **Flat, minimal, no 3D effects** - **Semantic colors**: 9 color ramps for different element types - **Sentence-case typography**: not Title Case - **Automatic dark mode**: CSS `prefers-color-scheme` ### Color Ramps (light/dark aware) ```css :root { /* Primary elements */ --c-primary: #4A90D9; --c-secondary: #50C878; --c-accent: #F5A623; /* Semantic */ --c-input: #7B68EE; --c-output: #FF6B6B; --c-process: #4ECDC4; --c-data: #95E1D3; --c-control: #C4A7E7; --c-external: #DDD; /* Light mode (default) */ --bg: #FAFAFA; --text: #333; --border: #E0E0E0; } @media (prefers-color-scheme: dark) { :root { --bg: #1A1A2E; --text: #EEE; --border: #333; --c-external: #444; } } ``` ### SVG Structure ```html Diagram Title ``` ## Pitfalls - **Too much detail**: keep diagrams minimal. One concept per diagram. - **Inconsistent spacing**: use a grid (e.g., 50px increments) for alignment. - **No dark mode**: always include `prefers-color-scheme` media query. - **Font not embedded**: use system fonts (-apple-system, sans-serif) so the HTML works without external font files. - **SVG overflow**: set `viewBox` correctly so the diagram isn't clipped.