TS Tsx JS Jsx Architecture Diagrams — Development skill for Claude Code

ts-tsx-js-jsx-architecture-diagrams

Reusable Claude Code skill that generates architecture diagrams for any TypeScript or JavaScript project (`.ts/.tsx` and `.js/.jsx`; React / React Native / Expo supported, but not required):

• Class diagrams — interfaces / classes / type contracts (tplant, TypeScript compiler API).
• Component diagrams — each functional component as a «component» box with its authored props, plus "renders" arrows between components (a ts-morph extractor).
• Dependency graphs — the module import graph, "what imports what" (dependency-cruiser JSON → PlantUML component diagram, collapsed to folder granularity).

All three → PlantUML → SVG/PNG, rendered **offline** via a bundled `plantuml.jar` (no Graphviz).

Invoke

• Slash command: /ts-tsx-js-jsx-architecture-diagrams [project-dir]
• Or ask Claude for "class / component / dependency diagrams", "UML", or an "architecture view" of a TS/TSX/JS/JSX project (the skill auto-triggers).
• Or run the script directly:

node "~/.claude/skills/ts-tsx-js-jsx-architecture-diagrams/generate.mjs"  [--out ] [--format svg,png]

Flags

Flag	Default	Meaning
projectDir (positional)	cwd	Project root to scan
--out	/docs/uml	Output directory
--format	svg,png	svg, png, or none (.puml only)
--include	—	Extra top-level source dirs (comma list)
--exclude	—	Source dirs to skip (comma list)
--no-class	off	Skip the class-diagram pass
--no-components	off	Skip the component-diagram pass
--no-deps	off	Skip the dependency-graph pass
--only-class	off	Run only the class pass
--only-components	off	Run only the component pass
--only-deps	off	Run only the dependency-graph pass

Requirements

• Node (any recent version).
• Java on PATH — only for rendering images; used by all three