@arach/arc 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +60 -0
- package/dist/arc.es.js +9215 -0
- package/dist/arc.umd.js +172 -0
- package/dist/index.d.ts +152 -0
- package/package.json +81 -0
package/README.md
ADDED
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# Arc
|
|
2
|
+
|
|
3
|
+
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.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Visual Editor** - Drag-and-drop nodes, connect with arrows
|
|
8
|
+
- **Multiple Node Sizes** - Large, medium, small
|
|
9
|
+
- **Color Themes** - Violet, emerald, blue, amber, sky, zinc, rose, orange
|
|
10
|
+
- **Connector Styles** - Solid/dashed lines, labels, curved paths
|
|
11
|
+
- **Export Options** - TypeScript, JSON, SVG, PNG, shareable links
|
|
12
|
+
- **Interactive Canvas** - Infinite pan/zoom, grid snapping
|
|
13
|
+
- **Groups & Images** - Visual grouping, background images
|
|
14
|
+
- **Templates** - Quick-start layouts
|
|
15
|
+
|
|
16
|
+
## Getting Started
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
pnpm install
|
|
20
|
+
pnpm dev
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Export Format
|
|
24
|
+
|
|
25
|
+
Arc exports diagrams as clean TypeScript compatible with the `ArcDiagram` player component:
|
|
26
|
+
|
|
27
|
+
```typescript
|
|
28
|
+
import type { ArcDiagramData } from './ArcDiagram'
|
|
29
|
+
|
|
30
|
+
const diagram: ArcDiagramData = {
|
|
31
|
+
layout: { width: 800, height: 400 },
|
|
32
|
+
nodes: {
|
|
33
|
+
app: { x: 50, y: 50, size: 'l' },
|
|
34
|
+
api: { x: 300, y: 50, size: 'm' },
|
|
35
|
+
},
|
|
36
|
+
nodeData: {
|
|
37
|
+
app: { icon: 'Monitor', name: 'App', color: 'violet' },
|
|
38
|
+
api: { icon: 'Server', name: 'API', color: 'emerald' },
|
|
39
|
+
},
|
|
40
|
+
connectors: [
|
|
41
|
+
{ from: 'app', to: 'api', fromAnchor: 'right', toAnchor: 'left', style: 'http' }
|
|
42
|
+
],
|
|
43
|
+
connectorStyles: {
|
|
44
|
+
http: { color: 'amber', strokeWidth: 2, label: 'HTTP' }
|
|
45
|
+
},
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export default diagram
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Tech Stack
|
|
52
|
+
|
|
53
|
+
- React 19
|
|
54
|
+
- Vite 7
|
|
55
|
+
- TailwindCSS 4
|
|
56
|
+
- Lucide React (icons)
|
|
57
|
+
|
|
58
|
+
## License
|
|
59
|
+
|
|
60
|
+
MIT
|