diagramo 0.1.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/LICENSE +4 -0
- package/README.md +171 -0
- package/dist/diagramo.browser.js +7225 -0
- package/dist/diagramo.js +1557 -0
- package/examples/static-page.html +26 -0
- package/package.json +33 -0
package/LICENSE
ADDED
package/README.md
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
# diagramo
|
|
2
|
+
|
|
3
|
+
Diagramo renders Surface, Core, and NCF S-expression diagrams into SVG.
|
|
4
|
+
|
|
5
|
+
This package includes:
|
|
6
|
+
|
|
7
|
+
- `dist/diagramo.js`: ESM library entry for npm consumers
|
|
8
|
+
- `dist/diagramo.browser.js`: standalone browser bundle for drop-in static pages
|
|
9
|
+
|
|
10
|
+
## Install
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install diagramo
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
This package declares `d3` and `d3-dag` as runtime dependencies.
|
|
17
|
+
|
|
18
|
+
## ESM usage
|
|
19
|
+
|
|
20
|
+
```js
|
|
21
|
+
import { renderAll, renderElement, renderSource, compileSource } from "diagramo";
|
|
22
|
+
|
|
23
|
+
renderAll(document);
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
Render a single element:
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
import { renderElement } from "diagramo";
|
|
30
|
+
|
|
31
|
+
const el = document.querySelector("pre.diagramo");
|
|
32
|
+
renderElement(el, { zoom: false });
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
Render directly into a host element:
|
|
36
|
+
|
|
37
|
+
```js
|
|
38
|
+
import { renderSource } from "diagramo";
|
|
39
|
+
|
|
40
|
+
const host = document.querySelector("#diagram-host");
|
|
41
|
+
renderSource(`(program (X) (-> f X Y))`, host, { zoom: false, height: 320 });
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Static page drop-in
|
|
45
|
+
|
|
46
|
+
After you publish the package, you can use the browser bundle from a CDN:
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<pre class="diagramo">
|
|
50
|
+
(program
|
|
51
|
+
(X)
|
|
52
|
+
(ZinsideX:X)
|
|
53
|
+
(-> f A B)
|
|
54
|
+
(-> g B A)
|
|
55
|
+
(-> h X Y)
|
|
56
|
+
)</pre>
|
|
57
|
+
|
|
58
|
+
<script src="https://unpkg.com/diagramo/dist/diagramo.browser.js"></script>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
The browser bundle auto-renders `pre.diagramo` elements on page load.
|
|
62
|
+
|
|
63
|
+
### Default behavior
|
|
64
|
+
|
|
65
|
+
- zoom is off by default
|
|
66
|
+
- source `<pre>` elements are replaced with rendered hosts
|
|
67
|
+
- labels default to IDs in Surface shorthand
|
|
68
|
+
- `(-> f A B)` synthesizes missing nodes `A` and `B`
|
|
69
|
+
|
|
70
|
+
### Data attributes
|
|
71
|
+
|
|
72
|
+
These can be placed on the source element or the host:
|
|
73
|
+
|
|
74
|
+
- `data-diagramo-mode="auto|surface|core|ncf"`
|
|
75
|
+
- `data-diagramo-zoom="on|off"`
|
|
76
|
+
- `data-diagramo-ortho="on|off"`
|
|
77
|
+
- `data-diagramo-wiring="on|off"`
|
|
78
|
+
- `data-diagramo-glyphs="on|off"`
|
|
79
|
+
- `data-diagramo-height="360"`
|
|
80
|
+
|
|
81
|
+
Example:
|
|
82
|
+
|
|
83
|
+
```html
|
|
84
|
+
<pre class="diagramo" data-diagramo-height="420" data-diagramo-zoom="off">
|
|
85
|
+
(program
|
|
86
|
+
(X)
|
|
87
|
+
(-> f X Y)
|
|
88
|
+
)</pre>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Browser global API
|
|
92
|
+
|
|
93
|
+
The standalone browser bundle exposes `window.Diagramo` with:
|
|
94
|
+
|
|
95
|
+
- `parseSexpr`
|
|
96
|
+
- `compileAst`
|
|
97
|
+
- `compileSource`
|
|
98
|
+
- `emitCoreDoc`
|
|
99
|
+
- `emitNCFDoc`
|
|
100
|
+
- `renderSource`
|
|
101
|
+
- `renderElement`
|
|
102
|
+
- `renderAll`
|
|
103
|
+
- `autoRender`
|
|
104
|
+
|
|
105
|
+
Example:
|
|
106
|
+
|
|
107
|
+
```html
|
|
108
|
+
<script>
|
|
109
|
+
window.Diagramo.renderAll();
|
|
110
|
+
</script>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## API
|
|
114
|
+
|
|
115
|
+
### `compileSource(source, mode = "auto")`
|
|
116
|
+
|
|
117
|
+
Compiles source text into:
|
|
118
|
+
|
|
119
|
+
```js
|
|
120
|
+
{
|
|
121
|
+
kind, // "surface" | "core" | "ncf"
|
|
122
|
+
core, // canonical core doc object or null
|
|
123
|
+
ncf, // canonical ncf doc object
|
|
124
|
+
coreText, // core serialization
|
|
125
|
+
ncfText, // ncf serialization
|
|
126
|
+
warnings // array of warning strings
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### `renderSource(source, host, options = {})`
|
|
131
|
+
|
|
132
|
+
Options:
|
|
133
|
+
|
|
134
|
+
- `mode`
|
|
135
|
+
- `zoom`
|
|
136
|
+
- `ortho`
|
|
137
|
+
- `wiring`
|
|
138
|
+
- `glyphs`
|
|
139
|
+
- `height`
|
|
140
|
+
- `observeResize`
|
|
141
|
+
- `replaceSource`
|
|
142
|
+
|
|
143
|
+
Returns:
|
|
144
|
+
|
|
145
|
+
```js
|
|
146
|
+
{
|
|
147
|
+
host,
|
|
148
|
+
compiled,
|
|
149
|
+
fit,
|
|
150
|
+
rerender
|
|
151
|
+
}
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
## Surface shorthand supported
|
|
155
|
+
|
|
156
|
+
```lisp
|
|
157
|
+
(A) ; node A, label "A"
|
|
158
|
+
(ZinsideX:X) ; child ZinsideX under X
|
|
159
|
+
(-> f A B) ; arrow f from A to B, label "f", synthesize A/B if needed
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## Notes before publishing
|
|
163
|
+
|
|
164
|
+
- The package name `diagramo` may already be taken on npm. Change `name` in `package.json` if needed.
|
|
165
|
+
- The package is marked `UNLICENSED`. Replace the license field and `LICENSE` file with your intended license before publishing.
|
|
166
|
+
|
|
167
|
+
## Files
|
|
168
|
+
|
|
169
|
+
- `dist/diagramo.js`
|
|
170
|
+
- `dist/diagramo.browser.js`
|
|
171
|
+
- `examples/static-page.html`
|