https://github.com/arach/arc
A diagram editor and declarative rendering engine
https://github.com/arach/arc
Last synced: 5 months ago
JSON representation
A diagram editor and declarative rendering engine
- Host: GitHub
- URL: https://github.com/arach/arc
- Owner: arach
- Created: 2026-01-11T03:56:30.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2026-01-11T06:35:26.000Z (5 months ago)
- Last Synced: 2026-01-11T12:12:01.894Z (5 months ago)
- Language: TypeScript
- Size: 190 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# Arc
A visual diagram editor for creating architecture diagrams. Design system architectures with a drag-and-drop interface, then export to clean TypeScript for use in documentation sites.
## Features
- **Visual Editor** - Drag-and-drop nodes, connect with arrows
- **Multiple Node Sizes** - Large, medium, small
- **Color Themes** - Violet, emerald, blue, amber, sky, zinc, rose, orange
- **Connector Styles** - Solid/dashed lines, labels, curved paths
- **Export Options** - TypeScript, JSON, SVG, PNG, shareable links
- **Interactive Canvas** - Infinite pan/zoom, grid snapping
- **Groups & Images** - Visual grouping, background images
- **Templates** - Quick-start layouts
## Getting Started
```bash
pnpm install
pnpm dev
```
## Export Format
Arc exports diagrams as clean TypeScript compatible with the `ArcDiagram` player component:
```typescript
import type { ArcDiagramData } from './ArcDiagram'
const diagram: ArcDiagramData = {
layout: { width: 800, height: 400 },
nodes: {
app: { x: 50, y: 50, size: 'l' },
api: { x: 300, y: 50, size: 'm' },
},
nodeData: {
app: { icon: 'Monitor', name: 'App', color: 'violet' },
api: { icon: 'Server', name: 'API', color: 'emerald' },
},
connectors: [
{ from: 'app', to: 'api', fromAnchor: 'right', toAnchor: 'left', style: 'http' }
],
connectorStyles: {
http: { color: 'amber', strokeWidth: 2, label: 'HTTP' }
},
}
export default diagram
```
## Tech Stack
- React 19
- Vite 7
- TailwindCSS 4
- Lucide React (icons)
## License
MIT