@arach/arc-viewer 0.4.4
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 +101 -0
- package/dist/index.cjs +3062 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +639 -0
- package/dist/index.d.ts +639 -0
- package/dist/index.js +3017 -0
- package/dist/index.js.map +1 -0
- package/package.json +57 -0
package/README.md
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
# @arach/arc-viewer
|
|
2
|
+
|
|
3
|
+
Native React renderers for diagrams as code, including typed architecture
|
|
4
|
+
diagrams and interactive Mermaid sequences.
|
|
5
|
+
|
|
6
|
+
## Installation
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install @arach/arc-viewer
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Usage
|
|
13
|
+
|
|
14
|
+
```tsx
|
|
15
|
+
import { ArcDiagram } from '@arach/arc-viewer'
|
|
16
|
+
import type { ArcDiagramData } from '@arach/arc-viewer'
|
|
17
|
+
|
|
18
|
+
const diagram: ArcDiagramData = {
|
|
19
|
+
id: 'MY.DIAGRAM.001',
|
|
20
|
+
layout: { width: 600, height: 300 },
|
|
21
|
+
nodes: {
|
|
22
|
+
frontend: { x: 50, y: 100, size: 'm' },
|
|
23
|
+
backend: { x: 250, y: 100, size: 'm' },
|
|
24
|
+
database: { x: 450, y: 100, size: 'm' },
|
|
25
|
+
},
|
|
26
|
+
nodeData: {
|
|
27
|
+
frontend: { icon: 'Monitor', name: 'Frontend', color: 'violet' },
|
|
28
|
+
backend: { icon: 'Server', name: 'Backend', color: 'emerald' },
|
|
29
|
+
database: { icon: 'Database', name: 'Database', color: 'blue' },
|
|
30
|
+
},
|
|
31
|
+
connectors: [
|
|
32
|
+
{ from: 'frontend', to: 'backend', fromAnchor: 'right', toAnchor: 'left', style: 'api' },
|
|
33
|
+
{ from: 'backend', to: 'database', fromAnchor: 'right', toAnchor: 'left', style: 'db' },
|
|
34
|
+
],
|
|
35
|
+
connectorStyles: {
|
|
36
|
+
api: { color: 'violet', strokeWidth: 2, label: 'REST' },
|
|
37
|
+
db: { color: 'blue', strokeWidth: 2, label: 'SQL' },
|
|
38
|
+
},
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
function App() {
|
|
42
|
+
return (
|
|
43
|
+
<ArcDiagram
|
|
44
|
+
data={diagram}
|
|
45
|
+
mode="light"
|
|
46
|
+
theme="default"
|
|
47
|
+
interactive={true}
|
|
48
|
+
/>
|
|
49
|
+
)
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Mermaid Sequences
|
|
54
|
+
|
|
55
|
+
Arc parses canonical Mermaid source into a typed document and renders it with a
|
|
56
|
+
native player. The source remains reviewable while Arc owns the theme,
|
|
57
|
+
interaction, and playback controls.
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
import { ArcMermaidPlayer } from '@arach/arc-viewer'
|
|
61
|
+
|
|
62
|
+
const source = `sequenceDiagram
|
|
63
|
+
participant App
|
|
64
|
+
participant API
|
|
65
|
+
App->>API: Load architecture
|
|
66
|
+
API-->>App: Typed diagram`
|
|
67
|
+
|
|
68
|
+
export function Sequence() {
|
|
69
|
+
return <ArcMermaidPlayer source={source} mode="light" />
|
|
70
|
+
}
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Props
|
|
74
|
+
|
|
75
|
+
| Prop | Type | Default | Description |
|
|
76
|
+
|------|------|---------|-------------|
|
|
77
|
+
| `data` | `ArcDiagramData` | required | The diagram configuration |
|
|
78
|
+
| `mode` | `'light' \| 'dark'` | `'dark'` | Light or dark appearance |
|
|
79
|
+
| `theme` | `ThemeId` | `'default'` | Color palette (`default`, `warm`, `cool`, `mono`) |
|
|
80
|
+
| `interactive` | `boolean` | `true` | Enable zoom/pan controls |
|
|
81
|
+
| `className` | `string` | `''` | Additional CSS classes |
|
|
82
|
+
|
|
83
|
+
## Themes
|
|
84
|
+
|
|
85
|
+
- **default** - Clean, neutral colors
|
|
86
|
+
- **warm** - Soft, editorial warmth
|
|
87
|
+
- **cool** - Crisp, modern blues
|
|
88
|
+
- **mono** - Elegant grayscale
|
|
89
|
+
|
|
90
|
+
## Requirements
|
|
91
|
+
|
|
92
|
+
- React 18+
|
|
93
|
+
- Tailwind CSS (for styling classes)
|
|
94
|
+
|
|
95
|
+
## Editor
|
|
96
|
+
|
|
97
|
+
To visually design diagrams, use [@arach/arc-editor](https://www.npmjs.com/package/@arach/arc-editor).
|
|
98
|
+
|
|
99
|
+
## License
|
|
100
|
+
|
|
101
|
+
MIT
|