with one click
with one click
根据一句业务需求,自动规划并创建一组分工明确的数字员工(Agent),再把他们编排成一条工作流,无需逐个手工创建。
Debug Node.js via --inspect + Chrome DevTools Protocol CLI.
Author SKILL.md skills: frontmatter, validator limits, structure.
Test fixture for SkillBundleMaterializer.
Manage Apple Notes via memo CLI: create, search, edit.
Monitor blogs and RSS/Atom feeds via blogwatcher-cli tool.
| name | architecture-diagram |
| description | Dark-themed SVG architecture/cloud/infra diagrams as HTML. |
| version | 1.0.0 |
| tags | ["architecture","diagrams","SVG","HTML","visualization","infrastructure","cloud"] |
| author | ported |
Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.
Best suited for:
Look elsewhere first for:
excalidraw)If a more specialized skill is available for the subject, prefer that. If none fits, this skill can also serve as a general SVG diagram fallback — the output will just carry the dark tech aesthetic described below.
Based on Cocoon AI's architecture-diagram-generator (MIT).
write_file to a .html file (e.g. ~/architecture-diagram.html)render_html_image(filePath="<the .html path>", filename="<name>") and return the markdown link it produces. IM channels can only deliver rasterised images natively, so a PNG is required for the diagram to appear inline rather than as a dead link or a file attachment..html directly in a browser — works offline, no dependencies.Save diagrams to a user-specified path, or default to the current working directory:
./[project-name]-architecture.html
When the current channel is anything other than a local browser session, follow up write_file with:
render_html_image(filePath="./architecture-diagram.html", filename="architecture")
This returns a /api/v1/files/generated/<id> URL with image/png MIME. The channel layer detects the image MIME and uploads the PNG as a native image message (so it renders inline in WeCom / DingTalk / Feishu / Telegram / Web). Without this step, an .html artifact reaches IM channels as either a dead markdown link or, at best, a non-previewable file attachment.
After saving, the user can open the .html directly:
# macOS
open ./my-architecture.html
# Linux
xdg-open ./my-architecture.html
Use specific rgba fills and hex strokes to categorize components:
| Component Type | Fill (rgba) | Stroke (Hex) |
|---|---|---|
| Frontend | rgba(8, 51, 68, 0.4) | #22d3ee (cyan-400) |
| Backend | rgba(6, 78, 59, 0.4) | #34d399 (emerald-400) |
| Database | rgba(76, 29, 149, 0.4) | #a78bfa (violet-400) |
| AWS/Cloud | rgba(120, 53, 15, 0.3) | #fbbf24 (amber-400) |
| Security | rgba(136, 19, 55, 0.4) | #fb7185 (rose-400) |
| Message Bus | rgba(251, 146, 60, 0.3) | #fb923c (orange-400) |
| External | rgba(30, 41, 59, 0.5) | #94a3b8 (slate-400) |
#020617) with a subtle 40px grid pattern<!-- Background Grid Pattern -->
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1e293b" stroke-width="0.5"/>
</pattern>
Components are rounded rectangles (rx="6") with 1.5px strokes. To prevent arrows from showing through semi-transparent fills, use a double-rect masking technique:
#0f172a)#fb7185)4,4), rose color8,4), amber color, rx="12"The generated HTML file follows a four-part layout:
<div class="card">
<div class="card-header">
<div class="card-dot cyan"></div>
<h3>Title</h3>
</div>
<ul>
<li>• Item one</li>
<li>• Item two</li>
</ul>
</div>
.html fileLoad the full HTML template for the exact structure, CSS, and SVG component examples:
skill_view(name="architecture-diagram", file_path="templates/template.html")
The template contains working examples of every component type (frontend, backend, database, cloud, security), arrow styles (standard, dashed, curved), security groups, region boundaries, and the legend — use it as your structural reference when generating diagrams.