architecture-svg

Generate dark-theme SVG architecture diagrams for GitHub READMEs.

2|1|Updated Mar 4, 2026
One-click install
npx skills add https://github.com/cncoder/oneclaw --skill architecture-svg
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: architecture-svg
Source: https://github.com/cncoder/oneclaw/tree/main/skills/architecture-svg
Command: npx skills add https://github.com/cncoder/oneclaw --skill architecture-svg

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This tool generates professional, GitHub-ready architecture diagrams for READMEs, enabling quick visualization of project structure without manual drawing.

Core Features & Use Cases

  • Generates layered, dark-theme SVG diagrams that render natively on GitHub READMEs.
  • Analyzes project context to identify layers (clients, edge, API, core logic, data) and depicts components with clear labels.
  • Useful for documenting system architecture, infrastructure topology, and service relationships within a repository.

Quick Start

Provide a repository context or project description and I will generate a ready-to-use architecture SVG for the README.

Frequently Asked Questions about architecture-svg

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

FAQPage Schema
How do I generate an architecture diagram for my GitHub README?

To generate an architecture diagram for a GitHub README, provide your project context or repository description. The tool analyzes architectural layers and components to produce a ready-to-use SVG file for your documentation.

What is the best way to visualize project architecture in an SVG file?

Visualizing project architecture in an SVG file is best achieved by generating a layered, dark-theme diagram. This approach identifies system layers like clients, API, and core logic to depict component relationships clearly for README documentation.

Can I use a dark-theme SVG diagram natively on GitHub?

Yes, you can use a dark-theme SVG diagram natively on GitHub. The generated SVG adheres to a prescribed GitHub dark-theme style, ensuring it renders correctly within repository README files without manual adjustments.

Does the architecture diagram tool require manual drawing?

No, the architecture diagram tool does not require manual drawing. It automatically analyzes project context to identify system topology and infra layouts, generating a professional SVG file at docs/architecture.svg directly.

What components can I document using an SVG architecture diagram?

You can document various components using an SVG architecture diagram, including system topology, infrastructure layouts, and component relationships. It analyzes project context to identify layers like edge, API, core logic, and data.