skills.rest
JamesFincher
JamesFincherCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

Generate dark-themed architecture diagrams as standalone HTML with inline SVG.

Updated May 4, 2026
Search Tags:#technical documentation#svg#architecture-diagram#offline html#cloud topology#security flows#infra visualization
One-click install
npx skills add https://github.com/JamesFincher/gengar --skill architecture-diagram-jamesfincher
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/JamesFincher/gengar/tree/main/skills/creative/architecture-diagram
Command: npx skills add https://github.com/JamesFincher/gengar --skill architecture-diagram-jamesfincher

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

What problem does it solve?

It eliminates the time-consuming effort of manually drawing technical architecture diagrams by producing a clean, professional visualization from a plain-text description.

Core Features & Use Cases

  • Self-contained dark SVG-to-HTML output: Generates a standalone HTML file containing inline SVG graphics that work offline.
  • Architecture + infra coverage: Visualizes frontend/backend/database/cloud layers, regions/boundaries, and security constructs with consistent styling.
  • Connection semantics: Supports labeled and styled connections (including dashed security/auth flows) with clear arrowheads and layout rules.

Quick Start

Ask for an architecture diagram by describing your components, technologies, and connections, and then save the resulting single-file HTML to your working directory.

Frequently Asked Questions about architecture-diagram

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

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

Generate an architecture diagram as a standalone offline HTML file by providing a plain-text description of your components and connections. The tool produces a self-contained document with inline SVG graphics that require no external rendering dependencies to display.

Can I visualize cloud topology and security flows in a single infrastructure diagram?▼

You can visualize cloud topology and security flows in a single infrastructure diagram. The output maps regions, subnets, and managed services while using labeled, dashed connection lines to represent distinct security and authentication paths.

What is the best way to create dark-themed SVG diagrams for technical documentation?▼

The best way to create dark-themed SVG diagrams for technical documentation is to use a generator that applies consistent component styling, connection rules, and legend placement within a structured four-part HTML layout.

Does this architecture diagram tool work without an internet connection?▼

Yes, the architecture diagram tool works without an internet connection. It produces standalone HTML documents with inline SVG graphics, ensuring the infrastructure visualization renders correctly offline.

How do I map service-to-database relationships in an offline HTML visualization?▼

Map service-to-database relationships in an offline HTML visualization by describing your software layers and connections in plain text. The generator translates this into structured SVG graphics with clear arrowheads and layout rules.

Related Skills

Explore More Design & Creative Skills→
Brilly-BohyunBrilly-Bohyun

architecture-diagram

Creates HTML files with inline SVG for system architecture diagrams.

Community
Intermediate
PedroGiudicePedroGiudice
5

technical-doc-creator

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

Community
Intermediate
KrystianYCSilvaKrystianYCSilva

markdown-expert

Create Markdown documentation with Mermaid diagrams and GFM tables.

Community
Intermediate
wodsmithwodsmith
2

drag-and-drop

Implement drag-and-drop interactions for sortable lists and kanban boards.

Official
Advanced