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
Install
moltis-org/moltis/architecture-diagram · repository language: Rust
git clone https://github.com/moltis-org/moltis
cp -r moltis/crates/skills/src/assets/creative/architecture-diagram ~/.claude/skills/architecture-diagramFrequently 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)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
crates/skills/src/assets/creative/architecture-diagram/SKILL.md
crates/skills/src/assets/creative/architecture-diagram/templates/template.html