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

Ready to run

npx skills add https://github.com/windyroad/agent-plugins --skill wr-c4-generate

💬 Prompt for ChatGPT / Claude Chat▼

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.