@arach/arc 0.2.5 → 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 +27 -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,32 +22,43 @@ 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
|
|
|
51
64
|
## Requirements
|