@baimingtao/lbs-agent 1.0.0

package/extensions/skills/optional/creative/concept-diagrams/SKILL.md

@@ -0,0 +1,362 @@
+---
+name: concept-diagrams
+description: 生成扁平、极简且自适应深色模式的 SVG 图表，作为独立的 HTML 文件。使用统一的教育视觉语言，包含 9 种语义色阶、句首大写排版以及自动深色模式。最适合教育类和非软件类的可视化内容——物理装置、化学机制、数学曲线、物理实体（飞机、涡轮机、智能手机、机械表）、解剖结构、平面图、截面图、叙事性流程（X 的生命周期、Y 的过程）、中心辐射型系统集成（智慧城市、IoT）以及爆炸分层视图。如果该主题存在更专业的技能（专门的软件/云架构、手绘草图、动画讲解等），请优先使用该技能——否则，本技能也可作为具有简洁教育外观的通用 SVG 图表备选方案。内置 15 个示例图表。
+version: 0.1.0
+author: v1k22 (original PR), ported into hermes-agent
+license: MIT
+dependencies: []
+platforms: [linux, macos, windows]
+metadata:
+  hermes:
+    tags: [diagrams, svg, visualization, education, physics, chemistry, engineering]
+    related_skills: [architecture-diagram, excalidraw, generative-widgets]
+---
+
+# 概念图表
+
+生成具有统一扁平、极简设计系统的生产级 SVG 图表。输出为单个独立的 HTML 文件，可在任何现代浏览器中呈现相同的效果，并支持自动亮/暗模式。
+
+## 适用范围
+
+**最适合：**
+- 物理装置、化学机制、数学曲线、生物学
+- 物理实体（飞机、涡轮机、智能手机、机械表、细胞）
+- 解剖图、横截面图、爆炸分层视图
+- 平面图、建筑改造图
+- 叙事性流程（X 的生命周期、Y 的过程）
+- 中心辐射型系统集成（智慧城市、IoT 网络、电网）
+- 任何领域的教育/教科书风格视觉内容
+- 定量图表（分组柱状图、能量分布图）
+
+**请优先寻找其他专用工具：**
+- 具有深色科技美感的专用软件/云基础设施架构（如有 `architecture-diagram` 可用，请考虑使用）
+- 手绘白板草图（如有 `excalidraw` 可用，请考虑使用）
+- 动画讲解或视频输出（请考虑使用动画技能）
+
+如果该主题已有更专业的技能可用，请优先使用。如果没有合适的，本技能可作为通用的 SVG 图表备选方案——输出将带有下文所述的简洁教育美学风格，这对于几乎任何主题来说都是一个合理的默认选择。
+
+## 工作流
+
+1. 确定图表类型（参见下文的 Diagram Types）。
+2. 使用 Design System 规则布局组件。
+3. 使用 `templates/template.html` 作为包装器编写完整的 HTML 页面 —— 将你的 SVG 粘贴到模板中指定的 `<!-- PASTE SVG HERE -->` 位置。
+4. 保存为独立的 `.html` 文件（例如 `~/my-diagram.html` 或 `./my-diagram.html`）。
+5. 用户直接在浏览器中打开它 —— 无需服务器，无需依赖。
+
+可选: 如果用户想要一个包含多个图表的可浏览画廊，请参见底部的“Local Preview Server”。
+
+加载 HTML 模板：
+```
+skill_view(name="concept-diagrams", file_path="templates/template.html")
+```
+
+该模板内嵌了完整的 CSS 设计系统（`c-*` 颜色类、文本类、亮/暗模式变量、箭头标记样式）。你生成的 SVG 依赖于宿主页面中包含的这些类。
+
+---
+
+## Design System
+
+### 理念
+
+- **扁平化**：无渐变、投影、模糊、发光或霓虹效果。
+- **极简主义**：展示核心内容。框内无装饰性图标。
+- **一致性**：所有图表保持相同的颜色、间距、排版和描边宽度。
+- **深色模式就绪**：所有颜色均通过 CSS 类自动适配 —— 无需为每种模式编写特定的 SVG。
+
+### 色彩调色板
+
+9 种色阶，每种包含 7 个色度。将类名放在 `<g>` 或形状元素上；模板 CSS 会自动处理这两种模式。
+
+| Class | 50 (lightest) | 100 | 200 | 400 | 600 | 800 | 900 (darkest) |
+|------------|---------------|---------|---------|---------|---------|---------|---------------|
+| `c-purple` | #EEEDFE | #CECBF6 | #AFA9EC | #7F77DD | #534AB7 | #3C3489 | #26215C |
+| `c-teal` | #E1F5EE | #9FE1CB | #5DCAA5 | #1D9E75 | #0F6E56 | #085041 | #04342C |
+| `c-coral` | #FAECE7 | #F5C4B3 | #F0997B | #D85A30 | #993C1D | #712B13 | #4A1B0C |
+| `c-pink` | #FBEAF0 | #F4C0D1 | #ED93B1 | #D4537E | #993556 | #72243E | #4B1528 |
+| `c-gray` | #F1EFE8 | #D3D1C7 | #B4B2A9 | #888780 | #5F5E5A | #444441 | #2C2C2A |
+| `c-blue` | #E6F1FB | #B5D4F4 | #85B7EB | #378ADD | #185FA5 | #0C447C | #042C53 |
+| `c-green` | #EAF3DE | #C0DD97 | #97C459 | #639922 | #3B6D11 | #27500A | #173404 |
+| `c-amber` | #FAEEDA | #FAC775 | #EF9F27 | #BA7517 | #854F0B | #633806 | #412402 |
+| `c-red` | #FCEBEB | #F7C1C1 | #F09595 | #E24B4A | #A32D2D | #791F1F | #501313 |
+
+#### 颜色分配规则
+
+颜色编码表达的是**含义**，而非顺序。绝不要像彩虹那样循环使用颜色。
+
+- 按**类别**对节点进行分组 —— 同一类型的所有节点共享一种颜色。
+- 使用 `c-gray` 表示中性/结构性节点（起点、终点、通用步骤、用户）。
+- 每个图表使用 **2-3 种颜色**，不要使用 6 种以上。
+- 通用类别优先使用 `c-purple`、`c-teal`、`c-coral`、`c-pink`。
+- 将 `c-blue`、`c-green`、`c-amber`、`c-red` 留给具有特定语义的含义（信息、成功、警告、错误）。
+
+亮/暗模式色度映射（由模板 CSS 处理 —— 只需使用类即可）：
+- 亮色模式: 50 填充 + 600 描边 + 800 标题 / 600 副标题
+- 暗色模式:  800 填充 + 200 描边 + 100 标题 / 200 副标题
+
+### 排版
+
+仅使用两种字体大小。无例外。
+
+| Class | Size | Weight | Use |
+|-------|------|--------|-----|
+| `th` | 14px | 500 | 节点标题、区域标签 |
+| `ts` | 12px | 400 | 副标题、描述、箭头标签 |
+| `t` | 14px | 400 | 常规文本 |
+
+- **始终使用句首大写。** 绝不使用标题大写 (Title Case)，绝不使用全大写 (ALL CAPS)。
+- 每个 `<text>` 必须带有类（`t`、`ts` 或 `th`）。不允许有无类的文本。
+- 框内所有文本均使用 `dominant-baseline="central"`。
+- 框内居中文本使用 `text-anchor="middle"`。
+
+**宽度估算 (近似):**
+- 14px 字号 500 字重：每个字符约 8px
+- 12px 字号 400 字重：每个字符约 6.5px
+- 务必验证：`box_width >= (char_count × px_per_char) + 48`（每侧保留 24px 内边距）
+
+### 间距与布局
+
+- **ViewBox**: `viewBox="0 0 680 H"`，其中 H = 内容高度 + 40px 缓冲。
+- **安全区域**: x=40 到 x=640，y=40 到 y=(H-40)。
+- **框间距**: 最小间距 60px。
+- **框内部**: 水平内边距 24px，垂直内边距 12px。
+- **箭头间隙**: 箭头与框边缘之间保持 10px。
+- **单行框**: 高度 44px。
+- **双行框**: 高度 56px，标题与副标题基线之间相距 18px。
+- **容器内边距**: 每个容器内部至少 20px。
+- **最大嵌套**: 2-3 层深度。在 680px 宽度下，更深的内容将变得难以阅读。
+
+### 描边与形状
+
+- **描边宽度**: 所有节点边框为 0.5px。不是 1px，也不是 2px。
+- **矩形圆角**: 节点使用 `rx="8"`，内部容器使用 `rx="12"`，外部容器使用 `rx="16"` 到 `rx="20"`。
+- **连接线路径**: 必须具有 `fill="none"`。否则，SVG 默认使用 `fill: black`。
+
+### 箭头标记
+
+在**每个** SVG 的开头包含此 `<defs>` 块：
+
+```xml
+<defs>
+  <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
+          markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+    <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
+          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </marker>
+</defs>
+```
+
+在线条上使用 `marker-end="url(#arrow)"`。箭头通过 `context-stroke` 继承线条颜色。
+
+### CSS 类（由模板提供）
+
+模板页面提供：
+
+- 文本: `.t`, `.ts`, `.th`
+- 中性: `.box`, `.arr`, `.leader`, `.node`
+- 色阶: `.c-purple`, `.c-teal`, `.c-coral`, `.c-pink`, `.c-gray`, `.c-blue`, `.c-green`, `.c-amber`, `.c-red`（均带有自动亮/暗模式）
+
+你**不需要**重新定义这些 —— 只需在你的 SVG 中应用它们即可。模板文件包含完整的 CSS 定义。
+
+---
+
+## SVG 模板
+
+模板页面中的每个 SVG 都以这个确切的结构开始：
+
+```xml
+<svg width="100%" viewBox="0 0 680 {HEIGHT}" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5"
+            markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+      <path d="M2 1L8 5L2 9" fill="none" stroke="context-stroke"
+            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </marker>
+  </defs>
+
+  <!-- Diagram content here -->
+
+</svg>
+```
+
+将 `{HEIGHT}` 替换为实际计算出的高度（最底部元素 + 40px）。
+
+### Node 模式
+
+**单行节点 (44px):**
+```xml
+<g class="node c-blue">
+  <rect x="100" y="20" width="180" height="44" rx="8" stroke-width="0.5"/>
+  <text class="th" x="190" y="42" text-anchor="middle" dominant-baseline="central">Service name</text>
+</g>
+```
+
+**双行节点 (56px):**
+```xml
+<g class="node c-teal">
+  <rect x="100" y="20" width="200" height="56" rx="8" stroke-width="0.5"/>
+  <text class="th" x="200" y="38" text-anchor="middle" dominant-baseline="central">Service name</text>
+  <text class="ts" x="200" y="56" text-anchor="middle" dominant-baseline="central">Short description</text>
+</g>
+```
+
+**连接线 (无标签):**
+```xml
+<line x1="200" y1="76" x2="200" y2="120" class="arr" marker-end="url(#arrow)"/>
+```
+
+**容器 (虚线或实线):**
+```xml
+<g class="c-purple">
+  <rect x="40" y="92" width="600" height="300" rx="16" stroke-width="0.5"/>
+  <text class="th" x="66" y="116">Container label</text>
+  <text class="ts" x="66" y="134">Subtitle info</text>
+</g>
+```
+
+---
+
+## 图表类型
+
+选择适合该主题的布局：
+
+1. **流程图** —— CI/CD 流水线、请求生命周期、审批工作流、数据处理。单向流动（自上而下或从左到右）。每行最多 4-5 个节点。
+2. **结构/包含图** —— 云基础设施嵌套、带分层的系统架构。带有内部区域的大型外部容器。使用虚线矩形进行逻辑分组。
+3. **API/端点图** —— REST 路由、GraphQL schema。从根节点开始的树状结构，分支到各个资源组，每个组包含端点节点。
+4. **微服务拓扑图** —— Service mesh、事件驱动系统。服务作为节点，箭头表示通信模式，中间为消息队列。
+5. **数据流图** —— ETL 流水线、流式架构。从左到右的流向，从数据源经由处理环节最终到达接收端。
+6. **物理/结构图** —— 车辆、建筑、硬件、解剖结构。使用与物理形态相匹配的形状 —— `<path>` 用于弯曲的躯体，`<polygon>` 用于锥形形状，`<ellipse>`/`<circle>` 用于圆柱形部件，嵌套的 `<rect>` 用于隔室。参见 `references/physical-shape-cookbook.md`。
+7. **基础设施/系统集成图** —— 智慧城市、IoT 网络、多领域系统。中心辐射型布局，由中央平台连接各子系统。使用语义化的线条样式（`.data-line`、`.power-line`、`.water-pipe`、`.road`）。参见 `references/infrastructure-patterns.md`。
+8. **UI/仪表盘原型图** —— 管理面板、监控仪表盘。带有嵌套图表/仪表/指示器元素的屏幕外框。参见 `references/dashboard-patterns.md`。
+
+对于物理、基础设施和仪表盘图表，请在生成之前加载相应的参考文件 —— 每个文件都提供了现成的 CSS 类和形状原型。
+
+---
+
+## 验证 检查清单
+
+在最终确定任何 SVG 之前，请核对以下所有项目：
+
+1. 每个 `<text>` 都带有 `t`、`ts` 或 `th` 类。
+2. 框内的每个 `<text>` 都具有 `dominant-baseline="central"`。
+3. 用作箭头的每个连接器 `<path>` 或 `<line>` 都具有 `fill="none"`。
+4. 没有任何箭头线穿过无关的框。
+5. 对于 14px 文本，`box_width >= (longest_label_chars × 8) + 48`。
+6. 对于 12px 文本，`box_width >= (longest_label_chars × 6.5) + 48`。
+7. ViewBox 高度 = 最底部的元素 + 40px。
+8. 所有内容都保留在 x=40 到 x=640 之间。
+9. 颜色类 (`c-*`) 位于 `<g>` 或形状元素上，绝不要放在 `<path>` 连接器上。
+10. 存在箭头 `<defs>` 块。
+11. 没有渐变、阴影、模糊或发光效果。
+12. 所有节点边框的描边宽度为 0.5px。
+
+---
+
+## 输出 & Preview
+
+### 默认: 独立的 HTML 文件
+
+编写一个用户可以直接打开的 `.html` 单文件。无需服务器，无需依赖，可离线工作。模式：
+
+```python
+# 1. Load the template
+template = skill_view("concept-diagrams", "templates/template.html")
+
+# 2. Fill in title, subtitle, and paste your SVG
+html = template.replace(
+    "<!-- DIAGRAM TITLE HERE -->", "SN2 reaction mechanism"
+).replace(
+    "<!-- OPTIONAL SUBTITLE HERE -->", "Bimolecular nucleophilic substitution"
+).replace(
+    "<!-- PASTE SVG HERE -->", svg_content
+)
+
+# 3. Write to a user-chosen path (or ./ by default)
+write_file("./sn2-mechanism.html", html)
+```
+
+告诉用户如何打开它：
+
+```
+# macOS
+open ./sn2-mechanism.html
+# Linux
+xdg-open ./sn2-mechanism.html
+```
+
+### 可选: 本地预览服务器（多图表画廊）
+
+仅当用户明确想要一个可浏览的多图表画廊时才使用此功能。
+
+**规则：**
+- 仅绑定到 `127.0.0.1`。绝不要绑定 `0.0.0.0`。在所有网络接口上暴露图表在共享网络中是一种安全隐患。
+- 选择一个可用端口（不要硬编码）并告知用户所选的 URL。
+- 此服务器是可选的，需主动开启 —— 请优先使用独立的 HTML 文件。
+
+推荐模式（让操作系统挑选可用的临时端口）：
+
+```bash
+# Put each diagram in its own folder under .diagrams/
+mkdir -p .diagrams/sn2-mechanism
+# ...write .diagrams/sn2-mechanism/index.html...
+
+# Serve on loopback only, free port
+cd .diagrams && python3 -c "
+import http.server, socketserver
+with socketserver.TCPServer(('127.0.0.1', 0), http.server.SimpleHTTPRequestHandler) as s:
+    print(f'Serving at http://127.0.0.1:{s.server_address[1]}/')
+    s.serve_forever()
+" &
+```
+
+如果用户坚持使用固定端口，请使用 `127.0.0.1:<port>` —— 依然绝不要使用 `0.0.0.0`。记录如何停止服务器（`kill %1` 或 `pkill -f "http.server"`）。
+
+---
+
+## 示例 参考
+
+`examples/` 目录提供了 15 个完整且经过测试的图表。在编写类似类型的新图表之前，请浏览它们以获取可用的模式：
+
+| File | 类型 | Demonstrates |
+|------|------|--------------|
+| `hospital-emergency-department-flow.md` | Flowchart | Priority routing with semantic colors |
+| `feature-film-production-pipeline.md` | Flowchart | Phased workflow, horizontal sub-flows |
+| `automated-password-reset-flow.md` | Flowchart | Auth flow with error branches |
+| `autonomous-llm-research-agent-flow.md` | Flowchart | Loop-back arrows, decision branches |
+| `place-order-uml-sequence.md` | Sequence | UML sequence diagram style |
+| `commercial-aircraft-structure.md` | Physical | Paths, polygons, ellipses for realistic shapes |
+| `wind-turbine-structure.md` | Physical cross-section | Underground/above-ground separation, color coding |
+| `smartphone-layer-anatomy.md` | Exploded view | Alternating left/right labels, layered components |
+| `apartment-floor-plan-conversion.md` | Floor plan | Walls, doors, proposed changes in dotted red |
+| `banana-journey-tree-to-smoothie.md` | Narrative journey | Winding path, progressive state changes |
+| `cpu-ooo-microarchitecture.md` | Hardware pipeline | Fan-out, memory hierarchy sidebar |
+| `sn2-reaction-mechanism.md` | Chemistry | Molecules, curved arrows, energy profile |
+| `smart-city-infrastructure.md` | Hub-spoke | Semantic line styles per system |
+| `electricity-grid-flow.md` | Multi-stage flow | Voltage hierarchy, flow markers |
+| `ml-benchmark-grouped-bar-chart.md` | Chart | Grouped bars, dual axis |
+
+加载任何示例：
+```
+skill_view(name="concept-diagrams", file_path="examples/<filename>")
+```
+
+---
+
+## 快速参考: 适用场景
+
+| 用户说 | 图表类型 | 建议颜色 |
+|-----------|--------------|------------------|
+| “展示流水线” | Flowchart | gray 起点/终点，purple 步骤，red 错误，teal 部署 |
+| “画出数据流” | Data pipeline (left-right) | gray 数据源，purple 处理，teal 接收端 |
+| “将系统可视化” | Structural (containment) | purple 容器，teal 服务，coral 数据 |
+| “映射端点” | API tree | purple 根节点，每个资源组使用一种色阶 |
+| “展示服务” | Microservice topology | gray 入口，teal 服务，purple 总线，coral 工作节点 |
+| “画飞机/车辆” | Physical | 使用 paths、polygons、ellipses 表现真实形状 |
+| “智慧城市 / IoT” | Hub-spoke integration | 每个子系统使用语义化线条样式 |
+| “展示仪表盘” | UI mockup | 深色屏幕，图表颜色：teal、purple、coral 用于警告 |
+| “电网 / 电力” | Multi-stage flow | 电压层级（HV/MV/LV 线条粗细） |
+| “风力涡轮机 / 涡轮机” | Physical cross-section | 基础 + 塔架剖面 + 机舱使用不同颜色编码 |
+| “X 的旅程 / 生命周期” | Narrative journey | 蜿蜒的路径，渐进的状态变化 |
+| “X 的分层 / 爆炸图” | Exploded layer view | 垂直堆叠，交替标注标签 |
+| “CPU / 流水线” | Hardware pipeline | 垂直阶段，扇出到执行端口 |
+| “平面图 / 公寓” | Floor plan | 墙壁、门、拟议的修改使用红色虚线 |
+| “反应机制” | Chemistry | 原子、化学键、曲线箭头、过渡态、能量分布图 |

package/extensions/skills/optional/creative/concept-diagrams/examples/apartment-floor-plan-conversion.md

@@ -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