What makes SVG Architecture Diagram notable?

1K downloads. Trust evidence available

How should SVG Architecture Diagram be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

SVG Architecture Diagram

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

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.0k

Updated

Oct 11, 2026

Version

1.2.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 1K downloadsadoption · observed Oct 11, 2026
Latest release: 1.2.0release · observed Apr 25, 2026
Handshake status: UNKNOWNsecurity

What changed

Newest first. Only changes that point at a source are listed.

Release 1.2.0release
连线间距规范(≥20px防箭头吞线), 新增OpenClaw架构图示例, Card Spacing Rules
Observed Apr 25, 2026 · source

Install and run

Setup complexity: low.

clawhub skill install s171ccng28wdj2n2tdtw8q70zd83ha4q:svg-architecture-diagram

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: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-wujiaming88-svg-architecture-diagram/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

35,366 characters of source documentation, loaded on request.

Extracted files

4 files captured from the source.

SKILL.md

---
name: svg-architecture-diagram
description: >-
  Create professional, publication-quality technical architecture diagrams using
  pure SVG in HTML, then screenshot via Playwright. Produces crisp, pixel-perfect
  diagrams with precise connection lines, color-coded modules, and clear text at
  any resolution. Use when: (1) user asks for a system architecture diagram,
  (2) user wants a technical component diagram or flow chart, (3) user needs a
  data flow or pipeline visualization, (4) any diagram requiring accurate text
  labels and precise connecting lines. Triggers: "architecture diagram",
  "架构图", "技术架构", "system diagram", "component diagram", "flow diagram",
  "数据流图", "模块图", "draw architecture", "画架构图", "technical diagram".
  Prefer this over AI image generation for any diagram with text labels.
---

# SVG Architecture Diagram

Create professional technical architecture diagrams using pure SVG, rendered to high-res PNG via Playwright.

## Why SVG (not CSS positioning or AI image generation)

| Approach | Lines/Arrows | Text Quality | Precision |
|----------|-------------|-------------|-----------|
| **SVG (this skill)** | ✅ Perfect: `<line>`, `<path>`, `<marker>` | ✅ Crisp at any size | ✅ Pixel-perfect |
| CSS absolute positioning | ❌ Hacky: borders, pseudo-elements | ✅ OK | ❌ Hard to align |
| AI image generation | ❌ No control | ❌ Garbled text | ❌ No precision |

## Quick Start

### Step 1: Plan the diagram

Identify:
- **Modules** — group related components (color-coded)
- **Hierarchy** — top-to-bottom flow (user → core → subsystems → output)
- **Connections** — data flow (solid lines), feedback (dashed lines)

### Step 2: Create the HTML file

Write a single HTML file with an inline SVG. Standard canvas: **1600×1000px**.

```html
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body { width: 1600px; height: 1000px; background: #fafafa; overflow: hidden; }
</style>
</head><body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1000" width="1600" height="1000">
  <defs>
    <!-- Arrow markers — one per color -->
    <marker id="arr-indigo" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
      <path d="M0,0 L8,3 L0,6 Z" fill="#6366f1"/>
    </marker>
    <!-- Shadow filter -->
    <filter id="shadow" x="-4%" y="-4%" width="108%" height="108%">
      <feDropShadow dx="0" dy="2" stdDeviation="4" flood-color="#000" flood-opacity="0.08"/>
    </filter>
  </defs>

  <!-- Diagram content here -->

</svg>
</body></html>
```

### Step 3: Build the diagram using these SVG patterns

**Filled header card** (module title):
```svg
<rect x="X" y="Y" width="W" height="40" rx="10" fill="#6366f1" filter="url(#shadow)"/>
<text x="CENTER" y="Y+25" text-anchor="middle" font-size="13" font-weight="700" fill="#fff">🔄 Module Name</text>
```

**Outlined detail card** (sub-com

_meta.json

{
  "ownerId": "kn778xxhawnk8ayzy5se9s465980pz82",
  "slug": "svg-architecture-diagram",
  "version": "1.2.0",
  "publishedAt": 1777119167162
}

references/design-system.md

# SVG Architecture Diagram — Color Palette Reference

## Standard Module Colors

| Module Type | Fill Color | Border | Text | Use For |
|-------------|-----------|--------|------|---------|
| User / External | `#ec4899` (pink) | — | white | User input, LLM, external services |
| Core Engine | `#6366f1` (indigo) | — | white | Main loop, core processing, orchestration |
| Storage / Memory | `#10b981` (green) | `#10b981` | green/gray | Database, cache, memory layers |
| Plugin / Extension | `#f59e0b` (amber) | `#f59e0b` | amber/gray | Skills, plugins, extensions |
| AI / Learning | `#8b5cf6` (purple) | `#8b5cf6` | purple/gray | Self-evolution, ML, optimization |
| Infrastructure | `#64748b` (slate) | `#94a3b8` | slate/gray | Tools, shell, file system |
| Security / Guard | `#ef4444` (red) | `#ef4444` | red | Security, validation, guard |
| Output / Result | `#10b981` (green) | — | white | Output, delivery, response |

## Card Styles

### Filled Card (header/title blocks)
```svg
<rect x="X" y="Y" width="W" height="40" rx="10" fill="#6366f1" filter="url(#shadow)"/>
<text x="CENTER" y="Y+25" text-anchor="middle" font-size="14" font-weight="700" fill="#fff">Title</text>
```

### Outlined Card (detail blocks)
```svg
<rect x="X" y="Y" width="W" height="H" rx="10" fill="#fff" stroke="#6366f1" stroke-width="2" filter="url(#shadow)"/>
<text x="X+20" y="Y+22" font-size="12" font-weight="700" fill="#6366f1">Title</text>
<text x="X+20" y="Y+40" font-size="11" fill="#6b7280">Description</text>
<text x="X+20" y="Y+55" font-size="10" fill="#9ca3af">Metadata</text>
```

### Highlight Card (warnings/special)
```svg
<rect x="X" y="Y" width="W" height="H" rx="10" fill="#fffbeb" stroke="#f59e0b" stroke-width="1"/>
```

## Arrow Markers

```svg
<marker id="arr-indigo" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
  <path d="M0,0 L8,3 L0,6 Z" fill="#6366f1"/>
</marker>
```

## Connection Lines

| Type | Style | Use |
|------|-------|-----|
| Data flow | `stroke-width="2"` solid + arrow | Primary data movement |
| Feedback | `stroke-width="2" stroke-dasharray="6,4"` + arrow | Feedback loops, optimization |
| Internal | `stroke-width="1.5"` solid + arrow | Within-module connections |
| Label | `font-size="10" font-weight="500"` | Connection description |

## Text Sizing Rules

| Element | Font Size | Weight | Anchor |
|---------|-----------|--------|--------|
| Page title | 22px | 700 | middle |
| Subtitle | 12px | 400 | middle |
| Module header | 13-14px | 700 | middle |
| Card title | 11-12px | 700 | left |
| Description | 10-11px | 400 | left |
| Metadata | 9-10px | 400 | left |
| Connection label | 10px | 500 | left |
| Legend | 11px | 400 | left |

## Anti-Overflow Rules

1. **Max text width** = container width - 40px (20px padding each side)
2. At 11px font, ~7px per character → max ~43 chars in 300px container
3. Long text → split into two `<text>` lines (Y offset +16px)
4. Use `text-anchor="middle"` for centered headers
5. Use left-aligned for d

skill-card.md

## Description:

Create professional, publication-quality technical architecture diagrams using pure SVG in HTML, then render them to high-resolution PNG screenshots with Playwright.

This skill is ready for commercial/non-commercial use.

## Publisher:

[wujiaming88](https://clawhub.ai/user/wujiaming88)

### License/Terms of Use:

MIT-0

## Use Case:

Developers 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.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: The screenshot helper can load arbitrary HTTP, HTTPS, or file URLs.

Mitigation: 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.

Risk: Telegram delivery can disclose architecture details to an external service.

Mitigation: Review generated diagrams for sensitive system details before sending them through Telegram or any external channel.

Risk: Generated diagrams may contain incorrect architecture relationships or misleading labels.

Mitigation: Have a knowledgeable reviewer check component names, boundaries, data flows, and connection labels before publishing or sharing.

## Reference(s):

- [ClawHub Skill Page](https://clawhub.ai/wujiaming88/skills/svg-architecture-diagram)
- [Publisher Profile](https://clawhub.ai/user/wujiaming88)
- [Design System Reference](references/design-system.md)
- [Hermes Architecture Example](references/example-hermes.html)
- [OpenClaw Architecture Example](references/example-openclaw.html)
- [Screenshot Helper](scripts/screenshot.py)

## Skill Output:

**Output Type(s):** [text, markdown, code, shell commands, configuration, guidance]

**Output Format:** [Markdown guidance with HTML, SVG, Python, and shell command snippets]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [May produce local HTML diagram files and high-resolution PNG screenshots when the agent follows the workflow.]

## Skill Version(s):

1.2.0 (source: server release evidence)

## Ethical Considerations:

Users 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.

Github ReposUpdated 3d agoRank 70

AionUi

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!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

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

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.

MCPOPENCLAW

Github ReposUpdated 7mo agoRank 70

CopilotKit

The Frontend for Agents & Generative UI. React + Angular