architecture-diagram
Architecture Diagram creates publication-ready system topology visualizations in standalone HTML format. Describe your infrastructure, cloud setup, or network design in plain language, and the skill generates a dark-themed SVG diagram with semantic color coding for different component types.
Architecture Diagram generates professional system architecture visualizations as self-contained HTML files from plain-language descriptions.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-05-13
Architecture Diagram generates professional system architecture visualizations as self-contained HTML files from plain-language descriptions. Architecture Diagram creates publication-ready system topology visualizations in standalone HTML format. Describe your infrastructure, cloud setup, or network design in plain language, and the skill generates a dark-themed SVG diagram with semantic color coding for different component types.
Use it when
- Yes.
- Architecture Diagram generates self-contained HTML diagrams with export capabilities.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
Cocoon-AI/architecture-diagram-generator/architecture-diagram · repository language: HTML
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create architecture diagram visualizations?
Architecture Diagram generates publication-ready system topology visualizations from plain language descriptions. Simply describe your infrastructure, cloud setup, or network design, and the skill creates a dark-themed SVG diagram with semantic color coding for different component types. The output is self-contained HTML that requires no external dependencies.
Can Architecture Diagram visualize cloud infrastructure and AWS topology layouts?
Yes. Architecture Diagram specializes in visualizing cloud infrastructure and AWS topology layouts. Describe your cloud architecture including services, regions, and connections, and the skill generates a semantic diagram with appropriate visual representations for AWS components and their relationships.
What export options does Architecture Diagram support?
Architecture Diagram generates self-contained HTML diagrams with export capabilities. You can export your diagrams as PNG or PDF formats, making them suitable for presentations, documentation, and sharing with stakeholders. The HTML format ensures compatibility across platforms.
Can I use Architecture Diagram for microservices and security architecture?
Yes. Architecture Diagram supports designing network security and microservices architecture visuals. You can describe complex microservices topologies, security boundaries, and network flows, and the skill will generate clear visual representations with semantic color coding to distinguish different component types and their interactions.
What license does Architecture Diagram use?
Architecture Diagram is released under the MIT license, allowing free use, modification, and distribution in both personal and commercial projects with minimal restrictions.
Can I create system design diagrams for technical documentation?
Yes. Architecture Diagram creates professional system design diagrams ideal for technical documentation. Whether you need infrastructure as code diagrams, database architecture visualizations, or enterprise architecture layouts, describe your system and the skill generates publication-ready dark-themed SVG visualizations with semantic component styling.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Architecture Diagram Skill
Create professional technical architecture diagrams as self-contained HTML files with inline SVG graphics and CSS styling.
> Version 1.1 · MIT License · Authored by Cocoon AI
Design System
Color Palette
Use these semantic colors for component types:
| Component Type | Fill (rgba) | Stroke |
|---|---|---|
| Frontend | rgba(8, 51, 68, 0.4) |
#22d3ee (cyan-400) |
| Backend | rgba(6, 78, 59, 0.4) |
#34d399 (emerald-400) |
| Database | rgba(76, 29, 149, 0.4) |
#a78bfa (violet-400) |
| AWS/Cloud | rgba(120, 53, 15, 0.3) |
#fbbf24 (amber-400) |
| Security | rgba(136, 19, 55, 0.4) |
#fb7185 (rose-400) |
| Message Bus | rgba(251, 146, 60, 0.3) |
#fb923c (orange-400) |
| External/Generic | rgba(30, 41, 59, 0.5) |
#94a3b8 (slate-400) |
Typography
Use JetBrains Mono for all text (monospace, technical aesthetic): ```html <link
(truncated - see the full file via the links below)
File tree — 2 files
architecture-diagram/SKILL.md
architecture-diagram/resources/template.html
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create professional architecture diagrams for system design documentation”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Architecture Diagram creates polished technical diagrams rendered as standalone HTML files with embedded SVG and CSS. It uses a dark color scheme with semantic styling for different component types—frontend, backend, database, cloud services, security, and messaging systems—making complex system layouts clear and visually consistent.
Transform workflow steps into professional PNG diagrams with connected nodes and directional arrows. Describe your process in plain text, choose a layout direction and visual style, and get a ready-to-share diagram in landscape, square, or social card formats.
Architecture Diagram transforms system descriptions into standalone, browser-ready HTML files with embedded SVG visuals. It handles technical architecture, infrastructure, deployment topology, and data-flow diagrams with semantic grouping and clear connection flows, outputting polished dark-themed artifacts you can open directly without external tools.
Baoyu Diagram generates standalone SVG diagrams with a dark design system and semantic color palette. It supports architecture diagrams, flowcharts, sequence diagrams, mind maps, timelines, and other technical visualizations, each with purpose-built layout rules and component patterns.
Fireworks Tech Graph turns descriptions of systems and engineering concepts into polished technical diagrams—architecture charts, data flows, sequence diagrams, C4 models, and more—then exports them as SVG, PNG, interactive HTML, or animated GIF. The skill validates geometry and syntax automatically, supports multiple diagram styles, and works offline.
Svg Diagram creates polished structural diagrams—flowcharts, architecture charts, sequence diagrams, hierarchies, and more—by outputting HTML blocks containing SVG. The skill renders output directly in a sandboxed iframe, offering more refined aesthetics and flexible layout control than comparable tools.
More skills architecture-diagram (MIT) · architecture-diagram (MIT) · architecture-diagram (Apache-2.0) · Galaxy Workflow Viz (unlicensed) · Diagram Design (NOASSERTION) · diagram-design (MIT)