skills.rest
windyroad
windyroadOFFICIAL
Explore all skills by this author →
WebsiteGitHub

wr-c4:generate

Regenerate C4 architecture diagrams from TypeScript source code.

4|1|Updated Apr 7, 2026
Search Tags:#automation#architecture#mermaid#diagrams#code-generation#c4
One-click install
npx skills add https://github.com/windyroad/agent-plugins --skill wr-c4-generate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wr-c4:generate
Source: https://github.com/windyroad/agent-plugins/tree/main/packages/c4/skills/generate
Command: npx skills add https://github.com/windyroad/agent-plugins --skill wr-c4-generate

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Regenerate C4 architecture diagrams (C3 component + C4 code views) from source code to maintain diagrams in sync with the codebase.

Core Features & Use Cases

  • Generates up-to-date C3 and C4 diagrams by analyzing TypeScript source and dependencies.
  • Outputs artifacts to docs/architecture/generated, including components.json and mermaid diagrams for documentation pipelines.
  • Use Case: When code changes introduce new components or modify dependencies, regenerate visuals to reflect the current architecture.

Quick Start

Run the C4 generator to refresh architecture diagrams from your codebase.

Frequently Asked Questions about wr-c4:generate

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

FAQPage Schema
How do I automatically generate C4 architecture diagrams from TypeScript source code?▼

To automatically generate C4 architecture diagrams from TypeScript source code, run the included c4-generate.mjs script from your project root to analyze dependencies and output updated visuals.

How do I keep mermaid diagrams in sync with my codebase after refactoring?▼

To keep mermaid diagrams in sync with your codebase after refactoring, regenerate the C4 component and code views from the updated TypeScript source to reflect the current architecture.

Does this C4 diagram generator modify my existing source files?▼

No, this C4 diagram generator does not modify your source files. It analyzes the TypeScript code and outputs the generated artifacts exclusively under the docs/architecture/generated directory.

Can I use this tool to generate C3 component views for my TypeScript project?▼

Yes, you can use this tool to generate C3 component views for your TypeScript project. It analyzes your documented architecture and source dependencies to output the required visuals.

What is the best way to automate architecture diagram generation for documentation pipelines?▼

The best way to automate architecture diagram generation for documentation pipelines is to run the c4-generate.mjs script to output updated mermaid diagrams and components.json artifacts automatically after code changes.

Related Skills

Explore More Software Engineering Skills→
leifericfleifericf
5

bootstrap-project

Detect project language stacks and generate project descriptors via the agentic CLI.

Community
Intermediate
Anders-planckAnders-planck

mermaid

Generate Mermaid diagram syntax from natural language and render SVG/PNG outputs.

Community
Intermediate
odylithodylith
34

odylith-diagram-catalog

Synchronize Atlas diagram catalogs with latest Odylith source diagrams.

Official
Intermediate
Hack23Hack23
9

c4-modeling

Model software systems with Mermaid-based C4 diagrams.

Official
Intermediate