architecture-diagram

Generate dark-themed HTML and SVG architecture diagrams from text descriptions.

Updated Jul 5, 2026

Search Tags:#system architecture #design tools #diagram generation #visual documentation #infrastructure visualization

Ready to run

npx skills add https://github.com/Arupbiswas09/claude_skills --skill architecture-diagram-arupbiswas09

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/Arupbiswas09/claude_skills/tree/main/skills/architecture-diagram
Command: npx skills add https://github.com/Arupbiswas09/claude_skills --skill architecture-diagram-arupbiswas09

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the need for quick and efficient creation of system architecture diagrams. It enables users to visualize components, connections, and regions without the need for external tools or software.

Core Features & Use Cases

Automated Diagram Generation: Automatically generate self-contained, dark-theme HTML + SVG diagrams from simple text descriptions of components and connections.
Export Options: Offers options to export diagrams as PNG or PDF.
Use Case: For system architects or developers who need to create high-quality architecture diagrams quickly to document and share their system designs.

Quick Start

Run the following command to generate an architecture diagram:

start-project skill:architecture-diagram

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema

How do I generate system architecture diagrams from text without external tools?▼

You can generate system architecture diagrams directly from text descriptions by automating component and connection visualization. This skill renders self-contained, dark-themed HTML and SVG diagrams entirely in-browser, requiring no external software dependencies.

What is the best way to automate infrastructure visualization for system design documentation?▼

Automating infrastructure visualization for design documentation is best achieved by rendering self-contained SVG diagrams from simple Markdown. This approach enables offline-renderable, dark-themed visual outputs perfectly suited for embedding into system architecture workflows.

Can I export markdown-generated architecture diagrams to PNG or PDF?▼

Yes, you can export markdown-generated architecture diagrams to PNG or PDF formats. The skill creates self-contained HTML and SVG visualizations natively, offering direct export options for sharing system design outputs.

Does automated diagram generation work offline without browser dependencies?▼

Automated diagram generation works completely offline without dependencies beyond in-browser execution. It leverages in-memory SVG rendering to produce self-contained HTML diagrams, ensuring visual documentation is always available.

How do I visualize system components and connections using a single command?▼

You can visualize system components and connections by running a single command that parses simple text descriptions. It automates dark-themed SVG diagram creation, instantly translating architectural design logic into visual documentation.

zhouboyu-xreal

architecture-diagram

Generate dark-themed SVG architecture diagrams as HTML files from system descriptions.

Community

Intermediate

markacianfrani

drawio

Generates native draw.io XML diagrams for technical documentation and visual modeling, with optional export to PNG, and SVG/PDF via installed desktop app.

Community

Intermediate