yilsem/aiturk-hermes-ide
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Import AITURK IDE 1.0.0-beta.1 from Hermes 63279301; preserve MIT license

Browse Source
This commit is contained in:
yilsem
2026-09-05 13:26:46 +03:00
commit 03634b1ca3
11340 changed files with 3442369 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
optional-skills/creative/concept-diagrams/SKILL.md
+362
View File
@@ -0,0 +1,362 @@
---
name: concept-diagrams
description: Generate flat, minimal educational SVG visuals as HTML.
version: 0.1.0
author: v1k22 (original PR), ported into hermes-agent
license: MIT
dependencies: []
platforms: [linux, macos, windows]
metadata:
hermes:
tags: [diagrams, svg, visualization, education, physics, chemistry, engineering]
related_skills: [architecture-diagram, excalidraw]
---
# Concept Diagrams
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, cells)
- 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 networks, electricity grids)
- Educational / textbook-style visuals in any domain
- Quantitative charts (grouped bars, energy profiles)
**Look elsewhere first for:**
- Dedicated software / cloud infrastructure architecture with a dark tech aesthetic (consider `architecture-diagram` if available)
- Hand-drawn whiteboard sketches (consider `excalidraw` if available)
- Animated explainers or video output (consider an animation skill)
If a more specialized skill is available for the subject, prefer that. If none fits, this skill can serve as a general-purpose SVG diagram fallback — the output will carry the clean educational aesthetic described below, which is a reasonable default for almost any subject.
## Workflow
1. Decide on the diagram type (see Diagram Types below).
2. Lay out components using the Design System rules.
3. Write the full HTML page using `templates/template.html` as the wrapper — paste your SVG where the template says `<!-- PASTE SVG HERE -->`.
4. Save as a standalone `.html` file (for example `~/my-diagram.html` or `./my-diagram.html`).
5. User opens it directly in a browser — no server, no dependencies.
Optional: if the user wants a browsable gallery of multiple diagrams, see "Local Preview Server" at the bottom.
Load the HTML template:
```
skill_view(name="concept-diagrams", file_path="templates/template.html")
```
The template embeds the full CSS design system (`c-*` color classes, text classes, light/dark variables, arrow marker styles). The SVG you generate relies on these classes being present on the hosting page.
---
## Design System
### Philosophy
- **Flat**: no gradients, drop shadows, blur, glow, or neon effects.
- **Minimal**: show the essential. No decorative icons inside boxes.
- **Consistent**: same colors, spacing, typography, and stroke widths across every diagram.
- **Dark-mode ready**: all colors auto-adapt via CSS classes — no per-mode SVG.
### Color Palette
9 color ramps, each with 7 stops. Put the class name on a `<g>` or shape element; the template CSS handles both modes.
| Class | 50 (lightest) | 100 | 200 | 400 | 600 | 800 | 900 (darkest) |
|------------|---------------|---------|---------|---------|---------|---------|---------------|
| `c-purple` | #EEEDFE | #CECBF6 | #AFA9EC | #7F77DD | #534AB7 | #3C3489 | #26215C |
| `c-teal` | #E1F5EE | #9FE1CB | #5DCAA5 | #1D9E75 | #0F6E56 | #085041 | #04342C |
| `c-coral` | #FAECE7 | #F5C4B3 | #F0997B | #D85A30 | #993C1D | #712B13 | #4A1B0C |
| `c-pink` | #FBEAF0 | #F4C0D1 | #ED93B1 | #D4537E | #993556 | #72243E | #4B1528 |
| `c-gray` | #F1EFE8 | #D3D1C7 | #B4B2A9 | #888780 | #5F5E5A | #444441 | #2C2C2A |
| `c-blue` | #E6F1FB | #B5D4F4 | #85B7EB | #378ADD | #185FA5 | #0C447C | #042C53 |
| `c-green` | #EAF3DE | #C0DD97 | #97C459 | #639922 | #3B6D11 | #27500A | #173404 |
| `c-amber` | #FAEEDA | #FAC775 | #EF9F27 | #BA7517 | #854F0B | #633806 | #412402 |
| `c-red` | #FCEBEB | #F7C1C1 | #F09595 | #E24B4A | #A32D2D | #791F1F | #501313 |
#### Color Assignment Rules
Color encodes **meaning**, not sequence. Never cycle through colors like a rainbow.
- Group nodes by **category** — all nodes of the same type share one color.
- Use `c-gray` for neutral/structural nodes (start, end, generic steps, users).
- Use **2-3 colors per diagram**, not 6+.
- Prefer `c-purple`, `c-teal`, `c-coral`, `c-pink` for general categories.
- Reserve `c-blue`, `c-green`, `c-amber`, `c-red` for semantic meaning (info, success, warning, error).
Light/dark stop mapping (handled by the template CSS — just use the class):
- Light mode: 50 fill + 600 stroke + 800 title / 600 subtitle
- Dark mode: 800 fill + 200 stroke + 100 title / 200 subtitle
### Typography
Only two font sizes. No exceptions.
| Class | Size | Weight | Use |
|-------|------|--------|-----|
| `th` | 14px | 500 | Node titles, region labels |
| `ts` | 12px | 400 | Subtitles, descriptions, arrow labels |
| `t` | 14px | 400 | General text |
- **Sentence case always.** Never Title Case, never ALL CAPS.
- Every `<text>` MUST carry a class (`t`, `ts`, or `th`). No unclassed text.
- `dominant-baseline="central"` on all text inside boxes.
- `text-anchor="middle"` for centered text in boxes.
**Width estimation (approx):**
- 14px weight 500: ~8px per character
- 12px weight 400: ~6.5px per character
- Always verify: `box_width >= (char_count × px_per_char) + 48` (24px padding each side)
### Spacing & Layout
- **ViewBox**: `viewBox="0 0 680 H"` where H = content height + 40px buffer.
- **Safe area**: x=40 to x=640, y=40 to y=(H-40).
- **Between boxes**: 60px minimum gap.
- **Inside boxes**: 24px horizontal padding, 12px vertical padding.
- **Arrowhead gap**: 10px between arrowhead and box edge.
- **Single-line box**: 44px height.
- **Two-line box**: 56px height, 18px between title and subtitle baselines.
- **Container padding**: 20px minimum inside every container.
- **Max nesting**: 2-3 levels deep. Deeper gets unreadable at 680px width.
### Stroke & Shape
- **Stroke width**: 0.5px on all node borders. Not 1px, not 2px.
- **Rect rounding**: `rx="8"` for nodes, `rx="12"` for inner containers, `rx="16"` to `rx="20"` for outer containers.
- **Connector paths**: MUST have `fill="none"`. SVG defaults to `fill: black` otherwise.
### Arrow Marker
Include this `<defs>` block at the start of **every** SVG:
```xml
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
```
Use `marker-end="url(#arrow)"` on lines. The arrowhead inherits the line color via `context-stroke`.
### CSS Classes (Provided by the Template)
The template page provides:
- Text: `.t`, `.ts`, `.th`
- Neutral: `.box`, `.arr`, `.leader`, `.node`
- Color ramps: `.c-purple`, `.c-teal`, `.c-coral`, `.c-pink`, `.c-gray`, `.c-blue`, `.c-green`, `.c-amber`, `.c-red` (all with automatic light/dark mode)
You do **not** need to redefine these — just apply them in your SVG. The template file contains the full CSS definitions.
---
## SVG Boilerplate
Every SVG inside the template page starts with this exact structure:
```xml
<svg width="100%" viewBox="0 0 680 {HEIGHT}" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<!-- Diagram content here -->
</svg>
```
Replace `{HEIGHT}` with the actual computed height (last element bottom + 40px).
### Node Patterns
**Single-line node (44px):**
```xml
<g class="node c-blue">
<rect x="100" y="20" width="180" height="44" rx="8" stroke-width="0.5"/>
<text class="th" x="190" y="42" text-anchor="middle" dominant-baseline="central">Service name</text>
</g>
```
**Two-line node (56px):**
```xml
<g class="node c-teal">
<rect x="100" y="20" width="200" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="200" y="38" text-anchor="middle" dominant-baseline="central">Service name</text>
<text class="ts" x="200" y="56" text-anchor="middle" dominant-baseline="central">Short description</text>
</g>
```
**Connector (no label):**
```xml
<line x1="200" y1="76" x2="200" y2="120" class="arr" marker-end="url(#arrow)"/>
```
**Container (dashed or solid):**
```xml
<g class="c-purple">
<rect x="40" y="92" width="600" height="300" rx="16" stroke-width="0.5"/>
<text class="th" x="66" y="116">Container label</text>
<text class="ts" x="66" y="134">Subtitle info</text>
</g>
```
---
## Diagram Types
Choose the layout that fits the subject:
1. **Flowchart** — CI/CD pipelines, request lifecycles, approval workflows, data processing. Single-direction flow (top-down or left-right). Max 4-5 nodes per row.
2. **Structural / Containment** — Cloud infrastructure nesting, system architecture with layers. Large outer containers with inner regions. Dashed rects for logical groupings.
3. **API / Endpoint Map** — REST routes, GraphQL schemas. Tree from root, branching to resource groups, each containing endpoint nodes.
4. **Microservice Topology** — Service mesh, event-driven systems. Services as nodes, arrows for communication patterns, message queues between.
5. **Data Flow** — ETL pipelines, streaming architectures. Left-to-right flow from sources through processing to sinks.
6. **Physical / Structural** — Vehicles, buildings, hardware, anatomy. Use shapes that match the physical form — `<path>` for curved bodies, `<polygon>` for tapered shapes, `<ellipse>`/`<circle>` for cylindrical parts, nested `<rect>` for compartments. See `references/physical-shape-cookbook.md`.
7. **Infrastructure / Systems Integration** — Smart cities, IoT networks, multi-domain systems. Hub-spoke layout with central platform connecting subsystems. Semantic line styles (`.data-line`, `.power-line`, `.water-pipe`, `.road`). See `references/infrastructure-patterns.md`.
8. **UI / Dashboard Mockups** — Admin panels, monitoring dashboards. Screen frame with nested chart/gauge/indicator elements. See `references/dashboard-patterns.md`.
For physical, infrastructure, and dashboard diagrams, load the matching reference file before generating — each one provides ready-made CSS classes and shape primitives.
---
## Validation Checklist
Before finalizing any SVG, verify ALL of the following:
1. Every `<text>` has class `t`, `ts`, or `th`.
2. Every `<text>` inside a box has `dominant-baseline="central"`.
3. Every connector `<path>` or `<line>` used as arrow has `fill="none"`.
4. No arrow line crosses through an unrelated box.
5. `box_width >= (longest_label_chars × 8) + 48` for 14px text.
6. `box_width >= (longest_label_chars × 6.5) + 48` for 12px text.
7. ViewBox height = bottom-most element + 40px.
8. All content stays within x=40 to x=640.
9. Color classes (`c-*`) are on `<g>` or shape elements, never on `<path>` connectors.
10. Arrow `<defs>` block is present.
11. No gradients, shadows, blur, or glow effects.
12. Stroke width is 0.5px on all node borders.
---
## Output & Preview
### Default: standalone HTML file
Write a single `.html` file the user can open directly. No server, no dependencies, works offline. Pattern:
```python
# 1. Load the template
template = skill_view("concept-diagrams", "templates/template.html")
# 2. Fill in title, subtitle, and paste your SVG
html = template.replace(
"<!-- DIAGRAM TITLE HERE -->", "SN2 reaction mechanism"
).replace(
"<!-- OPTIONAL SUBTITLE HERE -->", "Bimolecular nucleophilic substitution"
).replace(
"<!-- PASTE SVG HERE -->", svg_content
)
# 3. Write to a user-chosen path (or ./ by default)
write_file("./sn2-mechanism.html", html)
```
Tell the user how to open it:
```
# macOS
open ./sn2-mechanism.html
# Linux
xdg-open ./sn2-mechanism.html
```
### Optional: local preview server (multi-diagram gallery)
Only use this when the user explicitly wants a browsable gallery of multiple diagrams.
**Rules:**
- Bind to `127.0.0.1` only. Never `0.0.0.0`. Exposing diagrams on all network interfaces is a security hazard on shared networks.
- Pick a free port (do NOT hard-code one) and tell the user the chosen URL.
- The server is optional and opt-in — prefer the standalone HTML file first.
Recommended pattern (lets the OS pick a free ephemeral port):
```bash
# Put each diagram in its own folder under .diagrams/
mkdir -p .diagrams/sn2-mechanism
# ...write .diagrams/sn2-mechanism/index.html...
# Serve on loopback only, free port
cd .diagrams && python -c "
import http.server, socketserver
with socketserver.TCPServer(('127.0.0.1', 0), http.server.SimpleHTTPRequestHandler) as s:
print(f'Serving at http://127.0.0.1:{s.server_address[1]}/')
s.serve_forever()
" &
```
If the user insists on a fixed port, use `127.0.0.1:<port>` — still never `0.0.0.0`. Document how to stop the server (`kill %1` or `pkill -f "http.server"`).
---
## Examples Reference
The `examples/` directory ships 15 complete, tested diagrams. Browse them for working patterns before writing a new diagram of a similar type:
| File | Type | Demonstrates |
|------|------|--------------|
| `hospital-emergency-department-flow.md` | Flowchart | Priority routing with semantic colors |
| `feature-film-production-pipeline.md` | Flowchart | Phased workflow, horizontal sub-flows |
| `automated-password-reset-flow.md` | Flowchart | Auth flow with error branches |
| `autonomous-llm-research-agent-flow.md` | Flowchart | Loop-back arrows, decision branches |
| `place-order-uml-sequence.md` | Sequence | UML sequence diagram style |
| `commercial-aircraft-structure.md` | Physical | Paths, polygons, ellipses for realistic shapes |
| `wind-turbine-structure.md` | Physical cross-section | Underground/above-ground separation, color coding |
| `smartphone-layer-anatomy.md` | Exploded view | Alternating left/right labels, layered components |
| `apartment-floor-plan-conversion.md` | Floor plan | Walls, doors, proposed changes in dotted red |
| `banana-journey-tree-to-smoothie.md` | Narrative journey | Winding path, progressive state changes |
| `cpu-ooo-microarchitecture.md` | Hardware pipeline | Fan-out, memory hierarchy sidebar |
| `sn2-reaction-mechanism.md` | Chemistry | Molecules, curved arrows, energy profile |
| `smart-city-infrastructure.md` | Hub-spoke | Semantic line styles per system |
| `electricity-grid-flow.md` | Multi-stage flow | Voltage hierarchy, flow markers |
| `ml-benchmark-grouped-bar-chart.md` | Chart | Grouped bars, dual axis |
Load any example with:
```
skill_view(name="concept-diagrams", file_path="examples/<filename>")
```
---
## Quick Reference: What to Use When
| User says | Diagram type | Suggested colors |
|-----------|--------------|------------------|
| "show the pipeline" | Flowchart | gray start/end, purple steps, red errors, teal deploy |
| "draw the data flow" | Data pipeline (left-right) | gray sources, purple processing, teal sinks |
| "visualize the system" | Structural (containment) | purple container, teal services, coral data |
| "map the endpoints" | API tree | purple root, one ramp per resource group |
| "show the services" | Microservice topology | gray ingress, teal services, purple bus, coral workers |
| "draw the aircraft/vehicle" | Physical | paths, polygons, ellipses for realistic shapes |
| "smart city / IoT" | Hub-spoke integration | semantic line styles per subsystem |
| "show the dashboard" | UI mockup | dark screen, chart colors: teal, purple, coral for alerts |
| "power grid / electricity" | Multi-stage flow | voltage hierarchy (HV/MV/LV line weights) |
| "wind turbine / turbine" | Physical cross-section | foundation + tower cutaway + nacelle color-coded |
| "journey of X / lifecycle" | Narrative journey | winding path, progressive state changes |
| "layers of X / exploded" | Exploded layer view | vertical stack, alternating labels |
| "CPU / pipeline" | Hardware pipeline | vertical stages, fan-out to execution ports |
| "floor plan / apartment" | Floor plan | walls, doors, proposed changes in dotted red |
| "reaction mechanism" | Chemistry | atoms, bonds, curved arrows, transition state, energy profile |
optional-skills/creative/concept-diagrams/examples/apartment-floor-plan-conversion.md
+244
View File
@@ -0,0 +1,244 @@
# Apartment Floor Plan: 3 BHK to 4 BHK Conversion
An architectural floor plan showing a 1,500 sq ft apartment with proposed modifications to convert from 3 BHK to 4 BHK. Demonstrates architectural drawing conventions, room layouts, proposed changes with dotted lines, and area comparison tables.
## Key Patterns Used
- **Architectural floor plan**: Top-down view with walls, doors, windows
- **Proposed modifications**: Dotted red lines for new walls
- **Room color coding**: Light fills to distinguish room types
- **Circulation paths**: Arrows showing new access routes
- **Data table**: Before/after area comparison with highlighting
- **Architectural symbols**: North arrow, scale bar, door swings
## Diagram Type
This is an **architectural floor plan** with:
- **Plan view**: Top-down orthographic projection
- **Overlay technique**: Existing structure + proposed changes
- **Quantitative data**: Area measurements and comparison table
## Architectural Drawing Elements
### Wall Styles
```xml
<!-- Outer walls (thick) -->
<line class="wall" x1="0" y1="0" x2="560" y2="0"/>
<!-- Internal walls (thinner) -->
<line class="wall-thin" x1="180" y1="0" x2="180" y2="140"/>
<!-- Proposed new walls (dotted red) -->
<line class="proposed-wall" x1="125" y1="170" x2="125" y2="330"/>
```
```css
.wall { stroke: var(--text-primary); stroke-width: 6; fill: none; stroke-linecap: square; }
.wall-thin { stroke: var(--text-primary); stroke-width: 3; fill: none; }
.proposed-wall { stroke: #A32D2D; stroke-width: 4; fill: none; stroke-dasharray: 8 4; }
```
### Door Symbols
```xml
<!-- Door opening with swing arc -->
<rect x="150" y="137" width="25" height="6" fill="var(--bg-primary)"/>
<path class="door" d="M150,140 L150,165"/>
<path class="door-swing" d="M150,140 A25,25 0 0,0 175,140"/>
<!-- Sliding door (balcony) -->
<rect x="60" y="327" width="60" height="6" fill="var(--bg-primary)" stroke="var(--text-secondary)" stroke-width="1"/>
<line x1="60" y1="330" x2="90" y2="330" stroke="var(--text-secondary)" stroke-width="2"/>
<line x1="90" y1="330" x2="120" y2="330" stroke="var(--text-secondary)" stroke-width="2" stroke-dasharray="3 3"/>
<!-- Proposed door (dotted) -->
<rect x="143" y="292" width="22" height="6" fill="var(--bg-primary)" stroke="#A32D2D" stroke-width="1" stroke-dasharray="3 2"/>
<path d="M165,295 A22,22 0 0,0 165,273" stroke="#A32D2D" stroke-width="1" stroke-dasharray="3 2" fill="none"/>
```
```css
.door { stroke: var(--text-secondary); stroke-width: 1.5; fill: none; }
.door-swing { stroke: var(--text-tertiary); stroke-width: 1; fill: none; stroke-dasharray: 3 2; }
```
### Window Symbols
```xml
<!-- Window with glass indication -->
<rect class="window" x="-3" y="30" width="6" height="50"/>
<line class="window-glass" x1="0" y1="35" x2="0" y2="75"/>
<!-- Horizontal window (top wall) -->
<rect class="window" x="220" y="-3" width="60" height="6"/>
<line class="window-glass" x1="225" y1="0" x2="275" y2="0"/>
```
```css
.window { stroke: var(--text-primary); stroke-width: 1; fill: var(--bg-primary); }
.window-glass { stroke: #378ADD; stroke-width: 2; fill: none; }
```
### Room Fills
```xml
<!-- Different colors for room types -->
<rect class="room-master" x="3" y="3" width="174" height="134" rx="2"/>
<rect class="room-bed2" x="183" y="3" width="134" height="104" rx="2"/>
<rect class="room-living" x="3" y="173" width="554" height="154" rx="2"/>
<rect class="room-kitchen" x="443" y="3" width="114" height="104" rx="2"/>
<rect class="room-bath" x="183" y="113" width="54" height="54" rx="2"/>
<!-- Proposed new room (highlighted) -->
<rect class="room-new" x="3" y="223" width="120" height="104"/>
```
```css
.room-master { fill: rgba(206, 203, 246, 0.3); } /* purple tint */
.room-bed2 { fill: rgba(159, 225, 203, 0.3); } /* teal tint */
.room-bed3 { fill: rgba(250, 199, 117, 0.3); } /* amber tint */
.room-living { fill: rgba(245, 196, 179, 0.3); } /* coral tint */
.room-kitchen { fill: rgba(237, 147, 177, 0.3); } /* pink tint */
.room-bath { fill: rgba(133, 183, 235, 0.3); } /* blue tint */
.room-new { fill: rgba(163, 45, 45, 0.15); } /* red tint for proposed */
```
### Support Fixtures
```xml
<!-- Kitchen counter hint -->
<rect x="450" y="15" width="50" height="25" fill="none" stroke="var(--text-tertiary)" stroke-width="0.5" rx="2"/>
<text class="tx" x="475" y="30" text-anchor="middle">Counter</text>
<!-- Balcony (dashed outline) -->
<rect class="balcony-fill" x="3" y="333" width="200" height="50"/>
```
```css
.balcony { fill: none; stroke: var(--text-secondary); stroke-width: 2; stroke-dasharray: 6 3; }
.balcony-fill { fill: rgba(93, 202, 165, 0.1); }
```
### Room Labels
```xml
<!-- Room name and area -->
<text class="room-label" x="90" y="65" text-anchor="middle">MASTER</text>
<text class="room-label" x="90" y="78" text-anchor="middle">BEDROOM</text>
<text class="area-label" x="90" y="95" text-anchor="middle">195 sq ft</text>
<!-- Proposed room (in red) -->
<text class="room-label" x="63" y="268" text-anchor="middle" fill="#A32D2D">BEDROOM 4</text>
<text class="tx" x="63" y="282" text-anchor="middle" fill="#A32D2D">(NEW)</text>
```
```css
.room-label { font-family: system-ui; font-size: 11px; fill: var(--text-primary); font-weight: 500; }
.area-label { font-family: system-ui; font-size: 9px; fill: var(--text-tertiary); }
```
### Circulation Arrow
```xml
<defs>
<marker id="circ-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M0,0 L10,5 L0,10 Z" class="circulation-fill"/>
</marker>
</defs>
<path class="circulation" d="M300,250 L200,250 L145,250 L145,280" marker-end="url(#circ-arrow)"/>
<text class="tx" x="250" y="242" fill="#3B6D11" font-weight="500">New corridor access</text>
```
```css
.circulation { stroke: #3B6D11; stroke-width: 2; fill: none; }
.circulation-fill { fill: #3B6D11; }
```
### North Arrow and Scale Bar
```xml
<!-- North arrow -->
<g transform="translate(520, 260)">
<circle cx="0" cy="0" r="20" fill="none" stroke="var(--text-tertiary)" stroke-width="0.5"/>
<polygon points="0,-18 -5,5 0,0 5,5" fill="var(--text-primary)"/>
<text class="tx" x="0" y="-22" text-anchor="middle">N</text>
</g>
<!-- Scale bar -->
<g transform="translate(420, 300)">
<line x1="0" y1="0" x2="100" y2="0" stroke="var(--text-primary)" stroke-width="2"/>
<line x1="0" y1="-5" x2="0" y2="5" stroke="var(--text-primary)" stroke-width="1"/>
<line x1="50" y1="-3" x2="50" y2="3" stroke="var(--text-primary)" stroke-width="1"/>
<line x1="100" y1="-5" x2="100" y2="5" stroke="var(--text-primary)" stroke-width="1"/>
<text class="tx" x="0" y="15" text-anchor="middle">0</text>
<text class="tx" x="50" y="15" text-anchor="middle">5'</text>
<text class="tx" x="100" y="15" text-anchor="middle">10'</text>
</g>
```
## Area Comparison Table
### Table Structure
```xml
<!-- Header row -->
<rect class="table-header" x="0" y="0" width="180" height="28" rx="4 4 0 0"/>
<text class="ts" x="90" y="18" text-anchor="middle" font-weight="500">Room</text>
<!-- Normal row -->
<rect class="table-row" x="0" y="28" width="180" height="24"/>
<text class="tx" x="10" y="44">Master Bedroom</text>
<text class="tx" x="230" y="44" text-anchor="middle">195</text>
<!-- Alternating row -->
<rect class="table-row-alt" x="0" y="52" width="180" height="24"/>
<!-- Highlighted row (for changes) -->
<rect class="table-highlight" x="0" y="100" width="180" height="24"/>
<text class="tx" x="10" y="116" fill="#A32D2D" font-weight="500">Bedroom 4 (NEW)</text>
<text class="tx" x="430" y="116" text-anchor="middle" fill="#3B6D11">+100</text>
<!-- Total row -->
<rect x="0" y="268" width="180" height="28" fill="var(--bg-secondary)" stroke="var(--border)" stroke-width="1"/>
<text class="ts" x="10" y="286" font-weight="500">TOTAL CARPET AREA</text>
```
```css
.table-header { fill: var(--bg-secondary); }
.table-row { fill: var(--bg-primary); stroke: var(--border); stroke-width: 0.5; }
.table-row-alt { fill: var(--bg-tertiary); stroke: var(--border); stroke-width: 0.5; }
.table-highlight { fill: rgba(163, 45, 45, 0.1); stroke: #A32D2D; stroke-width: 0.5; }
```
## Layout Notes
- **ViewBox**: 800×780 (portrait for floor plan + table)
- **Scale**: 10px = 1 foot (apartment ~50ft × 33ft)
- **Floor plan origin**: Offset at (50, 60) for margins
- **Wall thickness**: 6px outer, 3px inner (represents ~6" walls)
- **Room labels**: Centered in each room with area below
- **Table placement**: Below floor plan with full width
## Color Coding
| Element | Color | Usage |
|---------|-------|-------|
| Proposed walls | Red (#A32D2D) dotted | New construction |
| New room fill | Red 15% opacity | Bedroom 4 area |
| Circulation | Green (#3B6D11) | New access path |
| Window glass | Blue (#378ADD) | Glass indication |
| Bedrooms | Purple/Teal/Amber tints | Room differentiation |
| Wet areas | Blue tint | Bathrooms |
| Living | Coral tint | Common areas |
## When to Use This Pattern
Use this diagram style for:
- Apartment/house floor plans
- Office layout planning
- Renovation proposals showing before/after
- Space planning with area calculations
- Real estate marketing materials
- Interior design presentations
- Building permit documentation
optional-skills/creative/concept-diagrams/examples/automated-password-reset-flow.md
+276
View File
@@ -0,0 +1,276 @@
# Automated Password Reset Flow
A two-section flowchart tracing the full user journey for a web application password reset: the initial request phase (forgot password → email check → token generation) and the reset-form phase (link click → new password entry → token/password validation). Demonstrates multi-exit decision diamonds, a three-column branching layout, a loop-back path, and a cross-section separator arrow.
## Key Patterns Used
- **Three-column layout**: Left column (error/terminal branches at cx=115), center column (main happy path at cx=340), right column (expired-token branch at cx=552) — allows side branches to live at the same y-level as center nodes without overlap
- **Decision diamonds with `<polygon>`**: Each decision uses a `<g class="decision">` wrapper containing a `<polygon>` and centered `<text>`; the diamond points are computed as `cx±hw, cy±hh` (hw=100, hh=28)
- **Pill-shaped terminals**: Start and end nodes use `rx=22` on their `<rect>` to signal entry/exit points; all mid-flow process nodes use `rx=8`
- **Three-branch decision paths**: Each diamond has a "Yes" branch (down, short `<line>`) and a "No" branch (`<path>` going horizontal then vertical to a side column)
- **Loop-back path**: Mismatch error node loops back to the password-entry node via a routing corridor at x=215 — a 5-px gap between the left column (right edge x=210) and center column (left edge x=220); the path exits the bottom of the error node, drops below it, travels right to x=215, then goes up to the target node's center y, then right 5 px into the node's left edge
- **Section separator**: A dashed horizontal `<line>` at y=452 splits the two phases; the connecting arrow crosses it with a faded label ("user receives email") to preserve flow continuity
- **Italic annotation**: The exact UX copy for the generic message ("If that email exists…") is shown as a faded italic `ts` text block below the left-branch terminal node
- **Legend row**: Five inline swatches (gray, purple, teal, red, amber diamond) at the bottom explain the color-to-role mapping
## Diagram
```xml
<svg width="100%" viewBox="0 0 680 960" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<!--
Column layout (680px viewBox, safe area x=40–640):
Left col : x=20, w=190, cx=115 (error / terminal branches)
Center col: x=220, w=240, cx=340 (main happy path)
Right col: x=465, w=175, cx=552 (expired-token branch)
Loop corridor at x=215 (5-px gap between left and center cols)
-->
<!-- ═══ SECTION 1 — Forgot password request ═══ -->
<text class="ts" x="40" y="38" opacity=".45">Section 1 — Forgot password request</text>
<!-- START terminal (pill rx=22 signals start/end) -->
<g class="c-gray">
<rect x="220" y="46" width="240" height="44" rx="22"/>
<text class="th" x="340" y="68" text-anchor="middle" dominant-baseline="central">User: &quot;Forgot password&quot;</text>
</g>
<line x1="340" y1="90" x2="340" y2="108" class="arr" marker-end="url(#arrow)"/>
<!-- N2 · Enter email -->
<g class="c-gray">
<rect x="220" y="108" width="240" height="44" rx="8"/>
<text class="th" x="340" y="130" text-anchor="middle" dominant-baseline="central">Enter email address</text>
</g>
<line x1="340" y1="152" x2="340" y2="172" class="arr" marker-end="url(#arrow)"/>
<!-- D1 · Email in system? diamond: center=(340,200) hw=100 hh=28 -->
<g class="decision">
<polygon points="340,172 440,200 340,228 240,200"/>
<text class="th" x="340" y="200" text-anchor="middle" dominant-baseline="central">Email in system?</text>
</g>
<!-- D1 "No" → left column -->
<path d="M 240,200 L 115,200 L 115,248" class="arr" marker-end="url(#arrow)"/>
<text class="ts" x="178" y="193" text-anchor="middle" opacity=".75">No</text>
<!-- D1 "Yes" → continue down -->
<line x1="340" y1="228" x2="340" y2="248" class="arr" marker-end="url(#arrow)"/>
<text class="ts" x="348" y="242" text-anchor="start" opacity=".75">Yes</text>
<!-- ── Left branch (D1 = No): generic security message → end ── -->
<!-- L1 · Generic message (security: never confirm email existence) -->
<g class="c-gray">
<rect x="20" y="248" width="190" height="56" rx="8"/>
<text class="th" x="115" y="269" text-anchor="middle" dominant-baseline="central">Generic message shown</text>
<text class="ts" x="115" y="287" text-anchor="middle" dominant-baseline="central">Email sent if found</text>
</g>
<line x1="115" y1="304" x2="115" y2="324" class="arr" marker-end="url(#arrow)"/>
<!-- L2 · End terminal (left) -->
<g class="c-gray">
<rect x="20" y="324" width="190" height="44" rx="22"/>
<text class="th" x="115" y="346" text-anchor="middle" dominant-baseline="central">Request handled</text>
</g>
<!-- Italic annotation: actual UX copy shown below the end node -->
<text class="ts" x="20" y="384" opacity=".45" font-style="italic">&quot;If that email exists, a reset</text>
<text class="ts" x="20" y="398" opacity=".45" font-style="italic">link has been sent.&quot;</text>
<!-- ── Center Yes branch: system generates & sends token ── -->
<!-- N3 · Generate unique token -->
<g class="c-purple">
<rect x="220" y="248" width="240" height="56" rx="8"/>
<text class="th" x="340" y="269" text-anchor="middle" dominant-baseline="central">Generate unique token</text>
<text class="ts" x="340" y="287" text-anchor="middle" dominant-baseline="central">Time-limited, cryptographic</text>
</g>
<line x1="340" y1="304" x2="340" y2="324" class="arr" marker-end="url(#arrow)"/>
<!-- N4 · Store token + user ID -->
<g class="c-purple">
<rect x="220" y="324" width="240" height="44" rx="8"/>
<text class="th" x="340" y="346" text-anchor="middle" dominant-baseline="central">Store token + user ID</text>
</g>
<line x1="340" y1="368" x2="340" y2="388" class="arr" marker-end="url(#arrow)"/>
<!-- N5 · Send reset email -->
<g class="c-teal">
<rect x="220" y="388" width="240" height="44" rx="8"/>
<text class="th" x="340" y="410" text-anchor="middle" dominant-baseline="central">Send reset link via email</text>
</g>
<!-- ═══ Section separator ═══ -->
<line x1="40" y1="452" x2="640" y2="452"
stroke="var(--border)" stroke-width="1" stroke-dasharray="8 5"/>
<!-- Arrow crossing separator (with inline label) -->
<line x1="340" y1="432" x2="340" y2="472" class="arr" marker-end="url(#arrow)"/>
<text class="ts" x="348" y="448" text-anchor="start" opacity=".55">user receives email</text>
<text class="ts" x="40" y="464" opacity=".45">Section 2 — Password reset form</text>
<!-- ═══ SECTION 2 — Password reset form ═══ -->
<!-- N6 · User clicks reset link -->
<g class="c-gray">
<rect x="220" y="480" width="240" height="44" rx="8"/>
<text class="th" x="340" y="502" text-anchor="middle" dominant-baseline="central">User clicks reset link</text>
</g>
<line x1="340" y1="524" x2="340" y2="544" class="arr" marker-end="url(#arrow)"/>
<!-- N7 · Enter new password ×2 -->
<g class="c-gray">
<rect x="220" y="544" width="240" height="56" rx="8"/>
<text class="th" x="340" y="565" text-anchor="middle" dominant-baseline="central">Enter new password ×2</text>
<text class="ts" x="340" y="583" text-anchor="middle" dominant-baseline="central">Confirm both passwords match</text>
</g>
<line x1="340" y1="600" x2="340" y2="620" class="arr" marker-end="url(#arrow)"/>
<!-- D2 · Token expired? diamond: center=(340,648) hw=100 hh=28 -->
<g class="decision">
<polygon points="340,620 440,648 340,676 240,648"/>
<text class="th" x="340" y="648" text-anchor="middle" dominant-baseline="central">Token expired?</text>
</g>
<!-- D2 "Yes" → right column (expired-token branch) -->
<path d="M 440,648 L 552,648 L 552,692" class="arr" marker-end="url(#arrow)"/>
<text class="ts" x="496" y="641" text-anchor="middle" opacity=".75">Yes</text>
<!-- D2 "No" → down to password-match check -->
<line x1="340" y1="676" x2="340" y2="714" class="arr" marker-end="url(#arrow)"/>
<text class="ts" x="348" y="698" text-anchor="start" opacity=".75">No</text>
<!-- ── Right branch (D2 = Yes): token expired → dead end ── -->
<!-- R1 · Token expired error -->
<g class="c-red">
<rect x="465" y="692" width="175" height="56" rx="8"/>
<text class="th" x="552" y="713" text-anchor="middle" dominant-baseline="central">Token expired</text>
<text class="ts" x="552" y="731" text-anchor="middle" dominant-baseline="central">Show expiry error</text>
</g>
<line x1="552" y1="748" x2="552" y2="768" class="arr" marker-end="url(#arrow)"/>
<!-- R2 · End terminal (right) -->
<g class="c-gray">
<rect x="465" y="768" width="175" height="44" rx="22"/>
<text class="th" x="552" y="790" text-anchor="middle" dominant-baseline="central">End — request again</text>
</g>
<!-- D3 · Passwords match? diamond: center=(340,742) hw=100 hh=28 -->
<g class="decision">
<polygon points="340,714 440,742 340,770 240,742"/>
<text class="th" x="340" y="742" text-anchor="middle" dominant-baseline="central">Passwords match?</text>
</g>
<!-- D3 "No" → left column (mismatch branch) -->
<path d="M 240,742 L 115,742 L 115,786" class="arr" marker-end="url(#arrow)"/>
<text class="ts" x="178" y="735" text-anchor="middle" opacity=".75">No</text>
<!-- D3 "Yes" → down to reset -->
<line x1="340" y1="770" x2="340" y2="790" class="arr" marker-end="url(#arrow)"/>
<text class="ts" x="348" y="783" text-anchor="start" opacity=".75">Yes</text>
<!-- ── Left branch (D3 = No): passwords don't match → loop back ── -->
<!-- L3 · Password mismatch error -->
<g class="c-red">
<rect x="20" y="786" width="190" height="56" rx="8"/>
<text class="th" x="115" y="807" text-anchor="middle" dominant-baseline="central">Password mismatch</text>
<text class="ts" x="115" y="825" text-anchor="middle" dominant-baseline="central">Passwords do not match</text>
</g>
<!-- Loop-back arrow: exits L3 bottom → drops to y=862 →
travels right to corridor x=215 → climbs to N7 center y=572 →
enters N7 left edge at (220, 572) pointing right -->
<path d="M 115,842 L 115,862 L 215,862 L 215,572 L 220,572"
class="arr" marker-end="url(#arrow)"/>
<text class="ts" x="224" y="538" text-anchor="start" opacity=".6">retry</text>
<!-- ── Center Yes branch (D3 = Yes): reset password & invalidate token ── -->
<!-- N8 · Reset password -->
<g class="c-teal">
<rect x="220" y="790" width="240" height="56" rx="8"/>
<text class="th" x="340" y="811" text-anchor="middle" dominant-baseline="central">Reset password</text>
<text class="ts" x="340" y="829" text-anchor="middle" dominant-baseline="central">Invalidate used token</text>
</g>
<line x1="340" y1="846" x2="340" y2="866" class="arr" marker-end="url(#arrow)"/>
<!-- N9 · Success terminal -->
<g class="c-green">
<rect x="220" y="866" width="240" height="44" rx="22"/>
<text class="th" x="340" y="888" text-anchor="middle" dominant-baseline="central">Password reset complete</text>
</g>
<!-- ═══ Legend ═══ -->
<text class="ts" x="40" y="930" opacity=".4">Legend —</text>
<rect x="108" y="920" width="13" height="13" rx="2" fill="#F1EFE8" stroke="#5F5E5A" stroke-width="0.5"/>
<text class="ts" x="126" y="930" opacity=".7">User action</text>
<rect x="210" y="920" width="13" height="13" rx="2" fill="#EEEDFE" stroke="#534AB7" stroke-width="0.5"/>
<text class="ts" x="228" y="930" opacity=".7">System process</text>
<rect x="334" y="920" width="13" height="13" rx="2" fill="#E1F5EE" stroke="#0F6E56" stroke-width="0.5"/>
<text class="ts" x="352" y="930" opacity=".7">Email / success</text>
<rect x="455" y="920" width="13" height="13" rx="2" fill="#FCEBEB" stroke="#A32D2D" stroke-width="0.5"/>
<text class="ts" x="473" y="930" opacity=".7">Error state</text>
<polygon points="556,926 566,932 556,938 546,932" fill="#FAEEDA" stroke="#854F0B" stroke-width="0.5"/>
<text class="ts" x="572" y="932" opacity=".7">Decision</text>
</svg>
```
## Custom CSS
Add these classes to the hosting page `<style>` block (in addition to the standard skill CSS):
```css
/* Decision diamond — amber fill, same palette as c-amber */
.decision > polygon { fill: #FAEEDA; stroke: #854F0B; stroke-width: 0.5; }
.decision > .th { fill: #633806; }
@media (prefers-color-scheme: dark) {
.decision > polygon { fill: #633806; stroke: #EF9F27; }
.decision > .th { fill: #FAC775; }
}
```
## Color Assignments
| Element | Color | Reason |
|---------|-------|--------|
| Start / end terminals | `c-gray` | Neutral entry and exit points |
| User actions (enter email, click link, enter password) | `c-gray` | User-facing steps with no system processing |
| Generic message + request-handled terminal | `c-gray` | Intentionally neutral — the security message must not reveal data |
| Generate & store token | `c-purple` | Backend system operations |
| Send reset email | `c-teal` | Positive external action (outbound communication) |
| Token expired error | `c-red` | Failure / blocking error state |
| Password mismatch error | `c-red` | Validation failure |
| Reset password + success | `c-teal` / `c-green` | Positive outcome: teal for the action, green pill for the terminal |
| Decision diamonds | `c-amber` (custom `.decision`) | Warning / branch point — matches amber semantic meaning |
## Layout Notes
- **ViewBox**: 680×960 — tall flowchart with two phases
- **Three-column structure**: Left (cx=115), center (cx=340), right (cx=552) — each branch stays within its column; only `<path>` arrows cross column boundaries
- **Diamond formula**: `<polygon points="cx,cy-hh cx+hw,cy cx,cy+hh cx-hw,cy"/>` with hw=100, hh=28 gives a 200×56px diamond that sits flush with the center column (x=220–460)
- **Branch routing pattern**: "No" paths use `<path d="M left_point,cy L side_cx,cy L side_cx,node_top">` — one horizontal segment + one vertical segment, no curves needed
- **Loop corridor**: The 5-px gap at x=210–220 between left and center columns provides a clean vertical channel for the loop-back path without any node overlap; the path exits node bottom, drops 20px, goes right to x=215, climbs to target y, enters from left
- **Section separator**: A dashed `<line>` at y=452 with `stroke-dasharray="8 5"` provides a visual phase break; the single connecting arrow crosses it at center, with a faded label on the arrow
- **Pill terminals**: `rx=22` (half the 44px node height) produces a perfect capsule/pill shape — use this consistently for all start/end terminals
- **Error annotation**: The exact UX copy is rendered as faded (`opacity=".45"`) italic `ts` text below the relevant node, keeping it informative without cluttering the flow
optional-skills/creative/concept-diagrams/examples/autonomous-llm-research-agent-flow.md
+240
View File
@@ -0,0 +1,240 @@
# Autonomous LLM Research Agent Flow
A multi-section flowchart showing Karpathy's autoresearch framework: human-agent handoff, the autonomous experiment loop with keep/discard decision branching, and the modifiable training pipeline. Demonstrates loop-back arrows, convergent decision paths, and semantic color coding for outcomes.
## Key Patterns Used
- **Three-section layout**: Setup row, main loop container, and detail container — each visually distinct
- **Neutral dashed containers**: Loop and training pipeline use `var(--bg-secondary)` fill with dashed borders to recede behind colored content nodes
- **Decision branching with convergence**: "val_bpb improved?" splits into Keep (green) and Discard (red), then both converge back to "Log to results.tsv"
- **Loop-back arrow**: Dashed path with rounded corners on the right side of the container showing infinite repetition
- **Semantic color for outcomes**: Green = improvement (keep), Red = no improvement (discard) — not arbitrary decoration
- **Highlighted key step**: "Run training" uses `c-coral` to visually distinguish the most important step from other `c-teal` actions
- **Horizontal pipeline flow**: Training details section uses left-to-right arrow-connected nodes (GPT → MuonAdamW → Evaluation)
- **Footer metadata**: Fixed constraints shown as subtle centered text below the pipeline nodes
- **Legend row**: Color key at the bottom explaining what each color means
## Diagram
```xml
<svg width="100%" viewBox="0 0 680 920" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<!-- ========================================== -->
<!-- SECTION 1: SETUP (Human → program.md → AI) -->
<!-- ========================================== -->
<text class="ts" x="40" y="30" text-anchor="start" opacity=".5">One-time setup</text>
<!-- Human -->
<g class="node c-gray">
<rect x="60" y="42" width="140" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="130" y="62" text-anchor="middle" dominant-baseline="central">Human</text>
<text class="ts" x="130" y="82" text-anchor="middle" dominant-baseline="central">Researcher</text>
</g>
<!-- Arrow: Human → program.md -->
<line x1="200" y1="70" x2="250" y2="70" class="arr" marker-end="url(#arrow)"/>
<!-- program.md -->
<g class="node c-gray">
<rect x="250" y="42" width="180" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="340" y="62" text-anchor="middle" dominant-baseline="central">program.md</text>
<text class="ts" x="340" y="82" text-anchor="middle" dominant-baseline="central">Agent instructions</text>
</g>
<!-- Arrow: program.md → AI Agent -->
<line x1="430" y1="70" x2="470" y2="70" class="arr" marker-end="url(#arrow)"/>
<!-- AI Agent -->
<g class="node c-purple">
<rect x="470" y="42" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="550" y="62" text-anchor="middle" dominant-baseline="central">AI agent</text>
<text class="ts" x="550" y="82" text-anchor="middle" dominant-baseline="central">Claude / Codex</text>
</g>
<!-- Arrow: Setup row → Loop (from program.md center down) -->
<line x1="340" y1="98" x2="340" y2="142" class="arr" marker-end="url(#arrow)"/>
<!-- ========================================== -->
<!-- SECTION 2: AUTONOMOUS EXPERIMENT LOOP -->
<!-- ========================================== -->
<!-- Loop container (neutral dashed) -->
<g>
<rect x="40" y="142" width="600" height="528" rx="16"
stroke-width="1" stroke-dasharray="6 4"
fill="var(--bg-secondary)" stroke="var(--border)"/>
<text class="th" x="66" y="170">Autonomous experiment loop</text>
<text class="ts" x="66" y="188">~12 experiments/hour — runs until manually stopped</text>
</g>
<!-- Step 1: Read code + past results -->
<g class="node c-teal">
<rect x="170" y="208" width="280" height="44" rx="8" stroke-width="0.5"/>
<text class="th" x="310" y="230" text-anchor="middle" dominant-baseline="central">Read code + past results</text>
</g>
<!-- Arrow: S1 → S2 -->
<line x1="310" y1="252" x2="310" y2="274" class="arr" marker-end="url(#arrow)"/>
<!-- Step 2: Propose + edit train.py -->
<g class="node c-teal">
<rect x="170" y="274" width="280" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="310" y="294" text-anchor="middle" dominant-baseline="central">Propose + edit train.py</text>
<text class="ts" x="310" y="314" text-anchor="middle" dominant-baseline="central">Arch, optimizer, hyperparameters</text>
</g>
<!-- Arrow: S2 → S3 -->
<line x1="310" y1="330" x2="310" y2="352" class="arr" marker-end="url(#arrow)"/>
<!-- Step 3: Run training (highlighted — key step) -->
<g class="node c-coral">
<rect x="170" y="352" width="280" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="310" y="372" text-anchor="middle" dominant-baseline="central">Run training</text>
<text class="ts" x="310" y="392" text-anchor="middle" dominant-baseline="central">uv run train.py (5 min budget)</text>
</g>
<!-- Arrow: S3 → S4 -->
<line x1="310" y1="408" x2="310" y2="430" class="arr" marker-end="url(#arrow)"/>
<!-- Step 4: Decision — val_bpb improved? -->
<g class="node c-gray">
<rect x="170" y="430" width="280" height="44" rx="8" stroke-width="0.5"/>
<text class="th" x="310" y="452" text-anchor="middle" dominant-baseline="central">val_bpb improved?</text>
</g>
<!-- Decision arrows to Keep / Discard -->
<line x1="240" y1="474" x2="175" y2="508" class="arr" marker-end="url(#arrow)"/>
<line x1="380" y1="474" x2="445" y2="508" class="arr" marker-end="url(#arrow)"/>
<!-- Decision labels -->
<text class="ts" x="195" y="496" opacity=".6">yes</text>
<text class="ts" x="416" y="496" opacity=".6">no</text>
<!-- Keep — advance branch -->
<g class="node c-green">
<rect x="70" y="508" width="210" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="175" y="528" text-anchor="middle" dominant-baseline="central">Keep</text>
<text class="ts" x="175" y="548" text-anchor="middle" dominant-baseline="central">Advance git branch</text>
</g>
<!-- Discard — git reset -->
<g class="node c-red">
<rect x="340" y="508" width="210" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="445" y="528" text-anchor="middle" dominant-baseline="central">Discard</text>
<text class="ts" x="445" y="548" text-anchor="middle" dominant-baseline="central">Git reset to previous</text>
</g>
<!-- Converge arrows: Keep → Log, Discard → Log -->
<line x1="175" y1="564" x2="250" y2="590" class="arr" marker-end="url(#arrow)"/>
<line x1="445" y1="564" x2="370" y2="590" class="arr" marker-end="url(#arrow)"/>
<!-- Step 6: Log to results.tsv -->
<g class="node c-teal">
<rect x="170" y="590" width="280" height="44" rx="8" stroke-width="0.5"/>
<text class="th" x="310" y="612" text-anchor="middle" dominant-baseline="central">Log to results.tsv</text>
</g>
<!-- Loop-back arrow (dashed, right side) -->
<path d="M 450 612 L 564 612 Q 576 612 576 600 L 576 242 Q 576 230 564 230 L 450 230"
fill="none" class="arr" stroke-dasharray="4 3" marker-end="url(#arrow)"/>
<!-- ========================================== -->
<!-- SECTION 3: TRAINING PIPELINE DETAILS -->
<!-- ========================================== -->
<!-- Connection arrow: Loop → Training details -->
<line x1="310" y1="670" x2="310" y2="710" class="arr" marker-end="url(#arrow)"/>
<!-- Training container (neutral dashed) -->
<g>
<rect x="40" y="710" width="600" height="170" rx="16"
stroke-width="1" stroke-dasharray="6 4"
fill="var(--bg-secondary)" stroke="var(--border)"/>
<text class="th" x="66" y="738">train.py — modifiable training pipeline</text>
<text class="ts" x="66" y="756">Runs during each training step — single GPU, single file</text>
</g>
<!-- GPT model -->
<g class="node c-coral">
<rect x="70" y="774" width="155" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="147" y="794" text-anchor="middle" dominant-baseline="central">GPT model</text>
<text class="ts" x="147" y="814" text-anchor="middle" dominant-baseline="central">RoPE, FlashAttn3</text>
</g>
<!-- Arrow: GPT → MuonAdamW -->
<line x1="225" y1="802" x2="260" y2="802" class="arr" marker-end="url(#arrow)"/>
<!-- MuonAdamW optimizer -->
<g class="node c-coral">
<rect x="260" y="774" width="155" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="337" y="794" text-anchor="middle" dominant-baseline="central">MuonAdamW</text>
<text class="ts" x="337" y="814" text-anchor="middle" dominant-baseline="central">Hybrid optimizer</text>
</g>
<!-- Arrow: MuonAdamW → Evaluation -->
<line x1="415" y1="802" x2="450" y2="802" class="arr" marker-end="url(#arrow)"/>
<!-- Evaluation -->
<g class="node c-amber">
<rect x="450" y="774" width="155" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="527" y="794" text-anchor="middle" dominant-baseline="central">Evaluation</text>
<text class="ts" x="527" y="814" text-anchor="middle" dominant-baseline="central">val_bpb metric</text>
</g>
<!-- Footer: fixed constraints -->
<text class="ts" x="340" y="856" text-anchor="middle" opacity=".5">climbmix-400b data · 8K BPE vocab · 300s budget · 2048 context</text>
<!-- ========================================== -->
<!-- LEGEND -->
<!-- ========================================== -->
<g class="c-teal"><rect x="40" y="890" width="14" height="14" rx="3" stroke-width="0.5"/></g>
<text class="ts" x="62" y="902">Agent actions</text>
<g class="c-coral"><rect x="170" y="890" width="14" height="14" rx="3" stroke-width="0.5"/></g>
<text class="ts" x="192" y="902">Training run</text>
<g class="c-green"><rect x="300" y="890" width="14" height="14" rx="3" stroke-width="0.5"/></g>
<text class="ts" x="322" y="902">Improvement</text>
<g class="c-red"><rect x="430" y="890" width="14" height="14" rx="3" stroke-width="0.5"/></g>
<text class="ts" x="452" y="902">No improvement</text>
</svg>
```
## Color Assignments
| Element | Color | Reason |
|---------|-------|--------|
| Human, program.md | `c-gray` | Neutral setup / input nodes |
| AI agent | `c-purple` | The active intelligent actor |
| Loop action steps | `c-teal` | Agent's analytical/editing actions |
| Run training | `c-coral` | Highlighted key step — the 5-min training run |
| Decision check | `c-gray` | Neutral evaluation checkpoint |
| Keep (improved) | `c-green` | Semantic success — val_bpb decreased |
| Discard (not improved) | `c-red` | Semantic failure — no improvement |
| Training pipeline nodes | `c-coral` | Training infrastructure components |
| Evaluation node | `c-amber` | Distinct from training — measurement/metric role |
| Containers | Neutral (dashed) | Subtle grouping that recedes behind content |
## Layout Notes
- **ViewBox**: 680×920 (standard width, tall for 3 sections)
- **Three sections**: Setup row (y=30–98), loop container (y=142–670), training details (y=710–880)
- **Container style**: Dashed border (`stroke-dasharray="6 4"`), neutral fill (`var(--bg-secondary)`), `stroke-width="1"` — not colored, so inner nodes pop
- **Loop-back arrow**: Dashed `<path>` with quadratic curves (`Q`) at corners for smooth rounded turns, running up the right side of the loop container from "Log" back to "Read code"
- **Decision pattern**: Single question node ("val_bpb improved?") with diagonal arrows to Keep/Discard, then convergent diagonal arrows back to "Log to results.tsv"
- **Decision labels**: "yes"/"no" labels placed along the diagonal arrows with `opacity=".6"` to stay subtle
- **Key step highlight**: "Run training" uses `c-coral` while surrounding steps use `c-teal`, drawing the eye to the most important step
- **Horizontal sub-flow**: Training pipeline uses left-to-right arrow-connected nodes (GPT model → MuonAdamW → Evaluation)
- **Footer metadata**: Fixed constraints (data, vocab, budget, context) shown as a single centered `ts` text line with `opacity=".5"`
- **Legend**: Four color swatches at the bottom explaining the semantic meaning of each color used
optional-skills/creative/concept-diagrams/examples/banana-journey-tree-to-smoothie.md
+161
View File
@@ -0,0 +1,161 @@
# Journey of a Banana: From Tree to Smoothie
A narrative journey diagram following a single banana across 3,000 miles and 3 weeks, from harvest in Costa Rica to a smoothie in the consumer's kitchen. Demonstrates storytelling through visualization, winding path layout, and progressive state changes.
## Key Patterns Used
- **Winding journey path**: S-curve connecting all stages visually
- **Location markers**: Country flags and place names for geographic context
- **Progressive state changes**: Banana color changes (green → yellow → brown → frozen → smoothie)
- **Narrative details**: Fun elements like spider check, stickers, price tags
- **Timeline**: Bottom timeline showing duration of journey
- **Environmental context**: Ocean waves, gas clouds, store awning
## New Shape Techniques
### Banana (curved fruit shape)
```xml
<!-- Green banana -->
<path class="banana-green" d="M 5 0 Q 0 10 3 20 Q 6 25 10 20 Q 13 10 8 0 Z"/>
<!-- Yellow banana -->
<path class="banana-yellow" d="M 0 5 Q -6 18 0 32 Q 7 40 15 30 Q 20 15 12 5 Z"/>
<!-- Brown overripe banana with spots -->
<path class="banana-brown" d="M 0 5 Q -5 15 0 28 Q 6 35 14 26 Q 18 14 12 5 Z"/>
<circle class="banana-spots" cx="5" cy="15" r="1.5"/>
<circle class="banana-spots" cx="9" cy="20" r="1"/>
```
### Banana Tree
```xml
<!-- Trunk -->
<rect class="tree-trunk" x="55" y="50" width="15" height="60" rx="3"/>
<!-- Leaves (rotated ellipses) -->
<ellipse class="tree-leaf" cx="62" cy="45" rx="40" ry="15" transform="rotate(-20, 62, 45)"/>
<ellipse class="tree-leaf" cx="62" cy="50" rx="35" ry="12" transform="rotate(25, 62, 50)"/>
<!-- Banana bunch hanging -->
<g transform="translate(40, 55)">
<path class="banana-green" d="M 5 0 Q 0 10 3 20 Q 6 25 10 20 Q 13 10 8 0 Z"/>
<path class="banana-green" d="M 12 2 Q 8 12 11 22 Q 14 27 18 22 Q 21 12 16 2 Z"/>
<rect class="stem" x="8" y="-5" width="12" height="8" rx="2"/>
</g>
```
### Cargo Ship
```xml
<!-- Ocean waves -->
<path class="ocean" d="M 0 90 Q 30 85 60 90 Q 90 95 120 90 Q 150 85 180 90 L 180 110 L 0 110 Z" opacity="0.5"/>
<!-- Hull -->
<path class="ship-hull" d="M 20 90 L 30 60 L 160 60 L 170 90 Q 150 95 95 95 Q 40 95 20 90 Z"/>
<!-- Deck -->
<rect class="ship-deck" x="40" y="45" width="110" height="18" rx="2"/>
<!-- Reefer containers -->
<rect class="container" x="45" y="25" width="30" height="22" rx="2"/>
<!-- Refrigeration symbol -->
<text x="60" y="40" text-anchor="middle" fill="#185FA5" style="font-size:10px">❄</text>
<!-- Smoke stack -->
<rect x="145" y="35" width="8" height="15" fill="#444441"/>
```
### Inspector Figure
```xml
<!-- Body -->
<rect class="inspector" x="10" y="20" width="25" height="35" rx="3"/>
<!-- Head -->
<circle class="inspector" cx="22" cy="12" r="10"/>
<!-- Hat -->
<rect x="12" y="2" width="20" height="6" rx="2" fill="#534AB7"/>
<!-- Clipboard -->
<rect class="clipboard" x="38" y="28" width="15" height="20" rx="2"/>
<line x1="42" y1="34" x2="50" y2="34" stroke="#888780" stroke-width="1"/>
```
### Spider with "No" Symbol
```xml
<circle cx="15" cy="15" r="18" fill="none" stroke="#A32D2D" stroke-width="2"/>
<line x1="3" y1="3" x2="27" y2="27" stroke="#A32D2D" stroke-width="2"/>
<!-- Spider body -->
<ellipse class="spider" cx="15" cy="15" rx="4" ry="5"/>
<ellipse class="spider" cx="15" cy="10" rx="3" ry="3"/>
<!-- Legs -->
<line x1="12" y1="14" x2="5" y2="10" stroke="#2C2C2A" stroke-width="1"/>
<line x1="18" y1="14" x2="25" y2="10" stroke="#2C2C2A" stroke-width="1"/>
```
### Blender with Smoothie
```xml
<!-- Blender jar -->
<path class="blender" d="M 5 5 L 0 45 L 35 45 L 30 5 Z"/>
<!-- Smoothie inside (wavy top) -->
<path class="smoothie" d="M 3 20 L 0 45 L 35 45 L 32 20 Q 25 18 17 22 Q 10 18 3 20 Z"/>
<!-- Blender base -->
<rect class="blender" x="-2" y="45" width="40" height="12" rx="3"/>
<!-- Lid -->
<rect x="8" y="0" width="20" height="8" rx="2" fill="#AFA9EC" stroke="#534AB7"/>
<!-- Banana chunks floating -->
<ellipse cx="12" cy="32" rx="4" ry="2" fill="#FAC775"/>
```
### Winding Journey Path
```xml
<path class="journey-path" d="
M 80 100
L 200 100
Q 280 100 280 150
L 280 180
Q 280 220 320 220
L 520 220
Q 560 220 560 260
L 560 320
Q 560 360 520 360
L 280 360
...
"/>
```
## CSS Classes
```css
/* Journey */
.journey-path { stroke: #D3D1C7; stroke-width: 3; fill: none; stroke-linecap: round; }
/* Banana ripeness stages */
.banana-green { fill: #97C459; stroke: #3B6D11; stroke-width: 0.5; }
.banana-yellow { fill: #FAC775; stroke: #BA7517; stroke-width: 0.5; }
.banana-brown { fill: #854F0B; stroke: #633806; stroke-width: 0.5; }
.banana-spots { fill: #633806; }
/* Environment elements */
.tree-trunk { fill: #854F0B; stroke: #633806; stroke-width: 1; }
.tree-leaf { fill: #97C459; stroke: #3B6D11; stroke-width: 0.5; }
.ocean { fill: #85B7EB; }
.ship-hull { fill: #5F5E5A; stroke: #444441; stroke-width: 1; }
.container { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
.gas-cloud { fill: #C0DD97; stroke: #97C459; stroke-width: 0.5; opacity: 0.6; }
/* Buildings */
.packhouse { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; }
.warehouse { fill: #FAEEDA; stroke: #854F0B; stroke-width: 1; }
.store { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 1; }
/* Kitchen */
.counter { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; }
.blender { fill: #EEEDFE; stroke: #534AB7; stroke-width: 1; }
.smoothie { fill: #FAC775; }
.freezer { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
/* Details */
.sticker { fill: #378ADD; stroke: #185FA5; stroke-width: 0.3; }
.spider { fill: #2C2C2A; stroke: #1a1a18; stroke-width: 0.3; }
```
## Layout Notes
- **ViewBox**: 850×680 (tall for winding path)
- **Path style**: S-curve winding path connects all 7 stages
- **Location labels**: Country flags + place names anchor geographic context
- **State progression**: Same object (banana) shown in different states throughout
- **Timeline**: Horizontal timeline at bottom shows journey duration
- **Narrative elements**: Fun details (spider, stickers, price tags) add storytelling value
- **Environmental context**: Ocean waves, gas clouds, awnings create sense of place
optional-skills/creative/concept-diagrams/examples/commercial-aircraft-structure.md
+209
View File
@@ -0,0 +1,209 @@
# Commercial Aircraft Structure
A physical/structural diagram showing an aircraft side profile using appropriate SVG shapes beyond rectangles - paths, polygons, ellipses for realistic representation.
## Key Patterns Used
- **Path elements**: Curved fuselage body with nose cone using quadratic bezier curves
- **Polygon elements**: Tapered wing shape, triangular stabilizers, control surfaces
- **Ellipse elements**: Engines (cylinders), wheels (circles)
- **Line elements**: Landing gear struts, leader lines for labels
- **Dashed strokes**: Interior sections (fuel tank), movable control surfaces (rudder, elevator)
- **Layered composition**: Cabin sections drawn inside the fuselage shape
- **Leader lines with labels**: Connect labels to components they describe
## Diagram
```xml
<svg width="100%" viewBox="0 0 680 400" xmlns="http://www.w3.org/2000/svg">
<!-- FUSELAGE - main body cylinder with nose cone -->
<path class="fuselage" d="
M 80 180
Q 40 180 40 200
Q 40 220 80 220
L 560 220
Q 580 220 580 200
Q 580 180 560 180
Z
"/>
<!-- Nose cone -->
<path class="fuselage" d="
M 80 180
Q 50 180 35 200
Q 50 220 80 220
" fill="none" stroke-width="1"/>
<!-- COCKPIT windows -->
<path class="cockpit" d="
M 45 190
L 75 185
L 75 200
L 50 200
Z
"/>
<line x1="55" y1="188" x2="55" y2="200" stroke="#534AB7" stroke-width="0.5"/>
<line x1="65" y1="186" x2="65" y2="200" stroke="#534AB7" stroke-width="0.5"/>
<!-- CABIN SECTIONS (inside fuselage) -->
<!-- First class -->
<rect class="first-class" x="85" y="183" width="50" height="34" rx="2"/>
<text class="tl" x="110" y="203" text-anchor="middle">First</text>
<!-- Business class -->
<rect class="business-class" x="140" y="183" width="80" height="34" rx="2"/>
<text class="tl" x="180" y="203" text-anchor="middle">Business</text>
<!-- Economy class -->
<rect class="economy-class" x="225" y="183" width="200" height="34" rx="2"/>
<text class="tl" x="325" y="203" text-anchor="middle">Economy</text>
<!-- CARGO HOLD (lower section indication) -->
<line x1="85" y1="217" x2="520" y2="217" class="leader"/>
<text class="tl" x="300" y="228" text-anchor="middle" opacity=".6">Cargo hold below deck</text>
<!-- WING - main wing shape -->
<polygon class="wing" points="
200,220
120,300
130,305
160,305
340,235
340,220
"/>
<!-- Wing fuel tank (dashed interior) -->
<polygon class="fuel-tank" points="
210,225
150,280
160,283
180,283
310,232
310,225
"/>
<text class="tl" x="220" y="260" opacity=".7">Fuel</text>
<!-- Flaps (trailing edge) -->
<polygon class="flap" points="
130,300
120,305
160,310
165,305
"/>
<text class="tl" x="143" y="320">Flaps</text>
<!-- ENGINE under wing -->
<ellipse class="engine" cx="175" cy="285" rx="25" ry="12"/>
<ellipse cx="155" cy="285" rx="8" ry="10" fill="none" stroke="#993C1D" stroke-width="0.5"/>
<!-- Engine pylon -->
<line x1="175" y1="273" x2="190" y2="245" stroke="#5F5E5A" stroke-width="2"/>
<text class="tl" x="175" y="308" text-anchor="middle">Engine</text>
<!-- TAIL SECTION -->
<!-- Vertical stabilizer -->
<polygon class="tail-v" points="
520,180
560,100
580,100
580,180
"/>
<text class="tl" x="565" y="150" text-anchor="middle">Vertical</text>
<text class="tl" x="565" y="162" text-anchor="middle">stabilizer</text>
<!-- Rudder -->
<polygon points="575,105 590,105 590,178 580,178" fill="none" stroke="#185FA5" stroke-width="0.5" stroke-dasharray="3 2"/>
<text class="tl" x="595" y="145" opacity=".6">Rudder</text>
<!-- Horizontal stabilizer -->
<polygon class="tail-h" points="
500,195
460,175
465,170
580,170
580,180
520,195
"/>
<text class="tl" x="510" y="166">Horizontal stabilizer</text>
<!-- Elevator -->
<polygon points="462,174 450,168 455,163 467,169" fill="none" stroke="#185FA5" stroke-width="0.5" stroke-dasharray="3 2"/>
<text class="tl" x="440" y="158" opacity=".6">Elevator</text>
<!-- LANDING GEAR -->
<!-- Nose gear -->
<line class="gear" x1="100" y1="220" x2="100" y2="260" stroke-width="3"/>
<ellipse class="wheel" cx="100" cy="268" rx="8" ry="10"/>
<text class="tl" x="100" y="290" text-anchor="middle">Nose gear</text>
<!-- Main gear (under wing/fuselage junction) -->
<line class="gear" x1="280" y1="220" x2="280" y2="270" stroke-width="4"/>
<line class="gear" x1="268" y1="265" x2="292" y2="265" stroke-width="3"/>
<ellipse class="wheel" cx="268" cy="278" rx="10" ry="12"/>
<ellipse class="wheel" cx="292" cy="278" rx="10" ry="12"/>
<text class="tl" x="280" y="302" text-anchor="middle">Main gear</text>
<!-- LABELS with leader lines -->
<!-- Cockpit label -->
<line class="leader" x1="60" y1="175" x2="60" y2="140"/>
<text class="ts" x="60" y="132" text-anchor="middle">Cockpit</text>
<!-- Wing label -->
<line class="leader" x1="250" y1="250" x2="290" y2="330"/>
<text class="ts" x="290" y="345" text-anchor="middle">Wing structure</text>
<text class="tl" x="290" y="358" text-anchor="middle">Spars, ribs, skin</text>
<!-- Fuselage label -->
<line class="leader" x1="400" y1="180" x2="400" y2="140"/>
<text class="ts" x="400" y="132" text-anchor="middle">Fuselage</text>
<text class="tl" x="400" y="145" text-anchor="middle">Pressure vessel</text>
</svg>
```
## CSS Classes for Physical Diagrams
When creating physical/structural diagrams, define semantic classes for each component type:
```css
/* Structure shapes */
.fuselage { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; }
.wing { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
.tail-v { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
.tail-h { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
/* Interior sections */
.cockpit { fill: #EEEDFE; stroke: #534AB7; stroke-width: 1; }
.first-class { fill: #FBEAF0; stroke: #993556; stroke-width: 0.5; }
.business-class { fill: #FAECE7; stroke: #993C1D; stroke-width: 0.5; }
.economy-class { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 0.5; }
.cargo { fill: #D3D1C7; stroke: #5F5E5A; stroke-width: 0.5; }
/* Systems */
.engine { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; }
.fuel-tank { fill: #FAEEDA; stroke: #854F0B; stroke-width: 0.5; stroke-dasharray: 3 2; }
.flap { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 0.5; }
/* Mechanical */
.gear { fill: #444441; stroke: #2C2C2A; stroke-width: 0.5; }
.wheel { fill: #2C2C2A; stroke: #1a1a18; stroke-width: 0.5; }
```
## Shape Selection Guide
| Physical form | SVG element | Example |
|---------------|-------------|---------|
| Curved body | `<path>` with Q (quadratic) or C (cubic) curves | Fuselage, nose cone |
| Tapered/angular | `<polygon>` | Wings, stabilizers |
| Cylindrical | `<ellipse>` | Engines, wheels, tanks |
| Linear structure | `<line>` | Struts, pylons, gear legs |
| Internal sections | `<rect>` inside parent shape | Cabin classes |
| Dashed boundaries | `stroke-dasharray` on any shape | Fuel tanks, control surfaces |
## Layout Notes
- **ViewBox**: 680×400 (wider aspect ratio suits side profile)
- **Layering**: Draw outer structures first, then interior details on top
- **Leader lines**: Use `.leader` class (dashed) to connect labels to components
- **Text sizes**: Use `.tl` (10px) for component labels, `.ts` (12px) for section labels
- **Semantic colors**: Group by system (structure=blue, propulsion=coral, fuel=amber, etc.)
optional-skills/creative/concept-diagrams/examples/cpu-ooo-microarchitecture.md
+236
View File
@@ -0,0 +1,236 @@
# Out-of-Order CPU Core Microarchitecture
A structural diagram showing the internal pipeline stages of a modern superscalar out-of-order CPU core. Demonstrates multi-stage vertical flow with parallel paths, fan-out patterns for execution ports, and a separate memory hierarchy sidebar.
## Key Patterns Used
- **Multi-stage vertical flow**: Six pipeline stages (Front End → Rename → Schedule → Execute → Retire)
- **Parallel decode paths**: Main decode and µop cache bypass (dashed line for cache hit)
- **Container grouping**: Logical stages grouped in colored containers
- **Fan-out pattern**: Single scheduler dispatching to 6 execution ports
- **Sidebar layout**: Memory hierarchy placed in separate column on right
- **Stage labels**: Left-aligned labels indicating pipeline phase
- **Color-coded semantics**: Different colors for each functional unit category
## Diagram Type
This is a **hybrid structural/flow** diagram:
- **Flow aspect**: Instructions move top-to-bottom through pipeline stages
- **Structural aspect**: Components are grouped by function (rename unit, execution cluster)
- **Sidebar**: Memory hierarchy is architecturally separate but connected via data paths
## Pipeline Stage Breakdown
### Front End (Purple)
```xml
<!-- Fetch Unit -->
<g class="node c-purple">
<rect x="40" y="70" width="140" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="110" y="90" text-anchor="middle" dominant-baseline="central">Fetch unit</text>
<text class="ts" x="110" y="110" text-anchor="middle" dominant-baseline="central">6-wide, 32B/cycle</text>
</g>
<!-- Branch Predictor (subordinate) -->
<g class="node c-purple">
<rect x="40" y="140" width="140" height="44" rx="8" stroke-width="0.5"/>
<text class="th" x="110" y="162" text-anchor="middle" dominant-baseline="central">Branch predictor</text>
</g>
<!-- Decode -->
<g class="node c-purple">
<rect x="230" y="70" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="310" y="90" text-anchor="middle" dominant-baseline="central">Decode</text>
<text class="ts" x="310" y="110" text-anchor="middle" dominant-baseline="central">x86 → µops, 6-wide</text>
</g>
```
### µop Cache Bypass Path (Teal)
The µop cache (Decoded Stream Buffer) provides an alternate path that bypasses the complex decoder:
```xml
<!-- µop Cache parallel to decode -->
<g class="node c-teal">
<rect x="230" y="150" width="160" height="50" rx="8" stroke-width="0.5"/>
<text class="th" x="310" y="168" text-anchor="middle" dominant-baseline="central">µop cache (DSB)</text>
<text class="ts" x="310" y="186" text-anchor="middle" dominant-baseline="central">4K entries, 8-wide</text>
</g>
<!-- Dashed bypass path indicating cache hit -->
<path d="M180 110 L205 110 L205 175 L230 175" fill="none" class="arr"
stroke-dasharray="4 3" marker-end="url(#arrow)"/>
<text class="tx" x="164" y="148" opacity=".6">hit</text>
```
### Rename/Allocate Container (Coral)
Groups related rename components in a container:
```xml
<!-- Outer container -->
<g class="c-coral">
<rect x="40" y="250" width="530" height="130" rx="12" stroke-width="0.5"/>
<text class="th" x="60" y="274">Rename / allocate</text>
<text class="ts" x="60" y="292">Map architectural → physical registers</text>
</g>
<!-- Inner components -->
<g class="node c-coral">
<rect x="60" y="310" width="180" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="150" y="330" text-anchor="middle" dominant-baseline="central">Register alias table</text>
<text class="ts" x="150" y="350" text-anchor="middle" dominant-baseline="central">180 physical regs</text>
</g>
```
### Scheduler Fan-Out Pattern (Amber → Teal)
Single unified scheduler dispatching to multiple execution ports:
```xml
<!-- Unified Scheduler -->
<g class="node c-amber">
<rect x="140" y="420" width="330" height="50" rx="8" stroke-width="0.5"/>
<text class="th" x="305" y="438" text-anchor="middle" dominant-baseline="central">Unified scheduler</text>
<text class="ts" x="305" y="456" text-anchor="middle" dominant-baseline="central">97 entries, out-of-order dispatch</text>
</g>
<!-- Fan-out arrows to 6 ports -->
<line x1="170" y1="470" x2="90" y2="540" class="arr" marker-end="url(#arrow)"/>
<line x1="215" y1="470" x2="170" y2="540" class="arr" marker-end="url(#arrow)"/>
<line x1="265" y1="470" x2="250" y2="540" class="arr" marker-end="url(#arrow)"/>
<line x1="305" y1="470" x2="330" y2="540" class="arr" marker-end="url(#arrow)"/>
<line x1="355" y1="470" x2="410" y2="540" class="arr" marker-end="url(#arrow)"/>
<line x1="420" y1="470" x2="490" y2="540" class="arr" marker-end="url(#arrow)"/>
```
### Execution Port Box Pattern
Compact boxes showing port number and capabilities:
```xml
<!-- Execution port with multi-line capability -->
<g class="node c-teal">
<rect x="55" y="540" width="70" height="64" rx="6" stroke-width="0.5"/>
<text class="th" x="90" y="560" text-anchor="middle" dominant-baseline="central">Port 0</text>
<text class="tx" x="90" y="576" text-anchor="middle" dominant-baseline="central">ALU</text>
<text class="tx" x="90" y="590" text-anchor="middle" dominant-baseline="central">DIV</text>
</g>
```
### Reorder Buffer (Pink)
Wide horizontal bar at bottom showing retirement:
```xml
<g class="c-pink">
<rect x="40" y="670" width="530" height="40" rx="10" stroke-width="0.5"/>
<text class="th" x="305" y="694" text-anchor="middle" dominant-baseline="central">Reorder buffer (ROB) — 512 entries, 8-wide retire</text>
</g>
```
### Memory Hierarchy Sidebar (Blue)
Separate column showing cache levels:
```xml
<!-- Container -->
<g class="c-blue">
<rect x="600" y="30" width="190" height="360" rx="16" stroke-width="0.5"/>
<text class="th" x="695" y="54" text-anchor="middle">Memory hierarchy</text>
</g>
<!-- Cache levels stacked vertically -->
<g class="node c-blue">
<rect x="620" y="70" width="150" height="50" rx="8" stroke-width="0.5"/>
<text class="th" x="695" y="88" text-anchor="middle" dominant-baseline="central">L1-I cache</text>
<text class="ts" x="695" y="106" text-anchor="middle" dominant-baseline="central">32 KB, 8-way</text>
</g>
<!-- Additional levels follow same pattern -->
```
## Connection Patterns
### Instruction Fetch Path
Horizontal arrow from L1-I cache to fetch unit:
```xml
<path d="M620 95 L200 95" fill="none" class="arr" marker-end="url(#arrow)"/>
<text class="tx" x="410" y="88" text-anchor="middle" opacity=".6">instruction fetch</text>
```
### Load/Store Path
Complex path from execution ports to L1-D cache:
```xml
<path d="M250 604 L250 640 L580 640 L580 160 L620 160" fill="none" class="arr" marker-end="url(#arrow)"/>
<text class="tx" x="415" y="652" text-anchor="middle" opacity=".6">load / store</text>
```
### Commit Path (dashed)
Dashed line showing write-back from ROB to register file:
```xml
<path d="M550 690 L580 690 L580 445 L595 445" fill="none" class="arr" stroke-dasharray="4 3"/>
<text class="tx" x="590" y="578" opacity=".6" transform="rotate(-90 590 578)">commit</text>
```
### Path Merge (Decode + µop Cache)
Two paths converging before rename:
```xml
<line x1="390" y1="98" x2="430" y2="98" class="arr"/>
<line x1="390" y1="175" x2="430" y2="175" class="arr"/>
<path d="M430 98 L430 175" fill="none" stroke="var(--text-secondary)" stroke-width="1.5"/>
<line x1="430" y1="136" x2="470" y2="136" class="arr" marker-end="url(#arrow)"/>
```
## Text Classes
This diagram uses an additional text class for very small labels:
```css
.tx { font-family: system-ui, -apple-system, sans-serif; font-size: 10px; fill: var(--text-secondary); }
```
Used for:
- Execution port capability labels (ALU, Branch, Load, etc.)
- Connection labels (instruction fetch, load/store, commit)
- DRAM latency annotation
## Color Semantic Mapping
| Color | Stage | Components |
|-------|-------|------------|
| `c-purple` | Front end | Fetch, Branch predictor, Decode |
| `c-teal` | Execution | µop cache, Execution ports |
| `c-coral` | Rename | RAT, Physical RF, Free list |
| `c-amber` | Schedule | Unified scheduler |
| `c-pink` | Retire | Reorder buffer |
| `c-blue` | Memory | L1-I, L1-D, L2, DRAM |
| `c-gray` | External | Off-chip DRAM |
## Layout Notes
- **ViewBox**: 820×720 (taller than wide for vertical pipeline flow)
- **Main pipeline**: x=40 to x=570 (530px width)
- **Memory sidebar**: x=600 to x=790 (190px width)
- **Stage labels**: x=30, left-aligned, 50% opacity
- **Vertical spacing**: ~80-100px between major stages
- **Container padding**: 20px inside containers
- **Port spacing**: 80px between execution port centers
- **Legend**: Bottom-right of memory sidebar, explains color coding
## Architectural Details Shown
| Component | Specification | Notes |
|-----------|---------------|-------|
| Fetch | 6-wide, 32B/cycle | Typical modern Intel/AMD |
| Decode | 6-wide, x86→µops | Complex decoder |
| µop Cache | 4K entries, 8-wide | Bypass for hot code |
| RAT | 180 physical regs | Supports deep OoO |
| Scheduler | 97 entries | Unified RS |
| Execution | 6 ports | ALU×2, Load, Store×2, Vector |
| ROB | 512 entries, 8-wide | In-order retirement |
| L1-I | 32 KB, 8-way | Instruction cache |
| L1-D | 48 KB, 12-way | Data cache |
| L2 | 1.25 MB, 20-way | Unified |
| DRAM | DDR5-6400, ~80ns | Off-chip |
## When to Use This Pattern
Use this diagram style for:
- CPU/GPU microarchitecture visualization
- Compiler pipeline stages
- Network packet processing pipelines
- Any system with parallel execution units fed by a scheduler
- Hardware designs with multiple functional units
optional-skills/creative/concept-diagrams/examples/electricity-grid-flow.md
+182
View File
@@ -0,0 +1,182 @@
# Electricity Grid: Generation to Consumption
A left-to-right flow diagram showing electricity from multiple generation sources through transmission and distribution networks to end consumers. Demonstrates multi-stage flow layout, voltage level visual hierarchy, and smart grid data overlay.
## Key Patterns Used
- **Multi-stage horizontal flow**: Four distinct columns (Generation → Transmission → Distribution → Consumption)
- **Stage dividers**: Vertical dashed lines separating each phase
- **Voltage level hierarchy**: Different line weights/colors for HV, MV, LV
- **Smart grid data overlay**: Dashed data flow lines from control center
- **Capacity labels**: Power ratings on generation sources
- **Multiple source convergence**: Four generators feeding into single transmission grid
## New Shape Techniques
### Nuclear Plant (cooling tower + reactor)
```xml
<!-- Cooling tower (hyperbolic curve) -->
<path class="nuclear-tower" d="M 25 80 Q 15 60 20 40 Q 25 20 40 15 Q 55 20 60 40 Q 65 60 55 80 Z"/>
<!-- Steam clouds -->
<ellipse class="nuclear-steam" cx="40" cy="8" rx="12" ry="6"/>
<!-- Reactor dome -->
<rect class="nuclear-building" x="65" y="45" width="40" height="35" rx="3"/>
<ellipse class="nuclear-building" cx="85" cy="45" rx="20" ry="8"/>
```
### Gas Peaker Plant (with flames)
```xml
<rect class="gas-plant" x="0" y="25" width="70" height="40" rx="3"/>
<!-- Smokestacks -->
<rect class="gas-stack" x="15" y="5" width="8" height="25" rx="1"/>
<!-- Flame -->
<path class="gas-flame" d="M 19 5 Q 17 0 19 -3 Q 21 0 19 5"/>
<!-- Turbine housing -->
<ellipse class="gas-plant" cx="55" cy="45" rx="12" ry="8"/>
```
### Transmission Pylon with Insulators
```xml
<!-- Tapered tower -->
<polygon class="pylon" points="20,0 25,0 30,80 15,80"/>
<!-- Cross arms -->
<line class="pylon-arm" x1="5" y1="10" x2="40" y2="10"/>
<line class="pylon-arm" x1="8" y1="25" x2="37" y2="25"/>
<!-- Insulators (where lines attach) -->
<circle class="insulator" cx="8" cy="10" r="3"/>
<circle class="insulator" cx="37" cy="10" r="3"/>
```
### Transformer Symbol
```xml
<!-- Two coils with core -->
<circle class="transformer-coil" cx="25" cy="25" r="12"/>
<circle class="transformer-coil" cx="55" cy="25" r="12"/>
<rect class="transformer-core" x="35" y="15" width="10" height="20" rx="2"/>
<!-- Busbars -->
<line x1="0" y1="15" x2="-10" y2="15" stroke="#EF9F27" stroke-width="3"/>
```
### Pole-mounted Transformer
```xml
<rect class="pole" x="18" y="0" width="4" height="60"/>
<line x1="10" y1="8" x2="30" y2="8" stroke="#854F0B" stroke-width="2"/>
<rect class="dist-transformer" x="8" y="15" width="24" height="18" rx="2"/>
<line class="lv-line" x1="20" y1="33" x2="20" y2="60"/>
```
### House with Roof
```xml
<rect class="home" x="0" y="25" width="35" height="30" rx="2"/>
<polygon class="home-roof" points="0,25 17,8 35,25"/>
<!-- Door -->
<rect x="8" y="35" width="8" height="15" fill="#085041"/>
<!-- Window -->
<rect x="22" y="32" width="8" height="8" fill="#9FE1CB"/>
```
### Factory Building
```xml
<rect class="factory" x="0" y="15" width="90" height="50" rx="3"/>
<!-- Smokestacks -->
<rect class="factory-stack" x="15" y="0" width="10" height="20"/>
<!-- Windows row -->
<rect x="10" y="30" width="15" height="12" fill="#F5C4B3"/>
<rect x="30" y="30" width="15" height="12" fill="#F5C4B3"/>
<!-- Loading dock -->
<rect x="55" y="50" width="30" height="15" fill="#993C1D"/>
```
### EV Charger with Car
```xml
<!-- Charging station -->
<rect class="ev-charger" x="20" y="0" width="25" height="45" rx="3"/>
<rect x="24" y="5" width="17" height="12" rx="1" fill="#3C3489"/>
<!-- Cable -->
<path d="M 32 20 Q 32 35 45 40" stroke="#534AB7" stroke-width="2" fill="none"/>
<circle cx="45" cy="40" r="4" fill="#534AB7"/>
<!-- Status light -->
<circle cx="32" cy="38" r="3" fill="#97C459"/>
<!-- EV Car -->
<path class="ev-car" d="M 5 20 L 5 12 Q 5 5 15 5 L 45 5 Q 55 5 55 12 L 55 20 Z"/>
<!-- Windows -->
<rect x="10" y="8" width="15" height="8" rx="2" fill="#534AB7"/>
<!-- Wheels -->
<circle cx="15" cy="22" r="5" fill="#2C2C2A"/>
<!-- Charging bolt icon -->
<path d="M 28 12 L 32 8 L 30 11 L 34 11 L 30 16 L 32 13 Z" fill="#97C459"/>
```
## Voltage Level Line Styles
```css
/* High voltage (transmission) - thick, bright */
.hv-line { stroke: #EF9F27; stroke-width: 2.5; fill: none; }
/* Medium voltage (distribution) - medium */
.mv-line { stroke: #BA7517; stroke-width: 2; fill: none; }
/* Low voltage (consumer) - thin, darker */
.lv-line { stroke: #854F0B; stroke-width: 1.5; fill: none; }
/* Smart grid data - dashed purple */
.data-flow { stroke: #7F77DD; stroke-width: 1; fill: none; stroke-dasharray: 3 2; opacity: 0.7; }
```
## Flow Arrow Marker
```xml
<defs>
<marker id="flow-arrow" viewBox="0 0 10 10" refX="9" refY="5"
markerWidth="6" markerHeight="6" orient="auto">
<path d="M0,0 L10,5 L0,10 Z" fill="#EF9F27"/>
</marker>
</defs>
<!-- Usage -->
<line x1="140" y1="105" x2="210" y2="105" class="hv-line" marker-end="url(#flow-arrow)"/>
```
## CSS Classes
```css
/* Generation */
.nuclear-tower { fill: #B4B2A9; stroke: #5F5E5A; stroke-width: 1; }
.nuclear-building { fill: #EEEDFE; stroke: #534AB7; stroke-width: 1; }
.solar-panel { fill: #3C3489; stroke: #534AB7; stroke-width: 0.5; }
.wind-tower { fill: #B4B2A9; stroke: #5F5E5A; stroke-width: 1; }
.wind-blade { fill: #F1EFE8; stroke: #888780; stroke-width: 0.5; }
.gas-plant { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; }
.gas-flame { fill: #EF9F27; }
/* Transmission */
.pylon { fill: #5F5E5A; stroke: #444441; stroke-width: 0.5; }
.insulator { fill: #FAEEDA; stroke: #854F0B; stroke-width: 0.5; }
.substation { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
.transformer-coil { fill: none; stroke: #185FA5; stroke-width: 1.5; }
/* Distribution */
.pole { fill: #854F0B; stroke: #633806; stroke-width: 0.5; }
.dist-transformer { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 1; }
/* Consumption */
.home { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 1; }
.home-roof { fill: #0F6E56; stroke: #085041; stroke-width: 0.5; }
.factory { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; }
.ev-charger { fill: #EEEDFE; stroke: #534AB7; stroke-width: 1; }
.ev-car { fill: #3C3489; stroke: #534AB7; stroke-width: 0.5; }
/* Smart grid */
.smart-grid { fill: #EEEDFE; stroke: #534AB7; stroke-width: 1.5; }
```
## Layout Notes
- **ViewBox**: 820×520 (wide for 4-column layout)
- **Column widths**: ~200px per stage
- **Stage dividers**: Vertical dashed lines at x=200, 420, 620
- **Stage labels**: Top of diagram, uppercase for emphasis
- **Flow direction**: Left-to-right with arrows showing power flow
- **Data overlay**: Smart grid data lines use different style (dashed purple) to distinguish from power lines
- **Capacity labels**: Show MW ratings on generators for context
- **Voltage labels**: Show transformation ratios at substations
optional-skills/creative/concept-diagrams/examples/feature-film-production-pipeline.md
+172
View File
@@ -0,0 +1,172 @@
# Feature Film Production Pipeline
A phased workflow showing the five stages of filmmaking, using containers with inner nodes and horizontal sub-flows within a phase.
## Key Patterns Used
- **Phase containers**: Large rounded rectangles with neutral background and dashed borders
- **Inner task nodes**: Smaller colored nodes inside containers for sub-tasks
- **Horizontal flow within container**: Post-production shows sequential pipeline with arrows (Editing → Color → VFX → Sound → Score)
- **Consistent phase spacing**: ~30px gap between phase containers
- **Phase labels with subtitles**: Each container has title + description
## Diagram
```xml
<svg width="100%" viewBox="0 0 680 780" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<!-- Phase 1: Development -->
<g>
<rect x="40" y="30" width="600" height="110" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
<text class="th" x="66" y="56">Development</text>
<text class="ts" x="66" y="74">Concept to greenlight</text>
</g>
<g class="node c-purple">
<rect x="70" y="90" width="160" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="150" y="108" text-anchor="middle" dominant-baseline="central">Script / screenplay</text>
</g>
<g class="node c-purple">
<rect x="260" y="90" width="160" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="340" y="108" text-anchor="middle" dominant-baseline="central">Financing / budget</text>
</g>
<g class="node c-purple">
<rect x="450" y="90" width="160" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="530" y="108" text-anchor="middle" dominant-baseline="central">Casting leads</text>
</g>
<!-- Arrow to Phase 2 -->
<line x1="340" y1="140" x2="340" y2="170" class="arr" marker-end="url(#arrow)"/>
<!-- Phase 2: Pre-production -->
<g>
<rect x="40" y="170" width="600" height="110" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
<text class="th" x="66" y="196">Pre-production</text>
<text class="ts" x="66" y="214">Planning and preparation</text>
</g>
<g class="node c-teal">
<rect x="70" y="230" width="160" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="150" y="248" text-anchor="middle" dominant-baseline="central">Storyboards</text>
</g>
<g class="node c-teal">
<rect x="260" y="230" width="160" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="340" y="248" text-anchor="middle" dominant-baseline="central">Location scouting</text>
</g>
<g class="node c-teal">
<rect x="450" y="230" width="160" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="530" y="248" text-anchor="middle" dominant-baseline="central">Crew hiring</text>
</g>
<!-- Arrow to Phase 3 -->
<line x1="340" y1="280" x2="340" y2="310" class="arr" marker-end="url(#arrow)"/>
<!-- Phase 3: Production -->
<g>
<rect x="40" y="310" width="600" height="110" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
<text class="th" x="66" y="336">Production</text>
<text class="ts" x="66" y="354">Principal photography</text>
</g>
<g class="node c-coral">
<rect x="70" y="370" width="160" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="150" y="388" text-anchor="middle" dominant-baseline="central">Filming / shooting</text>
</g>
<g class="node c-coral">
<rect x="260" y="370" width="160" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="340" y="388" text-anchor="middle" dominant-baseline="central">Production sound</text>
</g>
<g class="node c-coral">
<rect x="450" y="370" width="160" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="530" y="388" text-anchor="middle" dominant-baseline="central">VFX plates</text>
</g>
<!-- Arrow to Phase 4 -->
<line x1="340" y1="420" x2="340" y2="450" class="arr" marker-end="url(#arrow)"/>
<!-- Phase 4: Post-production -->
<g>
<rect x="40" y="450" width="600" height="150" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
<text class="th" x="66" y="476">Post-production</text>
<text class="ts" x="66" y="494">Assembly and finishing</text>
</g>
<g class="node c-amber">
<rect x="70" y="510" width="110" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="125" y="528" text-anchor="middle" dominant-baseline="central">Editing</text>
</g>
<g class="node c-amber">
<rect x="195" y="510" width="110" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="250" y="528" text-anchor="middle" dominant-baseline="central">Color grade</text>
</g>
<g class="node c-amber">
<rect x="320" y="510" width="90" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="365" y="528" text-anchor="middle" dominant-baseline="central">VFX</text>
</g>
<g class="node c-amber">
<rect x="425" y="510" width="100" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="475" y="528" text-anchor="middle" dominant-baseline="central">Sound mix</text>
</g>
<g class="node c-amber">
<rect x="540" y="510" width="80" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="580" y="528" text-anchor="middle" dominant-baseline="central">Score</text>
</g>
<!-- Flow arrows within post -->
<line x1="180" y1="528" x2="195" y2="528" class="arr" marker-end="url(#arrow)"/>
<line x1="305" y1="528" x2="320" y2="528" class="arr" marker-end="url(#arrow)"/>
<line x1="410" y1="528" x2="425" y2="528" class="arr" marker-end="url(#arrow)"/>
<line x1="525" y1="528" x2="540" y2="528" class="arr" marker-end="url(#arrow)"/>
<!-- Final delivery label -->
<g class="node c-amber">
<rect x="240" y="556" width="200" height="32" rx="6" stroke-width="0.5"/>
<text class="ts" x="340" y="572" text-anchor="middle" dominant-baseline="central">Final master / DCP</text>
</g>
<line x1="340" y1="546" x2="340" y2="556" class="arr" marker-end="url(#arrow)"/>
<!-- Arrow to Phase 5 -->
<line x1="340" y1="600" x2="340" y2="630" class="arr" marker-end="url(#arrow)"/>
<!-- Phase 5: Distribution -->
<g>
<rect x="40" y="630" width="600" height="110" rx="16" stroke-width="1" stroke-dasharray="6 4" fill="var(--bg-secondary)" stroke="var(--border)"/>
<text class="th" x="66" y="656">Distribution</text>
<text class="ts" x="66" y="674">Release and exhibition</text>
</g>
<g class="node c-blue">
<rect x="70" y="690" width="160" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="150" y="708" text-anchor="middle" dominant-baseline="central">Film festivals</text>
</g>
<g class="node c-blue">
<rect x="260" y="690" width="160" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="340" y="708" text-anchor="middle" dominant-baseline="central">Theatrical release</text>
</g>
<g class="node c-blue">
<rect x="450" y="690" width="160" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="530" y="708" text-anchor="middle" dominant-baseline="central">Streaming / VOD</text>
</g>
</svg>
```
## Color Assignments
| Element | Color | Reason |
|---------|-------|--------|
| Phase containers | Neutral (dashed) | Subtle grouping, doesn't compete with content |
| Development tasks | `c-purple` | Creative/concept work |
| Pre-production tasks | `c-teal` | Planning and preparation |
| Production tasks | `c-coral` | Active filming (main event) |
| Post-production tasks | `c-amber` | Processing/refinement |
| Distribution tasks | `c-blue` | Outward delivery/release |
## Layout Notes
- **ViewBox**: 680×780 (standard width, tall for 5 phases)
- **Container style**: Dashed border (`stroke-dasharray="6 4"`), neutral fill (`var(--bg-secondary)`), `stroke-width="1"`
- **Container height**: 110px for 3-node phases, 150px for post-production (more complex)
- **Inner node dimensions**: 160×36px for standard tasks, variable width for post-production sequential flow
- **Phase gap**: 30px between containers
- **Horizontal sub-flow**: Post-production uses tightly packed nodes with arrows between them to show sequence
- **Convergence node**: "Final master / DCP" sits below the horizontal flow, collecting all post outputs
optional-skills/creative/concept-diagrams/examples/hospital-emergency-department-flow.md
+165
View File
@@ -0,0 +1,165 @@
# Hospital Emergency Department Flow
A multi-path flowchart showing patient journey through an emergency department with priority-based routing using semantic colors (red=critical, amber=urgent, green=stable).
## Key Patterns Used
- **Semantic color coding**: Red/amber/green for priority levels (not arbitrary decoration)
- **Stage labels**: Left-aligned faded labels marking workflow phases
- **Convergent paths**: Multiple entry points merging, then branching, then converging again
- **Nested containers**: Diagnostics grouped in a container with inner nodes
- **Legend**: Color key at bottom explaining priority levels
## Diagram
```xml
<svg width="100%" viewBox="0 0 680 620" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
</defs>
<!-- Stage labels -->
<text class="ts" x="40" y="68" text-anchor="start" opacity=".5">Arrival</text>
<text class="ts" x="40" y="168" text-anchor="start" opacity=".5">Assessment</text>
<text class="ts" x="40" y="288" text-anchor="start" opacity=".5">Priority routing</text>
<text class="ts" x="40" y="418" text-anchor="start" opacity=".5">Diagnostics</text>
<text class="ts" x="40" y="518" text-anchor="start" opacity=".5">Outcome</text>
<!-- Arrival: Ambulance -->
<g class="node c-gray">
<rect x="140" y="40" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="220" y="60" text-anchor="middle" dominant-baseline="central">Ambulance</text>
<text class="ts" x="220" y="80" text-anchor="middle" dominant-baseline="central">Emergency transport</text>
</g>
<!-- Arrival: Walk-in -->
<g class="node c-gray">
<rect x="380" y="40" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="460" y="60" text-anchor="middle" dominant-baseline="central">Walk-in</text>
<text class="ts" x="460" y="80" text-anchor="middle" dominant-baseline="central">Self-arrival</text>
</g>
<!-- Arrows to Triage -->
<line x1="220" y1="96" x2="300" y2="140" class="arr" marker-end="url(#arrow)"/>
<line x1="460" y1="96" x2="380" y2="140" class="arr" marker-end="url(#arrow)"/>
<!-- Triage -->
<g class="node c-purple">
<rect x="240" y="140" width="200" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="340" y="160" text-anchor="middle" dominant-baseline="central">Triage</text>
<text class="ts" x="340" y="180" text-anchor="middle" dominant-baseline="central">Nurse assessment, vitals</text>
</g>
<!-- Arrows from Triage to Priority -->
<line x1="280" y1="196" x2="140" y2="260" class="arr" marker-end="url(#arrow)"/>
<line x1="340" y1="196" x2="340" y2="260" class="arr" marker-end="url(#arrow)"/>
<line x1="400" y1="196" x2="540" y2="260" class="arr" marker-end="url(#arrow)"/>
<!-- Priority: Red - Trauma -->
<g class="node c-red">
<rect x="60" y="260" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="140" y="280" text-anchor="middle" dominant-baseline="central">Trauma bay</text>
<text class="ts" x="140" y="300" text-anchor="middle" dominant-baseline="central">Priority: critical</text>
</g>
<!-- Priority: Yellow - Exam rooms -->
<g class="node c-amber">
<rect x="260" y="260" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="340" y="280" text-anchor="middle" dominant-baseline="central">Exam rooms</text>
<text class="ts" x="340" y="300" text-anchor="middle" dominant-baseline="central">Priority: urgent</text>
</g>
<!-- Priority: Green - Waiting -->
<g class="node c-green">
<rect x="460" y="260" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="540" y="280" text-anchor="middle" dominant-baseline="central">Waiting area</text>
<text class="ts" x="540" y="300" text-anchor="middle" dominant-baseline="central">Priority: stable</text>
</g>
<!-- Arrows to Diagnostics -->
<line x1="140" y1="316" x2="220" y2="390" class="arr" marker-end="url(#arrow)"/>
<line x1="340" y1="316" x2="340" y2="390" class="arr" marker-end="url(#arrow)"/>
<line x1="540" y1="316" x2="460" y2="390" class="arr" marker-end="url(#arrow)"/>
<!-- Diagnostics container -->
<g class="c-teal">
<rect x="140" y="390" width="400" height="56" rx="12" stroke-width="0.5"/>
</g>
<!-- Labs -->
<g class="node c-teal">
<rect x="160" y="400" width="110" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="215" y="418" text-anchor="middle" dominant-baseline="central">Labs</text>
</g>
<!-- Imaging -->
<g class="node c-teal">
<rect x="285" y="400" width="110" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="340" y="418" text-anchor="middle" dominant-baseline="central">Imaging</text>
</g>
<!-- Diagnosis -->
<g class="node c-teal">
<rect x="410" y="400" width="110" height="36" rx="6" stroke-width="0.5"/>
<text class="ts" x="465" y="418" text-anchor="middle" dominant-baseline="central">Diagnosis</text>
</g>
<!-- Arrows to Outcomes -->
<line x1="215" y1="446" x2="160" y2="490" class="arr" marker-end="url(#arrow)"/>
<line x1="340" y1="446" x2="340" y2="490" class="arr" marker-end="url(#arrow)"/>
<line x1="465" y1="446" x2="520" y2="490" class="arr" marker-end="url(#arrow)"/>
<!-- Outcome: Admission -->
<g class="node c-coral">
<rect x="80" y="490" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="160" y="510" text-anchor="middle" dominant-baseline="central">Admission</text>
<text class="ts" x="160" y="530" text-anchor="middle" dominant-baseline="central">Inpatient ward</text>
</g>
<!-- Outcome: Surgery -->
<g class="node c-coral">
<rect x="260" y="490" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="340" y="510" text-anchor="middle" dominant-baseline="central">Surgery</text>
<text class="ts" x="340" y="530" text-anchor="middle" dominant-baseline="central">Operating room</text>
</g>
<!-- Outcome: Discharge -->
<g class="node c-coral">
<rect x="440" y="490" width="160" height="56" rx="8" stroke-width="0.5"/>
<text class="th" x="520" y="510" text-anchor="middle" dominant-baseline="central">Discharge</text>
<text class="ts" x="520" y="530" text-anchor="middle" dominant-baseline="central">Home with instructions</text>
</g>
<!-- Legend -->
<text class="ts" x="140" y="580" opacity=".5">Priority levels</text>
<g class="c-red"><rect x="140" y="592" width="14" height="14" rx="3" stroke-width="0.5"/></g>
<text class="ts" x="162" y="604">Critical</text>
<g class="c-amber"><rect x="240" y="592" width="14" height="14" rx="3" stroke-width="0.5"/></g>
<text class="ts" x="262" y="604">Urgent</text>
<g class="c-green"><rect x="340" y="592" width="14" height="14" rx="3" stroke-width="0.5"/></g>
<text class="ts" x="362" y="604">Stable</text>
</svg>
```
## Color Assignments
| Element | Color | Reason |
|---------|-------|--------|
| Entry points (Ambulance, Walk-in) | `c-gray` | Neutral starting points |
| Triage | `c-purple` | Processing/assessment step |
| Trauma bay | `c-red` | Critical priority (semantic) |
| Exam rooms | `c-amber` | Urgent priority (semantic) |
| Waiting area | `c-green` | Stable priority (semantic) |
| Diagnostics | `c-teal` | Clinical services category |
| Outcomes | `c-coral` | Final disposition category |
## Layout Notes
- **ViewBox**: 680×620 (standard width, extended height for 5 stages)
- **Stage spacing**: ~110-130px between stage rows
- **Diagonal arrows**: Connect nodes across columns naturally
- **Container with inner nodes**: Diagnostics uses outer `c-teal` rect with inner node rects
optional-skills/creative/concept-diagrams/examples/ml-benchmark-grouped-bar-chart.md
+114
View File
@@ -0,0 +1,114 @@
# ML Benchmark Grouped Bar Chart with Dual Axis
A quantitative data visualization comparing LLM inference speed across quantization levels with dual Y-axes, threshold markers, and an inset accuracy table.
## Key Patterns Used
- **Grouped bars**: Min/max range pairs per category using semantic color pairs (lighter=min, darker=max)
- **Dual Y-axis**: Left axis for primary metric (tok/s), right axis for secondary metric (VRAM GB)
- **Overlay line graph**: `<polyline>` with labeled dots showing VRAM usage across categories
- **Threshold marker**: Dashed red horizontal line indicating hardware limit (24 GB GPU)
- **Zone annotations**: Subtle text labels above/below threshold for context
- **Inset data table**: Alternating row fills below chart with quantitative accuracy data
- **Semantic color coding**: Each quantization level gets its own color from the skill palette (red=OOM, amber=slow, teal=sweet spot, blue=fast)
## Diagram Type
This is a **quantitative data chart** with:
- **Grouped vertical bars**: Range bars showing min–max performance per category
- **Secondary axis line**: VRAM usage overlaid as a connected scatter plot
- **Threshold annotation**: Hardware constraint line
- **Inset table**: Supporting accuracy metrics
## Chart Layout Formula
```
Chart area: x=90–590, y=70–410 (500px wide, 340px tall)
Left Y-axis: Primary metric (tok/s)
y = 410 − (val / max_val) × 340
Right Y-axis: Secondary metric (VRAM GB)
Same formula, different scale labels
Groups: Divide width by number of categories
Bars: Each group → min bar (34px) + 8px gap + max bar (34px)
Line overlay: <polyline> connecting data points across group centers
Threshold: Horizontal dashed line at critical value
Table: Below chart, alternating row fills
```
## Data Mapped
| Quantization | Model Size | Speed (tok/s) | VRAM (GB) | MMLU Pro | Status |
|-------------|-----------|---------------|-----------|----------|--------|
| FP16 | 62 GB | 0.5–2 | 62 | 75.2 | OOM / unusable |
| Q8_0 | 32 GB | 3–5 | 32 | 75.0 | Partial offload |
| Q4_K_M | 16.8 GB | 8–12 | 16.8 | 73.1 | Fits in VRAM ✓ |
| IQ3_M | 12 GB | 12–15 | 12 | 70.5 | Full GPU speed |
## Bar CSS Classes
```css
/* Light mode */
.bar-fp16-min { fill: #FCEBEB; stroke: #A32D2D; stroke-width: 0.75; }
.bar-fp16-max { fill: #F7C1C1; stroke: #A32D2D; stroke-width: 0.75; }
.bar-q8-min { fill: #FAEEDA; stroke: #854F0B; stroke-width: 0.75; }
.bar-q8-max { fill: #FAC775; stroke: #854F0B; stroke-width: 0.75; }
.bar-q4-min { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 0.75; }
.bar-q4-max { fill: #9FE1CB; stroke: #0F6E56; stroke-width: 0.75; }
.bar-iq3-min { fill: #E6F1FB; stroke: #185FA5; stroke-width: 0.75; }
.bar-iq3-max { fill: #B5D4F4; stroke: #185FA5; stroke-width: 0.75; }
/* Dark mode */
@media (prefers-color-scheme: dark) {
.bar-fp16-min { fill: #501313; stroke: #F09595; }
.bar-fp16-max { fill: #791F1F; stroke: #F09595; }
.bar-q8-min { fill: #412402; stroke: #EF9F27; }
.bar-q8-max { fill: #633806; stroke: #EF9F27; }
.bar-q4-min { fill: #04342C; stroke: #5DCAA5; }
.bar-q4-max { fill: #085041; stroke: #5DCAA5; }
.bar-iq3-min { fill: #042C53; stroke: #85B7EB; }
.bar-iq3-max { fill: #0C447C; stroke: #85B7EB; }
}
```
## Overlay Line CSS
```css
.vram-line { stroke: #534AB7; stroke-width: 2.5; fill: none; }
.vram-dot { fill: #534AB7; stroke: var(--bg-primary); stroke-width: 2; }
.vram-label { font-family: system-ui, sans-serif; font-size: 10px; fill: #534AB7; font-weight: 500; }
```
## Threshold CSS
```css
.threshold { stroke: #A32D2D; stroke-width: 1; stroke-dasharray: 6 3; fill: none; }
.threshold-label { font-family: system-ui, sans-serif; font-size: 10px; fill: #A32D2D; font-weight: 500; }
```
## Table CSS
```css
.tbl-header { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 0.5; }
.tbl-row { fill: transparent; stroke: var(--border); stroke-width: 0.25; }
.tbl-alt { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 0.25; }
```
## Layout Notes
- **ViewBox**: 680×660 (portrait, chart + legend + table)
- **Chart area**: y=70–410, x=90–590
- **Legend row**: y=458–470
- **Inset table**: y=490–620
- **Bar width**: 34px each, 8px gap between min/max pair
- **Group spacing**: 125px center-to-center
- **Dot halo**: White circle (r=6) behind colored dot (r=5) for legibility over bars/grid
## When to Use This Pattern
Use this diagram style for:
- Model benchmark comparisons across quantization levels
- Performance vs. resource usage tradeoff analysis
- Any multi-metric comparison with a hardware/software constraint
- GPU/TPU/accelerator benchmarking dashboards
- Accuracy vs. speed Pareto frontiers
- Hardware requirement sizing charts
optional-skills/creative/concept-diagrams/examples/place-order-uml-sequence.md
+325
View File
@@ -0,0 +1,325 @@
# Place Order — UML Sequence Diagram
A UML sequence diagram for the 'Place Order' use case in an e-commerce system. Six lifelines (:Customer, :ShoppingCart, :OrderController, :PaymentGateway, :InventorySystem, :EmailService) interact across 14 numbered messages. An **alt** combined fragment (amber) covers the three conditional outcomes — payment authorized, payment failed, and item unavailable. A **par** combined fragment (teal) nested inside the success branch shows concurrent email confirmation and stock-level update. Demonstrates activation bars, two distinct arrowhead types, UML pentagon fragment tags, and guard conditions.
## Key Patterns Used
- **6 lifelines at equal spacing**: Lifeline centers placed at x=90, 190, 290, 390, 490, 590 (100px apart) so the first box left-edge lands at x=40 and the last right-edge lands at x=640 — exactly filling the safe area
- **Two-row actor headers**: Each lifeline box shows `":"` (small, tertiary color) on one line and the class name (slightly larger, bold) on a second line, matching the UML anonymous-instance notation `:ClassName`
- **Two separate arrowhead markers**: `#arr-call` is a filled triangle (`<polygon>`) for synchronous calls; `#arr-ret` is an open chevron (`fill="none"`) for dashed return messages — both use `context-stroke` to inherit line color
- **Activation bars**: Narrow 8px-wide rectangles (`class="activation"`) layered on top of lifeline stems to show object execution periods; OrderController's bar spans the entire interaction; shorter bars mark PaymentGateway, InventorySystem, and EmailService during their active windows
- **Combined fragment pentagon tag**: Each `alt` / `par` frame uses a `<polygon>` dog-eared label shape in the top-left corner — points follow the pattern `(x,y) (x+w,y) (x+w+6,y+6) (x+w+6,y+18) (x,y+18)` creating the characteristic UML notch
- **Nested par inside alt**: The `par` rect (teal) sits inside branch 1 of the `alt` rect (amber); inner rect uses inset x/y (+15/+2) so both borders remain visible and distinguishable
- **Guard conditions**: Italic text in `[square brackets]` placed immediately after each alt frame divider line, or just inside the top frame for branch 1 — rendered with a dedicated `guard-lbl` class (italic, amber color)
- **Alt branch dividers**: Solid horizontal lines (`.frag-alt-div`) span the full alt rect width to separate the three branches; par branch separator uses a dashed line (`.frag-par-div`) per UML spec
- **Lifeline end caps**: Short 14px horizontal tick marks at y=590 (bottom of all lifeline stems) to formally terminate each lifeline
- **Message sequence annotation**: A faint counter row below the legend (①–③ / ④–⑩ / ⑪–⑫ / ⑬–⑭) explains the four message groups without adding noise to the diagram body
## Diagram
```xml
<svg width="100%" viewBox="0 0 680 648" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Open chevron arrowhead — return messages -->
<marker id="arr-ret" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
<!-- Filled triangle arrowhead — synchronous calls -->
<marker id="arr-call" viewBox="0 0 10 10" refX="9" refY="5"
markerWidth="7" markerHeight="7" orient="auto">
<polygon points="0,1 10,5 0,9" fill="context-stroke"/>
</marker>
</defs>
<!--
Lifeline centres (x):
L1 :Customer → 90
L2 :ShoppingCart → 190
L3 :OrderController → 290
L4 :PaymentGateway → 390
L5 :InventorySystem → 490
L6 :EmailService → 590
Actor boxes: x = cx−50, y=20, w=100, h=56, rx=6
Lifelines: x = cx, y1=76, y2=590
-->
<!-- ── 1. LIFELINE DASHED STEMS (drawn first, behind everything) ── -->
<line x1="90" y1="76" x2="90" y2="590" class="lifeline"/>
<line x1="190" y1="76" x2="190" y2="590" class="lifeline"/>
<line x1="290" y1="76" x2="290" y2="590" class="lifeline"/>
<line x1="390" y1="76" x2="390" y2="590" class="lifeline"/>
<line x1="490" y1="76" x2="490" y2="590" class="lifeline"/>
<line x1="590" y1="76" x2="590" y2="590" class="lifeline"/>
<!-- ── 2. ACTOR HEADER BOXES ── -->
<!-- :Customer -->
<rect x="40" y="20" width="100" height="56" rx="6" class="actor"/>
<text class="actor-colon" x="90" y="40" text-anchor="middle" dominant-baseline="central">:</text>
<text class="actor-name" x="90" y="58" text-anchor="middle" dominant-baseline="central">Customer</text>
<!-- :ShoppingCart -->
<rect x="140" y="20" width="100" height="56" rx="6" class="actor"/>
<text class="actor-colon" x="190" y="37" text-anchor="middle" dominant-baseline="central">:</text>
<text class="actor-name" x="190" y="55" text-anchor="middle" dominant-baseline="central">ShoppingCart</text>
<!-- :OrderController -->
<rect x="240" y="20" width="100" height="56" rx="6" class="actor"/>
<text class="actor-colon" x="290" y="37" text-anchor="middle" dominant-baseline="central">:</text>
<text class="actor-name" x="290" y="55" text-anchor="middle" dominant-baseline="central">OrderController</text>
<!-- :PaymentGateway -->
<rect x="340" y="20" width="100" height="56" rx="6" class="actor"/>
<text class="actor-colon" x="390" y="37" text-anchor="middle" dominant-baseline="central">:</text>
<text class="actor-name" x="390" y="55" text-anchor="middle" dominant-baseline="central">PaymentGateway</text>
<!-- :InventorySystem -->
<rect x="440" y="20" width="100" height="56" rx="6" class="actor"/>
<text class="actor-colon" x="490" y="37" text-anchor="middle" dominant-baseline="central">:</text>
<text class="actor-name" x="490" y="55" text-anchor="middle" dominant-baseline="central">InventorySystem</text>
<!-- :EmailService -->
<rect x="540" y="20" width="100" height="56" rx="6" class="actor"/>
<text class="actor-colon" x="590" y="37" text-anchor="middle" dominant-baseline="central">:</text>
<text class="actor-name" x="590" y="55" text-anchor="middle" dominant-baseline="central">EmailService</text>
<!-- ── 3. ACTIVATION BARS ── -->
<!-- ShoppingCart: active while forwarding checkout → placeOrder -->
<rect x="186" y="102" width="8" height="26" rx="1" class="activation"/>
<!-- OrderController: active throughout full sequence -->
<rect x="286" y="128" width="8" height="415" rx="1" class="activation"/>
<!-- PaymentGateway: active during auth check (happy-path branch only) -->
<rect x="386" y="154" width="8" height="46" rx="1" class="activation"/>
<!-- InventorySystem: active from reserveItems → updateStockLevels end -->
<rect x="486" y="225" width="8" height="128" rx="1" class="activation"/>
<!-- EmailService: active during confirmation send -->
<rect x="586" y="290" width="8" height="25" rx="1" class="activation"/>
<!-- ── 4. PRE-ALT MESSAGES ── -->
<!-- ① checkout() :Customer → :ShoppingCart -->
<line x1="90" y1="102" x2="186" y2="102" class="msg-call" marker-end="url(#arr-call)"/>
<text class="mlbl" x="140" y="97" text-anchor="middle">checkout()</text>
<!-- ② placeOrder(cartItems) :ShoppingCart → :OrderController -->
<line x1="194" y1="128" x2="286" y2="128" class="msg-call" marker-end="url(#arr-call)"/>
<text class="mlbl" x="242" y="123" text-anchor="middle">placeOrder(cartItems)</text>
<!-- ③ authorizePayment(amount) :OrderController → :PaymentGateway -->
<line x1="294" y1="154" x2="386" y2="154" class="msg-call" marker-end="url(#arr-call)"/>
<text class="mlbl" x="342" y="149" text-anchor="middle">authorizePayment(amount)</text>
<!-- ── 5. ALT COMBINED FRAGMENT y=166 → y=563 ── -->
<!-- Outer alt rectangle -->
<rect x="45" y="166" width="590" height="397" rx="3" class="frag-alt-bg"/>
<!-- Pentagon "alt" tag: TL corner notch shape -->
<polygon points="45,166 84,166 90,173 90,185 45,185" class="frag-alt-tag"/>
<text class="frag-alt-kw" x="67" y="178" text-anchor="middle" dominant-baseline="central">alt</text>
<!-- Guard: branch 1 -->
<text class="guard-lbl" x="96" y="179" dominant-baseline="central">[payment authorized]</text>
<!-- ─── Branch 1: payment authorized ─── -->
<!-- ④ « authorized » :PaymentGateway → :OrderController (dashed return) -->
<line x1="386" y1="200" x2="294" y2="200" class="msg-ret" marker-end="url(#arr-ret)"/>
<text class="rlbl" x="342" y="195" text-anchor="middle">« authorized »</text>
<!-- ⑤ reserveItems(cartItems) :OrderController → :InventorySystem -->
<line x1="294" y1="225" x2="486" y2="225" class="msg-call" marker-end="url(#arr-call)"/>
<text class="mlbl" x="392" y="220" text-anchor="middle">reserveItems(cartItems)</text>
<!-- ⑥ « itemsReserved » :InventorySystem → :OrderController (dashed return) -->
<line x1="486" y1="250" x2="294" y2="250" class="msg-ret" marker-end="url(#arr-ret)"/>
<text class="rlbl" x="392" y="245" text-anchor="middle">« itemsReserved »</text>
<!-- ── 6. PAR COMBINED FRAGMENT (nested inside alt branch 1) y=266 → y=373 ── -->
<!-- Inner par rectangle -->
<rect x="60" y="266" width="560" height="107" rx="3" class="frag-par-bg"/>
<!-- Pentagon "par" tag -->
<polygon points="60,266 97,266 102,272 102,284 60,284" class="frag-par-tag"/>
<text class="frag-par-kw" x="81" y="275" text-anchor="middle" dominant-baseline="central">par</text>
<!-- Par branch 1: email confirmation -->
<!-- ⑦ sendConfirmationEmail() :OrderController → :EmailService -->
<line x1="294" y1="295" x2="586" y2="295" class="msg-call" marker-end="url(#arr-call)"/>
<text class="mlbl" x="442" y="290" text-anchor="middle">sendConfirmationEmail()</text>
<!-- ⑧ « emailQueued » :EmailService → :OrderController (dashed return) -->
<line x1="586" y1="318" x2="294" y2="318" class="msg-ret" marker-end="url(#arr-ret)"/>
<text class="rlbl" x="442" y="313" text-anchor="middle">« emailQueued »</text>
<!-- Par branch divider (dashed, per UML spec) -->
<line x1="60" y1="336" x2="620" y2="336" class="frag-par-div"/>
<!-- Par branch 2: stock level update -->
<!-- ⑨ updateStockLevels() :OrderController → :InventorySystem -->
<line x1="294" y1="355" x2="486" y2="355" class="msg-call" marker-end="url(#arr-call)"/>
<text class="mlbl" x="392" y="350" text-anchor="middle">updateStockLevels()</text>
<!-- PAR fragment ends at y=373 -->
<!-- ⑩ « orderPlaced » :OrderController → :Customer (dashed return, after par) -->
<line x1="286" y1="395" x2="90" y2="395" class="msg-ret" marker-end="url(#arr-ret)"/>
<text class="rlbl" x="190" y="390" text-anchor="middle">« orderPlaced »</text>
<!-- ─── Alt else: [payment failed] ─── -->
<!-- Alt branch divider 1 (solid line) -->
<line x1="45" y1="415" x2="635" y2="415" class="frag-alt-div"/>
<text class="guard-lbl" x="50" y="429" dominant-baseline="central">[payment failed]</text>
<!-- ⑪ « authFailed » :PaymentGateway → :OrderController (dashed return) -->
<line x1="390" y1="448" x2="294" y2="448" class="msg-ret" marker-end="url(#arr-ret)"/>
<text class="rlbl" x="344" y="443" text-anchor="middle">« authFailed »</text>
<!-- ⑫ error(PAYMENT_FAILED) :OrderController → :Customer -->
<line x1="286" y1="470" x2="90" y2="470" class="msg-call" marker-end="url(#arr-call)"/>
<text class="mlbl" x="190" y="465" text-anchor="middle">error(PAYMENT_FAILED)</text>
<!-- ─── Alt else: [item unavailable] ─── -->
<!-- Alt branch divider 2 (solid line) -->
<line x1="45" y1="490" x2="635" y2="490" class="frag-alt-div"/>
<text class="guard-lbl" x="50" y="504" dominant-baseline="central">[item unavailable]</text>
<!-- ⑬ « unavailable » :InventorySystem → :OrderController (dashed return) -->
<line x1="486" y1="523" x2="294" y2="523" class="msg-ret" marker-end="url(#arr-ret)"/>
<text class="rlbl" x="392" y="518" text-anchor="middle">« unavailable »</text>
<!-- ⑭ error(ITEM_UNAVAILABLE) :OrderController → :Customer -->
<line x1="286" y1="545" x2="90" y2="545" class="msg-call" marker-end="url(#arr-call)"/>
<text class="mlbl" x="190" y="540" text-anchor="middle">error(ITEM_UNAVAILABLE)</text>
<!-- ALT fragment ends at y=563 -->
<!-- ── 7. LIFELINE END CAPS (short horizontal tick at y=590) ── -->
<line x1="83" y1="590" x2="97" y2="590" stroke="var(--text-tertiary)" stroke-width="1.5"/>
<line x1="183" y1="590" x2="197" y2="590" stroke="var(--text-tertiary)" stroke-width="1.5"/>
<line x1="283" y1="590" x2="297" y2="590" stroke="var(--text-tertiary)" stroke-width="1.5"/>
<line x1="383" y1="590" x2="397" y2="590" stroke="var(--text-tertiary)" stroke-width="1.5"/>
<line x1="483" y1="590" x2="497" y2="590" stroke="var(--text-tertiary)" stroke-width="1.5"/>
<line x1="583" y1="590" x2="597" y2="590" stroke="var(--text-tertiary)" stroke-width="1.5"/>
<!-- ── 8. LEGEND ── -->
<text class="ts" x="45" y="612" opacity=".45">Legend —</text>
<line x1="110" y1="609" x2="148" y2="609"
stroke="var(--text-primary)" stroke-width="1.5" marker-end="url(#arr-call)"/>
<text class="ts" x="154" y="613" opacity=".75">Synchronous call</text>
<line x1="288" y1="609" x2="326" y2="609"
stroke="var(--text-secondary)" stroke-width="1.5"
stroke-dasharray="5 3" marker-end="url(#arr-ret)"/>
<text class="ts" x="332" y="613" opacity=".75">Return message</text>
<rect x="458" y="603" width="22" height="13" rx="2"
fill="#FAEEDA" fill-opacity="0.5" stroke="#854F0B" stroke-width="0.75"/>
<text class="ts" x="484" y="613" opacity=".75">alt fragment</text>
<rect x="558" y="603" width="22" height="13" rx="2"
fill="#E1F5EE" fill-opacity="0.6" stroke="#0F6E56" stroke-width="0.75"/>
<text class="ts" x="584" y="613" opacity=".75">par fragment</text>
<!-- Message group annotation -->
<text class="ts" x="45" y="632" opacity=".35">
①–③ pre-condition · ④–⑩ happy path · ⑪–⑫ payment failure · ⑬–⑭ item unavailable
</text>
</svg>
```
## Custom CSS
Add these classes to the hosting page `<style>` block (in addition to the standard skill CSS):
```css
/* ── Actor lifeline header boxes ── */
.actor { fill: var(--bg-secondary); stroke: var(--text-secondary); stroke-width: 0.5; }
.actor-name { font-family: system-ui, sans-serif; font-size: 11.5px; font-weight: 600;
fill: var(--text-primary); }
.actor-colon { font-family: system-ui, sans-serif; font-size: 10px; fill: var(--text-tertiary); }
/* ── Lifeline dashed stems ── */
.lifeline { stroke: var(--text-tertiary); stroke-width: 1; stroke-dasharray: 6 4; fill: none; }
/* ── Activation bars ── */
.activation { fill: var(--bg-secondary); stroke: var(--text-secondary); stroke-width: 0.75; }
/* ── Message arrows ── */
.msg-call { stroke: var(--text-primary); stroke-width: 1.5; fill: none; }
.msg-ret { stroke: var(--text-secondary); stroke-width: 1.5; fill: none; stroke-dasharray: 6 3; }
/* ── Message labels ── */
.mlbl { font-family: system-ui, sans-serif; font-size: 11px; fill: var(--text-primary); }
.rlbl { font-family: system-ui, sans-serif; font-size: 11px; fill: var(--text-secondary);
font-style: italic; }
/* ── Combined fragment: alt (amber) ── */
.frag-alt-bg { fill: #FAEEDA; fill-opacity: 0.18; stroke: #854F0B; stroke-width: 1; }
.frag-alt-tag { fill: #FAEEDA; stroke: #854F0B; stroke-width: 0.75; }
.frag-alt-kw { font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700;
fill: #633806; }
.frag-alt-div { stroke: #854F0B; stroke-width: 0.75; fill: none; }
.guard-lbl { font-family: system-ui, sans-serif; font-size: 10.5px; font-style: italic;
fill: #854F0B; }
/* ── Combined fragment: par (teal) ── */
.frag-par-bg { fill: #E1F5EE; fill-opacity: 0.35; stroke: #0F6E56; stroke-width: 1; }
.frag-par-tag { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 0.75; }
.frag-par-kw { font-family: system-ui, sans-serif; font-size: 11px; font-weight: 700;
fill: #085041; }
.frag-par-div { stroke: #0F6E56; stroke-width: 0.75; stroke-dasharray: 5 3; fill: none; }
/* ── Dark mode overrides ── */
@media (prefers-color-scheme: dark) {
.actor { fill: #2c2c2a; stroke: #b4b2a9; }
.actor-name { fill: #e8e6de; }
.actor-colon { fill: #888780; }
.frag-alt-bg { fill: #633806; fill-opacity: 0.25; stroke: #EF9F27; }
.frag-alt-tag { fill: #633806; stroke: #EF9F27; }
.frag-alt-kw { fill: #FAC775; }
.frag-alt-div { stroke: #EF9F27; }
.guard-lbl { fill: #EF9F27; }
.frag-par-bg { fill: #085041; fill-opacity: 0.35; stroke: #5DCAA5; }
.frag-par-tag { fill: #085041; stroke: #5DCAA5; }
.frag-par-kw { fill: #9FE1CB; }
.frag-par-div { stroke: #5DCAA5; }
}
```
## Color Assignments
| Element | Color | Reason |
|---------|-------|--------|
| Actor header boxes | Neutral (`var(--bg-secondary)`) | Structural / non-semantic — all lifelines share one style |
| Activation bars | Neutral (`var(--bg-secondary)`) | Show execution periods without adding semantic color |
| Synchronous call arrows | `var(--text-primary)` + filled triangle | High contrast for calls — the primary interaction direction |
| Return / dashed arrows | `var(--text-secondary)` + open chevron | Lower contrast for returns — secondary flow direction |
| `alt` fragment | Amber (`#FAEEDA` / `#854F0B`) | Warning / conditional — matches `c-amber` semantic meaning |
| Guard condition text | Amber italic | Belongs visually to the alt fragment |
| `par` fragment | Teal (`#E1F5EE` / `#0F6E56`) | Concurrent success path — matches `c-teal` semantic meaning |
| Alt branch dividers | Amber solid line | Continuity with the alt frame color |
| Par branch divider | Teal dashed line | UML spec: par branches separated by dashed lines |
## Layout Notes
- **ViewBox**: 680×648 (standard width; height = lifeline bottom y=590 + legend + annotation + 16px buffer)
- **Lifeline spacing formula**: `(safe_area_width) / (n_lifelines − 1) = 600 / 5 = 120px` — but use `spacing = 100px` starting at `x=90` so that first box left = 40 and last box right = 640 exactly
- **Actor box split-label trick**: Two separate `<text>` elements per box — one for `":"` (10px, tertiary color) and one for the class name (11.5px bold, primary color) — avoids the 14px font needing ~150px+ per box for long names like "OrderController"
- **Pentagon tag formula**: For a fragment starting at `(fx, fy)`, the tag polygon points are `(fx,fy) (fx+w,fy) (fx+w+6,fy+6) (fx+w+6,fy+18) (fx,fy+18)` where `w` = approximate text width of the keyword + 8px padding each side
- **Nested fragment inset**: The `par` rect uses `x = alt_x + 15` and `y = alt_y_current + 2` so both borders remain simultaneously visible — inset enough to separate visually, not so much that it wastes vertical space
- **Activation bar placement**: `x = lifeline_cx − 4`, `width = 8` — centered on the lifeline and narrow enough not to obscure the dashed stem behind it
- **Message label y-offset**: All labels are placed at `y = arrow_y − 5` to sit just above the arrow line; this applies to both left-going and right-going arrows since `text-anchor="middle"` handles horizontal centering automatically
- **Return arrows entering activation bars**: End `x1/x2` at lifeline center (e.g. x=294 for OrderController) rather than the bar edge (x=286) — the small overlap is intentional and clarifies the target object
- **Alt guard label placement**: Branch 1 guard goes at `y = frame_top + 13` to the right of the pentagon tag; subsequent branch guards go at `divider_y + 14` so they sit just inside the new branch
- **Lifeline end cap pattern**: `<line x1="cx−7" y1="590" x2="cx+7" y2="590" stroke-width="1.5"/>` — a simple symmetric tick, no special marker needed
optional-skills/creative/concept-diagrams/examples/smart-city-infrastructure.md
+173
View File
@@ -0,0 +1,173 @@
# Smart City Infrastructure
A multi-system integration diagram showing interconnected city infrastructure (power, water, transport) connected through a central IoT platform with a citizen dashboard on top. Demonstrates hub-spoke layout, diverse physical shapes, and UI mockups.
## Key Patterns Used
- **Hub-spoke layout**: Central IoT platform with radiating data connections to subsystems
- **Connection dots**: Visual indicators where data lines attach to the central hub
- **Dashboard/UI mockup**: Screen with mini-charts, gauges, and status indicators
- **Multi-system integration**: Three independent systems unified by central platform
- **Semantic line styles**: Different stroke styles for data (dashed), power, water, roads
- **Physical infrastructure shapes**: Solar panels, wind turbines, dams, pipes, roads, vehicles
## New Shape Techniques
### Solar Panels (angled polygons with grid lines)
```xml
<polygon class="solar-panel" points="0,25 35,8 38,12 3,29"/>
<line class="solar-frame" x1="12" y1="22" x2="24" y2="13"/>
<line x1="19" y1="29" x2="19" y2="40" stroke="#5F5E5A" stroke-width="2"/>
```
### Wind Turbine (tower + nacelle + blades)
```xml
<!-- Tapered tower -->
<polygon class="wind-tower" points="20,70 30,70 28,25 22,25"/>
<!-- Nacelle -->
<rect class="wind-hub" x="18" y="20" width="14" height="8" rx="2"/>
<!-- Hub -->
<circle class="wind-hub" cx="25" cy="18" r="5"/>
<!-- Blades (rotated ellipses) -->
<ellipse class="wind-blade" cx="25" cy="5" rx="3" ry="13"/>
<ellipse class="wind-blade" cx="14" cy="26" rx="3" ry="13" transform="rotate(-120, 25, 18)"/>
<ellipse class="wind-blade" cx="36" cy="26" rx="3" ry="13" transform="rotate(120, 25, 18)"/>
```
### Battery with Charge Level
```xml
<rect class="battery" x="0" y="0" width="45" height="65" rx="5"/>
<!-- Terminals -->
<rect x="10" y="-6" width="10" height="8" rx="2" fill="#27500A"/>
<rect x="25" y="-6" width="10" height="8" rx="2" fill="#27500A"/>
<!-- Charge level fill -->
<rect class="battery-level" x="5" y="12" width="35" height="48" rx="3"/>
<text x="22" y="42" text-anchor="middle" fill="#173404" style="font-size:10px">85%</text>
```
### Dam/Reservoir with Water Waves
```xml
<!-- Dam wall -->
<polygon class="reservoir-wall" points="0,60 10,0 70,0 80,60"/>
<!-- Water behind dam -->
<polygon class="water" points="12,10 68,10 68,55 75,55 75,58 5,58 5,55 12,55"/>
<!-- Wave effect -->
<path d="M 15 25 Q 25 22 35 25 Q 45 28 55 25" fill="none" stroke="#378ADD" stroke-width="1" opacity="0.5"/>
```
### Pipe Network with Joints and Valves
```xml
<path class="pipe" d="M 80 85 L 110 85"/>
<circle class="pipe-joint" cx="10" cy="30" r="8"/>
<circle class="valve" cx="190" cy="85" r="6"/>
<!-- Distribution branches -->
<path class="pipe-thin" d="M 18 30 L 50 30"/>
<path class="pipe-thin" d="M 10 22 L 10 5 L 50 5"/>
```
### Road Intersection with Lane Markings
```xml
<!-- Road surface -->
<line class="road" x1="0" y1="50" x2="170" y2="50"/>
<line class="road-mark" x1="10" y1="50" x2="160" y2="50"/>
<!-- Cross road -->
<line class="road" x1="85" y1="0" x2="85" y2="100"/>
<line class="road-mark" x1="85" y1="10" x2="85" y2="90"/>
<!-- Embedded sensors -->
<circle class="sensor" cx="40" cy="50" r="5"/>
```
### Traffic Light with Signal States
```xml
<rect class="traffic-light" x="0" y="0" width="14" height="32" rx="3"/>
<circle class="light-red" cx="7" cy="8" r="4"/>
<circle class="light-off" cx="7" cy="16" r="4"/>
<circle class="light-off" cx="7" cy="24" r="4"/>
```
### Bus with Windows and Wheels
```xml
<rect class="bus" x="0" y="0" width="55" height="28" rx="6"/>
<!-- Windows -->
<rect class="bus-window" x="5" y="5" width="12" height="12" rx="2"/>
<rect class="bus-window" x="20" y="5" width="12" height="12" rx="2"/>
<!-- Wheels with hubcaps -->
<circle cx="14" cy="30" r="6" fill="#2C2C2A"/>
<circle cx="14" cy="30" r="3" fill="#5F5E5A"/>
```
### Dashboard UI Mockup
```xml
<!-- Monitor frame -->
<rect class="dashboard" x="0" y="0" width="200" height="120" rx="8"/>
<!-- Screen -->
<rect class="screen" x="10" y="10" width="180" height="85" rx="4"/>
<!-- Mini bar chart -->
<rect class="screen-content" x="18" y="18" width="50" height="35" rx="2"/>
<rect class="screen-chart" x="22" y="38" width="8" height="12"/>
<rect class="screen-chart" x="33" y="32" width="8" height="18"/>
<!-- Gauge -->
<circle class="screen-bar" cx="100" cy="35" r="12"/>
<text x="100" y="39" text-anchor="middle" fill="#E8E6DE" style="font-size:8px">78%</text>
<!-- Status indicators -->
<circle cx="35" cy="74" r="6" fill="#97C459"/>
<circle cx="75" cy="74" r="6" fill="#97C459"/>
<circle cx="115" cy="74" r="6" fill="#EF9F27"/>
```
### Hexagonal IoT Hub with Connection Points
```xml
<!-- Outer hexagon -->
<polygon class="iot-hex" points="0,-45 39,-22 39,22 0,45 -39,22 -39,-22"/>
<!-- Inner hexagon -->
<polygon class="iot-inner" points="0,-20 17,-10 17,10 0,20 -17,10 -17,-10"/>
<!-- Connection dots on data lines -->
<circle cx="321" cy="248" r="4" fill="#7F77DD"/>
```
## CSS Classes for Infrastructure
```css
/* Power system */
.solar-panel { fill: #3C3489; stroke: #534AB7; stroke-width: 0.5; }
.solar-frame { fill: none; stroke: #EEEDFE; stroke-width: 0.5; }
.wind-tower { fill: #B4B2A9; stroke: #5F5E5A; stroke-width: 1; }
.wind-blade { fill: #F1EFE8; stroke: #888780; stroke-width: 0.5; }
.battery { fill: #27500A; stroke: #3B6D11; stroke-width: 1.5; }
.battery-level { fill: #97C459; }
.power-line { stroke: #EF9F27; stroke-width: 2; fill: none; }
/* Water system */
.reservoir-wall { fill: #B4B2A9; stroke: #5F5E5A; stroke-width: 1; }
.water { fill: #85B7EB; stroke: #378ADD; stroke-width: 0.5; }
.pipe { fill: none; stroke: #378ADD; stroke-width: 4; stroke-linecap: round; }
.pipe-joint { fill: #185FA5; stroke: #0C447C; stroke-width: 1; }
.valve { fill: #0C447C; stroke: #185FA5; stroke-width: 1; }
/* Transport */
.road { stroke: #888780; stroke-width: 8; fill: none; stroke-linecap: round; }
.road-mark { stroke: #F1EFE8; stroke-width: 1; fill: none; stroke-dasharray: 6 4; }
.traffic-light { fill: #444441; stroke: #2C2C2A; stroke-width: 0.5; }
.light-red { fill: #E24B4A; }
.light-green { fill: #97C459; }
.light-off { fill: #2C2C2A; }
.bus { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 1.5; }
/* Data/IoT */
.data-line { stroke: #7F77DD; stroke-width: 2; fill: none; stroke-dasharray: 4 3; }
.iot-hex { fill: #EEEDFE; stroke: #534AB7; stroke-width: 2; }
/* Dashboard */
.dashboard { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1.5; }
.screen { fill: #1a1a18; }
.screen-chart { fill: #5DCAA5; }
```
## Layout Notes
- **ViewBox**: 720×620 (wider for three-column system layout)
- **Hub position**: Central IoT at (360, 270) - geometric center
- **Data lines**: Use quadratic curves or L-shaped paths, add connection dots at hub attachment points
- **System spacing**: ~200px width per system section
- **Vertical layers**: Dashboard (top) → IoT Hub (middle) → Systems (bottom)
- **Component grouping**: Use `<g transform="translate(x,y)">` for each major component for easy positioning
optional-skills/creative/concept-diagrams/examples/smartphone-layer-anatomy.md
+154
View File
@@ -0,0 +1,154 @@
# Smartphone Layer Anatomy
An exploded view diagram showing all internal layers of a smartphone from front glass to back, with alternating left/right labels to avoid overlap. Demonstrates layered product teardown visualization and component detail.
## Key Patterns Used
- **Exploded vertical stack**: Layers separated vertically to show internal structure
- **Alternating labels**: Left/right label placement prevents text overlap
- **Component detail**: Chips, coils, lenses rendered with realistic shapes
- **Thickness scale**: Measurement indicator on the side
- **Progressive depth**: Each layer slightly offset to create 3D stack effect
## New Shape Techniques
### Capacitive Touch Grid
```xml
<rect class="digitizer" x="0" y="0" width="140" height="90" rx="14"/>
<g transform="translate(8, 8)">
<!-- Horizontal lines -->
<line class="digitizer-grid" x1="0" y1="15" x2="124" y2="15"/>
<line class="digitizer-grid" x1="0" y1="37" x2="124" y2="37"/>
<!-- Vertical lines -->
<line class="digitizer-grid" x1="20" y1="0" x2="20" y2="74"/>
<line class="digitizer-grid" x1="50" y1="0" x2="50" y2="74"/>
</g>
<!-- Touch point indicator -->
<circle cx="70" cy="45" r="12" fill="none" stroke="#7F77DD" stroke-width="2" opacity="0.6"/>
<circle cx="70" cy="45" r="5" fill="#7F77DD" opacity="0.4"/>
```
### OLED RGB Subpixels
```xml
<rect class="oled-panel" x="0" y="0" width="140" height="90" rx="12"/>
<g transform="translate(10, 10)">
<!-- RGB pixel group -->
<rect class="oled-subpixel-r" x="0" y="0" width="2" height="6"/>
<rect class="oled-subpixel-g" x="3" y="0" width="2" height="6"/>
<rect class="oled-subpixel-b" x="6" y="0" width="2" height="6"/>
<!-- Repeat pattern -->
<rect class="oled-subpixel-r" x="11" y="0" width="2" height="6"/>
<rect class="oled-subpixel-g" x="14" y="0" width="2" height="6"/>
<rect class="oled-subpixel-b" x="17" y="0" width="2" height="6"/>
</g>
```
### Logic Board with Chips
```xml
<rect class="pcb" x="0" y="0" width="116" height="106" rx="3"/>
<!-- PCB traces -->
<path class="pcb-trace" d="M 8 50 L 30 50 L 30 35"/>
<!-- CPU chip -->
<rect class="chip-cpu" x="30" y="20" width="55" height="35" rx="3"/>
<text class="chip-label" x="57" y="35" text-anchor="middle">A17 Pro</text>
<!-- RAM chip -->
<rect class="chip-ram" x="30" y="62" width="35" height="18" rx="2"/>
<text class="chip-label" x="47" y="74" text-anchor="middle">8GB RAM</text>
<!-- Storage chip -->
<rect class="chip-storage" x="30" y="85" width="55" height="16" rx="2"/>
<text class="chip-label" x="57" y="96" text-anchor="middle">256GB NAND</text>
```
### Camera Lens Array
```xml
<!-- Main camera -->
<circle class="camera-lens" cx="20" cy="20" r="18"/>
<circle class="camera-lens-inner" cx="20" cy="20" r="13"/>
<circle class="camera-sensor" cx="20" cy="20" r="8"/>
<circle cx="20" cy="20" r="3" fill="#1a1a18"/>
<!-- Secondary camera (smaller) -->
<circle class="camera-lens" cx="15" cy="15" r="13"/>
<circle class="camera-lens-inner" cx="15" cy="15" r="9"/>
<circle class="camera-sensor" cx="15" cy="15" r="5"/>
```
### Wireless Charging Coil with Magnets
```xml
<!-- Concentric coil rings -->
<circle class="charging-coil-outer" cx="0" cy="0" r="30"/>
<circle class="charging-coil" cx="0" cy="0" r="23"/>
<circle class="charging-coil" cx="0" cy="0" r="16"/>
<circle class="charging-coil" cx="0" cy="0" r="9"/>
<!-- MagSafe magnet ring -->
<circle class="magnet" cx="0" cy="-35" r="3"/>
<circle class="magnet" cx="25" cy="-25" r="3"/>
<circle class="magnet" cx="35" cy="0" r="3"/>
<circle class="magnet" cx="25" cy="25" r="3"/>
<!-- ... continue around circle -->
```
### Battery Cell
```xml
<rect class="battery" x="0" y="0" width="140" height="90" rx="10"/>
<rect class="battery-cell" x="10" y="12" width="120" height="60" rx="6"/>
<text x="70" y="38" text-anchor="middle" fill="#27500A" style="font-size:9px">Li-Ion Polymer</text>
<text x="70" y="52" text-anchor="middle" fill="#27500A" style="font-size:12px; font-weight:bold">4422 mAh</text>
<rect class="battery-connector" x="55" y="75" width="30" height="10" rx="2"/>
```
## CSS Classes
```css
/* Glass */
.front-glass { fill: #E8E6DE; stroke: #888780; stroke-width: 1; opacity: 0.9; }
.back-glass { fill: #2C2C2A; stroke: #444441; stroke-width: 1; }
/* Touch digitizer */
.digitizer { fill: #EEEDFE; stroke: #534AB7; stroke-width: 1; }
.digitizer-grid { stroke: #AFA9EC; stroke-width: 0.3; fill: none; }
/* OLED */
.oled-panel { fill: #1a1a18; stroke: #444441; stroke-width: 1; }
.oled-subpixel-r { fill: #E24B4A; }
.oled-subpixel-g { fill: #97C459; }
.oled-subpixel-b { fill: #378ADD; }
/* Midframe */
.midframe { fill: #B4B2A9; stroke: #5F5E5A; stroke-width: 1.5; }
/* Logic board */
.pcb { fill: #0F6E56; stroke: #085041; stroke-width: 1; }
.pcb-trace { stroke: #5DCAA5; stroke-width: 0.3; fill: none; }
.chip-cpu { fill: #3C3489; stroke: #534AB7; stroke-width: 0.5; }
.chip-ram { fill: #185FA5; stroke: #378ADD; stroke-width: 0.5; }
.chip-storage { fill: #27500A; stroke: #3B6D11; stroke-width: 0.5; }
/* Battery */
.battery { fill: #EAF3DE; stroke: #3B6D11; stroke-width: 1.5; }
.battery-cell { fill: #97C459; stroke: #639922; stroke-width: 0.5; }
/* Camera */
.camera-lens { fill: #0C447C; stroke: #185FA5; stroke-width: 0.5; }
.camera-lens-inner { fill: #1a1a18; stroke: #378ADD; stroke-width: 0.3; }
.camera-sensor { fill: #3C3489; stroke: #534AB7; stroke-width: 0.3; }
/* Wireless charging */
.charging-coil { fill: none; stroke: #EF9F27; stroke-width: 1.5; }
.magnet { fill: #5F5E5A; stroke: #444441; stroke-width: 0.5; }
```
## Layout Notes
- **ViewBox**: 900×780 (tall for vertical stack)
- **Layer offset**: Each layer offset 10px right and down for depth effect
- **Label alternation**: Odd layers → RIGHT labels, Even layers → LEFT labels
- **Thickness scale**: Vertical measurement bar on left side
- **Front/Back markers**: Text labels at top and bottom
- **Chip labels**: Use small white text (6px) directly on chip shapes
optional-skills/creative/concept-diagrams/examples/sn2-reaction-mechanism.md
+247
View File
@@ -0,0 +1,247 @@
# SN2 Reaction Mechanism
A chemistry diagram showing the bimolecular nucleophilic substitution (SN2) mechanism between hydroxide ion and methyl bromide. Demonstrates molecular structure rendering, electron movement arrows, transition state notation, and reaction energy profiles.
## Key Patterns Used
- **Molecular structures**: Ball-and-stick style atoms with bonds
- **Electron movement**: Curved arrows showing nucleophilic attack
- **Transition state**: Bracketed pentacoordinate intermediate with partial charges
- **Stereochemistry**: Wedge/dash bonds showing 3D configuration
- **Energy profile**: Potential energy vs reaction coordinate plot
- **Annotation boxes**: Key features and mechanistic notes
## Diagram Type
This is a **chemistry mechanism diagram** with:
- **Molecular rendering**: Atoms as colored circles with element symbols
- **Bond notation**: Solid, wedge, dash, and partial (dashed) bonds
- **Reaction arrows**: Curved for electron movement, straight for reaction progress
- **Energy landscape**: Quantitative energy profile below mechanism
## Molecular Structure Elements
### Atom Rendering
```xml
<!-- Carbon atom (dark) -->
<circle cx="0" cy="0" r="14" class="carbon"/>
<text class="chem" x="0" y="5" text-anchor="middle" fill="white" font-weight="500">C</text>
<!-- Oxygen atom (red) -->
<circle cx="0" cy="0" r="14" class="oxygen"/>
<text class="chem" x="0" y="5" text-anchor="middle" fill="white" font-weight="500">O</text>
<!-- Hydrogen atom (light with border) -->
<circle cx="38" cy="0" r="8" class="hydrogen"/>
<text class="chem-sm" x="38" y="4" text-anchor="middle">H</text>
<!-- Bromine atom (brown) -->
<circle cx="52" cy="0" r="16" class="bromine"/>
<text class="chem" x="52" y="5" text-anchor="middle" fill="white" font-weight="500">Br</text>
```
```css
.carbon { fill: #2C2C2A; }
.hydrogen { fill: #F1EFE8; stroke: #888780; stroke-width: 1; }
.oxygen { fill: #E24B4A; }
.bromine { fill: #993C1D; }
.nitrogen { fill: #378ADD; } /* for other reactions */
```
### Bond Types
```xml
<!-- Single bond (solid) -->
<line x1="14" y1="0" x2="38" y2="0" class="bond"/>
<!-- Wedge bond (coming toward viewer) -->
<polygon class="bond-wedge" points="0,-14 -6,-35 6,-35"/>
<!-- Dash bond (going away from viewer) -->
<line x1="-10" y1="10" x2="-28" y2="28" class="bond-dash"/>
<!-- Partial bond (forming/breaking) -->
<line x1="-40" y1="0" x2="-14" y2="0" class="bond-partial"/>
```
```css
.bond { stroke: var(--text-primary); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.bond-thin { stroke: var(--text-primary); stroke-width: 1.5; fill: none; }
.bond-partial { stroke: var(--text-primary); stroke-width: 2; fill: none; stroke-dasharray: 4 3; }
.bond-wedge { fill: var(--text-primary); stroke: none; }
.bond-dash { stroke: var(--text-primary); stroke-width: 2; fill: none; stroke-dasharray: 2 2; }
```
### Lone Pairs and Charges
```xml
<!-- Lone pair electrons (dots) -->
<circle cx="-8" cy="-18" r="2" fill="var(--text-primary)"/>
<circle cx="0" cy="-18" r="2" fill="var(--text-primary)"/>
<!-- Formal negative charge -->
<text class="charge" x="12" y="-12" fill="#A32D2D" font-weight="bold">⊖</text>
<!-- Partial charges (delta notation) -->
<text class="partial" x="0" y="-18" text-anchor="middle" fill="#A32D2D">δ⁻</text>
<text class="partial" x="0" y="-22" text-anchor="middle" fill="#3B6D11">δ⁺</text>
```
```css
.charge { font-family: "Times New Roman", Georgia, serif; font-size: 12px; }
.partial { font-family: "Times New Roman", Georgia, serif; font-size: 11px; font-style: italic; }
```
### Curved Arrow (Electron Movement)
```xml
<defs>
<marker id="curved-arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
<path d="M0,0 L10,5 L0,10 L3,5 Z" class="arrow-fill"/>
</marker>
</defs>
<!-- Nucleophilic attack arrow -->
<path d="M -5,15 Q 30,60 70,25" class="arrow-curved" marker-end="url(#curved-arrow)"/>
```
```css
.arrow-curved { stroke: #534AB7; stroke-width: 2; fill: none; }
.arrow-fill { fill: #534AB7; }
```
### Transition State Brackets
```xml
<!-- Left bracket -->
<path d="M -75,-70 L -85,-70 L -85,75 L -75,75" class="ts-bracket"/>
<!-- Right bracket -->
<path d="M 95,-70 L 105,-70 L 105,75 L 95,75" class="ts-bracket"/>
<!-- Double dagger symbol -->
<text class="chem" x="115" y="-60" fill="var(--text-primary)">‡</text>
```
```css
.ts-bracket { stroke: var(--text-primary); stroke-width: 1.5; fill: none; }
```
## Energy Profile Diagram
### Axes
```xml
<!-- Y-axis (Energy) -->
<line x1="0" y1="280" x2="0" y2="0" class="axis" marker-end="url(#straight-arrow)"/>
<text class="t" x="-15" y="-10" text-anchor="middle" transform="rotate(-90 -15 140)">Potential Energy</text>
<!-- X-axis (Reaction Coordinate) -->
<line x1="0" y1="280" x2="600" y2="280" class="axis" marker-end="url(#straight-arrow)"/>
<text class="t" x="580" y="305" text-anchor="middle">Reaction Coordinate</text>
```
### Energy Curve
```xml
<!-- Filled area under curve -->
<path class="energy-fill" d="
M 40,200
Q 150,200 250,50
Q 350,200 500,220
L 500,280 L 40,280 Z
"/>
<!-- Curve line -->
<path class="energy-curve" d="
M 40,200
Q 100,200 150,150
Q 200,80 250,50
Q 300,80 350,150
Q 400,210 500,220
"/>
```
```css
.energy-curve { stroke: #534AB7; stroke-width: 2.5; fill: none; }
.energy-fill { fill: rgba(83, 74, 183, 0.1); }
```
### Energy Levels and Annotations
```xml
<!-- Reactants level -->
<line x1="20" y1="200" x2="80" y2="200" stroke="#3B6D11" stroke-width="2"/>
<text class="ts" x="50" y="218" text-anchor="middle">Reactants</text>
<!-- Transition state peak -->
<circle cx="250" cy="50" r="5" fill="#534AB7"/>
<line x1="250" y1="50" x2="250" y2="280" class="energy-level"/>
<text class="ts" x="250" y="30" text-anchor="middle" fill="#534AB7" font-weight="500">Transition State [‡]</text>
<!-- Products level (lower = exergonic) -->
<line x1="470" y1="220" x2="530" y2="220" stroke="#3B6D11" stroke-width="2"/>
<!-- Activation energy arrow -->
<line x1="100" y1="200" x2="100" y2="55" class="delta-arrow" marker-end="url(#delta-arrow)"/>
<text class="ts" x="85" y="125" text-anchor="end" fill="#3B6D11">E<tspan baseline-shift="sub" font-size="8">a</tspan></text>
```
```css
.energy-level { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 4 2; fill: none; }
.delta-arrow { stroke: #3B6D11; stroke-width: 1.5; fill: none; }
.delta-fill { fill: #3B6D11; }
```
## Chemistry Text Styles
```css
/* Chemistry notation (serif font for formulas) */
.chem { font-family: "Times New Roman", Georgia, serif; font-size: 16px; fill: var(--text-primary); }
.chem-sm { font-family: "Times New Roman", Georgia, serif; font-size: 12px; fill: var(--text-primary); }
.chem-lg { font-family: "Times New Roman", Georgia, serif; font-size: 18px; fill: var(--text-primary); }
```
## Subscript/Superscript in SVG
```xml
<!-- Subscript using tspan -->
<text class="ts">E<tspan baseline-shift="sub" font-size="8">a</tspan></text>
<!-- Superscript for charges -->
<text class="chem-sm">OH⁻</text> <!-- Using Unicode superscript minus -->
<text class="chem-sm">CH₃Br</text> <!-- Using Unicode subscript 3 -->
```
## Color Coding
| Element | Color | Hex |
|---------|-------|-----|
| Carbon | Dark gray | #2C2C2A |
| Hydrogen | Light cream | #F1EFE8 |
| Oxygen | Red | #E24B4A |
| Bromine | Brown | #993C1D |
| Nitrogen | Blue | #378ADD |
| Electron arrows | Purple | #534AB7 |
| Positive charge | Green | #3B6D11 |
| Negative charge | Red | #A32D2D |
## Layout Notes
- **ViewBox**: 800×680 (landscape for mechanism + energy profile)
- **Mechanism section**: y=60-300, showing reactants → TS → products
- **Energy profile**: y=320-630, with axes and curve
- **Atom sizes**: C/O/Br ~12-16px radius, H ~7-8px radius
- **Bond lengths**: ~25-40px between atom centers
- **Spacing**: ~140px between mechanism stages
## When to Use This Pattern
Use this diagram style for:
- Organic reaction mechanisms (SN1, SN2, E1, E2, additions, eliminations)
- Reaction energy profiles and kinetics
- Stereochemistry illustrations
- Enzyme mechanism diagrams
- Transition state theory visualization
- Any chemistry concept requiring molecular structures
optional-skills/creative/concept-diagrams/examples/wind-turbine-structure.md
+338
View File
@@ -0,0 +1,338 @@
# Modern Onshore Wind Turbine Structure
A physical/structural cross-section diagram showing all major components of a modern wind turbine from underground foundation to blade tips.
## Key Patterns Used
- **Underground section**: Soil layers, deep concrete foundation with rebar reinforcement grid, spread footing
- **Cross-section view**: Tower wall thickness shown, internal components visible
- **Tapered tower**: Path elements creating realistic tower silhouette that narrows toward top
- **Internal access**: Ladder with rungs, elevator shaft inside tower
- **Cable routing**: Power cables running from nacelle down through tower to transformer
- **Nacelle cutaway**: Gearbox, generator, brake, yaw system all visible inside housing
- **Rotor assembly**: Hub with pitch motors at blade roots, three composite blades with gradient fill
- **Ground level marker**: Clear separation between above/below ground
- **Component color coding**: Each system type has distinct color (blue=generator, gold=gearbox, red=brake, green=yaw, purple=pitch)
- **Legend bar**: Quick reference for color meanings
## Diagram
```xml
<svg width="100%" viewBox="0 0 680 920" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</marker>
<!-- Blade gradient for 3D effect -->
<linearGradient id="bladeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#D3D1C7"/>
<stop offset="50%" style="stop-color:#F1EFE8"/>
<stop offset="100%" style="stop-color:#B4B2A9"/>
</linearGradient>
</defs>
<!-- ===== GROUND LEVEL LINE ===== -->
<line x1="40" y1="680" x2="640" y2="680" stroke="#3B6D11" stroke-width="2"/>
<text class="tl" x="45" y="675">Ground level</text>
<!-- ===== UNDERGROUND: FOUNDATION ===== -->
<!-- Soil layers -->
<rect x="120" y="680" width="300" height="180" class="soil"/>
<rect x="120" y="780" width="300" height="80" class="soil-dark"/>
<!-- Deep concrete foundation -->
<path d="M170 680 L170 820 L200 850 L340 850 L370 820 L370 680 Z" class="concrete"/>
<!-- Foundation base spread -->
<path d="M140 820 L170 820 L200 850 L340 850 L370 820 L400 820 L400 860 L140 860 Z" class="concrete-dark"/>
<!-- Rebar reinforcement -->
<g class="rebar">
<line x1="185" y1="700" x2="185" y2="840"/>
<line x1="210" y1="700" x2="210" y2="845"/>
<line x1="235" y1="700" x2="235" y2="848"/>
<line x1="260" y1="700" x2="260" y2="848"/>
<line x1="285" y1="700" x2="285" y2="848"/>
<line x1="310" y1="700" x2="310" y2="845"/>
<line x1="335" y1="700" x2="335" y2="840"/>
<!-- Horizontal rebar -->
<line x1="175" y1="720" x2="365" y2="720"/>
<line x1="175" y1="760" x2="365" y2="760"/>
<line x1="175" y1="800" x2="365" y2="800"/>
<line x1="155" y1="835" x2="385" y2="835"/>
</g>
<!-- Foundation labels -->
<line x1="410" y1="770" x2="480" y2="770" class="leader"/>
<text class="ts" x="485" y="766">Deep concrete foundation</text>
<text class="tl" x="485" y="778">Reinforced with steel rebar</text>
<text class="tl" x="485" y="790">15-25m deep typical</text>
<line x1="400" y1="850" x2="480" y2="870" class="leader"/>
<text class="ts" x="485" y="866">Foundation spread footing</text>
<text class="tl" x="485" y="878">Distributes load to soil</text>
<!-- ===== TOWER BASE ===== -->
<!-- Tower base flange -->
<ellipse cx="270" cy="680" rx="70" ry="12" class="concrete-dark"/>
<rect x="200" y="668" width="140" height="12" class="tower"/>
<!-- Transformer at base -->
<g transform="translate(470, 640)">
<rect x="0" y="0" width="50" height="40" rx="3" class="transformer"/>
<!-- Cooling fins -->
<rect x="52" y="5" width="4" height="30" class="transformer-fin"/>
<rect x="58" y="5" width="4" height="30" class="transformer-fin"/>
<rect x="64" y="5" width="4" height="30" class="transformer-fin"/>
<!-- Connection box -->
<rect x="10" y="-8" width="30" height="10" rx="2" class="transformer-fin"/>
</g>
<line x1="470" y1="660" x2="430" y2="640" class="leader"/>
<text class="ts" x="385" y="636" text-anchor="end">Transformer</text>
<text class="tl" x="385" y="648" text-anchor="end">Steps up voltage for grid</text>
<!-- ===== TUBULAR STEEL TOWER ===== -->
<!-- Tower outer shell (tapered) -->
<path d="M200 680 L220 200 L320 200 L340 680 Z" class="tower"/>
<!-- Tower inner surface (cutaway) -->
<path d="M215 680 L232 210 L308 210 L325 680 Z" class="tower-inner"/>
<!-- Tower section joints -->
<line x1="205" y1="550" x2="335" y2="550" class="tower-section"/>
<line x1="210" y1="420" x2="330" y2="420" class="tower-section"/>
<line x1="215" y1="300" x2="325" y2="300" class="tower-section"/>
<!-- Internal ladder (left side) -->
<g transform="translate(225, 220)">
<!-- Ladder rails -->
<line x1="0" y1="0" x2="8" y2="450" class="ladder"/>
<line x1="15" y1="0" x2="23" y2="450" class="ladder"/>
<!-- Rungs -->
<g class="ladder-rung">
<line x1="1" y1="20" x2="22" y2="21"/>
<line x1="1" y1="50" x2="22" y2="52"/>
<line x1="2" y1="80" x2="22" y2="83"/>
<line x1="2" y1="110" x2="23" y2="114"/>
<line x1="2" y1="140" x2="23" y2="145"/>
<line x1="3" y1="170" x2="23" y2="176"/>
<line x1="3" y1="200" x2="24" y2="207"/>
<line x1="3" y1="230" x2="24" y2="238"/>
<line x1="4" y1="260" x2="24" y2="269"/>
<line x1="4" y1="290" x2="25" y2="300"/>
<line x1="4" y1="320" x2="25" y2="331"/>
<line x1="5" y1="350" x2="25" y2="362"/>
<line x1="5" y1="380" x2="26" y2="393"/>
<line x1="6" y1="410" x2="26" y2="424"/>
<line x1="6" y1="440" x2="27" y2="455"/>
</g>
</g>
<!-- Elevator shaft (right side) -->
<rect x="280" y="230" width="25" height="430" rx="2" class="elevator"/>
<text class="tl" x="292" y="450" text-anchor="middle" transform="rotate(-90, 292, 450)" fill="#185FA5">ELEVATOR</text>
<!-- Electrical cables running down -->
<path d="M270 220 C270 300 268 400 268 500 C268 600 268 650 310 665 L470 665" class="cable"/>
<path d="M260 225 C258 350 256 500 256 600 C256 650 256 670 256 680" class="cable-thin"/>
<!-- Tower labels -->
<line x1="340" y1="350" x2="400" y2="320" class="leader"/>
<text class="ts" x="405" y="316">Tubular steel tower</text>
<text class="tl" x="405" y="328">80-120m height typical</text>
<text class="tl" x="405" y="340">Tapered for strength</text>
<line x1="248" y1="400" x2="130" y2="380" class="leader"/>
<text class="ts" x="125" y="376" text-anchor="end">Internal ladder</text>
<text class="tl" x="125" y="388" text-anchor="end">Service access</text>
<line x1="305" y1="500" x2="400" y2="520" class="leader"/>
<text class="ts" x="405" y="516">Service elevator</text>
<line x1="268" y1="580" x2="130" y2="600" class="leader"/>
<text class="ts" x="125" y="596" text-anchor="end">Power cables</text>
<text class="tl" x="125" y="608" text-anchor="end">To transformer</text>
<!-- ===== NACELLE ===== -->
<g transform="translate(270, 160)">
<!-- Nacelle base/bedplate -->
<rect x="-60" y="30" width="120" height="15" class="nacelle"/>
<!-- Yaw bearing -->
<ellipse cx="0" cy="42" rx="35" ry="6" class="bearing"/>
<!-- Yaw motors -->
<rect x="-55" y="32" width="12" height="18" rx="2" class="yaw"/>
<rect x="43" y="32" width="12" height="18" rx="2" class="yaw"/>
<!-- Nacelle housing -->
<path d="M-65 30 L-70 -10 L-65 -35 L70 -35 L85 -10 L85 30 Z" class="nacelle-cover"/>
<!-- Main shaft -->
<rect x="-90" y="-8" width="35" height="16" rx="2" fill="#888780" stroke="#5F5E5A" stroke-width="0.5"/>
<!-- Gearbox -->
<rect x="-55" y="-25" width="40" height="45" rx="3" class="gearbox"/>
<text class="tl" x="-35" y="5" text-anchor="middle" fill="#633806">GEAR</text>
<!-- Generator -->
<rect x="-10" y="-20" width="50" height="38" rx="4" class="generator"/>
<ellipse cx="15" cy="0" rx="15" ry="15" fill="none" stroke="#0C447C" stroke-width="1"/>
<text class="tl" x="15" y="4" text-anchor="middle" fill="#E6F1FB">GEN</text>
<!-- Brake disc -->
<rect x="45" y="-12" width="8" height="24" rx="1" class="brake"/>
<!-- Electrical cabinet -->
<rect x="58" y="-25" width="20" height="35" rx="2" fill="#5F5E5A" stroke="#444441" stroke-width="0.5"/>
<!-- Anemometer on top -->
<line x1="60" y1="-35" x2="60" y2="-50" stroke="#5F5E5A" stroke-width="1"/>
<ellipse cx="60" cy="-52" rx="8" ry="3" fill="#D3D1C7" stroke="#888780" stroke-width="0.5"/>
</g>
<!-- Nacelle labels -->
<line x1="215" y1="135" x2="130" y2="115" class="leader"/>
<text class="ts" x="125" y="111" text-anchor="end">Gearbox</text>
<text class="tl" x="125" y="123" text-anchor="end">Speed multiplier</text>
<line x1="285" y1="145" x2="400" y2="125" class="leader"/>
<text class="ts" x="405" y="121">Generator</text>
<text class="tl" x="405" y="133">Converts rotation to electricity</text>
<line x1="315" y1="155" x2="400" y2="165" class="leader"/>
<text class="ts" x="405" y="161">Brake system</text>
<line x1="215" y1="200" x2="130" y2="220" class="leader"/>
<text class="ts" x="125" y="216" text-anchor="end">Yaw motors</text>
<text class="tl" x="125" y="228" text-anchor="end">Rotate nacelle to face wind</text>
<line x1="330" y1="108" x2="400" y2="90" class="leader"/>
<text class="ts" x="405" y="86">Anemometer</text>
<text class="tl" x="405" y="98">Wind speed sensor</text>
<!-- ===== ROTOR HUB & BLADES ===== -->
<!-- Hub -->
<g transform="translate(180, 152)">
<!-- Hub body -->
<ellipse cx="0" cy="0" rx="25" ry="30" class="hub"/>
<!-- Hub nose cone -->
<path d="M-25 -20 Q-50 0 -25 20 Q-30 0 -25 -20" class="hub-cap"/>
<!-- Blade roots with pitch motors -->
<!-- Blade 1 (up) -->
<g transform="translate(-10, -25) rotate(-80)">
<ellipse cx="0" cy="0" rx="12" ry="8" class="blade-root"/>
<rect x="-8" y="-5" width="10" height="10" rx="2" class="pitch-motor"/>
</g>
<!-- Blade 2 (lower left) -->
<g transform="translate(-18, 18) rotate(40)">
<ellipse cx="0" cy="0" rx="12" ry="8" class="blade-root"/>
<rect x="-8" y="-5" width="10" height="10" rx="2" class="pitch-motor"/>
</g>
<!-- Blade 3 (lower right) -->
<g transform="translate(5, 22) rotate(160)">
<ellipse cx="0" cy="0" rx="12" ry="8" class="blade-root"/>
<rect x="-8" y="-5" width="10" height="10" rx="2" class="pitch-motor"/>
</g>
</g>
<!-- Blade 1 (pointing up-left) -->
<path d="M165 125 Q140 80 130 40 Q125 20 115 15 Q110 18 112 25 Q115 50 125 90 Q140 120 158 128 Z" class="blade" fill="url(#bladeGrad)"/>
<!-- Blade 2 (pointing down-left) -->
<path d="M158 175 Q120 200 80 230 Q60 245 55 255 Q60 258 68 252 Q95 235 130 210 Q155 190 163 178 Z" class="blade" fill="url(#bladeGrad)"/>
<!-- Blade 3 (pointing down-right, partially visible) -->
<path d="M188 175 Q195 200 205 230 Q210 250 215 255 Q220 252 218 245 Q212 220 202 195 Q192 175 186 172 Z" class="blade" fill="url(#bladeGrad)"/>
<!-- Blade labels -->
<line x1="115" y1="35" x2="60" y2="35" class="leader"/>
<text class="ts" x="55" y="31" text-anchor="end">Composite blade</text>
<text class="tl" x="55" y="43" text-anchor="end">Fiberglass/carbon fiber</text>
<text class="tl" x="55" y="55" text-anchor="end">40-80m length each</text>
<line x1="170" y1="130" x2="130" y2="155" class="leader"/>
<text class="ts" x="85" y="151" text-anchor="end">Pitch motor</text>
<text class="tl" x="85" y="163" text-anchor="end">Adjusts blade angle</text>
<line x1="180" y1="152" x2="130" y2="180" class="leader"/>
<text class="ts" x="85" y="183" text-anchor="end">Rotor hub</text>
<!-- ===== LEGEND ===== -->
<g transform="translate(40, 895)">
<rect x="0" y="-15" width="600" height="30" rx="4" fill="none" stroke="#D3D1C7" stroke-width="0.5"/>
<rect x="15" y="-5" width="12" height="12" rx="2" class="generator"/>
<text class="tl" x="32" y="5">Generator</text>
<rect x="95" y="-5" width="12" height="12" rx="2" class="gearbox"/>
<text class="tl" x="112" y="5">Gearbox</text>
<rect x="170" y="-5" width="12" height="12" rx="2" class="brake"/>
<text class="tl" x="187" y="5">Brake</text>
<rect x="230" y="-5" width="12" height="12" rx="2" class="yaw"/>
<text class="tl" x="247" y="5">Yaw system</text>
<rect x="320" y="-5" width="12" height="12" rx="2" class="pitch-motor"/>
<text class="tl" x="337" y="5">Pitch motor</text>
<line x1="415" y1="1" x2="435" y2="1" class="cable" style="stroke-width:2"/>
<text class="tl" x="440" y="5">Power cable</text>
<rect x="515" y="-5" width="12" height="12" rx="2" class="transformer"/>
<text class="tl" x="532" y="5">Transformer</text>
</g>
</svg>
```
## CSS Classes
```css
/* Foundation */
.concrete { fill: #B4B2A9; stroke: #5F5E5A; stroke-width: 1; }
.concrete-dark { fill: #888780; stroke: #5F5E5A; stroke-width: 1; }
.rebar { stroke: #854F0B; stroke-width: 1.5; fill: none; }
.soil { fill: #8B7355; stroke: #5F5E5A; stroke-width: 0.5; }
.soil-dark { fill: #6B5344; }
/* Tower */
.tower { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; }
.tower-inner { fill: #D3D1C7; stroke: #888780; stroke-width: 0.5; }
.tower-section { stroke: #888780; stroke-width: 0.5; stroke-dasharray: 2 4; }
.ladder { stroke: #5F5E5A; stroke-width: 1; fill: none; }
.ladder-rung { stroke: #888780; stroke-width: 0.8; }
.elevator { fill: #E6F1FB; stroke: #185FA5; stroke-width: 0.5; }
.cable { stroke: #E24B4A; stroke-width: 2; fill: none; }
.cable-thin { stroke: #E24B4A; stroke-width: 1.5; fill: none; }
/* Nacelle */
.nacelle { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; }
.nacelle-cover { fill: #D3D1C7; stroke: #5F5E5A; stroke-width: 1; }
.gearbox { fill: #BA7517; stroke: #633806; stroke-width: 0.5; }
.generator { fill: #378ADD; stroke: #0C447C; stroke-width: 0.5; }
.brake { fill: #E24B4A; stroke: #791F1F; stroke-width: 0.5; }
.yaw { fill: #5DCAA5; stroke: #085041; stroke-width: 0.5; }
.bearing { fill: #444441; stroke: #2C2C2A; stroke-width: 0.5; }
/* Rotor */
.hub { fill: #D3D1C7; stroke: #5F5E5A; stroke-width: 1; }
.hub-cap { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; }
.blade { fill: #F1EFE8; stroke: #888780; stroke-width: 1; }
.blade-root { fill: #D3D1C7; stroke: #5F5E5A; stroke-width: 0.5; }
.pitch-motor { fill: #7F77DD; stroke: #3C3489; stroke-width: 0.5; }
/* Transformer */
.transformer { fill: #27500A; stroke: #173404; stroke-width: 1; }
.transformer-fin { fill: #3B6D11; stroke: #27500A; stroke-width: 0.5; }
```
optional-skills/creative/concept-diagrams/references/dashboard-patterns.md
+43
View File
@@ -0,0 +1,43 @@
# Dashboard Patterns
Building blocks for UI/dashboard mockups inside a concept diagram — admin panels, monitoring dashboards, control interfaces, status displays.
## Pattern
A "screen" is a rounded dark rect inside a lighter "frame" rect, with chart/gauge/indicator elements nested on top.
```xml
<!-- Monitor frame -->
<rect class="dashboard" x="0" y="0" width="200" height="120" rx="8"/>
<!-- Screen -->
<rect class="screen" x="10" y="10" width="180" height="85" rx="4"/>
<!-- Mini bar chart -->
<rect class="screen-content" x="18" y="18" width="50" height="35" rx="2"/>
<rect class="screen-chart" x="22" y="38" width="8" height="12"/>
<rect class="screen-chart" x="33" y="32" width="8" height="18"/>
<!-- Gauge -->
<circle class="screen-bar" cx="100" cy="35" r="12"/>
<text x="100" y="39" text-anchor="middle" fill="#E8E6DE" style="font-size:8px">78%</text>
<!-- Status indicators -->
<circle cx="35" cy="74" r="6" fill="#97C459"/> <!-- green = ok -->
<circle cx="75" cy="74" r="6" fill="#EF9F27"/> <!-- amber = warning -->
<circle cx="115" cy="74" r="6" fill="#E24B4A"/> <!-- red = alert -->
```
## CSS
```css
.dashboard { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1.5; }
.screen { fill: #1a1a18; }
.screen-content { fill: #2C2C2A; }
.screen-chart { fill: #5DCAA5; }
.screen-bar { fill: #7F77DD; }
.screen-alert { fill: #E24B4A; }
```
## Tips
- Dashboard screens stay dark in both light and dark mode — they represent actual monitor glass.
- Keep on-screen text small (`font-size:8px` or `10px`) and high-contrast (near-white fill on dark).
- Use the status triad green/amber/red consistently — OK / warning / alert.
- A single dashboard usually sits on top of an infrastructure hub diagram as a unified view (see `examples/smart-city-infrastructure.md`).
optional-skills/creative/concept-diagrams/references/infrastructure-patterns.md
+144
View File
@@ -0,0 +1,144 @@
# Infrastructure Patterns
Reusable shapes and line styles for infrastructure / systems-integration diagrams (smart cities, IoT networks, industrial systems, multi-domain architectures).
## Layout pattern: hub-spoke
- **Central hub**: Hexagon or circle representing the integration platform
- **Radiating connections**: Data lines from hub to each subsystem with connection dots
- **Subsystem sections**: Each system (power, water, transport) in its own region
- **Dashboard on top**: Optional UI mockup showing a unified view (see `dashboard-patterns.md`)
```xml
<!-- Central hub (hexagon) -->
<polygon class="iot-hex" points="0,-45 39,-22 39,22 0,45 -39,22 -39,-22"/>
<!-- Data lines with connection dots -->
<path class="data-line" d="M 321 248 L 200 248 L 120 380" stroke-dasharray="4 3"/>
<circle cx="321" cy="248" r="4" fill="#7F77DD"/>
```
## Semantic line styles
Use a dedicated CSS class per subsystem so every diagram reads the same way:
```css
.data-line { stroke: #7F77DD; stroke-width: 2; fill: none; stroke-dasharray: 4 3; }
.power-line { stroke: #EF9F27; stroke-width: 2; fill: none; }
.water-pipe { stroke: #378ADD; stroke-width: 4; stroke-linecap: round; fill: none; }
.road { stroke: #888780; stroke-width: 8; stroke-linecap: round; fill: none; }
```
## Power systems
**Solar panel (angled):**
```xml
<polygon class="solar-panel" points="0,25 35,8 38,12 3,29"/>
<line class="solar-frame" x1="12" y1="22" x2="24" y2="13"/>
```
**Wind turbine:**
```xml
<polygon class="wind-tower" points="20,70 30,70 28,25 22,25"/>
<circle class="wind-hub" cx="25" cy="18" r="5"/>
<ellipse class="wind-blade" cx="25" cy="5" rx="3" ry="13"/>
<ellipse class="wind-blade" cx="14" cy="26" rx="3" ry="13" transform="rotate(-120, 25, 18)"/>
<ellipse class="wind-blade" cx="36" cy="26" rx="3" ry="13" transform="rotate(120, 25, 18)"/>
```
**Battery with charge level:**
```xml
<rect class="battery" x="0" y="0" width="45" height="65" rx="5"/>
<rect x="10" y="-6" width="10" height="8" rx="2" fill="#27500A"/> <!-- terminal -->
<rect class="battery-level" x="5" y="12" width="35" height="48" rx="3"/> <!-- fill level -->
```
**Power pylon:**
```xml
<polygon class="pylon" points="30,0 35,0 40,60 25,60"/>
<line x1="15" y1="10" x2="45" y2="10" stroke="#5F5E5A" stroke-width="3"/>
<circle cx="18" cy="10" r="3" fill="#FAEEDA" stroke="#854F0B"/> <!-- insulator -->
```
## Water systems
**Reservoir/dam:**
```xml
<polygon class="reservoir-wall" points="0,60 10,0 70,0 80,60"/>
<polygon class="water" points="12,10 68,10 68,55 75,55 75,58 5,58 5,55 12,55"/>
<!-- Wave effect -->
<path d="M 15 25 Q 25 22 35 25 Q 45 28 55 25" fill="none" stroke="#378ADD" opacity="0.5"/>
```
**Treatment tank:**
```xml
<ellipse class="treatment-tank" cx="35" cy="45" rx="30" ry="18"/>
<rect class="treatment-tank" x="5" y="20" width="60" height="25"/>
<!-- Bubbles -->
<circle cx="20" cy="32" r="2" fill="#378ADD" opacity="0.6"/>
```
**Pipe with joint and valve:**
```xml
<path class="pipe" d="M 80 85 L 110 85"/>
<circle class="pipe-joint" cx="110" cy="85" r="8"/>
<circle class="valve" cx="95" cy="85" r="6"/>
```
## Transport systems
**Road with lane markings:**
```xml
<line class="road" x1="0" y1="50" x2="170" y2="50"/>
<line class="road-mark" x1="10" y1="50" x2="160" y2="50"/>
```
**Traffic light:**
```xml
<rect class="traffic-light" x="0" y="0" width="14" height="32" rx="3"/>
<circle class="light-red" cx="7" cy="8" r="4"/>
<circle class="light-off" cx="7" cy="16" r="4"/>
<circle class="light-green" cx="7" cy="24" r="4"/>
```
**Bus:**
```xml
<rect class="bus" x="0" y="0" width="55" height="28" rx="6"/>
<rect class="bus-window" x="5" y="5" width="12" height="12" rx="2"/>
<circle cx="14" cy="30" r="6" fill="#2C2C2A"/> <!-- wheel -->
<circle cx="14" cy="30" r="3" fill="#5F5E5A"/> <!-- hubcap -->
```
## Full CSS block (add to the host page or inline <style>)
```css
/* Power */
.solar-panel { fill: #3C3489; stroke: #534AB7; stroke-width: 0.5; }
.wind-tower { fill: #B4B2A9; stroke: #5F5E5A; stroke-width: 1; }
.wind-blade { fill: #F1EFE8; stroke: #888780; stroke-width: 0.5; }
.battery { fill: #27500A; stroke: #3B6D11; stroke-width: 1.5; }
.battery-level { fill: #97C459; }
.power-line { stroke: #EF9F27; stroke-width: 2; fill: none; }
/* Water */
.reservoir-wall { fill: #B4B2A9; stroke: #5F5E5A; stroke-width: 1; }
.water { fill: #85B7EB; stroke: #378ADD; stroke-width: 0.5; }
.pipe { fill: none; stroke: #378ADD; stroke-width: 4; stroke-linecap: round; }
.pipe-joint { fill: #185FA5; stroke: #0C447C; stroke-width: 1; }
.valve { fill: #0C447C; stroke: #185FA5; stroke-width: 1; }
/* Transport */
.road { stroke: #888780; stroke-width: 8; fill: none; stroke-linecap: round; }
.road-mark { stroke: #F1EFE8; stroke-width: 1; stroke-dasharray: 6 4; fill: none; }
.traffic-light { fill: #444441; stroke: #2C2C2A; stroke-width: 0.5; }
.light-red { fill: #E24B4A; }
.light-green { fill: #97C459; }
.light-off { fill: #2C2C2A; }
.bus { fill: #E1F5EE; stroke: #0F6E56; stroke-width: 1.5; }
```
## Reference examples
- `examples/smart-city-infrastructure.md` — hub-spoke with multiple subsystems
- `examples/electricity-grid-flow.md` — voltage hierarchy, flow markers
- `examples/wind-turbine-structure.md` — cross-section with legend
optional-skills/creative/concept-diagrams/references/physical-shape-cookbook.md
+42
View File
@@ -0,0 +1,42 @@
# Physical Shape Cookbook
Guidance for drawing physical objects (vehicles, buildings, hardware, mechanical systems, anatomy) — when rectangles aren't enough.
## Shape selection
| Physical form | SVG element | Example use |
|---------------|-------------|-------------|
| Curved bodies | `<path>` with Q/C curves | Fuselage, tanks, pipes |
| Tapered/angular shapes | `<polygon>` | Wings, fins, wedges |
| Cylindrical/round | `<ellipse>`, `<circle>` | Engines, wheels, buttons |
| Linear structures | `<line>` | Struts, beams, connections |
| Internal sections | `<rect>` inside parent | Compartments, rooms |
| Dashed boundaries | `stroke-dasharray` | Hidden parts, fuel tanks |
## Layering approach
1. Draw outer structure first (fuselage, frame, hull)
2. Add internal sections on top (cabins, compartments)
3. Add detail elements (engines, wheels, controls)
4. Add leader lines with labels
## Semantic CSS classes (instead of c-* ramps)
For physical diagrams, define component-specific classes directly rather than applying `c-*` color classes. This makes each part self-documenting and lets you keep a restrained palette:
```css
.fuselage { fill: #F1EFE8; stroke: #5F5E5A; stroke-width: 1; }
.wing { fill: #E6F1FB; stroke: #185FA5; stroke-width: 1; }
.engine { fill: #FAECE7; stroke: #993C1D; stroke-width: 1; }
```
Add these to a local `<style>` inside the SVG (or extend the host page's `<style>` block). The light-mode/dark-mode pattern still works — use the CSS variables from the template (`var(--bg-secondary)`, `var(--border)`, `var(--text-primary)`) if you want dark-mode awareness.
## Reference examples
Look at these example files for working physical-diagram patterns:
- `examples/commercial-aircraft-structure.md` — fuselage curves + tapered wings + ellipse engines
- `examples/wind-turbine-structure.md` — underground foundation, tubular tower, nacelle cutaway
- `examples/smartphone-layer-anatomy.md` — exploded-view stack with alternating labels
- `examples/apartment-floor-plan-conversion.md` — walls, doors, windows, proposed changes
optional-skills/creative/concept-diagrams/templates/template.html
+174
View File
@@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Concept Diagram</title>
<style>
:root {
--text-primary: #1a1a18;
--text-secondary: #5f5e5a;
--text-tertiary: #88877f;
--bg-primary: #ffffff;
--bg-secondary: #f6f5f0;
--bg-tertiary: #eeedeb;
--border: rgba(0,0,0,0.15);
--border-hover: rgba(0,0,0,0.3);
}
@media (prefers-color-scheme: dark) {
:root {
--text-primary: #e8e6de;
--text-secondary: #b4b2a9;
--text-tertiary: #888780;
--bg-primary: #1a1a18;
--bg-secondary: #2c2c2a;
--bg-tertiary: #3d3d3a;
--border: rgba(255,255,255,0.15);
--border-hover: rgba(255,255,255,0.3);
}
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: system-ui, -apple-system, sans-serif;
background: var(--bg-tertiary);
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
padding: 40px 20px;
}
.card {
background: var(--bg-primary);
border-radius: 16px;
padding: 32px;
max-width: 780px;
width: 100%;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
h1 {
font-size: 18px;
font-weight: 500;
color: var(--text-primary);
margin-bottom: 8px;
}
.subtitle {
font-size: 13px;
color: var(--text-tertiary);
margin-bottom: 24px;
}
svg { width: 100%; height: auto; }
/* === SVG Design System Classes === */
/* Text classes */
.t { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; fill: var(--text-primary); }
.ts { font-family: system-ui, -apple-system, sans-serif; font-size: 12px; fill: var(--text-secondary); }
.th { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; fill: var(--text-primary); font-weight: 500; }
/* Neutral box */
.box { fill: var(--bg-secondary); stroke: var(--border); stroke-width: 0.5px; }
/* Arrow */
.arr { stroke: var(--text-secondary); stroke-width: 1.5px; fill: none; }
/* Leader line */
.leader { stroke: var(--text-tertiary); stroke-width: 0.5px; stroke-dasharray: 4 3; fill: none; }
/* Clickable node */
.node { cursor: pointer; transition: opacity 0.15s; }
.node:hover { opacity: 0.82; }
/* === Color Ramp Classes (light mode) === */
.c-purple > rect, .c-purple > circle, .c-purple > ellipse { fill: #EEEDFE; stroke: #534AB7; }
.c-purple > .th, .c-purple > text.th { fill: #3C3489; }
.c-purple > .ts, .c-purple > text.ts { fill: #534AB7; }
.c-purple > .t, .c-purple > text.t { fill: #3C3489; }
.c-teal > rect, .c-teal > circle, .c-teal > ellipse { fill: #E1F5EE; stroke: #0F6E56; }
.c-teal > .th, .c-teal > text.th { fill: #085041; }
.c-teal > .ts, .c-teal > text.ts { fill: #0F6E56; }
.c-teal > .t, .c-teal > text.t { fill: #085041; }
.c-coral > rect, .c-coral > circle, .c-coral > ellipse { fill: #FAECE7; stroke: #993C1D; }
.c-coral > .th, .c-coral > text.th { fill: #712B13; }
.c-coral > .ts, .c-coral > text.ts { fill: #993C1D; }
.c-coral > .t, .c-coral > text.t { fill: #712B13; }
.c-pink > rect, .c-pink > circle, .c-pink > ellipse { fill: #FBEAF0; stroke: #993556; }
.c-pink > .th, .c-pink > text.th { fill: #72243E; }
.c-pink > .ts, .c-pink > text.ts { fill: #993556; }
.c-pink > .t, .c-pink > text.t { fill: #72243E; }
.c-gray > rect, .c-gray > circle, .c-gray > ellipse { fill: #F1EFE8; stroke: #5F5E5A; }
.c-gray > .th, .c-gray > text.th { fill: #444441; }
.c-gray > .ts, .c-gray > text.ts { fill: #5F5E5A; }
.c-gray > .t, .c-gray > text.t { fill: #444441; }
.c-blue > rect, .c-blue > circle, .c-blue > ellipse { fill: #E6F1FB; stroke: #185FA5; }
.c-blue > .th, .c-blue > text.th { fill: #0C447C; }
.c-blue > .ts, .c-blue > text.ts { fill: #185FA5; }
.c-blue > .t, .c-blue > text.t { fill: #0C447C; }
.c-green > rect, .c-green > circle, .c-green > ellipse { fill: #EAF3DE; stroke: #3B6D11; }
.c-green > .th, .c-green > text.th { fill: #27500A; }
.c-green > .ts, .c-green > text.ts { fill: #3B6D11; }
.c-green > .t, .c-green > text.t { fill: #27500A; }
.c-amber > rect, .c-amber > circle, .c-amber > ellipse { fill: #FAEEDA; stroke: #854F0B; }
.c-amber > .th, .c-amber > text.th { fill: #633806; }
.c-amber > .ts, .c-amber > text.ts { fill: #854F0B; }
.c-amber > .t, .c-amber > text.t { fill: #633806; }
.c-red > rect, .c-red > circle, .c-red > ellipse { fill: #FCEBEB; stroke: #A32D2D; }
.c-red > .th, .c-red > text.th { fill: #791F1F; }
.c-red > .ts, .c-red > text.ts { fill: #A32D2D; }
.c-red > .t, .c-red > text.t { fill: #791F1F; }
/* === Dark mode overrides === */
@media (prefers-color-scheme: dark) {
.c-purple > rect, .c-purple > circle, .c-purple > ellipse { fill: #3C3489; stroke: #AFA9EC; }
.c-purple > .th, .c-purple > text.th { fill: #CECBF6; }
.c-purple > .ts, .c-purple > text.ts { fill: #AFA9EC; }
.c-teal > rect, .c-teal > circle, .c-teal > ellipse { fill: #085041; stroke: #5DCAA5; }
.c-teal > .th, .c-teal > text.th { fill: #9FE1CB; }
.c-teal > .ts, .c-teal > text.ts { fill: #5DCAA5; }
.c-coral > rect, .c-coral > circle, .c-coral > ellipse { fill: #712B13; stroke: #F0997B; }
.c-coral > .th, .c-coral > text.th { fill: #F5C4B3; }
.c-coral > .ts, .c-coral > text.ts { fill: #F0997B; }
.c-pink > rect, .c-pink > circle, .c-pink > ellipse { fill: #72243E; stroke: #ED93B1; }
.c-pink > .th, .c-pink > text.th { fill: #F4C0D1; }
.c-pink > .ts, .c-pink > text.ts { fill: #ED93B1; }
.c-gray > rect, .c-gray > circle, .c-gray > ellipse { fill: #444441; stroke: #B4B2A9; }
.c-gray > .th, .c-gray > text.th { fill: #D3D1C7; }
.c-gray > .ts, .c-gray > text.ts { fill: #B4B2A9; }
.c-blue > rect, .c-blue > circle, .c-blue > ellipse { fill: #0C447C; stroke: #85B7EB; }
.c-blue > .th, .c-blue > text.th { fill: #B5D4F4; }
.c-blue > .ts, .c-blue > text.ts { fill: #85B7EB; }
.c-green > rect, .c-green > circle, .c-green > ellipse { fill: #27500A; stroke: #97C459; }
.c-green > .th, .c-green > text.th { fill: #C0DD97; }
.c-green > .ts, .c-green > text.ts { fill: #97C459; }
.c-amber > rect, .c-amber > circle, .c-amber > ellipse { fill: #633806; stroke: #EF9F27; }
.c-amber > .th, .c-amber > text.th { fill: #FAC775; }
.c-amber > .ts, .c-amber > text.ts { fill: #EF9F27; }
.c-red > rect, .c-red > circle, .c-red > ellipse { fill: #791F1F; stroke: #F09595; }
.c-red > .th, .c-red > text.th { fill: #F7C1C1; }
.c-red > .ts, .c-red > text.ts { fill: #F09595; }
}
</style>
</head>
<body>
<div class="card">
<h1><!-- DIAGRAM TITLE HERE --></h1>
<p class="subtitle"><!-- OPTIONAL SUBTITLE HERE --></p>
<!-- PASTE SVG HERE -->
</div>
</body>
</html>