Architecture Diagram Skill

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.

Scope

Best suited for:

• Software system architecture (frontend / backend / database layers)
• Cloud infrastructure (VPC, regions, subnets, managed services)
• Microservice / service-mesh topology
• Database + API map, deployment diagrams
• Anything with a tech-infra subject that fits a dark, grid-backed aesthetic

Look elsewhere first for:

• Physics, chemistry, math, biology, or other scientific subjects
• Physical objects (vehicles, hardware, anatomy, cross-sections)
• Floor plans, narrative journeys, educational / textbook-style visuals
• Hand-drawn whiteboard sketches (consider excalidraw)
• Animated explainers (consider an animation skill)

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

Workflow

1. User describes their system architecture (components, connections, technologies)
2. Generate the HTML file following the design system below
3. Save with write_file to a .html file (e.g. ~/architecture-diagram.html)
4. If the user wants to view/share the diagram in chat (web console, WeCom / 企业微信, DingTalk, Feishu, Telegram, ...): call 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.
5. Otherwise, the user opens the .html directly in a browser, works offline, no dependencies.