architecture-diagram
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.
Architecture Diagram generates dark-themed SVG architecture diagrams as standalone HTML files for software systems and cloud infrastructure.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
Architecture Diagram generates dark-themed SVG architecture diagrams as standalone HTML files for software systems and cloud infrastructure. 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.
Use it when
- architecture-diagram applies semantic colors to distinguish layer types: cyan for frontend services, emerald for backend systems.
- Yes.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
moltis-org/moltis/architecture-diagram · repository language: Rust
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 SVG with architecture-diagram?
architecture-diagram generates polished technical architecture diagrams in dark mode with semantic color coding. Define your system components (frontend in cyan, backend in emerald, databases in violet) and the skill outputs a standalone HTML file with inline SVG—no external tools or APIs required. Perfect for visualizing software systems, cloud infrastructure, and microservices topology.
What color scheme does architecture-diagram use for components?
architecture-diagram applies semantic colors to distinguish layer types: cyan for frontend services, emerald for backend systems, violet for databases, and additional colors for APIs, security groups, and message buses. This dark-themed palette makes infrastructure relationships immediately clear and professional for technical documentation.
Can architecture-diagram generate system architecture visualization without APIs?
Yes. architecture-diagram creates standalone HTML files with embedded SVG that render completely offline—no external dependencies, APIs, or tools needed. Your diagrams are self-contained, shareable, and ready to use immediately after generation.
What types of diagrams can architecture-diagram produce?
architecture-diagram handles software system architecture, cloud infrastructure topology, microservices layouts, deployment diagrams, service-mesh visualization, database-API-security layer mapping, and tech-stack representations. Grid backgrounds and semantic positioning help communicate complex infrastructure clearly.
Is architecture-diagram open source and what's its license?
Yes, architecture-diagram is released under the MIT license, making it free to use, modify, and distribute for personal and commercial projects.
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
(truncated - see the full file via the links below)
File tree — 2 files
crates/skills/src/assets/creative/architecture-diagram/SKILL.md
crates/skills/src/assets/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 SVG architecture diagrams for software systems”
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 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.
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) · C4 Diagrams (unlicensed) · Diagram Design (NOASSERTION)