@miragon/wardley-renderer 0.0.0 → 0.2.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 +50 -0
- package/package.json +14 -4
package/README.md
ADDED
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
# @miragon/wardley-renderer
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@miragon/wardley-renderer)
|
|
4
|
+
[](https://github.com/Miragon/wardley-maps-modeler/blob/main/LICENSE)
|
|
5
|
+
|
|
6
|
+
[diagram-js](https://github.com/bpmn-io/diagram-js)-based renderer for
|
|
7
|
+
[Wardley Maps](https://learnwardleymapping.com/): `Viewer`, `NavigatedViewer`, and a full editable
|
|
8
|
+
`Modeler`, plus OWM / JSON / SVG / PNG import and export. Browser/DOM only.
|
|
9
|
+
|
|
10
|
+
## Install
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @miragon/wardley-renderer
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Usage
|
|
17
|
+
|
|
18
|
+
```ts
|
|
19
|
+
import { NavigatedViewer } from '@miragon/wardley-renderer';
|
|
20
|
+
import '@miragon/wardley-renderer/assets/wardley.css';
|
|
21
|
+
|
|
22
|
+
const viewer = new NavigatedViewer({ container: document.querySelector('#canvas')! });
|
|
23
|
+
|
|
24
|
+
await viewer.importDSL(`title Tea Shop
|
|
25
|
+
anchor Business [0.95, 0.63]
|
|
26
|
+
component Kettle [0.43, 0.35]
|
|
27
|
+
evolve Kettle 0.62
|
|
28
|
+
Business -> Kettle`);
|
|
29
|
+
|
|
30
|
+
const map = viewer.exportMap(); // canonical JSON model
|
|
31
|
+
const dsl = viewer.exportDSL(); // back to OWM text
|
|
32
|
+
const { svg } = await viewer.saveSVG();
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Swap `NavigatedViewer` for `Modeler` to get the editable map (palette, context pad, undo/redo).
|
|
36
|
+
|
|
37
|
+
### Fonts
|
|
38
|
+
|
|
39
|
+
The package ships no fonts and uses no CDN. Provide your own — recommended self-hosted via
|
|
40
|
+
[`@fontsource`](https://fontsource.org/):
|
|
41
|
+
|
|
42
|
+
```ts
|
|
43
|
+
import '@fontsource-variable/spline-sans';
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Part of the [Wardley Maps](https://github.com/Miragon/wardley-maps-modeler) monorepo.
|
|
47
|
+
|
|
48
|
+
## License
|
|
49
|
+
|
|
50
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@miragon/wardley-renderer",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "Render and display Wardley maps in the browser, with a viewer and modeler built on diagram-js.",
|
|
5
5
|
"license": "MIT",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "git+https://github.com/Miragon/wardley-maps-modeler.git",
|
|
9
|
+
"directory": "packages/renderer"
|
|
10
|
+
},
|
|
11
|
+
"homepage": "https://github.com/Miragon/wardley-maps-modeler/tree/main/packages/renderer#readme",
|
|
12
|
+
"bugs": "https://github.com/Miragon/wardley-maps-modeler/issues",
|
|
6
13
|
"type": "module",
|
|
7
14
|
"sideEffects": [
|
|
8
15
|
"**/*.css"
|
|
@@ -20,14 +27,17 @@
|
|
|
20
27
|
"files": [
|
|
21
28
|
"dist"
|
|
22
29
|
],
|
|
30
|
+
"publishConfig": {
|
|
31
|
+
"access": "public"
|
|
32
|
+
},
|
|
23
33
|
"scripts": {
|
|
24
34
|
"build": "vite build",
|
|
25
35
|
"test": "npm --prefix ../.. run test",
|
|
26
36
|
"test:browser": "npm --prefix ../.. run test:browser"
|
|
27
37
|
},
|
|
28
38
|
"dependencies": {
|
|
29
|
-
"@miragon/wardley-dsl": "0.
|
|
30
|
-
"@miragon/wardley-schema-model": "0.
|
|
39
|
+
"@miragon/wardley-dsl": "0.2.0",
|
|
40
|
+
"@miragon/wardley-schema-model": "0.2.0",
|
|
31
41
|
"clsx": "2.1.1",
|
|
32
42
|
"diagram-js": "15.16.0",
|
|
33
43
|
"didi": "11.0.0",
|