ワンクリックでManusで任意のスキルを実行

svg-architecture-diagram

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.

Manusで実行

概要

インストールコマンド

npx skills add https://github.com/wujiaming88/skills --skill svg-architecture-diagram

このコマンドをClaude Codeにコピー＆ペーストしてスキルをインストール

ソース

wujiaming88/skills

スター0

フォーク0

更新日2026年4月25日 12:12

ファイルエクスプローラー

5 ファイル

SKILL.md

readonly

このリポジトリの他の Skills

同じリポジトリ

web-render-screenshot

wujiaming88/skills

Generate ultra-high-resolution screenshots from HTML content using Playwright. Default 4x device scale factor produces crisp, pixel-perfect output ideal for UI mockups, dashboards, data visualizations, infographics, website previews, and any content requiring accurate text rendering. Use when: (1) user wants a website/webpage screenshot or mockup image, (2) content has text, numbers, tables, charts that must be legible, (3) user wants a UI design rendered as an image, (4) HTML Canvas or data-driven visuals need to be exported as PNG/JPEG. Triggers: "website screenshot", "网页截图", "网站首页图", "UI mockup image", "dashboard image", "数据可视化图片", "render HTML to image". Prefer this over AI image generation (stable-image-ultra) when the content has structured text, data, or UI elements. AI image generation cannot produce readable text.

2026-04-240

stable-image-ultra

wujiaming88/skills

Generate the highest quality photorealistic images using Stability AI's Stable Image Ultra and Stable Diffusion 3.5 Large models via AWS Bedrock. The most powerful text-to-image models on Bedrock. Supports multiple AWS auth methods: environment variables, credentials file, named profiles, IAM instance roles, SSO, or direct access keys. Use when the user asks for ultra-high-quality, photorealistic, or premium image generation. Triggers: "ultra quality image", "photorealistic image", "best quality image", "stable image ultra", "SD3.5", "stability ai", "ultra画质", "超高清图片", "照片级图片", "最高画质", "generate image", "生成图片", "画一张", "做配图", "生图". This is the DEFAULT image generation skill for ALL agents. Always use this unless the user explicitly asks for text-heavy diagrams (use HTML Canvas instead). Requires AWS Bedrock access with Stability AI models enabled in us-west-2. NOT for: editing existing images, generating video, or HTML/CSS canvas rendering.

2026-04-240

karpathy-coding-guidelines

wujiaming88/skills

Behavioral guidelines to reduce common LLM coding pitfalls, derived from Andrej Karpathy's observations. Apply these four principles when writing, editing, or reviewing code — especially for non-trivial changes. Triggers on coding tasks, code reviews, refactoring, bug fixes, feature implementation, or when the user asks for careful/disciplined coding behavior.

2026-04-200

ppt-from-template

wujiaming88/skills

Generate presentations by extracting visual style from a reference template and recreating slides from scratch using PptxGenJS. Use when: user provides a PPT/PDF as style reference and wants new slides in that style; user says "按这个风格做PPT", "模仿这个模板", "参考这个PDF做演示", "make slides like this", "use this template", "做个PPT", "用这个模板做课件", "帮我做演示文稿"; user uploads a .pptx file as template. Supports: template directory auto-discovery, user upload, multi-template selection, image/video placeholders, large decks (30-100+ pages via batched generation). Requires: pptx skill (PptxGenJS), python-pptx, pdftoppm (poppler-utils). NOT for: editing existing PPT (use pptx skill), creating slides without style reference (use pptx skill directly).

2026-03-250

nova-canvas

wujiaming88/skills

Generate images using Amazon Nova Canvas via AWS Bedrock. Supports multiple AWS auth methods: environment variables, credentials file, named profiles, IAM instance roles, SSO, or direct access keys. Use when the user asks to generate, create, draw, or produce an image, picture, illustration, photo, artwork, poster, icon, banner, or any visual content. Triggers: "generate an image", "draw me", "create a picture", "make an illustration", "画一张", "帮我画", "生成图片", "做一张图", "AI绘图". Requires AWS Bedrock access with Nova Canvas model enabled. NOT for: editing existing images, generating video, or HTML/CSS canvas rendering.

2026-03-250

openclaw-diagnostics

wujiaming88/skills

OpenClaw 系统诊断和性能分析工具。分析 agent 推理耗时、Token 用量、工具调用统计、 Run 时间线、Gateway 重启历史。支持多种模式：批量分析（默认）、实时跟踪（-f）、摘要统计（-s）、高级诊断（--advanced）。支持多 Agent 过滤。使用场景：当用户询问 OpenClaw 运行状态、性能瓶颈、推理延迟、Token 消耗、工具执行统计、错误排查、agent 活动分析时触发。触发词：诊断、diagnostics、性能分析、推理耗时、token统计、运行状态、 agent分析、工具调用统计、Run详情、Gateway重启。指令触发：/diag — 直接执行诊断，支持参数透传。

2026-03-230

ソース

wujiaming88

wujiaming88/skills

GitHub リポジトリを開く Creator のリポジトリを見る

インストールコマンド

ダウンロード

Manusで実行

役立つ用途SOC

ソフトウェア開発者コンピュータ・数学職15-1252L4

name

svg-architecture-diagram

description

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.

<!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):

<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-component):

<rect x="X" y="Y" width="W" height="65" 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">Component Title</text>
<text x="X+20" y="Y+40" font-size="11" fill="#6b7280">Description line 1</text>
<text x="X+20" y="Y+55" font-size="10" fill="#9ca3af">Metadata / specs</text>

Connection line (with arrow):

<line x1="FROM_X" y1="FROM_Y" x2="TO_X" y2="TO_Y" stroke="#6366f1" stroke-width="2" marker-end="url(#arr-indigo)"/>

Curved connection (L-shape or bend):

<path d="M startX,startY L midX,midY L endX,endY" stroke="#6366f1" stroke-width="2" fill="none" marker-end="url(#arr-indigo)"/>

Dashed feedback line:

<path d="M x1,y1 L x2,y2" stroke="#8b5cf6" stroke-width="2" fill="none" stroke-dasharray="6,4" marker-end="url(#arr-purple)"/>

Connection label:

<text x="MID_X" y="MID_Y-5" font-size="10" fill="#6366f1" font-weight="500">label text</text>

Step 4: Screenshot with Playwright

from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(
        viewport={"width": 1600, "height": 1000},
        device_scale_factor=4,  # 4x ultra-high res (default)
    )
    page.goto("file:///path/to/diagram.html", wait_until="networkidle")
    page.wait_for_timeout(1500)
    page.screenshot(path="diagram.png", full_page=True)
    browser.close()

Or use the bundled script: scripts/screenshot.py <input.html> [output.png]

Design System

See references/design-system.md for the complete color palette, card styles, arrow markers, and text sizing rules.

Critical Rules (prevent common issues)

Text Overflow Prevention

Max characters per line at font-size 11px ≈ 7px/char:
- 300px container → max 37 chars
- 340px container → max 43 chars
- 440px container → max 57 chars
Long text → split into multiple <text> elements with Y offset +15px each
Always leave 20px padding on each side of text inside cards
Test at 1x scale before generating final 4x screenshot

Connection Line Rules

Never use CSS for connections — always SVG <line> or <path>
One <marker> per color — define in <defs>, reference with marker-end
Straight lines when possible; use <path> L-segments for bends
Avoid crossing lines — rearrange layout if lines would cross
Label every connection — brief verb/noun near the midpoint
⚠️ 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.
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).
Never make line length < marker size (8px) — The line will be invisible.

Layout Rules

Top-to-bottom primary flow (input at top, output at bottom/right)
Left-right symmetry when possible
Group related modules vertically (e.g., memory layers stacked)
Minimum 20px gap between vertically stacked cards (see Connection Line Rules)
Color-code by function — see design system for standard palette
Include a legend (bottom-right corner) explaining colors and line types
Include a title (top center) and source attribution (bottom center)

Font Rules

Font family: font-family="Inter, 'PingFang SC', 'Microsoft YaHei', sans-serif" — set on root <svg> or first <text>
Load Inter via Google Fonts in <style> block
Chinese text: use PingFang SC / Microsoft YaHei fallback
Font sizes: titles 13-14px, descriptions 10-11px, metadata 9-10px

Examples

Two complete working examples are included:

references/example-hermes.html — Hermes Agent architecture (6 modules, medium complexity)
references/example-openclaw.html — OpenClaw platform architecture (12 modules, high complexity, demonstrates proper vertical card spacing for Agent Loop steps)

Delivery

Output MEDIA:<path> for inline delivery, or openclaw message send --channel telegram --target <id> --media <path> --force-document for Telegram.

If PNG exceeds ~1MB for Telegram delivery, convert to JPEG (quality=95):

from PIL import Image
img = Image.open("diagram.png")
img.save("diagram.jpg", "JPEG", quality=95, optimize=True)

Default is 4x (6400×4000px for 1600×1000 canvas). Always use maximum resolution.