@arach/arc 0.2.4 → 0.3.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 +36 -14
- package/{dist → lib}/arc.es.js +8305 -8158
- package/lib/arc.umd.js +181 -0
- package/{dist → lib}/index.d.ts +27 -0
- package/package.json +16 -15
- package/dist/arc.umd.js +0 -181
package/README.md
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
# Arc
|
|
2
2
|
|
|
3
|
-
A visual diagram editor for creating architecture diagrams. Design
|
|
3
|
+
A visual diagram editor for creating architecture diagrams. Design visually, export as code.
|
|
4
|
+
|
|
5
|
+
|
|
4
6
|
|
|
5
7
|
## Features
|
|
6
8
|
|
|
@@ -20,34 +22,54 @@ pnpm install
|
|
|
20
22
|
pnpm dev
|
|
21
23
|
```
|
|
22
24
|
|
|
23
|
-
##
|
|
25
|
+
## Example Output
|
|
24
26
|
|
|
25
|
-
Arc exports diagrams as clean TypeScript
|
|
27
|
+
Arc exports diagrams as clean TypeScript. Here's a microservices architecture:
|
|
26
28
|
|
|
27
29
|
```typescript
|
|
28
|
-
import type { ArcDiagramData } from './ArcDiagram'
|
|
29
|
-
|
|
30
30
|
const diagram: ArcDiagramData = {
|
|
31
|
-
layout: { width:
|
|
31
|
+
layout: { width: 850, height: 340 },
|
|
32
32
|
nodes: {
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
client: { x: 40, y: 130, size: 'm' },
|
|
34
|
+
gateway: { x: 220, y: 130, size: 'l' },
|
|
35
|
+
auth: { x: 460, y: 40, size: 'm' },
|
|
36
|
+
api: { x: 460, y: 140, size: 'm' },
|
|
37
|
+
cache: { x: 460, y: 240, size: 's' },
|
|
38
|
+
db: { x: 680, y: 140, size: 'm' },
|
|
35
39
|
},
|
|
36
40
|
nodeData: {
|
|
37
|
-
|
|
38
|
-
|
|
41
|
+
client: { icon: 'Monitor', name: 'Client', subtitle: 'React App', color: 'violet' },
|
|
42
|
+
gateway: { icon: 'Server', name: 'API Gateway', subtitle: 'Express', description: 'Load balanced', color: 'emerald' },
|
|
43
|
+
auth: { icon: 'Shield', name: 'Auth', subtitle: 'JWT', color: 'amber' },
|
|
44
|
+
api: { icon: 'Code', name: 'API', subtitle: 'REST', color: 'blue' },
|
|
45
|
+
cache: { icon: 'Zap', name: 'Cache', color: 'sky' },
|
|
46
|
+
db: { icon: 'Database', name: 'PostgreSQL', subtitle: 'Primary', color: 'blue' },
|
|
39
47
|
},
|
|
40
48
|
connectors: [
|
|
41
|
-
{ from: '
|
|
49
|
+
{ from: 'client', to: 'gateway', fromAnchor: 'right', toAnchor: 'left', style: 'https' },
|
|
50
|
+
{ from: 'gateway', to: 'auth', fromAnchor: 'right', toAnchor: 'left', style: 'internal' },
|
|
51
|
+
{ from: 'gateway', to: 'api', fromAnchor: 'right', toAnchor: 'left', style: 'internal' },
|
|
52
|
+
{ from: 'gateway', to: 'cache', fromAnchor: 'bottomRight', toAnchor: 'left', style: 'cache' },
|
|
53
|
+
{ from: 'api', to: 'db', fromAnchor: 'right', toAnchor: 'left', style: 'sql' },
|
|
42
54
|
],
|
|
43
55
|
connectorStyles: {
|
|
44
|
-
|
|
56
|
+
https: { color: 'violet', strokeWidth: 2, label: 'HTTPS' },
|
|
57
|
+
internal: { color: 'emerald', strokeWidth: 2 },
|
|
58
|
+
cache: { color: 'sky', strokeWidth: 1, dashed: true },
|
|
59
|
+
sql: { color: 'blue', strokeWidth: 2, label: 'SQL' },
|
|
45
60
|
},
|
|
46
61
|
}
|
|
47
|
-
|
|
48
|
-
export default diagram
|
|
49
62
|
```
|
|
50
63
|
|
|
64
|
+
## Requirements
|
|
65
|
+
|
|
66
|
+
The `ArcDiagram` player component requires:
|
|
67
|
+
|
|
68
|
+
- **Tailwind CSS v3+** - Component uses Tailwind utility classes for styling
|
|
69
|
+
- **Default color palette** - The following colors must be available: `violet`, `emerald`, `blue`, `amber`, `sky`, `zinc`, `rose`, `orange`
|
|
70
|
+
|
|
71
|
+
If you're using a custom Tailwind config that restricts the color palette, ensure these colors are included.
|
|
72
|
+
|
|
51
73
|
## Tech Stack
|
|
52
74
|
|
|
53
75
|
- React 19
|