# Arc
### Architecture diagrams as code.
Arc turns typed, diffable config into clean, themeable architecture diagrams.
Design in the visual studio, render with React, or export as **TypeScript, JSON,
SVG, PNG, GIF, MP4, or crisp ASCII** — with a CLI, generated JSON Schema,
Mermaid import, and an MCP server so AI agents can author diagrams too. The diagram lives with
the system it describes.
[](https://www.npmjs.com/package/@arach/arc)
[](./LICENSE)
[](./src/types/diagram.ts)
Not a screenshot of a drawing tool — that's the config in Example Output, rendered by <ArcDiagram /> in the Engineering theme.
---
## Install
```bash
npm install @arach/arc
# or: bun add @arach/arc · pnpm add @arach/arc · yarn add @arach/arc
```
`react` and `react-dom` are peer dependencies. Arc bundles its icon renderer and
has no production dependencies of its own.
## Quick Start
Render any diagram config as a polished, interactive component:
```tsx
import { ArcDiagram } from '@arach/arc'
import type { ArcDiagramData } from '@arach/arc'
export function Architecture() {
return (
