{"id":"09247244-d54e-4b53-b691-2245f75d0a5e","entityType":"agent","slug":"clawhub-wujiaming88-svg-architecture-diagram","name":"SVG Architecture Diagram","canonicalUrl":"https://www.xpersona.co/agent/clawhub-wujiaming88-svg-architecture-diagram","canonicalPath":"/agent/clawhub-wujiaming88-svg-architecture-diagram","generatedAt":"2026-10-12T12:11:15.560Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T19:59:58.749Z","emptyReason":null},"description":"Create professional, publication-quality technical architecture diagrams using pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfec... Skill: SVG Architecture Diagram Owner: wujiaming88 Summary: Create professional, publication-quality technical architecture diagrams using pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfec... Tags: latest:1.2.0 Version history: v1.2.0 | 2026-04-25T12:12:47.162Z | user 连线间距规范(≥20px防箭头吞线), 新增OpenClaw架构图示例, Card Spacing Rules v1.1.0 | 2026-04-25T09:52:29.983Z | user 默认4x最高清分辨率(6400x4000px) v","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s171ccng28wdj2n2tdtw8q70zd83ha4q:svg-architecture-diagram","sourceUrl":"https://clawhub.ai/wujiaming88/svg-architecture-diagram","homepage":"https://clawhub.ai/wujiaming88/skills/svg-architecture-diagram","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/wujiaming88/svg-architecture-diagram","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/wujiaming88/skills/svg-architecture-diagram","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Create professional, publication-quality technical architecture diagrams using pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfec..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T19:59:58.749Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T19:59:58.749Z","emptyReason":null},"stars":null,"forks":null,"downloads":1000,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"1.2.0","tractionLabel":"1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T19:59:58.690Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T19:59:58.749Z","lastCrawledAt":"2026-10-11T19:59:58.690Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T19:59:58.690Z","lastVerifiedAt":null,"highlights":[{"version":"1.2.0","createdAt":"2026-04-25T12:12:47.162Z","changelog":"连线间距规范(≥20px防箭头吞线), 新增OpenClaw架构图示例, Card Spacing Rules","fileCount":7,"zipByteSize":18129},{"version":"1.1.0","createdAt":"2026-04-25T09:52:29.983Z","changelog":"默认4x最高清分辨率(6400x4000px)","fileCount":5,"zipByteSize":11138},{"version":"1.0.0","createdAt":"2026-04-25T09:50:04.484Z","changelog":"纯SVG技术架构图, 精确连线+颜色编码+防溢出, 含Hermes示例","fileCount":5,"zipByteSize":11058}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s171ccng28wdj2n2tdtw8q70zd83ha4q:svg-architecture-diagram","setupComplexity":"low","setupSteps":["Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.","Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data."],"contract":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-12T12:11:15.559Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T19:59:58.749Z","emptyReason":null},"readme":"Skill: SVG Architecture Diagram\n\nOwner: wujiaming88\n\nSummary: Create professional, publication-quality technical architecture diagrams using pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfec...\n\nTags: latest:1.2.0\n\nVersion history:\n\nv1.2.0 | 2026-04-25T12:12:47.162Z | user\n\n连线间距规范(≥20px防箭头吞线), 新增OpenClaw架构图示例, Card Spacing Rules\n\nv1.1.0 | 2026-04-25T09:52:29.983Z | user\n\n默认4x最高清分辨率(6400x4000px)\n\nv1.0.0 | 2026-04-25T09:50:04.484Z | user\n\n纯SVG技术架构图, 精确连线+颜色编码+防溢出, 含Hermes示例\n\nArchive index:\n\nArchive v1.2.0: 7 files, 18129 bytes\n\nFiles: references/design-system.md (3506b), references/example-hermes.html (18156b), references/example-openclaw.html (23872b), scripts/screenshot.py (2759b), skill-card.md (2447b), SKILL.md (7834b), _meta.json (143b)\n\nFile v1.2.0:SKILL.md\n\n---\nname: svg-architecture-diagram\ndescription: >-\n  Create professional, publication-quality technical architecture diagrams using\n  pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfect\n  diagrams with precise connection lines, color-coded modules, and clear text at\n  any resolution. Use when: (1) user asks for a system architecture diagram,\n  (2) user wants a technical component diagram or flow chart, (3) user needs a\n  data flow or pipeline visualization, (4) any diagram requiring accurate text\n  labels and precise connecting lines. Triggers: \"architecture diagram\",\n  \"架构图\", \"技术架构\", \"system diagram\", \"component diagram\", \"flow diagram\",\n  \"数据流图\", \"模块图\", \"draw architecture\", \"画架构图\", \"technical diagram\".\n  Prefer this over AI image generation for any diagram with text labels.\n---\n\n# SVG Architecture Diagram\n\nCreate professional technical architecture diagrams using pure SVG, rendered to high-res PNG via Playwright.\n\n## Why SVG (not CSS positioning or AI image generation)\n\n| Approach | Lines/Arrows | Text Quality | Precision |\n|----------|-------------|-------------|-----------|\n| **SVG (this skill)** | ✅ Perfect: `<line>`, `<path>`, `<marker>` | ✅ Crisp at any size | ✅ Pixel-perfect |\n| CSS absolute positioning | ❌ Hacky: borders, pseudo-elements | ✅ OK | ❌ Hard to align |\n| AI image generation | ❌ No control | ❌ Garbled text | ❌ No precision |\n\n## Quick Start\n\n### Step 1: Plan the diagram\n\nIdentify:\n- **Modules** — group related components (color-coded)\n- **Hierarchy** — top-to-bottom flow (user → core → subsystems → output)\n- **Connections** — data flow (solid lines), feedback (dashed lines)\n\n### Step 2: Create the HTML file\n\nWrite a single HTML file with an inline SVG. Standard canvas: **1600×1000px**.\n\n```html\n<!DOCTYPE html>\n<html><head>\n<meta charset=\"UTF-8\">\n<style>\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { width: 1600px; height: 1000px; background: #fafafa; overflow: hidden; }\n</style>\n</head><body>\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 1000\" width=\"1600\" height=\"1000\">\n  <defs>\n    <!-- Arrow markers — one per color -->\n    <marker id=\"arr-indigo\" markerWidth=\"8\" markerHeight=\"6\" refX=\"7\" refY=\"3\" orient=\"auto\">\n      <path d=\"M0,0 L8,3 L0,6 Z\" fill=\"#6366f1\"/>\n    </marker>\n    <!-- Shadow filter -->\n    <filter id=\"shadow\" x=\"-4%\" y=\"-4%\" width=\"108%\" height=\"108%\">\n      <feDropShadow dx=\"0\" dy=\"2\" stdDeviation=\"4\" flood-color=\"#000\" flood-opacity=\"0.08\"/>\n    </filter>\n  </defs>\n\n  <!-- Diagram content here -->\n\n</svg>\n</body></html>\n```\n\n### Step 3: Build the diagram using these SVG patterns\n\n**Filled header card** (module title):\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"40\" rx=\"10\" fill=\"#6366f1\" filter=\"url(#shadow)\"/>\n<text x=\"CENTER\" y=\"Y+25\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" fill=\"#fff\">🔄 Module Name</text>\n```\n\n**Outlined detail card** (sub-component):\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"65\" rx=\"10\" fill=\"#fff\" stroke=\"#6366f1\" stroke-width=\"2\" filter=\"url(#shadow)\"/>\n<text x=\"X+20\" y=\"Y+22\" font-size=\"12\" font-weight=\"700\" fill=\"#6366f1\">Component Title</text>\n<text x=\"X+20\" y=\"Y+40\" font-size=\"11\" fill=\"#6b7280\">Description line 1</text>\n<text x=\"X+20\" y=\"Y+55\" font-size=\"10\" fill=\"#9ca3af\">Metadata / specs</text>\n```\n\n**Connection line** (with arrow):\n```svg\n<line x1=\"FROM_X\" y1=\"FROM_Y\" x2=\"TO_X\" y2=\"TO_Y\" stroke=\"#6366f1\" stroke-width=\"2\" marker-end=\"url(#arr-indigo)\"/>\n```\n\n**Curved connection** (L-shape or bend):\n```svg\n<path d=\"M startX,startY L midX,midY L endX,endY\" stroke=\"#6366f1\" stroke-width=\"2\" fill=\"none\" marker-end=\"url(#arr-indigo)\"/>\n```\n\n**Dashed feedback line**:\n```svg\n<path d=\"M x1,y1 L x2,y2\" stroke=\"#8b5cf6\" stroke-width=\"2\" fill=\"none\" stroke-dasharray=\"6,4\" marker-end=\"url(#arr-purple)\"/>\n```\n\n**Connection label**:\n```svg\n<text x=\"MID_X\" y=\"MID_Y-5\" font-size=\"10\" fill=\"#6366f1\" font-weight=\"500\">label text</text>\n```\n\n### Step 4: Screenshot with Playwright\n\n```python\nfrom playwright.sync_api import sync_playwright\nwith sync_playwright() as p:\n    browser = p.chromium.launch()\n    page = browser.new_page(\n        viewport={\"width\": 1600, \"height\": 1000},\n        device_scale_factor=4,  # 4x ultra-high res (default)\n    )\n    page.goto(\"file:///path/to/diagram.html\", wait_until=\"networkidle\")\n    page.wait_for_timeout(1500)\n    page.screenshot(path=\"diagram.png\", full_page=True)\n    browser.close()\n```\n\nOr use the bundled script: `scripts/screenshot.py <input.html> [output.png]`\n\n## Design System\n\nSee `references/design-system.md` for the complete color palette, card styles, arrow markers, and text sizing rules.\n\n## Critical Rules (prevent common issues)\n\n### Text Overflow Prevention\n1. **Max characters per line** at font-size 11px ≈ 7px/char:\n   - 300px container → max 37 chars\n   - 340px container → max 43 chars\n   - 440px container → max 57 chars\n2. **Long text → split into multiple `<text>` elements** with Y offset +15px each\n3. **Always leave 20px padding** on each side of text inside cards\n4. **Test at 1x scale** before generating final 4x screenshot\n\n### Connection Line Rules\n1. **Never use CSS for connections** — always SVG `<line>` or `<path>`\n2. **One `<marker>` per color** — define in `<defs>`, reference with `marker-end`\n3. **Straight lines** when possible; use `<path>` L-segments for bends\n4. **Avoid crossing lines** — rearrange layout if lines would cross\n5. **Label every connection** — brief verb/noun near the midpoint\n6. **⚠️ Minimum 20px gap between vertically stacked cards** — Arrow markers are 8px long. If the gap between cards is less than 20px, the arrow will completely cover the line, making it look like \"arrow only, no line\". Use card height 34px + gap 22px = 56px per step.\n7. **Connection line length must be at least 17px** — This ensures 9px visible line + 8px arrow marker. Example: card bottom at y=324, next card top at y=346, line from y1=324 to y2=343 (19px).\n8. **Never make line length < marker size (8px)** — The line will be invisible.\n\n### Layout Rules\n1. **Top-to-bottom** primary flow (input at top, output at bottom/right)\n2. **Left-right symmetry** when possible\n3. **Group related modules** vertically (e.g., memory layers stacked)\n4. **Minimum 20px gap** between vertically stacked cards (see Connection Line Rules)\n5. **Color-code by function** — see design system for standard palette\n6. **Include a legend** (bottom-right corner) explaining colors and line types\n7. **Include a title** (top center) and source attribution (bottom center)\n\n### Font Rules\n1. **Font family**: `font-family=\"Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif\"` — set on root `<svg>` or first `<text>`\n2. Load Inter via Google Fonts in `<style>` block\n3. **Chinese text**: use `PingFang SC` / `Microsoft YaHei` fallback\n4. **Font sizes**: titles 13-14px, descriptions 10-11px, metadata 9-10px\n\n## Examples\n\nTwo complete working examples are included:\n\n- `references/example-hermes.html` — Hermes Agent architecture (6 modules, medium complexity)\n- `references/example-openclaw.html` — OpenClaw platform architecture (12 modules, high complexity, demonstrates proper vertical card spacing for Agent Loop steps)\n\n## Delivery\n\nOutput `MEDIA:<path>` for inline delivery, or `openclaw message send --channel telegram --target <id> --media <path> --force-document` for Telegram.\n\nIf PNG exceeds ~1MB for Telegram delivery, convert to JPEG (quality=95):\n\n```python\nfrom PIL import Image\nimg = Image.open(\"diagram.png\")\nimg.save(\"diagram.jpg\", \"JPEG\", quality=95, optimize=True)\n```\n\nDefault is 4x (6400×4000px for 1600×1000 canvas). Always use maximum resolution.\n\nFile v1.2.0:_meta.json\n\n{\n  \"ownerId\": \"kn778xxhawnk8ayzy5se9s465980pz82\",\n  \"slug\": \"svg-architecture-diagram\",\n  \"version\": \"1.2.0\",\n  \"publishedAt\": 1777119167162\n}\n\nFile v1.2.0:references/design-system.md\n\n# SVG Architecture Diagram — Color Palette Reference\n\n## Standard Module Colors\n\n| Module Type | Fill Color | Border | Text | Use For |\n|-------------|-----------|--------|------|---------|\n| User / External | `#ec4899` (pink) | — | white | User input, LLM, external services |\n| Core Engine | `#6366f1` (indigo) | — | white | Main loop, core processing, orchestration |\n| Storage / Memory | `#10b981` (green) | `#10b981` | green/gray | Database, cache, memory layers |\n| Plugin / Extension | `#f59e0b` (amber) | `#f59e0b` | amber/gray | Skills, plugins, extensions |\n| AI / Learning | `#8b5cf6` (purple) | `#8b5cf6` | purple/gray | Self-evolution, ML, optimization |\n| Infrastructure | `#64748b` (slate) | `#94a3b8` | slate/gray | Tools, shell, file system |\n| Security / Guard | `#ef4444` (red) | `#ef4444` | red | Security, validation, guard |\n| Output / Result | `#10b981` (green) | — | white | Output, delivery, response |\n\n## Card Styles\n\n### Filled Card (header/title blocks)\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"40\" rx=\"10\" fill=\"#6366f1\" filter=\"url(#shadow)\"/>\n<text x=\"CENTER\" y=\"Y+25\" text-anchor=\"middle\" font-size=\"14\" font-weight=\"700\" fill=\"#fff\">Title</text>\n```\n\n### Outlined Card (detail blocks)\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"10\" fill=\"#fff\" stroke=\"#6366f1\" stroke-width=\"2\" filter=\"url(#shadow)\"/>\n<text x=\"X+20\" y=\"Y+22\" font-size=\"12\" font-weight=\"700\" fill=\"#6366f1\">Title</text>\n<text x=\"X+20\" y=\"Y+40\" font-size=\"11\" fill=\"#6b7280\">Description</text>\n<text x=\"X+20\" y=\"Y+55\" font-size=\"10\" fill=\"#9ca3af\">Metadata</text>\n```\n\n### Highlight Card (warnings/special)\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"10\" fill=\"#fffbeb\" stroke=\"#f59e0b\" stroke-width=\"1\"/>\n```\n\n## Arrow Markers\n\n```svg\n<marker id=\"arr-indigo\" markerWidth=\"8\" markerHeight=\"6\" refX=\"7\" refY=\"3\" orient=\"auto\">\n  <path d=\"M0,0 L8,3 L0,6 Z\" fill=\"#6366f1\"/>\n</marker>\n```\n\n## Connection Lines\n\n| Type | Style | Use |\n|------|-------|-----|\n| Data flow | `stroke-width=\"2\"` solid + arrow | Primary data movement |\n| Feedback | `stroke-width=\"2\" stroke-dasharray=\"6,4\"` + arrow | Feedback loops, optimization |\n| Internal | `stroke-width=\"1.5\"` solid + arrow | Within-module connections |\n| Label | `font-size=\"10\" font-weight=\"500\"` | Connection description |\n\n## Text Sizing Rules\n\n| Element | Font Size | Weight | Anchor |\n|---------|-----------|--------|--------|\n| Page title | 22px | 700 | middle |\n| Subtitle | 12px | 400 | middle |\n| Module header | 13-14px | 700 | middle |\n| Card title | 11-12px | 700 | left |\n| Description | 10-11px | 400 | left |\n| Metadata | 9-10px | 400 | left |\n| Connection label | 10px | 500 | left |\n| Legend | 11px | 400 | left |\n\n## Anti-Overflow Rules\n\n1. **Max text width** = container width - 40px (20px padding each side)\n2. At 11px font, ~7px per character → max ~43 chars in 300px container\n3. Long text → split into two `<text>` lines (Y offset +16px)\n4. Use `text-anchor=\"middle\"` for centered headers\n5. Use left-aligned for descriptions in outlined cards\n\n## Card Spacing Rules (CRITICAL)\n\n1. **Vertical stacked cards**: card height 34px + gap 22px = **56px per step**\n2. **Connection line**: start at card bottom (y + height), end at next card top (y) minus 3px\n3. **Minimum line length**: 17px (9px visible line + 8px arrow marker)\n4. **Arrow marker size**: 8px — if line < 8px, arrow covers entire line (invisible)\n5. **Example**: card at y=290 h=34 → bottom=324. Next card y=346. Line: y1=324 y2=343 (19px ✓)\n\nFile v1.2.0:skill-card.md\n\n## Description:\n\nCreate professional, publication-quality technical architecture diagrams using pure SVG in HTML, then render them to high-resolution PNG screenshots with Playwright.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[wujiaming88](https://clawhub.ai/user/wujiaming88)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and technical teams use this skill to create precise system architecture diagrams, component diagrams, flow charts, data-flow diagrams, and module diagrams with legible labels and controlled SVG connections.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The screenshot helper can load arbitrary HTTP, HTTPS, or file URLs.\n\nMitigation: Use it only with local HTML diagram files created for the current task; avoid passing remote URLs or file:// paths that expose unrelated local content.\n\nRisk: Telegram delivery can disclose architecture details to an external service.\n\nMitigation: Review generated diagrams for sensitive system details before sending them through Telegram or any external channel.\n\nRisk: Generated diagrams may contain incorrect architecture relationships or misleading labels.\n\nMitigation: Have a knowledgeable reviewer check component names, boundaries, data flows, and connection labels before publishing or sharing.\n\n## Reference(s):\n\n- [ClawHub Skill Page](https://clawhub.ai/wujiaming88/skills/svg-architecture-diagram)\n- [Publisher Profile](https://clawhub.ai/user/wujiaming88)\n- [Design System Reference](references/design-system.md)\n- [Hermes Architecture Example](references/example-hermes.html)\n- [OpenClaw Architecture Example](references/example-openclaw.html)\n- [Screenshot Helper](scripts/screenshot.py)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance with HTML, SVG, Python, and shell command snippets]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May produce local HTML diagram files and high-resolution PNG screenshots when the agent follows the workflow.]\n\n## Skill Version(s):\n\n1.2.0 (source: server release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment.\n\nArchive v1.1.0: 5 files, 11138 bytes\n\nFiles: references/design-system.md (3042b), references/example-hermes.html (18156b), scripts/screenshot.py (2759b), SKILL.md (7065b), _meta.json (143b)\n\nFile v1.1.0:SKILL.md\n\n---\nname: svg-architecture-diagram\ndescription: >-\n  Create professional, publication-quality technical architecture diagrams using\n  pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfect\n  diagrams with precise connection lines, color-coded modules, and clear text at\n  any resolution. Use when: (1) user asks for a system architecture diagram,\n  (2) user wants a technical component diagram or flow chart, (3) user needs a\n  data flow or pipeline visualization, (4) any diagram requiring accurate text\n  labels and precise connecting lines. Triggers: \"architecture diagram\",\n  \"架构图\", \"技术架构\", \"system diagram\", \"component diagram\", \"flow diagram\",\n  \"数据流图\", \"模块图\", \"draw architecture\", \"画架构图\", \"technical diagram\".\n  Prefer this over AI image generation for any diagram with text labels.\n---\n\n# SVG Architecture Diagram\n\nCreate professional technical architecture diagrams using pure SVG, rendered to high-res PNG via Playwright.\n\n## Why SVG (not CSS positioning or AI image generation)\n\n| Approach | Lines/Arrows | Text Quality | Precision |\n|----------|-------------|-------------|-----------|\n| **SVG (this skill)** | ✅ Perfect: `<line>`, `<path>`, `<marker>` | ✅ Crisp at any size | ✅ Pixel-perfect |\n| CSS absolute positioning | ❌ Hacky: borders, pseudo-elements | ✅ OK | ❌ Hard to align |\n| AI image generation | ❌ No control | ❌ Garbled text | ❌ No precision |\n\n## Quick Start\n\n### Step 1: Plan the diagram\n\nIdentify:\n- **Modules** — group related components (color-coded)\n- **Hierarchy** — top-to-bottom flow (user → core → subsystems → output)\n- **Connections** — data flow (solid lines), feedback (dashed lines)\n\n### Step 2: Create the HTML file\n\nWrite a single HTML file with an inline SVG. Standard canvas: **1600×1000px**.\n\n```html\n<!DOCTYPE html>\n<html><head>\n<meta charset=\"UTF-8\">\n<style>\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { width: 1600px; height: 1000px; background: #fafafa; overflow: hidden; }\n</style>\n</head><body>\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 1000\" width=\"1600\" height=\"1000\">\n  <defs>\n    <!-- Arrow markers — one per color -->\n    <marker id=\"arr-indigo\" markerWidth=\"8\" markerHeight=\"6\" refX=\"7\" refY=\"3\" orient=\"auto\">\n      <path d=\"M0,0 L8,3 L0,6 Z\" fill=\"#6366f1\"/>\n    </marker>\n    <!-- Shadow filter -->\n    <filter id=\"shadow\" x=\"-4%\" y=\"-4%\" width=\"108%\" height=\"108%\">\n      <feDropShadow dx=\"0\" dy=\"2\" stdDeviation=\"4\" flood-color=\"#000\" flood-opacity=\"0.08\"/>\n    </filter>\n  </defs>\n\n  <!-- Diagram content here -->\n\n</svg>\n</body></html>\n```\n\n### Step 3: Build the diagram using these SVG patterns\n\n**Filled header card** (module title):\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"40\" rx=\"10\" fill=\"#6366f1\" filter=\"url(#shadow)\"/>\n<text x=\"CENTER\" y=\"Y+25\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" fill=\"#fff\">🔄 Module Name</text>\n```\n\n**Outlined detail card** (sub-component):\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"65\" rx=\"10\" fill=\"#fff\" stroke=\"#6366f1\" stroke-width=\"2\" filter=\"url(#shadow)\"/>\n<text x=\"X+20\" y=\"Y+22\" font-size=\"12\" font-weight=\"700\" fill=\"#6366f1\">Component Title</text>\n<text x=\"X+20\" y=\"Y+40\" font-size=\"11\" fill=\"#6b7280\">Description line 1</text>\n<text x=\"X+20\" y=\"Y+55\" font-size=\"10\" fill=\"#9ca3af\">Metadata / specs</text>\n```\n\n**Connection line** (with arrow):\n```svg\n<line x1=\"FROM_X\" y1=\"FROM_Y\" x2=\"TO_X\" y2=\"TO_Y\" stroke=\"#6366f1\" stroke-width=\"2\" marker-end=\"url(#arr-indigo)\"/>\n```\n\n**Curved connection** (L-shape or bend):\n```svg\n<path d=\"M startX,startY L midX,midY L endX,endY\" stroke=\"#6366f1\" stroke-width=\"2\" fill=\"none\" marker-end=\"url(#arr-indigo)\"/>\n```\n\n**Dashed feedback line**:\n```svg\n<path d=\"M x1,y1 L x2,y2\" stroke=\"#8b5cf6\" stroke-width=\"2\" fill=\"none\" stroke-dasharray=\"6,4\" marker-end=\"url(#arr-purple)\"/>\n```\n\n**Connection label**:\n```svg\n<text x=\"MID_X\" y=\"MID_Y-5\" font-size=\"10\" fill=\"#6366f1\" font-weight=\"500\">label text</text>\n```\n\n### Step 4: Screenshot with Playwright\n\n```python\nfrom playwright.sync_api import sync_playwright\nwith sync_playwright() as p:\n    browser = p.chromium.launch()\n    page = browser.new_page(\n        viewport={\"width\": 1600, \"height\": 1000},\n        device_scale_factor=4,  # 4x ultra-high res (default)\n    )\n    page.goto(\"file:///path/to/diagram.html\", wait_until=\"networkidle\")\n    page.wait_for_timeout(1500)\n    page.screenshot(path=\"diagram.png\", full_page=True)\n    browser.close()\n```\n\nOr use the bundled script: `scripts/screenshot.py <input.html> [output.png]`\n\n## Design System\n\nSee `references/design-system.md` for the complete color palette, card styles, arrow markers, and text sizing rules.\n\n## Critical Rules (prevent common issues)\n\n### Text Overflow Prevention\n1. **Max characters per line** at font-size 11px ≈ 7px/char:\n   - 300px container → max 37 chars\n   - 340px container → max 43 chars\n   - 440px container → max 57 chars\n2. **Long text → split into multiple `<text>` elements** with Y offset +15px each\n3. **Always leave 20px padding** on each side of text inside cards\n4. **Test at 1x scale** before generating final 2x screenshot\n\n### Connection Line Rules\n1. **Never use CSS for connections** — always SVG `<line>` or `<path>`\n2. **One `<marker>` per color** — define in `<defs>`, reference with `marker-end`\n3. **Straight lines** when possible; use `<path>` L-segments for bends\n4. **Avoid crossing lines** — rearrange layout if lines would cross\n5. **Label every connection** — brief verb/noun near the midpoint\n\n### Layout Rules\n1. **Top-to-bottom** primary flow (input at top, output at bottom/right)\n2. **Left-right symmetry** when possible\n3. **Group related modules** vertically (e.g., memory layers stacked)\n4. **Minimum 12px gap** between cards\n5. **Color-code by function** — see design system for standard palette\n6. **Include a legend** (bottom-right corner) explaining colors and line types\n7. **Include a title** (top center) and source attribution (bottom center)\n\n### Font Rules\n1. **Font family**: `font-family=\"Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif\"` — set on root `<svg>` or first `<text>`\n2. Load Inter via Google Fonts in `<style>` block\n3. **Chinese text**: use `PingFang SC` / `Microsoft YaHei` fallback\n4. **Font sizes**: titles 13-14px, descriptions 10-11px, metadata 9-10px\n\n## Example\n\nSee `references/example-hermes.html` for a complete working example (Hermes Agent architecture diagram) demonstrating all patterns above.\n\n## Delivery\n\nOutput `MEDIA:<path>` for inline delivery, or `openclaw message send --channel telegram --target <id> --media <path> --force-document` for Telegram.\n\nIf PNG exceeds ~1MB for Telegram delivery, convert to JPEG (quality=95):\n\n```python\nfrom PIL import Image\nimg = Image.open(\"diagram.png\")\nimg.save(\"diagram.jpg\", \"JPEG\", quality=95, optimize=True)\n```\n\nDefault is 4x (6400×4000px for 1600×1000 canvas). Always use maximum resolution.\n\nFile v1.1.0:_meta.json\n\n{\n  \"ownerId\": \"kn778xxhawnk8ayzy5se9s465980pz82\",\n  \"slug\": \"svg-architecture-diagram\",\n  \"version\": \"1.1.0\",\n  \"publishedAt\": 1777110749983\n}\n\nFile v1.1.0:references/design-system.md\n\n# SVG Architecture Diagram — Color Palette Reference\n\n## Standard Module Colors\n\n| Module Type | Fill Color | Border | Text | Use For |\n|-------------|-----------|--------|------|---------|\n| User / External | `#ec4899` (pink) | — | white | User input, LLM, external services |\n| Core Engine | `#6366f1` (indigo) | — | white | Main loop, core processing, orchestration |\n| Storage / Memory | `#10b981` (green) | `#10b981` | green/gray | Database, cache, memory layers |\n| Plugin / Extension | `#f59e0b` (amber) | `#f59e0b` | amber/gray | Skills, plugins, extensions |\n| AI / Learning | `#8b5cf6` (purple) | `#8b5cf6` | purple/gray | Self-evolution, ML, optimization |\n| Infrastructure | `#64748b` (slate) | `#94a3b8` | slate/gray | Tools, shell, file system |\n| Security / Guard | `#ef4444` (red) | `#ef4444` | red | Security, validation, guard |\n| Output / Result | `#10b981` (green) | — | white | Output, delivery, response |\n\n## Card Styles\n\n### Filled Card (header/title blocks)\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"40\" rx=\"10\" fill=\"#6366f1\" filter=\"url(#shadow)\"/>\n<text x=\"CENTER\" y=\"Y+25\" text-anchor=\"middle\" font-size=\"14\" font-weight=\"700\" fill=\"#fff\">Title</text>\n```\n\n### Outlined Card (detail blocks)\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"10\" fill=\"#fff\" stroke=\"#6366f1\" stroke-width=\"2\" filter=\"url(#shadow)\"/>\n<text x=\"X+20\" y=\"Y+22\" font-size=\"12\" font-weight=\"700\" fill=\"#6366f1\">Title</text>\n<text x=\"X+20\" y=\"Y+40\" font-size=\"11\" fill=\"#6b7280\">Description</text>\n<text x=\"X+20\" y=\"Y+55\" font-size=\"10\" fill=\"#9ca3af\">Metadata</text>\n```\n\n### Highlight Card (warnings/special)\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"10\" fill=\"#fffbeb\" stroke=\"#f59e0b\" stroke-width=\"1\"/>\n```\n\n## Arrow Markers\n\n```svg\n<marker id=\"arr-indigo\" markerWidth=\"8\" markerHeight=\"6\" refX=\"7\" refY=\"3\" orient=\"auto\">\n  <path d=\"M0,0 L8,3 L0,6 Z\" fill=\"#6366f1\"/>\n</marker>\n```\n\n## Connection Lines\n\n| Type | Style | Use |\n|------|-------|-----|\n| Data flow | `stroke-width=\"2\"` solid + arrow | Primary data movement |\n| Feedback | `stroke-width=\"2\" stroke-dasharray=\"6,4\"` + arrow | Feedback loops, optimization |\n| Internal | `stroke-width=\"1.5\"` solid + arrow | Within-module connections |\n| Label | `font-size=\"10\" font-weight=\"500\"` | Connection description |\n\n## Text Sizing Rules\n\n| Element | Font Size | Weight | Anchor |\n|---------|-----------|--------|--------|\n| Page title | 22px | 700 | middle |\n| Subtitle | 12px | 400 | middle |\n| Module header | 13-14px | 700 | middle |\n| Card title | 11-12px | 700 | left |\n| Description | 10-11px | 400 | left |\n| Metadata | 9-10px | 400 | left |\n| Connection label | 10px | 500 | left |\n| Legend | 11px | 400 | left |\n\n## Anti-Overflow Rules\n\n1. **Max text width** = container width - 40px (20px padding each side)\n2. At 11px font, ~7px per character → max ~43 chars in 300px container\n3. Long text → split into two `<text>` lines (Y offset +16px)\n4. Use `text-anchor=\"middle\"` for centered headers\n5. Use left-aligned for descriptions in outlined cards\n\nArchive v1.0.0: 5 files, 11058 bytes\n\nFiles: references/design-system.md (3042b), references/example-hermes.html (18156b), scripts/screenshot.py (2759b), SKILL.md (6879b), _meta.json (143b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: svg-architecture-diagram\ndescription: >-\n  Create professional, publication-quality technical architecture diagrams using\n  pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfect\n  diagrams with precise connection lines, color-coded modules, and clear text at\n  any resolution. Use when: (1) user asks for a system architecture diagram,\n  (2) user wants a technical component diagram or flow chart, (3) user needs a\n  data flow or pipeline visualization, (4) any diagram requiring accurate text\n  labels and precise connecting lines. Triggers: \"architecture diagram\",\n  \"架构图\", \"技术架构\", \"system diagram\", \"component diagram\", \"flow diagram\",\n  \"数据流图\", \"模块图\", \"draw architecture\", \"画架构图\", \"technical diagram\".\n  Prefer this over AI image generation for any diagram with text labels.\n---\n\n# SVG Architecture Diagram\n\nCreate professional technical architecture diagrams using pure SVG, rendered to high-res PNG via Playwright.\n\n## Why SVG (not CSS positioning or AI image generation)\n\n| Approach | Lines/Arrows | Text Quality | Precision |\n|----------|-------------|-------------|-----------|\n| **SVG (this skill)** | ✅ Perfect: `<line>`, `<path>`, `<marker>` | ✅ Crisp at any size | ✅ Pixel-perfect |\n| CSS absolute positioning | ❌ Hacky: borders, pseudo-elements | ✅ OK | ❌ Hard to align |\n| AI image generation | ❌ No control | ❌ Garbled text | ❌ No precision |\n\n## Quick Start\n\n### Step 1: Plan the diagram\n\nIdentify:\n- **Modules** — group related components (color-coded)\n- **Hierarchy** — top-to-bottom flow (user → core → subsystems → output)\n- **Connections** — data flow (solid lines), feedback (dashed lines)\n\n### Step 2: Create the HTML file\n\nWrite a single HTML file with an inline SVG. Standard canvas: **1600×1000px**.\n\n```html\n<!DOCTYPE html>\n<html><head>\n<meta charset=\"UTF-8\">\n<style>\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { width: 1600px; height: 1000px; background: #fafafa; overflow: hidden; }\n</style>\n</head><body>\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 1000\" width=\"1600\" height=\"1000\">\n  <defs>\n    <!-- Arrow markers — one per color -->\n    <marker id=\"arr-indigo\" markerWidth=\"8\" markerHeight=\"6\" refX=\"7\" refY=\"3\" orient=\"auto\">\n      <path d=\"M0,0 L8,3 L0,6 Z\" fill=\"#6366f1\"/>\n    </marker>\n    <!-- Shadow filter -->\n    <filter id=\"shadow\" x=\"-4%\" y=\"-4%\" width=\"108%\" height=\"108%\">\n      <feDropShadow dx=\"0\" dy=\"2\" stdDeviation=\"4\" flood-color=\"#000\" flood-opacity=\"0.08\"/>\n    </filter>\n  </defs>\n\n  <!-- Diagram content here -->\n\n</svg>\n</body></html>\n```\n\n### Step 3: Build the diagram using these SVG patterns\n\n**Filled header card** (module title):\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"40\" rx=\"10\" fill=\"#6366f1\" filter=\"url(#shadow)\"/>\n<text x=\"CENTER\" y=\"Y+25\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" fill=\"#fff\">🔄 Module Name</text>\n```\n\n**Outlined detail card** (sub-component):\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"65\" rx=\"10\" fill=\"#fff\" stroke=\"#6366f1\" stroke-width=\"2\" filter=\"url(#shadow)\"/>\n<text x=\"X+20\" y=\"Y+22\" font-size=\"12\" font-weight=\"700\" fill=\"#6366f1\">Component Title</text>\n<text x=\"X+20\" y=\"Y+40\" font-size=\"11\" fill=\"#6b7280\">Description line 1</text>\n<text x=\"X+20\" y=\"Y+55\" font-size=\"10\" fill=\"#9ca3af\">Metadata / specs</text>\n```\n\n**Connection line** (with arrow):\n```svg\n<line x1=\"FROM_X\" y1=\"FROM_Y\" x2=\"TO_X\" y2=\"TO_Y\" stroke=\"#6366f1\" stroke-width=\"2\" marker-end=\"url(#arr-indigo)\"/>\n```\n\n**Curved connection** (L-shape or bend):\n```svg\n<path d=\"M startX,startY L midX,midY L endX,endY\" stroke=\"#6366f1\" stroke-width=\"2\" fill=\"none\" marker-end=\"url(#arr-indigo)\"/>\n```\n\n**Dashed feedback line**:\n```svg\n<path d=\"M x1,y1 L x2,y2\" stroke=\"#8b5cf6\" stroke-width=\"2\" fill=\"none\" stroke-dasharray=\"6,4\" marker-end=\"url(#arr-purple)\"/>\n```\n\n**Connection label**:\n```svg\n<text x=\"MID_X\" y=\"MID_Y-5\" font-size=\"10\" fill=\"#6366f1\" font-weight=\"500\">label text</text>\n```\n\n### Step 4: Screenshot with Playwright\n\n```python\nfrom playwright.sync_api import sync_playwright\nwith sync_playwright() as p:\n    browser = p.chromium.launch()\n    page = browser.new_page(\n        viewport={\"width\": 1600, \"height\": 1000},\n        device_scale_factor=2,  # 2x for good quality + reasonable file size\n    )\n    page.goto(\"file:///path/to/diagram.html\", wait_until=\"networkidle\")\n    page.wait_for_timeout(1500)\n    page.screenshot(path=\"diagram.png\", full_page=True)\n    browser.close()\n```\n\nOr use the bundled script: `scripts/screenshot.py <input.html> [output.png]`\n\n## Design System\n\nSee `references/design-system.md` for the complete color palette, card styles, arrow markers, and text sizing rules.\n\n## Critical Rules (prevent common issues)\n\n### Text Overflow Prevention\n1. **Max characters per line** at font-size 11px ≈ 7px/char:\n   - 300px container → max 37 chars\n   - 340px container → max 43 chars\n   - 440px container → max 57 chars\n2. **Long text → split into multiple `<text>` elements** with Y offset +15px each\n3. **Always leave 20px padding** on each side of text inside cards\n4. **Test at 1x scale** before generating final 2x screenshot\n\n### Connection Line Rules\n1. **Never use CSS for connections** — always SVG `<line>` or `<path>`\n2. **One `<marker>` per color** — define in `<defs>`, reference with `marker-end`\n3. **Straight lines** when possible; use `<path>` L-segments for bends\n4. **Avoid crossing lines** — rearrange layout if lines would cross\n5. **Label every connection** — brief verb/noun near the midpoint\n\n### Layout Rules\n1. **Top-to-bottom** primary flow (input at top, output at bottom/right)\n2. **Left-right symmetry** when possible\n3. **Group related modules** vertically (e.g., memory layers stacked)\n4. **Minimum 12px gap** between cards\n5. **Color-code by function** — see design system for standard palette\n6. **Include a legend** (bottom-right corner) explaining colors and line types\n7. **Include a title** (top center) and source attribution (bottom center)\n\n### Font Rules\n1. **Font family**: `font-family=\"Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif\"` — set on root `<svg>` or first `<text>`\n2. Load Inter via Google Fonts in `<style>` block\n3. **Chinese text**: use `PingFang SC` / `Microsoft YaHei` fallback\n4. **Font sizes**: titles 13-14px, descriptions 10-11px, metadata 9-10px\n\n## Example\n\nSee `references/example-hermes.html` for a complete working example (Hermes Agent architecture diagram) demonstrating all patterns above.\n\n## Delivery\n\nOutput `MEDIA:<path>` for inline delivery, or `openclaw message send --channel telegram --target <id> --media <path> --force-document` for Telegram.\n\nIf PNG exceeds ~500KB, use 2x scale (default). Only use 4x for print-quality needs.\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn778xxhawnk8ayzy5se9s465980pz82\",\n  \"slug\": \"svg-architecture-diagram\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1777110604484\n}\n\nFile v1.0.0:references/design-system.md\n\n# SVG Architecture Diagram — Color Palette Reference\n\n## Standard Module Colors\n\n| Module Type | Fill Color | Border | Text | Use For |\n|-------------|-----------|--------|------|---------|\n| User / External | `#ec4899` (pink) | — | white | User input, LLM, external services |\n| Core Engine | `#6366f1` (indigo) | — | white | Main loop, core processing, orchestration |\n| Storage / Memory | `#10b981` (green) | `#10b981` | green/gray | Database, cache, memory layers |\n| Plugin / Extension | `#f59e0b` (amber) | `#f59e0b` | amber/gray | Skills, plugins, extensions |\n| AI / Learning | `#8b5cf6` (purple) | `#8b5cf6` | purple/gray | Self-evolution, ML, optimization |\n| Infrastructure | `#64748b` (slate) | `#94a3b8` | slate/gray | Tools, shell, file system |\n| Security / Guard | `#ef4444` (red) | `#ef4444` | red | Security, validation, guard |\n| Output / Result | `#10b981` (green) | — | white | Output, delivery, response |\n\n## Card Styles\n\n### Filled Card (header/title blocks)\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"40\" rx=\"10\" fill=\"#6366f1\" filter=\"url(#shadow)\"/>\n<text x=\"CENTER\" y=\"Y+25\" text-anchor=\"middle\" font-size=\"14\" font-weight=\"700\" fill=\"#fff\">Title</text>\n```\n\n### Outlined Card (detail blocks)\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"10\" fill=\"#fff\" stroke=\"#6366f1\" stroke-width=\"2\" filter=\"url(#shadow)\"/>\n<text x=\"X+20\" y=\"Y+22\" font-size=\"12\" font-weight=\"700\" fill=\"#6366f1\">Title</text>\n<text x=\"X+20\" y=\"Y+40\" font-size=\"11\" fill=\"#6b7280\">Description</text>\n<text x=\"X+20\" y=\"Y+55\" font-size=\"10\" fill=\"#9ca3af\">Metadata</text>\n```\n\n### Highlight Card (warnings/special)\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"10\" fill=\"#fffbeb\" stroke=\"#f59e0b\" stroke-width=\"1\"/>\n```\n\n## Arrow Markers\n\n```svg\n<marker id=\"arr-indigo\" markerWidth=\"8\" markerHeight=\"6\" refX=\"7\" refY=\"3\" orient=\"auto\">\n  <path d=\"M0,0 L8,3 L0,6 Z\" fill=\"#6366f1\"/>\n</marker>\n```\n\n## Connection Lines\n\n| Type | Style | Use |\n|------|-------|-----|\n| Data flow | `stroke-width=\"2\"` solid + arrow | Primary data movement |\n| Feedback | `stroke-width=\"2\" stroke-dasharray=\"6,4\"` + arrow | Feedback loops, optimization |\n| Internal | `stroke-width=\"1.5\"` solid + arrow | Within-module connections |\n| Label | `font-size=\"10\" font-weight=\"500\"` | Connection description |\n\n## Text Sizing Rules\n\n| Element | Font Size | Weight | Anchor |\n|---------|-----------|--------|--------|\n| Page title | 22px | 700 | middle |\n| Subtitle | 12px | 400 | middle |\n| Module header | 13-14px | 700 | middle |\n| Card title | 11-12px | 700 | left |\n| Description | 10-11px | 400 | left |\n| Metadata | 9-10px | 400 | left |\n| Connection label | 10px | 500 | left |\n| Legend | 11px | 400 | left |\n\n## Anti-Overflow Rules\n\n1. **Max text width** = container width - 40px (20px padding each side)\n2. At 11px font, ~7px per character → max ~43 chars in 300px container\n3. Long text → split into two `<text>` lines (Y offset +16px)\n4. Use `text-anchor=\"middle\"` for centered headers\n5. Use left-aligned for descriptions in outlined cards","readmeExcerpt":"Skill: SVG Architecture Diagram Owner: wujiaming88 Summary: Create professional, publication-quality technical architecture diagrams using pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfec... Tags: latest:1.2.0 Version history: v1.2.0 | 2026-04-25T12:12:47.162Z | user 连线间距规范(≥20px防箭头吞线), 新增OpenClaw架构图示例, Card Spacing Rules v1.1.0 | 2026-04-25T09:52:29.983Z | user 默认4x最高清分辨率(6400x4000px) v","codeSnippets":[],"executableExamples":[{"language":"html","snippet":"<!DOCTYPE html>\n<html><head>\n<meta charset=\"UTF-8\">\n<style>\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { width: 1600px; height: 1000px; background: #fafafa; overflow: hidden; }\n</style>\n</head><body>\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 1000\" width=\"1600\" height=\"1000\">\n  <defs>\n    <!-- Arrow markers — one per color -->\n    <marker id=\"arr-indigo\" markerWidth=\"8\" markerHeight=\"6\" refX=\"7\" refY=\"3\" orient=\"auto\">\n      <path d=\"M0,0 L8,3 L0,6 Z\" fill=\"#6366f1\"/>\n    </marker>\n    <!-- Shadow filter -->\n    <filter id=\"shadow\" x=\"-4%\" y=\"-4%\" width=\"108%\" height=\"108%\">\n      <feDropShadow dx=\"0\" dy=\"2\" stdDeviation=\"4\" flood-color=\"#000\" flood-opacity=\"0.08\"/>\n    </filter>\n  </defs>\n\n  <!-- Diagram content here -->\n\n</svg>\n</body></html>"},{"language":"svg","snippet":"<rect x=\"X\" y=\"Y\" width=\"W\" height=\"40\" rx=\"10\" fill=\"#6366f1\" filter=\"url(#shadow)\"/>\n<text x=\"CENTER\" y=\"Y+25\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" fill=\"#fff\">🔄 Module Name</text>"},{"language":"svg","snippet":"<rect x=\"X\" y=\"Y\" width=\"W\" height=\"65\" rx=\"10\" fill=\"#fff\" stroke=\"#6366f1\" stroke-width=\"2\" filter=\"url(#shadow)\"/>\n<text x=\"X+20\" y=\"Y+22\" font-size=\"12\" font-weight=\"700\" fill=\"#6366f1\">Component Title</text>\n<text x=\"X+20\" y=\"Y+40\" font-size=\"11\" fill=\"#6b7280\">Description line 1</text>\n<text x=\"X+20\" y=\"Y+55\" font-size=\"10\" fill=\"#9ca3af\">Metadata / specs</text>"},{"language":"svg","snippet":"<line x1=\"FROM_X\" y1=\"FROM_Y\" x2=\"TO_X\" y2=\"TO_Y\" stroke=\"#6366f1\" stroke-width=\"2\" marker-end=\"url(#arr-indigo)\"/>"},{"language":"svg","snippet":"<path d=\"M startX,startY L midX,midY L endX,endY\" stroke=\"#6366f1\" stroke-width=\"2\" fill=\"none\" marker-end=\"url(#arr-indigo)\"/>"},{"language":"svg","snippet":"<path d=\"M x1,y1 L x2,y2\" stroke=\"#8b5cf6\" stroke-width=\"2\" fill=\"none\" stroke-dasharray=\"6,4\" marker-end=\"url(#arr-purple)\"/>"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: svg-architecture-diagram\ndescription: >-\n  Create professional, publication-quality technical architecture diagrams using\n  pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfect\n  diagrams with precise connection lines, color-coded modules, and clear text at\n  any resolution. Use when: (1) user asks for a system architecture diagram,\n  (2) user wants a technical component diagram or flow chart, (3) user needs a\n  data flow or pipeline visualization, (4) any diagram requiring accurate text\n  labels and precise connecting lines. Triggers: \"architecture diagram\",\n  \"架构图\", \"技术架构\", \"system diagram\", \"component diagram\", \"flow diagram\",\n  \"数据流图\", \"模块图\", \"draw architecture\", \"画架构图\", \"technical diagram\".\n  Prefer this over AI image generation for any diagram with text labels.\n---\n\n# SVG Architecture Diagram\n\nCreate professional technical architecture diagrams using pure SVG, rendered to high-res PNG via Playwright.\n\n## Why SVG (not CSS positioning or AI image generation)\n\n| Approach | Lines/Arrows | Text Quality | Precision |\n|----------|-------------|-------------|-----------|\n| **SVG (this skill)** | ✅ Perfect: `<line>`, `<path>`, `<marker>` | ✅ Crisp at any size | ✅ Pixel-perfect |\n| CSS absolute positioning | ❌ Hacky: borders, pseudo-elements | ✅ OK | ❌ Hard to align |\n| AI image generation | ❌ No control | ❌ Garbled text | ❌ No precision |\n\n## Quick Start\n\n### Step 1: Plan the diagram\n\nIdentify:\n- **Modules** — group related components (color-coded)\n- **Hierarchy** — top-to-bottom flow (user → core → subsystems → output)\n- **Connections** — data flow (solid lines), feedback (dashed lines)\n\n### Step 2: Create the HTML file\n\nWrite a single HTML file with an inline SVG. Standard canvas: **1600×1000px**.\n\n```html\n<!DOCTYPE html>\n<html><head>\n<meta charset=\"UTF-8\">\n<style>\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');\n* { margin: 0; padding: 0; box-sizing: border-box; }\nbody { width: 1600px; height: 1000px; background: #fafafa; overflow: hidden; }\n</style>\n</head><body>\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1600 1000\" width=\"1600\" height=\"1000\">\n  <defs>\n    <!-- Arrow markers — one per color -->\n    <marker id=\"arr-indigo\" markerWidth=\"8\" markerHeight=\"6\" refX=\"7\" refY=\"3\" orient=\"auto\">\n      <path d=\"M0,0 L8,3 L0,6 Z\" fill=\"#6366f1\"/>\n    </marker>\n    <!-- Shadow filter -->\n    <filter id=\"shadow\" x=\"-4%\" y=\"-4%\" width=\"108%\" height=\"108%\">\n      <feDropShadow dx=\"0\" dy=\"2\" stdDeviation=\"4\" flood-color=\"#000\" flood-opacity=\"0.08\"/>\n    </filter>\n  </defs>\n\n  <!-- Diagram content here -->\n\n</svg>\n</body></html>\n```\n\n### Step 3: Build the diagram using these SVG patterns\n\n**Filled header card** (module title):\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"40\" rx=\"10\" fill=\"#6366f1\" filter=\"url(#shadow)\"/>\n<text x=\"CENTER\" y=\"Y+25\" text-anchor=\"middle\" font-size=\"13\" font-weight=\"700\" fill=\"#fff\">🔄 Module Name</text>\n```\n\n**Outlined detail card** (sub-com"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn778xxhawnk8ayzy5se9s465980pz82\",\n  \"slug\": \"svg-architecture-diagram\",\n  \"version\": \"1.2.0\",\n  \"publishedAt\": 1777119167162\n}"},{"path":"references/design-system.md","content":"# SVG Architecture Diagram — Color Palette Reference\n\n## Standard Module Colors\n\n| Module Type | Fill Color | Border | Text | Use For |\n|-------------|-----------|--------|------|---------|\n| User / External | `#ec4899` (pink) | — | white | User input, LLM, external services |\n| Core Engine | `#6366f1` (indigo) | — | white | Main loop, core processing, orchestration |\n| Storage / Memory | `#10b981` (green) | `#10b981` | green/gray | Database, cache, memory layers |\n| Plugin / Extension | `#f59e0b` (amber) | `#f59e0b` | amber/gray | Skills, plugins, extensions |\n| AI / Learning | `#8b5cf6` (purple) | `#8b5cf6` | purple/gray | Self-evolution, ML, optimization |\n| Infrastructure | `#64748b` (slate) | `#94a3b8` | slate/gray | Tools, shell, file system |\n| Security / Guard | `#ef4444` (red) | `#ef4444` | red | Security, validation, guard |\n| Output / Result | `#10b981` (green) | — | white | Output, delivery, response |\n\n## Card Styles\n\n### Filled Card (header/title blocks)\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"40\" rx=\"10\" fill=\"#6366f1\" filter=\"url(#shadow)\"/>\n<text x=\"CENTER\" y=\"Y+25\" text-anchor=\"middle\" font-size=\"14\" font-weight=\"700\" fill=\"#fff\">Title</text>\n```\n\n### Outlined Card (detail blocks)\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"10\" fill=\"#fff\" stroke=\"#6366f1\" stroke-width=\"2\" filter=\"url(#shadow)\"/>\n<text x=\"X+20\" y=\"Y+22\" font-size=\"12\" font-weight=\"700\" fill=\"#6366f1\">Title</text>\n<text x=\"X+20\" y=\"Y+40\" font-size=\"11\" fill=\"#6b7280\">Description</text>\n<text x=\"X+20\" y=\"Y+55\" font-size=\"10\" fill=\"#9ca3af\">Metadata</text>\n```\n\n### Highlight Card (warnings/special)\n```svg\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"10\" fill=\"#fffbeb\" stroke=\"#f59e0b\" stroke-width=\"1\"/>\n```\n\n## Arrow Markers\n\n```svg\n<marker id=\"arr-indigo\" markerWidth=\"8\" markerHeight=\"6\" refX=\"7\" refY=\"3\" orient=\"auto\">\n  <path d=\"M0,0 L8,3 L0,6 Z\" fill=\"#6366f1\"/>\n</marker>\n```\n\n## Connection Lines\n\n| Type | Style | Use |\n|------|-------|-----|\n| Data flow | `stroke-width=\"2\"` solid + arrow | Primary data movement |\n| Feedback | `stroke-width=\"2\" stroke-dasharray=\"6,4\"` + arrow | Feedback loops, optimization |\n| Internal | `stroke-width=\"1.5\"` solid + arrow | Within-module connections |\n| Label | `font-size=\"10\" font-weight=\"500\"` | Connection description |\n\n## Text Sizing Rules\n\n| Element | Font Size | Weight | Anchor |\n|---------|-----------|--------|--------|\n| Page title | 22px | 700 | middle |\n| Subtitle | 12px | 400 | middle |\n| Module header | 13-14px | 700 | middle |\n| Card title | 11-12px | 700 | left |\n| Description | 10-11px | 400 | left |\n| Metadata | 9-10px | 400 | left |\n| Connection label | 10px | 500 | left |\n| Legend | 11px | 400 | left |\n\n## Anti-Overflow Rules\n\n1. **Max text width** = container width - 40px (20px padding each side)\n2. At 11px font, ~7px per character → max ~43 chars in 300px container\n3. Long text → split into two `<text>` lines (Y offset +16px)\n4. Use `text-anchor=\"middle\"` for centered headers\n5. Use left-aligned for d"},{"path":"skill-card.md","content":"## Description:\n\nCreate professional, publication-quality technical architecture diagrams using pure SVG in HTML, then render them to high-resolution PNG screenshots with Playwright.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[wujiaming88](https://clawhub.ai/user/wujiaming88)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and technical teams use this skill to create precise system architecture diagrams, component diagrams, flow charts, data-flow diagrams, and module diagrams with legible labels and controlled SVG connections.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: The screenshot helper can load arbitrary HTTP, HTTPS, or file URLs.\n\nMitigation: Use it only with local HTML diagram files created for the current task; avoid passing remote URLs or file:// paths that expose unrelated local content.\n\nRisk: Telegram delivery can disclose architecture details to an external service.\n\nMitigation: Review generated diagrams for sensitive system details before sending them through Telegram or any external channel.\n\nRisk: Generated diagrams may contain incorrect architecture relationships or misleading labels.\n\nMitigation: Have a knowledgeable reviewer check component names, boundaries, data flows, and connection labels before publishing or sharing.\n\n## Reference(s):\n\n- [ClawHub Skill Page](https://clawhub.ai/wujiaming88/skills/svg-architecture-diagram)\n- [Publisher Profile](https://clawhub.ai/user/wujiaming88)\n- [Design System Reference](references/design-system.md)\n- [Hermes Architecture Example](references/example-hermes.html)\n- [OpenClaw Architecture Example](references/example-openclaw.html)\n- [Screenshot Helper](scripts/screenshot.py)\n\n## Skill Output:\n\n**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]\n\n**Output Format:** [Markdown guidance with HTML, SVG, Python, and shell command snippets]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [May produce local HTML diagram files and high-resolution PNG screenshots when the agent follows the workflow.]\n\n## Skill Version(s):\n\n1.2.0 (source: server release evidence)\n\n## Ethical Considerations:\n\nUsers should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, security, and compliance requirements before deployment."}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"Create professional, publication-quality technical architecture diagrams using pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfec... Skill: SVG Architecture Diagram Owner: wujiaming88 Summary: Create professional, publication-quality technical architecture diagrams using pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfec... Tags: latest:1.2.0 Version history: v1.2.0 | 2026-04-25T12:12:47.162Z | user 连线间距规范(≥20px防箭头吞线), 新增OpenClaw架构图示例, Card Spacing Rules v1.1.0 | 2026-04-25T09:52:29.983Z | user 默认4x最高清分辨率(6400x4000px) v","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1159,"uniquenessScore":54,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T19:59:58.749Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T19:59:58.749Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-12T12:11:15.560Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}