# Does ArcKit Support Angular? A Complete Guide to Documenting Angular Architectures

> ArcKit fully supports documenting Angular architectures with technology-agnostic diagrams even without direct code generation. Explore how to model and govern your Angular apps.

- Repository: [tractorjuice/arc-kit](https://github.com/tractorjuice/arc-kit)
- Tags: how-to-guide
- Published: 2026-04-19

---

**ArcKit does not provide Angular-specific code generation or scaffolding, but it fully supports documenting, modeling, and governing Angular applications through technology-agnostic architecture diagrams and requirements management.**

If you're working with the `tractorjuice/arc-kit` repository, you might wonder whether arc-kit supports Angular natively. While the toolkit doesn't ship Angular runtime libraries or component generators, it provides robust capabilities for modeling Angular front-ends within your architecture documentation. ArcKit treats **Angular** as a first-class technology component, enabling you to create C4 diagrams, trace requirements, and maintain governance standards for Angular-based systems.

## How ArcKit Handles Angular Applications

### Technology-Agnostic Architecture Modeling

ArcKit is designed to be **technology-agnostic**. According to the source code in [`src/arckit_cli/__init__.py`](https://github.com/tractorjuice/arc-kit/blob/main/src/arckit_cli/__init__.py), the CLI dispatches commands like `/arckit.diagram`, `/arckit.requirements`, and `/arckit.principles` without hardcoding specific frameworks. When you supply "Angular" as a technology parameter, ArcKit embeds that label into generated Markdown, traceability tables, and citation sections without requiring special handling or Angular-specific plugins.

### C4 Diagram Integration for Angular Components

ArcKit leverages **Mermaid C4 syntax** to visualize Angular applications within container diagrams. The reference file [`arckit-claude/skills/mermaid-syntax/references/c4.md`](https://github.com/tractorjuice/arc-kit/blob/main/arckit-claude/skills/mermaid-syntax/references/c4.md) contains example snippets (lines 317-322) that explicitly reference "JavaScript, Angular" as a container technology. This demonstrates that you can represent Angular SPAs, micro-frontends, or hybrid applications within ArcKit-generated architecture diagrams.

## Documenting Angular with ArcKit Commands

### Generating Architecture Diagrams

The `/arckit.diagram` command creates version-controlled architecture documentation using the template at [`arckit-claude/templates/architecture-diagram-template.md`](https://github.com/tractorjuice/arc-kit/blob/main/arckit-claude/templates/architecture-diagram-template.md). When you specify Angular in your prompt, the generated diagram includes Angular-specific technology labels and relationships.

```bash
/arckit.diagram "Create a container diagram for an online banking portal with an Angular front-end and Spring Boot API"

```

This produces a [`ARC-xxx-DIAG-yyy-v1.0.md`](https://github.com/tractorjuice/arc-kit/blob/main/ARC-xxx-DIAG-yyy-v1.0.md) file under `projects/<project>/diagrams/` containing:

```mermaid
C4Container
    title Container diagram for the Online Banking portal
    Container_Boundary(frontend, "Front-end") {
        Container(spa, "Web SPA", "JavaScript, Angular", "Customer-facing UI")
    }
    Container_Boundary(backend, "Back-end") {
        Container(api, "API Layer", "Java, Spring Boot", "Business logic & data services")
    }
    Rel(spa, api, "HTTPS/JSON", "Calls to retrieve account data")

```

### Capturing Requirements and Principles

Use `/arckit.requirements` to generate traceable functional requirements that explicitly reference Angular:

```bash
/arckit.requirements "Build a responsive banking portal using Angular for the front-end"

```

The resulting document includes:

```markdown

## Functional Requirements

- **FR-001**: The system shall present a responsive UI built with **Angular** that allows customers to view account balances, transfer funds, and manage cards.
- **FR-002**: The Angular front-end shall consume REST APIs following the OpenAPI specification.

```

Similarly, `/arckit.principles` captures architectural decisions and constraints specific to Angular implementations, such as state management patterns or component design principles.

## Key Implementation Files for Angular Support

| Feature | File Path | Purpose |
|---------|-----------|---------|
| **C4 Diagram Reference** | [`arckit-claude/skills/mermaid-syntax/references/c4.md`](https://github.com/tractorjuice/arc-kit/blob/main/arckit-claude/skills/mermaid-syntax/references/c4.md) | Contains example snippets referencing "JavaScript, Angular" for container definitions (lines 317-322). |
| **Diagram Template** | [`arckit-claude/templates/architecture-diagram-template.md`](https://github.com/tractorjuice/arc-kit/blob/main/arckit-claude/templates/architecture-diagram-template.md) | Generic template used to generate Angular-specific architecture diagrams. |
| **Skill Definition** | [`arckit-claude/skills/mermaid-syntax/SKILL.md`](https://github.com/tractorjuice/arc-kit/blob/main/arckit-claude/skills/mermaid-syntax/SKILL.md) | Registers the Mermaid diagram capability that processes Angular technology labels. |
| **CLI Command Dispatch** | [`src/arckit_cli/__init__.py`](https://github.com/tractorjuice/arc-kit/blob/main/src/arckit_cli/__init__.py) | Handles `/arckit.diagram`, `/arckit.requirements`, and `/arckit.principles` commands with technology-agnostic parameters. |
| **User Documentation** | [`docs/guides/diagram.md`](https://github.com/tractorjuice/arc-kit/blob/main/docs/guides/diagram.md) | Guides users on creating diagrams applicable to Angular architectures. |

## Summary

- **ArcKit supports Angular indirectly** through technology-agnostic documentation and governance tools rather than code generation.
- **Use `/arckit.diagram`** with C4/Mermaid syntax to model Angular containers and components within system architectures.
- **Reference [`arckit-claude/skills/mermaid-syntax/references/c4.md`](https://github.com/tractorjuice/arc-kit/blob/main/arckit-claude/skills/mermaid-syntax/references/c4.md)** for concrete examples of Angular-specific diagram notation.
- **Generate requirements and principles** using standard ArcKit commands, supplying "Angular" as the technology parameter to produce traceable documentation.
- **Leverage generic templates** like [`arckit-claude/templates/architecture-diagram-template.md`](https://github.com/tractorjuice/arc-kit/blob/main/arckit-claude/templates/architecture-diagram-template.md) to create version-controlled Angular architecture records.

## Frequently Asked Questions

### Does ArcKit generate Angular code or provide scaffolding?

No. ArcKit does not generate Angular components, services, modules, or configuration files. It functions strictly as an architecture documentation and governance toolkit that treats Angular as a technology label within diagrams and requirements, without shipping Angular-specific code generation capabilities.

### Can I create C4 diagrams for Angular micro-frontends?

Yes. The C4 diagram skill in [`arckit-claude/skills/mermaid-syntax/references/c4.md`](https://github.com/tractorjuice/arc-kit/blob/main/arckit-claude/skills/mermaid-syntax/references/c4.md) supports container-level diagrams where you define Angular applications as containers with the technology field set to "JavaScript, Angular" or "TypeScript, Angular". This approach works for single-page applications, monolithic Angular front-ends, and distributed micro-frontend architectures.

### How do I reference Angular in ArcKit requirements documents?

When executing the `/arckit.requirements` command, include "Angular" in your natural language prompt. For example: `/arckit.requirements "Build a customer portal using Angular"`. The generated document will automatically embed Angular-specific functional requirements and traceability references without requiring additional configuration or templates.

### Is there Angular-specific documentation in the ArcKit repository?

While there are no dedicated Angular tutorials or guides, the file [`arckit-claude/skills/mermaid-syntax/references/c4.md`](https://github.com/tractorjuice/arc-kit/blob/main/arckit-claude/skills/mermaid-syntax/references/c4.md) contains concrete examples demonstrating how to document Angular components within C4 diagrams. Additionally, [`docs/guides/diagram.md`](https://github.com/tractorjuice/arc-kit/blob/main/docs/guides/diagram.md) provides general guidance applicable to Angular architectures, and the generic templates work seamlessly with Angular-specific inputs.