菜单
Architecture and component diagrams as HTML/SVG (dark-themed)
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Search and download arXiv papers (no API key needed)
Delegate coding and file edits to Anthropic Claude Code CLI
Read/write Windows clipboard text, HTML, images, history (PowerShell)
Running scripts and code on Windows
Delegate coding tasks to OpenAI Codex CLI
Windows Defender: scans, threat history, signatures (PowerShell)
| name | architecture-diagram |
| description | Architecture and component diagrams as HTML/SVG (dark-themed) |
| category | creative |
| version | 1.0.0 |
| origin | aiden |
| license | Apache-2.0 |
| tags | architecture, diagram, svg, html, dark-theme, system-design, visualization, components, flowchart |
Create dark-themed, professional system architecture and component diagrams rendered as self-contained HTML+SVG files. No external tools needed — output opens in any browser.
Before generating, outline:
- Components: what boxes/nodes exist?
- Relationships: which components talk to which? Direction?
- Groupings: are there logical layers (frontend, backend, data)?
- Key labels: service names, technologies, data formats
import textwrap
def make_diagram(title, components, connections, output="diagram.html"):
"""
components: list of { id, label, x, y, color }
connections: list of { from_id, to_id, label }
"""
box_w, box_h = 160, 50
width = max(c["x"] for c in components) + box_w + 80
height = max(c["y"] for c in components) + box_h + 80
def box(c):
bg = c.get("color", "#1e3a5f")
return f'''<rect x="{c['x']}" y="{c['y']}" width="{box_w}" height="{box_h}" rx="8"
fill="{bg}" stroke="#4a9eff" stroke-width="1.5"/>
<text x="{c['x']+box_w//2}" y="{c['y']+box_h//2+5}" text-anchor="middle"
fill="#e0e8ff" font-family="monospace" font-size="13">{c['label']}</text>'''
id_to_comp = {c["id"]: c for c in components}
def arrow(conn):
a, b = id_to_comp[conn["from_id"]], id_to_comp[conn["to_id"]]
x1, y1 = a["x"] + box_w, a["y"] + box_h // 2
x2, y2 = b["x"], b["y"] + box_h // 2
mid_x = (x1 + x2) // 2
lbl = conn.get("label","")
return f'''<line x1="{x1}" y1="{y1}" x2="{x2}" y2="{y2}"
stroke="#4a9eff" stroke-width="1.5" marker-end="url(#arrow)"/>
<text x="{mid_x}" y="{(y1+y2)//2 - 6}" text-anchor="middle"
fill="#8ab4f8" font-family="monospace" font-size="11">{lbl}</text>'''
html = f"""<!DOCTYPE html><html>
<head><meta charset="utf-8"><title>{title}</title>
<style>body{{background:#0d1117;margin:0;display:flex;justify-content:center;padding:40px}}</style>
</head><body>
<svg width="{width}" height="{height}" xmlns="http://www.w3.org/2000/svg">
<defs><marker id="arrow" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
<polygon points="0 0,10 3.5,0 7" fill="#4a9eff"/></marker></defs>
<text x="{width//2}" y="30" text-anchor="middle" fill="#e0e8ff" font-family="monospace" font-size="18" font-weight="bold">{title}</text>
{"".join(box(c) for c in components)}
{"".join(arrow(conn) for conn in connections)}
</svg></body></html>"""
with open(output, "w") as f:
f.write(html)
print(f"Saved {output} — open in browser")
# Example: 3-tier web app
make_diagram("Web Application Architecture",
components=[
{"id":"browser", "label":"Browser", "x":50, "y":100, "color":"#1a4731"},
{"id":"nginx", "label":"Nginx", "x":280, "y":100, "color":"#1e3a5f"},
{"id":"api", "label":"FastAPI", "x":510, "y":100, "color":"#1e3a5f"},
{"id":"postgres", "label":"PostgreSQL", "x":510, "y":220, "color":"#3d1c4f"},
{"id":"redis", "label":"Redis Cache", "x":280, "y":220, "color":"#4f2a0a"},
],
connections=[
{"from_id":"browser", "to_id":"nginx", "label":"HTTPS"},
{"from_id":"nginx", "to_id":"api", "label":"proxy"},
{"from_id":"api", "to_id":"postgres", "label":"SQL"},
{"from_id":"api", "to_id":"redis", "label":"cache"},
]
)
To show layers (Frontend / Backend / Data), add a background rect before component boxes:
layer_rect = '<rect x="30" y="80" width="220" height="200" rx="12" fill="none" stroke="#334155" stroke-width="1" stroke-dasharray="6,3"/><text x="40" y="72" fill="#64748b" font-family="monospace" font-size="12">Frontend</text>'
"Draw a microservices architecture with API gateway, 3 services, and a database" → Use step 2 with 5 components (gateway, service1/2/3, db) and arrows showing request flow.
"Create a data pipeline diagram: raw data → ETL → warehouse → BI tool" → Use step 2 with a horizontal layout, 4 boxes, connecting arrows with labels for each transform step.
"Visualize a CI/CD pipeline from git push to production" → Components: GitHub, CI Runner, Test Suite, Docker Build, Registry, Deploy → Prod. Horizontal flow.
from_id/to_id if arrows cross