architecture-diagram

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

Updated Jul 9, 2026

Search Tags:#architecture #HTML #SVG #export #diagram

Ready to run

npx skills add https://github.com/samykabu/sanduq --skill architecture-diagram-samykabu

💬 Prompt for ChatGPT / Claude Chat▼

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.