architecture-diagram
Generate polished technical architecture diagrams rendered as self-contained HTML with embedded SVG graphics. The skill produces dark-themed visualizations ideal for system topology, cloud infrastructure, microservices, and deployment layouts, with semantic color coding for different component types. Output as a single HTML file that opens directly in any browser—no external dependencies, APIs, or rendering libraries required.
Architecture Diagram generates dark-themed SVG architecture diagrams as self-contained HTML files.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-26
Architecture Diagram generates dark-themed SVG architecture diagrams as self-contained HTML files. Generate polished technical architecture diagrams rendered as self-contained HTML with embedded SVG graphics. The skill produces dark-themed visualizations ideal for system topology, cloud infrastructure, microservices, and deployment layouts, with semantic color coding for different component types. Output as a single HTML file that opens directly in any browser—no external dependencies, APIs, or rendering libraries required.
Use it when
- Yes.
- architecture-diagram generates dark-themed technical diagrams optimized for professional presentations and documentation.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
mateaix/mateclaw/architecture-diagram · repository language: Java
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I generate architecture diagram SVG with architecture-diagram?
architecture-diagram produces professional dark-themed architecture diagrams as standalone HTML files with embedded SVG graphics. You define your system components and connections, and the skill renders a complete, self-contained visualization that opens directly in any browser without requiring external tools, APIs, or dependencies.
Can architecture-diagram create cloud infrastructure diagrams?
Yes. architecture-diagram specializes in visualizing cloud infrastructure, microservices topologies, and system layouts. It supports semantic color coding for different component types, making it ideal for AWS architectures, VPC configurations, service meshes, and multi-tier backend-frontend-database designs.
What makes architecture-diagram's dark themed system architecture visual unique?
architecture-diagram generates dark-themed technical diagrams optimized for professional presentations and documentation. Each diagram is a single, offline-ready HTML file with inline SVG—no external rendering libraries or internet connection needed. Share or embed the file anywhere, and it displays identically across all browsers.
Does architecture-diagram require external tools or APIs?
No. architecture-diagram produces completely standalone HTML output with embedded SVG graphics. There are no external dependencies, rendering services, or API calls. The resulting file is fully functional offline and works in any modern browser.
What diagrams can I create with architecture-diagram?
architecture-diagram handles deployment diagrams, database and API layer visualizations, infrastructure-as-code representations, tech stack overviews, and system design layouts. It's built for technical infrastructure visualization across cloud platforms, microservices architectures, and multi-component topologies.
Is architecture-diagram licensed under Apache-2.0?
Yes. architecture-diagram is distributed under the Apache-2.0 license, making it free to use, modify, and distribute according to the license terms.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
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
(truncated - see the full file via the links below)
File tree — 2 files
mateclaw-server/src/main/resources/skills/architecture-diagram/SKILL.md
mateclaw-server/src/main/resources/skills/architecture-diagram/templates/template.html
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Generate professional dark-themed architecture diagrams as standalone HTML with inline SVG”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Create polished technical architecture diagrams in dark mode with semantic color coding—cyan for frontend, emerald for backend, violet for databases, and more. Output renders as a standalone HTML file with inline SVG, requiring no external tools or dependencies. Ideal for software systems, cloud infrastructure, microservices, and deployment topology.
Create polished technical architecture diagrams rendered as standalone HTML with embedded SVG graphics and a dark aesthetic. The skill generates diagrams for system architecture, cloud infrastructure, microservices, and deployment topologies using semantic color coding and a grid-backed design system. Output is a single file that opens in any browser offline.
Architecture Diagram transforms system descriptions into standalone, browser-ready HTML files with embedded SVG visuals. It handles technical architecture, infrastructure, deployment topology, and data-flow diagrams with semantic grouping and clear connection flows, outputting polished dark-themed artifacts you can open directly without external tools.
Architecture Diagram creates publication-ready system topology visualizations in standalone HTML format. Describe your infrastructure, cloud setup, or network design in plain language, and the skill generates a dark-themed SVG diagram with semantic color coding for different component types.
Architecture Diagram creates polished technical diagrams rendered as standalone HTML files with embedded SVG and CSS. It uses a dark color scheme with semantic styling for different component types—frontend, backend, database, cloud services, security, and messaging systems—making complex system layouts clear and visually consistent.
Baoyu Diagram generates standalone SVG diagrams with a dark design system and semantic color palette. It supports architecture diagrams, flowcharts, sequence diagrams, mind maps, timelines, and other technical visualizations, each with purpose-built layout rules and component patterns.
More skills Diagram Design (NOASSERTION)