skills.rest
moltis-org
moltis-orgOFFICIAL
Explore all skills by this author →
WebsiteGitHub

architecture-diagram

Generate standalone HTML architecture diagrams with inline SVG from system descriptions.

2.8k|332|Updated Jan 29, 2026
Search Tags:#architecture#html#visualization#svg#diagram#software-design#dark-theme
One-click install
npx skills add https://github.com/moltis-org/moltis --skill architecture-diagram-moltis-org
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/moltis-org/moltis/tree/main/crates/skills/src/assets/creative/architecture-diagram
Command: npx skills add https://github.com/moltis-org/moltis --skill architecture-diagram-moltis-org

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Software teams often struggle to produce clear, consistent, and portable architecture visuals that communicate complex system topology. This Skill generates professional, dark-themed architecture diagrams as standalone HTML files with inline SVG, enabling offline viewing and easy sharing without external tools or libraries.

Core Features & Use Cases

  • Self-contained HTML output with inline SVG; no external rendering libraries required.
  • Semantic color mapping for frontend/backend/database/cloud/security components, JetBrains Mono typography, and a subtle grid background for clear diagrams.
  • Suitable for software architecture, cloud topology, microservice maps, deployment diagrams, security group layouts, and API/data flow visualizations; export to slides or documents.

Quick Start

Describe your system architecture and save the output as a self-contained HTML file named after your project.

Frequently Asked Questions about architecture-diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a software architecture diagram as an HTML file?▼

Generate a software architecture diagram by providing a system description to produce a standalone HTML file with inline SVG. This self-contained output requires no external rendering libraries and enables offline viewing.

What is the best way to visualize microservice topology without external libraries?▼

Visualizing microservice topology without external libraries is achieved by generating a self-contained HTML file with inline SVG. It uses a deterministic dark theme design system with semantic color mapping for clear infrastructure visualization.

Can I create cloud infrastructure diagrams for offline viewing and slides?▼

Cloud infrastructure diagrams can be created as standalone HTML files with inline SVG specifically for offline viewing and slide-ready presentations. The output is self-contained, making it easy to export to slides or documents.

Does this architecture diagram tool work for security workflows and data flow maps?▼

Architecture diagram generation works for security workflows and API data flow visualizations by applying semantic color mapping to distinguish security components. It outputs a single HTML file suitable for mapping complex system topologies.

How do I customize dark theme SVG diagrams for different software components?▼

Dark theme SVG diagrams are customized through a deterministic design system using semantic color mapping for frontend, backend, database, cloud, and security components. It includes JetBrains Mono typography and a subtle grid background.

What are the limitations of using inline SVG for deployment diagrams?▼

Using inline SVG for deployment diagrams requires no external rendering libraries but relies entirely on a deterministic design system within a single HTML file. It is optimized for slide-ready static visuals rather than interactive dynamic modeling.

Related Skills

Explore More Software Engineering Skills→
PedroGiudicePedroGiudice
5

technical-doc-creator

Generate HTML technical documentation with syntax-highlighted code and SVG architecture diagrams.

Community
Intermediate
mgiffordmgifford
39

maps

Enforce accessible practices for static and interactive maps.

Community
Advanced
chloebrettchloebrett
3

diagrams

Generate system architecture, process flow, and data relationship diagrams from textual descriptions.

Community
Intermediate
paxlabs-incpaxlabs-inc
7

architecture-diagram

Generate dark-themed architecture diagrams as self-contained HTML files with inline SVG.

Community
Intermediate