{"id":"83a2bc6b-22b3-434f-9358-5d339ad1f55e","entityType":"agent","slug":"clawhub-zmy1006-sudo-fmtwiki-architecture-diagram","name":"Architecture Diagram Generator (FMTWiki Fork)","canonicalUrl":"https://www.xpersona.co/agent/clawhub-zmy1006-sudo-fmtwiki-architecture-diagram","canonicalPath":"/agent/clawhub-zmy1006-sudo-fmtwiki-architecture-diagram","generatedAt":"2026-10-13T14:21:56.338Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-12T01:42:15.776Z","emptyReason":null},"description":"Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diag... Skill: Architecture Diagram Generator (FMTWiki Fork) Owner: zmy1006-sudo Summary: Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diag... Tags: architecture:1.0.0, design:1.0.0, diagram:1.0.0, fmtwiki:1.0.0, frontend:1.0.0, latest:1.0.0, svg:1.0.0, visualization:1.0.0 Version history: v1.0.0 | 2026-04-20T12:05:10.","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 960 downloads reported by the source. Last updated 10/12/2026.","installCommand":"clawhub skill install s178943e0sqbs17b9qd9x38x7583wvdq:fmtwiki-architecture-diagram","sourceUrl":"https://clawhub.ai/zmy1006-sudo/fmtwiki-architecture-diagram","homepage":"https://clawhub.ai/zmy1006-sudo/skills/fmtwiki-architecture-diagram","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/zmy1006-sudo/fmtwiki-architecture-diagram","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/zmy1006-sudo/skills/fmtwiki-architecture-diagram","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diag..."},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-12T01:42:15.776Z","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-12T01:42:15.776Z","emptyReason":null},"stars":null,"forks":null,"downloads":960,"likes":null,"task":null,"library":null,"packageName":null,"latestVersion":"1.0.0","tractionLabel":"960 downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-12T01:42:14.423Z","emptyReason":null},"lastUpdatedAt":"2026-10-12T01:42:15.776Z","lastCrawledAt":"2026-10-12T01:42:14.423Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-13T01:42:14.423Z","lastVerifiedAt":null,"highlights":[{"version":"1.0.0","createdAt":"2026-04-20T12:05:10.595Z","changelog":"Fork of Cocoon-AI architecture-diagram-generator: dark SVG with semantic colors, JetBrains Mono, grid bg, FMTWiki examples","fileCount":4,"zipByteSize":6754}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s178943e0sqbs17b9qd9x38x7583wvdq:fmtwiki-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-zmy1006-sudo-fmtwiki-architecture-diagram/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-fmtwiki-architecture-diagram/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-fmtwiki-architecture-diagram/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-fmtwiki-architecture-diagram/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-fmtwiki-architecture-diagram/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-fmtwiki-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-13T14:21:56.338Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-fmtwiki-architecture-diagram/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-fmtwiki-architecture-diagram/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-fmtwiki-architecture-diagram/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-zmy1006-sudo-fmtwiki-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-12T01:42:15.776Z","emptyReason":null},"readme":"Skill: Architecture Diagram Generator (FMTWiki Fork)\n\nOwner: zmy1006-sudo\n\nSummary: Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diag...\n\nTags: architecture:1.0.0, design:1.0.0, diagram:1.0.0, fmtwiki:1.0.0, frontend:1.0.0, latest:1.0.0, svg:1.0.0, visualization:1.0.0\n\nVersion history:\n\nv1.0.0 | 2026-04-20T12:05:10.595Z | user\n\nFork of Cocoon-AI architecture-diagram-generator: dark SVG with semantic colors, JetBrains Mono, grid bg, FMTWiki examples\n\nArchive index:\n\nArchive v1.0.0: 4 files, 6754 bytes\n\nFiles: assets/template.html (11246b), skill-card.md (2049b), SKILL.md (4623b), _meta.json (147b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: architecture-diagram\ndescription: Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology diagrams, or any technical diagram showing system components and their relationships. Based on Cocoon-AI/architecture-diagram-generator.\nlicense: MIT\nmetadata:\n  version: \"1.0\"\n  author: Cocoon AI (hello@cocoon-ai.com)\n  source: https://github.com/Cocoon-AI/architecture-diagram-generator\n---\n\n# Architecture Diagram Skill\n\nCreate professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling.\n\n## When to Use\n\n- User asks for \"architecture diagram\", \"system diagram\", \"技术架构图\"\n- User wants to visualize system components and relationships\n- User needs cloud architecture (AWS/GCP/Azure), network topology, or security diagrams\n- User asks to \"生成架构图\", \"画一个系统图\", \"可视化XXX架构\"\n\n## Design System\n\n### Color Palette\n\nUse these semantic colors for component types:\n\n| Component Type | Fill (rgba) | Stroke |\n|---------------|-------------|--------|\n| Frontend | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |\n| Backend | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |\n| Database | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |\n| AWS/Cloud | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |\n| Security | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |\n| Message Bus | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |\n| External/Generic | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) |\n\n### Typography\n\nUse JetBrains Mono for all text:\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\nFont sizes: 12px for component names, 9px for sublabels, 8px for annotations, 7px for tiny labels.\n\n### Visual Elements\n\n**Background:** `#020617` (slate-950) with subtle grid pattern:\n```svg\n<pattern id=\"grid\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n  <path d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke=\"#1e293b\" stroke-width=\"0.5\"/>\n</pattern>\n```\n\n**Component boxes:** Rounded rectangles (`rx=\"6\"`) with 1.5px stroke, semi-transparent fills.\n\n**Security groups:** Dashed stroke (`stroke-dasharray=\"4,4\"`), transparent fill, rose color.\n\n**Region boundaries:** Larger dashed stroke (`stroke-dasharray=\"8,4\"`), amber color, `rx=\"12\"`.\n\n**Arrows:** Use SVG marker for arrowheads:\n```svg\n<marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n  <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#64748b\" />\n</marker>\n```\n\n**Arrow z-order:** Draw connection arrows early in the SVG (after the background grid) so they render behind component boxes.\n\n**Masking arrows behind transparent fills:** Since component boxes use semi-transparent fills, draw an opaque background rect first:\n```svg\n<!-- Opaque background to mask arrows -->\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"6\" fill=\"#0f172a\"/>\n<!-- Styled component on top -->\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"6\" fill=\"rgba(76, 29, 149, 0.4)\" stroke=\"#a78bfa\" stroke-width=\"1.5\"/>\n```\n\n### Spacing Rules\n\n- **Standard component height:** 60px for services, 80-120px for larger components\n- **Minimum vertical gap between components:** 40px\n- Place inline connectors (message buses) IN the gap between components, not overlapping\n\n### Legend Placement\n\nPlace legends OUTSIDE all boundary boxes. Place at least 20px below the lowest boundary. Expand SVG viewBox height if needed.\n\n## Layout Structure\n\n1. **Header** - Title with pulsing dot indicator, subtitle\n2. **Main SVG diagram** - Contained in rounded border card\n3. **Summary cards** - Grid of 3-4 cards below diagram with key details\n4. **Footer** - Minimal metadata line\n\n## Output\n\nAlways produce a single self-contained `.html` file with:\n- Embedded CSS (no external stylesheets except Google Fonts)\n- Inline SVG (no external images)\n- No JavaScript required (pure CSS animations)\n\nDeploy with the `deploy` tool to a `/tmp/xxx/index.html` directory.\n\n## Example: Component Box\n\n```svg\n<rect x=\"100\" y=\"100\" width=\"160\" height=\"70\" rx=\"6\" fill=\"#0f172a\"/>\n<rect x=\"100\" y=\"100\" width=\"160\" height=\"70\" rx=\"6\"\n      fill=\"rgba(8, 51, 68, 0.4)\" stroke=\"#22d3ee\" stroke-width=\"1.5\"/>\n<text x=\"180\" y=\"126\" fill=\"white\" font-size=\"11\" font-weight=\"600\" text-anchor=\"middle\">Frontend</text>\n<text x=\"180\" y=\"142\" fill=\"#94a3b8\" font-size=\"9\" text-anchor=\"middle\">React + TypeScript</text>\n```\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn7afn9q28na0bcm3rnr3bq6yn8303nd\",\n  \"slug\": \"fmtwiki-architecture-diagram\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1776686710595\n}\n\nFile v1.0.0:skill-card.md\n\n## Description:\n\nCreate professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics for system, infrastructure, cloud, security, network topology, and technical component diagrams.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[zmy1006-sudo](https://clawhub.ai/user/zmy1006-sudo)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and engineers use this skill to generate self-contained HTML architecture diagrams that visualize system components, relationships, cloud infrastructure, network topology, and security boundaries.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Generated diagrams can contain system architecture details supplied by the user.\n\nMitigation: Review and sanitize generated HTML before sharing it outside the intended audience.\n\nRisk: Opening generated HTML may contact Google Fonts.\n\nMitigation: Use approved network settings or replace the font import with a local font when external requests are not allowed.\n\nRisk: Generated diagram files are saved locally under /tmp.\n\nMitigation: Inspect, move, or delete local outputs according to the user's data handling requirements.\n\n## Reference(s):\n\n- [ClawHub Skill Page](https://clawhub.ai/zmy1006-sudo/skills/fmtwiki-architecture-diagram)\n- [Publisher Profile](https://clawhub.ai/user/zmy1006-sudo)\n\n## Skill Output:\n\n**Output Type(s):** [code, configuration, guidance]\n\n**Output Format:** [Self-contained HTML with embedded CSS and inline SVG]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Generated diagrams are saved as local HTML files under /tmp and may load JetBrains Mono from Google Fonts when opened.]\n\n## Skill Version(s):\n\n1.0.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.","readmeExcerpt":"Skill: Architecture Diagram Generator (FMTWiki Fork) Owner: zmy1006-sudo Summary: Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diag... Tags: architecture:1.0.0, design:1.0.0, diagram:1.0.0, fmtwiki:1.0.0, frontend:1.0.0, latest:1.0.0, svg:1.0.0, visualization:1.0.0 Version history: v1.0.0 | 2026-04-20T12:05:10.","codeSnippets":[],"executableExamples":[{"language":"html","snippet":"<link href=\"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">"},{"language":"svg","snippet":"<pattern id=\"grid\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n  <path d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke=\"#1e293b\" stroke-width=\"0.5\"/>\n</pattern>"},{"language":"svg","snippet":"<marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n  <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#64748b\" />\n</marker>"},{"language":"svg","snippet":"<!-- Opaque background to mask arrows -->\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"6\" fill=\"#0f172a\"/>\n<!-- Styled component on top -->\n<rect x=\"X\" y=\"Y\" width=\"W\" height=\"H\" rx=\"6\" fill=\"rgba(76, 29, 149, 0.4)\" stroke=\"#a78bfa\" stroke-width=\"1.5\"/>"},{"language":"svg","snippet":"<rect x=\"100\" y=\"100\" width=\"160\" height=\"70\" rx=\"6\" fill=\"#0f172a\"/>\n<rect x=\"100\" y=\"100\" width=\"160\" height=\"70\" rx=\"6\"\n      fill=\"rgba(8, 51, 68, 0.4)\" stroke=\"#22d3ee\" stroke-width=\"1.5\"/>\n<text x=\"180\" y=\"126\" fill=\"white\" font-size=\"11\" font-weight=\"600\" text-anchor=\"middle\">Frontend</text>\n<text x=\"180\" y=\"142\" fill=\"#94a3b8\" font-size=\"9\" text-anchor=\"middle\">React + TypeScript</text>"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: architecture-diagram\ndescription: Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology diagrams, or any technical diagram showing system components and their relationships. Based on Cocoon-AI/architecture-diagram-generator.\nlicense: MIT\nmetadata:\n  version: \"1.0\"\n  author: Cocoon AI (hello@cocoon-ai.com)\n  source: https://github.com/Cocoon-AI/architecture-diagram-generator\n---\n\n# Architecture Diagram Skill\n\nCreate professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling.\n\n## When to Use\n\n- User asks for \"architecture diagram\", \"system diagram\", \"技术架构图\"\n- User wants to visualize system components and relationships\n- User needs cloud architecture (AWS/GCP/Azure), network topology, or security diagrams\n- User asks to \"生成架构图\", \"画一个系统图\", \"可视化XXX架构\"\n\n## Design System\n\n### Color Palette\n\nUse these semantic colors for component types:\n\n| Component Type | Fill (rgba) | Stroke |\n|---------------|-------------|--------|\n| Frontend | `rgba(8, 51, 68, 0.4)` | `#22d3ee` (cyan-400) |\n| Backend | `rgba(6, 78, 59, 0.4)` | `#34d399` (emerald-400) |\n| Database | `rgba(76, 29, 149, 0.4)` | `#a78bfa` (violet-400) |\n| AWS/Cloud | `rgba(120, 53, 15, 0.3)` | `#fbbf24` (amber-400) |\n| Security | `rgba(136, 19, 55, 0.4)` | `#fb7185` (rose-400) |\n| Message Bus | `rgba(251, 146, 60, 0.3)` | `#fb923c` (orange-400) |\n| External/Generic | `rgba(30, 41, 59, 0.5)` | `#94a3b8` (slate-400) |\n\n### Typography\n\nUse JetBrains Mono for all text:\n```html\n<link href=\"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n```\n\nFont sizes: 12px for component names, 9px for sublabels, 8px for annotations, 7px for tiny labels.\n\n### Visual Elements\n\n**Background:** `#020617` (slate-950) with subtle grid pattern:\n```svg\n<pattern id=\"grid\" width=\"40\" height=\"40\" patternUnits=\"userSpaceOnUse\">\n  <path d=\"M 40 0 L 0 0 0 40\" fill=\"none\" stroke=\"#1e293b\" stroke-width=\"0.5\"/>\n</pattern>\n```\n\n**Component boxes:** Rounded rectangles (`rx=\"6\"`) with 1.5px stroke, semi-transparent fills.\n\n**Security groups:** Dashed stroke (`stroke-dasharray=\"4,4\"`), transparent fill, rose color.\n\n**Region boundaries:** Larger dashed stroke (`stroke-dasharray=\"8,4\"`), amber color, `rx=\"12\"`.\n\n**Arrows:** Use SVG marker for arrowheads:\n```svg\n<marker id=\"arrowhead\" markerWidth=\"10\" markerHeight=\"7\" refX=\"9\" refY=\"3.5\" orient=\"auto\">\n  <polygon points=\"0 0, 10 3.5, 0 7\" fill=\"#64748b\" />\n</marker>\n```\n\n**Arrow z-order:** Draw connection arrows early in the SVG (after the background grid) so they render behind component boxes.\n\n**Masking arrows behind transparent fills:** Since component boxes use semi-transparent fills, draw an opaque background rect first:\n```svg\n<!-- Opaque background to mask arrow"},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn7afn9q28na0bcm3rnr3bq6yn8303nd\",\n  \"slug\": \"fmtwiki-architecture-diagram\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1776686710595\n}"},{"path":"skill-card.md","content":"## Description:\n\nCreate professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics for system, infrastructure, cloud, security, network topology, and technical component diagrams.\n\nThis skill is ready for commercial/non-commercial use.\n\n## Publisher:\n\n[zmy1006-sudo](https://clawhub.ai/user/zmy1006-sudo)\n\n### License/Terms of Use:\n\nMIT-0\n\n## Use Case:\n\nDevelopers and engineers use this skill to generate self-contained HTML architecture diagrams that visualize system components, relationships, cloud infrastructure, network topology, and security boundaries.\n\n### Deployment Geography for Use:\n\nGlobal\n\n## Known Risks and Mitigations:\n\nRisk: Generated diagrams can contain system architecture details supplied by the user.\n\nMitigation: Review and sanitize generated HTML before sharing it outside the intended audience.\n\nRisk: Opening generated HTML may contact Google Fonts.\n\nMitigation: Use approved network settings or replace the font import with a local font when external requests are not allowed.\n\nRisk: Generated diagram files are saved locally under /tmp.\n\nMitigation: Inspect, move, or delete local outputs according to the user's data handling requirements.\n\n## Reference(s):\n\n- [ClawHub Skill Page](https://clawhub.ai/zmy1006-sudo/skills/fmtwiki-architecture-diagram)\n- [Publisher Profile](https://clawhub.ai/user/zmy1006-sudo)\n\n## Skill Output:\n\n**Output Type(s):** [code, configuration, guidance]\n\n**Output Format:** [Self-contained HTML with embedded CSS and inline SVG]\n\n**Output Parameters:** [1D]\n\n**Other Properties Related to Output:** [Generated diagrams are saved as local HTML files under /tmp and may load JetBrains Mono from Google Fonts when opened.]\n\n## Skill Version(s):\n\n1.0.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, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diag... Skill: Architecture Diagram Generator (FMTWiki Fork) Owner: zmy1006-sudo Summary: Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diag... Tags: architecture:1.0.0, design:1.0.0, diagram:1.0.0, fmtwiki:1.0.0, frontend:1.0.0, latest:1.0.0, svg:1.0.0, visualization:1.0.0 Version history: v1.0.0 | 2026-04-20T12:05:10.","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":998,"uniquenessScore":53,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-12T01:42:15.776Z","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-12T01:42:15.776Z","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-13T14:21:56.338Z","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"}]}}}