architecture-diagram
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 generates professional dark-themed technical diagrams as self-contained HTML files.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-28
Architecture Diagram generates professional dark-themed technical diagrams as self-contained HTML files. 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.
Use it when
- Yes.
- architecture-diagram creates system architecture documentation with semantic color-coded components.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
NousResearch/hermes-agent/architecture-diagram · repository language: Python
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 create architecture diagram dark theme output?
architecture-diagram generates professional dark-themed architecture diagrams as self-contained HTML files. Each diagram is rendered with embedded SVG graphics and a dark aesthetic, making it suitable for technical presentations and documentation. The output is a single file that opens in any browser without requiring external tools or internet connectivity.
Can architecture-diagram visualize cloud infrastructure and microservices?
Yes. architecture-diagram specializes in visualizing cloud infrastructure and microservice topologies without external tools. It supports AWS infrastructure diagrams, service mesh topology visualization, and deployment diagrams. All output is generated as standalone HTML with embedded SVG, enabling offline-compatible technical communication.
What does architecture-diagram use for component styling?
architecture-diagram creates system architecture documentation with semantic color-coded components. This color-coding system helps distinguish different layers and services in your diagrams—such as backend, frontend, database, and API components—making technical architecture visuals clearer and more professional for system design communication.
Is architecture-diagram compatible with offline use?
Yes. architecture-diagram generates offline-compatible SVG diagrams with grid backgrounds and legends, all packaged into a single HTML file. You can create infrastructure visualization, deployment diagrams, and technical architecture documentation without internet access or external dependencies. The output opens in any modern browser.
What file formats does architecture-diagram produce?
architecture-diagram outputs polished technical architecture diagrams as standalone HTML files with embedded SVG graphics. This single-file format ensures your diagrams are self-contained, portable, and ready for sharing. The grid-backed design system and dark aesthetic provide a professional appearance suitable for technical documentation and presentations.
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
(truncated - see the full file via the links below)
File tree — 2 files
skills/creative/architecture-diagram/SKILL.md
skills/creative/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 self-contained HTML”
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.
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 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.
Build charts and process diagrams that match OpenAI's design system, complete with their typeface and color palette. The skill provides a zero-dependency renderer for bar charts and hand-assembled flow diagram primitives, both emitted as standalone HTML/SVG suitable for blogs, research pages, and decks.
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.
More skills baoyu-diagram (MIT) · concept-diagrams (MIT) · Diagram Design (NOASSERTION)