architecture-diagram
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.
Architecture Diagram generates self-contained HTML architecture diagrams with inline SVG from your system description.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
Architecture Diagram generates self-contained HTML architecture diagrams with inline SVG from your system description. 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.
Use it when
- Yes.
- Yes.
Verify before relying
Read SKILL.md below before installing (4 files). Open directory: indexed for reading, not audited.
Install
CoWork-OS/CoWork-OS/architecture-diagram · repository language: TypeScript
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
What does architecture-diagram do?
Architecture Diagram transforms system descriptions into standalone, browser-ready HTML files with embedded SVG visuals. It generates 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.
Can I create architecture diagram HTML from a system description?
Yes. Architecture Diagram's primary function is to generate self-contained HTML architecture diagrams directly from your system description. You provide the technical details, and it produces a complete, browser-viewable file with embedded SVG that requires no external dependencies or setup.
Does architecture-diagram visualize cloud infrastructure and deployment topology?
Yes. Architecture Diagram specializes in visualizing cloud infrastructure and deployment topology. It can map out your cloud architecture, show deployment relationships, and render infrastructure layouts with semantic grouping to make complex systems easy to understand at a glance.
Can architecture-diagram create data flow and security diagrams?
Yes. Architecture Diagram supports creating data flow and security architecture diagrams alongside standard system architecture visuals. It handles the semantic representation of how data moves through your system and how security boundaries are established.
What format does architecture-diagram output?
Architecture Diagram outputs standalone HTML files with inline SVG graphics. Each file is self-contained and can be opened directly in any modern browser without requiring external tools, plugins, or internet connectivity. The diagrams use a polished dark theme for professional presentation.
Can I generate architecture diagrams from my codebase?
Yes. Architecture Diagram can convert your codebase into polished system architecture visuals. Provide your code structure or technical stack details, and it generates a corresponding architecture diagram that reflects your system's components and their relationships.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Architecture Diagram
Purpose
Turn an architecture description or inspected codebase into a self-contained HTML diagram with inline SVG that opens directly in any modern browser.
Routing
- Use when: Use when the user asks to create a technical architecture diagram, infrastructure map, deployment topology, security/data-flow visual, or a polished system diagram artifact they can open in a browser.
- Do not use when: Do not use for text-only summaries, requests that require Mermaid or another explicit diagram format, or non-technical visual design tasks such as UI mockups and marketing graphics.
- Outputs: A standalone HTML architecture diagram plus supporting plan and summary artifacts.
- Success criteria: The final HTML is readable, self-contained, faithful to the described or inspected system, and free of obvious layout collisions.
Trigger Examples
Positive
- Create an architecture diagram for this SaaS stack and give me an HTML file.
- Turn this codebase into
(truncated - see the full file via the links below)
File tree — 4 files
resources/skills/architecture-diagram/LICENSE.txt
resources/skills/architecture-diagram/SKILL.md
resources/skills/architecture-diagram/assets/template.html
resources/skills/architecture-diagram/references/full-guidance.md
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 › “Generate a self-contained HTML architecture diagram from system description”
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 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.
Create polished technical architecture diagrams rendered as standalone HTML with embedded SVG graphics and a dark aesthetic. The skill generates diagrams for system architecture, cloud infrastructure, microservices, and deployment topologies using semantic color coding and a grid-backed design system. Output is a single file that opens in any browser offline.
Create polished technical architecture diagrams in dark mode with semantic color coding—cyan for frontend, emerald for backend, violet for databases, and more. Output renders as a standalone HTML file with inline SVG, requiring no external tools or dependencies. Ideal for software systems, cloud infrastructure, microservices, and deployment topology.
Generate polished technical architecture diagrams rendered as self-contained HTML with embedded SVG graphics. The skill produces dark-themed visualizations ideal for system topology, cloud infrastructure, microservices, and deployment layouts, with semantic color coding for different component types. Output as a single HTML file that opens directly in any browser—no external dependencies, APIs, or rendering libraries required.
Flow Diagram generates a single self-contained HTML file that visualizes system architectures and request/response flows with a 2-pane layout: an interactive diagram on the left with zoom, pan, and fit-to-view controls, and an explainer sidebar on the right. Click any flow to highlight it with traveling dots along arrows, dim everything else, and reveal its details. Two-way arrows (solid outbound, dashed return) carry numbered step badges colored by semantic meaning—red for auth, purple for scheduled tasks, amber for data pipelines.
Concept Diagrams produces production-quality SVG visuals with a unified flat, minimal design system—ideal for physics setups, anatomy, floor plans, and process flows. Output renders as a single self-contained HTML file with automatic light and dark mode support in any modern browser, requiring no server or dependencies.
More skills Drawio (unlicensed) · archify (MIT) · project-structure (MIT) · pi-context-pipeline (MIT)