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

diagrams

Create diagrams and visualizations in Markdown using Mermaid, Graphviz, Vega-Lite, PlantUML, and HTML templates.

Community
Intermediate
paxlabs-incpaxlabs-inc
7

architecture-diagram

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

Community
Intermediate