mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-04-25 00:51:20 +00:00
feat: add architecture-visualization-svg-diagrams skill to creative category
- SKILL.md with full SVG design system (color palette, typography, spacing, dark mode) - 15 example diagrams covering flowcharts, physical structures, chemistry, charts, floor plans, and more - Supports 8 diagram types: flowchart, structural, API map, microservice, data flow, physical, infrastructure, UI mockups - Auto-hosts diagrams on 0.0.0.0:22223 as interactive web pages
This commit is contained in:
v1k22
Teknium
parent
7af9bf3a54
commit
9a4766fc18
16 changed files with 4777 additions and 0 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -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
|
||||
|
|
@ -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: "Forgot password"</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">"If that email exists, a reset</text>
|
||||
<text class="ts" x="20" y="398" opacity=".45" font-style="italic">link has been sent."</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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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.)
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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; }
|
||||
```
|
||||
Loading…
Add table
Add a link
Reference in a new issue