@arach/arc 0.4.3 → 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 +35 -10
- package/lib/arc.es.js +38 -32973
- package/lib/arc.umd.js +266 -144
- package/lib/index.d.ts +18 -7
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
|
|
3
|
+
<img src="https://raw.githubusercontent.com/arach/arc/master/public/arc-mark.svg" alt="Arc" width="52" height="52" />
|
|
4
|
+
|
|
3
5
|
# Arc
|
|
4
6
|
|
|
5
|
-
###
|
|
7
|
+
### Diagrams as code.
|
|
6
8
|
|
|
7
|
-
Arc
|
|
8
|
-
|
|
9
|
-
crisp ASCII**.
|
|
10
|
-
straight to text for a README. Same diagram, everywhere.
|
|
9
|
+
Arc turns typed, diffable config into clean, themeable architecture diagrams.
|
|
10
|
+
Design in the visual editor, render with React, or export as **TypeScript, JSON,
|
|
11
|
+
SVG, PNG, or crisp ASCII**. The diagram lives with the system it describes.
|
|
11
12
|
|
|
12
13
|
[](https://www.npmjs.com/package/@arach/arc)
|
|
13
14
|
[](./LICENSE)
|
|
14
15
|
[](./lib/index.d.ts)
|
|
15
16
|
|
|
16
|
-
|
|
17
|
+
|
|
17
18
|
|
|
18
19
|
<sub>Not a screenshot of a drawing tool — that's the config in <a href="#example-output">Example Output</a>, rendered by <code><ArcDiagram /></code> in the Engineering theme.</sub>
|
|
19
20
|
|
|
@@ -78,7 +79,7 @@ git clone https://github.com/arach/arc && cd arc
|
|
|
78
79
|
bun install && bun dev # → http://localhost:5188/editor
|
|
79
80
|
```
|
|
80
81
|
|
|
81
|
-
|
|
82
|
+
|
|
82
83
|
|
|
83
84
|
Design on the canvas, then **Export** to TypeScript, JSON, SVG, PNG, or a
|
|
84
85
|
shareable link — and drop the result straight into `<ArcDiagram />`.
|
|
@@ -94,6 +95,30 @@ shareable link — and drop the result straight into `<ArcDiagram />`.
|
|
|
94
95
|
- **Groups & Images** - Visual grouping, background images
|
|
95
96
|
- **Templates** - Quick-start layouts
|
|
96
97
|
|
|
98
|
+
## Native Mermaid Sequences
|
|
99
|
+
|
|
100
|
+
`@arach/arc-viewer` turns canonical Mermaid `sequenceDiagram` source into a
|
|
101
|
+
typed Arc document and a native, interactive React player—without embedding the
|
|
102
|
+
generic Mermaid runtime.
|
|
103
|
+
|
|
104
|
+
```bash
|
|
105
|
+
npm install @arach/arc-viewer
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
import { ArcMermaidPlayer } from '@arach/arc-viewer'
|
|
110
|
+
|
|
111
|
+
const source = `sequenceDiagram
|
|
112
|
+
participant App
|
|
113
|
+
participant API
|
|
114
|
+
App->>API: Load architecture
|
|
115
|
+
API-->>App: Typed diagram`
|
|
116
|
+
|
|
117
|
+
export function Sequence() {
|
|
118
|
+
return <ArcMermaidPlayer source={source} mode="light" />
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
97
122
|
## Themes
|
|
98
123
|
|
|
99
124
|
One diagram, several drafting grammars. The nodes and palette stay the same —
|
|
@@ -101,15 +126,15 @@ what changes is the grid system, edge treatment, type, and geometry. Here's
|
|
|
101
126
|
Arc's own architecture rendered three ways:
|
|
102
127
|
|
|
103
128
|
<div align="center">
|
|
104
|
-
<img src="public/theme-engineering.png" alt="Arc's architecture in the Engineering theme" width="840" />
|
|
129
|
+
<img src="https://raw.githubusercontent.com/arach/arc/master/public/theme-engineering.png" alt="Arc's architecture in the Engineering theme" width="840" />
|
|
105
130
|
<br/>
|
|
106
131
|
<sub><strong>Engineering</strong> — graph grid, drawing-sheet border, title block, uppercase mono</sub>
|
|
107
132
|
<br/><br/>
|
|
108
|
-
<img src="public/theme-workbench.png" alt="Arc's architecture in the Workbench theme" width="840" />
|
|
133
|
+
<img src="https://raw.githubusercontent.com/arach/arc/master/public/theme-workbench.png" alt="Arc's architecture in the Workbench theme" width="840" />
|
|
109
134
|
<br/>
|
|
110
135
|
<sub><strong>Workbench</strong> — dot grid, hairline frame, soft corners</sub>
|
|
111
136
|
<br/><br/>
|
|
112
|
-
<img src="public/theme-tactical.png" alt="Arc's architecture in the Tactical theme" width="840" />
|
|
137
|
+
<img src="https://raw.githubusercontent.com/arach/arc/master/public/theme-tactical.png" alt="Arc's architecture in the Tactical theme" width="840" />
|
|
113
138
|
<br/>
|
|
114
139
|
<sub><strong>Tactical</strong> — crosshair grid, corner brackets, hard edges</sub>
|
|
115
140
|
</div>
|