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
Install
mateaix/mateclaw/architecture-diagram · repository language: Java
git clone https://github.com/mateaix/mateclaw
cp -r mateclaw/mateclaw-server/src/main/resources/skills/architecture-diagram ~/.claude/skills/architecture-diagramFrequently 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)
Read as markdown · JSON record · Browse the source repository
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