{"id":"09247244-d54e-4b53-b691-2245f75d0a5e","slug":"clawhub-wujiaming88-svg-architecture-diagram","name":"SVG Architecture Diagram","description":"Create professional, publication-quality technical architecture diagrams using pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfec...","canonicalUrl":"https://www.xpersona.co/agent/clawhub-wujiaming88-svg-architecture-diagram","sourceUrl":"https://clawhub.ai/wujiaming88/svg-architecture-diagram","homepage":"https://clawhub.ai/wujiaming88/skills/svg-architecture-diagram","source":"CLAWHUB","vendor":{"slug":"clawhub","label":"Clawhub","url":"https://clawhub.ai/wujiaming88/skills/svg-architecture-diagram"},"protocols":["OPENCLEW"],"capabilities":[],"trustScore":null,"trustConfidence":"unknown","artifactCount":0,"benchmarkCount":0,"lastRelease":"1.2.0","freshnessAt":"2026-10-11T19:59:58.690Z","freshnessLabel":"Oct 11, 2026","securityReviewed":true,"openapiReady":false,"stats":[{"label":"Trust score","value":"Unknown"},{"label":"Compatibility","value":"OpenClaw"},{"label":"Freshness","value":"Oct 11, 2026"},{"label":"Vendor","value":"Clawhub"},{"label":"Artifacts","value":"0"},{"label":"Benchmarks","value":"0"},{"label":"Last release","value":"1.2.0"}],"factsPreview":[{"factKey":"vendor","category":"vendor","label":"Vendor","value":"Clawhub","href":"https://clawhub.ai/wujiaming88/skills/svg-architecture-diagram","sourceUrl":"https://clawhub.ai/wujiaming88/skills/svg-architecture-diagram","sourceType":"profile","confidence":"medium","observedAt":"2026-10-11T19:59:58.749Z","isPublic":true},{"factKey":"protocols","category":"compatibility","label":"Protocol compatibility","value":"OpenClaw","href":"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/contract","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/contract","sourceType":"contract","confidence":"medium","observedAt":"2026-10-11T19:59:58.749Z","isPublic":true},{"factKey":"traction","category":"adoption","label":"Adoption signal","value":"1K downloads","href":"https://clawhub.ai/wujiaming88/svg-architecture-diagram","sourceUrl":"https://clawhub.ai/wujiaming88/svg-architecture-diagram","sourceType":"profile","confidence":"medium","observedAt":"2026-10-11T19:59:58.749Z","isPublic":true},{"factKey":"latest_release","category":"release","label":"Latest release","value":"1.2.0","href":"https://clawhub.ai/wujiaming88/svg-architecture-diagram","sourceUrl":"https://clawhub.ai/wujiaming88/svg-architecture-diagram","sourceType":"release","confidence":"medium","observedAt":"2026-04-25T12:12:47.162Z","isPublic":true},{"factKey":"handshake_status","category":"security","label":"Handshake status","value":"UNKNOWN","href":"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/trust","sourceUrl":"https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/trust","sourceType":"trust","confidence":"medium","observedAt":null,"isPublic":true}],"highlights":["1K downloads","Trust evidence available"],"agentCard":{"name":"SVG Architecture Diagram","description":"Create professional, publication-quality technical architecture diagrams using pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfec...","source":"CLAWHUB","sourceId":"clawhub:s171ccng28wdj2n2tdtw8q70zd83ha4q:svg-architecture-diagram","homepage":"https://clawhub.ai/wujiaming88/skills/svg-architecture-diagram","repository":"https://clawhub.ai/wujiaming88/svg-architecture-diagram","documentation":"https://www.xpersona.co/agent/clawhub-wujiaming88-svg-architecture-diagram","protocols":["OPENCLEW"],"examples":[{"kind":"example","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>"},{"kind":"example","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>"}]}}