skills.rest
samykabu
samykabuCOMMUNITY
Explore all skills by this author →
GitHub

architecture-diagram

Convert text descriptions of system architectures into HTML+SVG files.

Updated Jul 9, 2026
Search Tags:#architecture#HTML#SVG#export#diagram
One-click install
npx skills add https://github.com/samykabu/sanduq --skill architecture-diagram-samykabu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: architecture-diagram
Source: https://github.com/samykabu/sanduq/tree/main/skills/illustration-tools/skills/architecture-diagram
Command: npx skills add https://github.com/samykabu/sanduq --skill architecture-diagram-samykabu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps you generate detailed architecture diagrams from plain text descriptions, saving you time and ensuring consistency in your visual documentation.

Core Features & Use Cases

  • Text to Diagram: Convert text descriptions into visual diagrams with components, connections, and themes.
  • Light and Dark Themes: Customize diagrams with light or dark themes to fit your design preferences.
  • Export Options: Export diagrams as HTML files with integrated SVG graphics, or as high-resolution PNG and PDF images.
  • Use Case: Imagine you need to create a high-level overview of your company's IT infrastructure. Use this Skill to describe the system components and relationships, and generate a diagram that you can share with stakeholders.

Quick Start

To generate an architecture diagram, describe the system components and relationships, and use the architecture-diagram skill.

Frequently Asked Questions about architecture-diagram

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

FAQPage Schema
How do I convert text descriptions of system architectures into visual diagrams?▼

Generate architecture diagrams from plain text by describing system components and relationships to produce self-contained HTML+SVG files. The output includes embedded styling and supports light or dark theme customization.

Can I export HTML and SVG architecture diagrams as high-resolution images?▼

Export architecture diagrams as high-resolution PNG and PDF images using the built-in export toolbar. The generated HTML files contain integrated SVG graphics that support direct image and document export.

What is the best way to generate self-contained HTML and SVG files for IT infrastructure documentation?▼

Generate self-contained HTML and SVG files for IT infrastructure documentation by describing your system architecture in plain text. The output includes embedded styling and an export toolbar for sharing visual overviews with stakeholders.

Do I need any external dependencies to create architecture diagrams with light and dark themes?▼

No external dependencies are required to create architecture diagrams with light and dark themes. The Skill applies its internal design system rules for theme, color, and shapes directly within the generated HTML+SVG files.

How does text to diagram conversion handle theme and color customization for SVG graphics?▼

Text to diagram conversion handles theme and color customization by applying the rules defined in the SKILL.md design system. This ensures consistent visual styling across generated SVG graphics with support for both light and dark themes.

Related Skills

Explore More Design & Creative Skills→
SpaceZephyrSpaceZephyr
333

mermaid-generator

Convert plain text and workflows into Mermaid diagrams.

Community
Intermediate
emdashcodesemdashcodes
13

mermaid-diagram-to-image

Convert Mermaid diagrams into PNG, SVG, or PDF images using mermaid-cli.

Community
Intermediate
ag47-ptag47-pt
1

theme-factory

Apply curated color and typography themes to presentations, documents, and HTML artifacts.

Community
Intermediate
yamcodesyamcodes
138

excalidraw

Convert natural language descriptions into Excalidraw diagram JSON files.

Community
Intermediate