skills.rest
arach
arachCOMMUNITY
Explore all skills by this author →
Website𝕏@arachGitHub

arc-diagram

Generate and modify architecture diagrams in the Arc JSON/TypeScript format.

7|Updated Jan 11, 2026
Search Tags:#typescript#architecture#code generation#visualization#diagrams#arc
One-click install
npx skills add https://github.com/arach/arc --skill arc-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: arc-diagram
Source: https://github.com/arach/arc/tree/main/docs
Command: npx skills add https://github.com/arach/arc --skill arc-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation and modification of architecture diagrams, ensuring they are stored as version-controlled code assets rather than disconnected images.

Core Features & Use Cases

  • Diagram Generation: Create diagrams from natural language descriptions.
  • Diagram Modification: Add, remove, or update nodes and connectors.
  • Styling: Apply themes, colors, and styles to diagrams.
  • Exporting: Convert diagrams to TypeScript, JSON, SVG, or PNG.
  • Use Case: You need to document a new microservices architecture. Describe the services and their connections, and the Skill will generate a complete Arc diagram configuration.

Quick Start

Create an Arc diagram showing a simple three-tier architecture with frontend, backend, and database nodes.

Frequently Asked Questions about arc-diagram

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

FAQPage Schema
How do I generate architecture diagrams from natural language descriptions?▼

You can generate architecture diagrams by providing a natural language description of your services and their connections. The tool translates this input into a structured Arc diagram configuration, producing version-controlled code assets.

Can I update nodes and connectors in an existing architecture diagram?▼

Yes, you can modify existing architecture diagrams by adding, removing, or updating nodes and connectors. The tool manages these updates using the declarative Arc JSON or TypeScript format.

What is the best way to store architecture diagrams as version-controlled code?▼

Storing architecture diagrams as version-controlled code is achieved by using the Arc declarative JSON or TypeScript format. This approach replaces disconnected images with structured, modifiable code assets.

Does this diagram generation format support exporting to SVG and TypeScript?▼

Yes, the diagram generation format supports exporting to SVG and TypeScript, alongside JSON and PNG. This allows you to convert the declarative Arc configurations into various code and image formats.

How do I apply themes and colors to TypeScript architecture diagrams?▼

You apply themes and colors to TypeScript architecture diagrams by using the styling features within the Arc declarative format. The tool provides context on available colors and node properties to customize the visual output.

Related Skills

Explore More Software Engineering Skills→
NanfordNanford
16

svg-architecture-diagram

Translate system descriptions into structured SVG architecture diagrams with JSON output.

Community
Advanced
diegomarinodiegomarino
56

d2-render

Render .txt and .md D2 diagrams to SVG or PNG files and folders.

Community
Intermediate
L-LesterYuL-LesterYu
51

byterover

Organize project architecture, decisions, and patterns into a structured knowledge tree.

Community
Intermediate
TeamSparkAITeamSparkAI
18

mcpgraph

Build no-code MCP servers using YAML graphs with JSONata and JSON Logic.

Official
Advanced