@zombie-mermaid/svg-renderer 2.2.1 → 2.2.6
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 +49 -0
- package/package.json +10 -5
package/README.md
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
# @zombie-mermaid/svg-renderer
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@zombie-mermaid/svg-renderer)
|
|
4
|
+
[](LICENSE)
|
|
5
|
+
|
|
6
|
+
SVG layout and rendering primitives for [Mermaid](https://mermaid.js.org/) diagrams — the [ELK.js](https://github.com/kieler/elkjs)-backed layout engine and per-diagram-type SVG emitters behind [`zombie-mermaid`](https://www.npmjs.com/package/zombie-mermaid)'s SVG output.
|
|
7
|
+
|
|
8
|
+
## What this package is (and isn't)
|
|
9
|
+
|
|
10
|
+
**Just want SVG output from Mermaid text?** Use [`zombie-mermaid`](https://www.npmjs.com/package/zombie-mermaid)'s `renderMermaidSVG(text)` instead — it's simpler and does exactly that.
|
|
11
|
+
|
|
12
|
+
This package does **not** currently include that single entry point. It exports the lower-level pieces the umbrella assembles it from: a `layout*Sync()` function and a `render*Svg()` function per diagram type (flowchart/state, class, ER, sequence, XY chart), plus the shared ELK.js adapter and layout engine underneath them. Diagram-type dispatch (detecting which diagram type a given Mermaid source is, and routing to the right layout/render pair) still lives in the umbrella. Adding a `renderMermaidSVG` front door here, for parity with `@zombie-mermaid/ascii-renderer`, is tracked separately — see [zombie-mermaid#1111](https://github.com/dfadler/zombie-mermaid/issues/1111).
|
|
13
|
+
|
|
14
|
+
Reach for this package directly if you're doing custom integration work — a different dispatch layer, a subset of diagram types, or reusing the ELK.js layout adapters for something else — and want to skip the umbrella package's own dispatch and ASCII-rendering code.
|
|
15
|
+
|
|
16
|
+
## Install
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @zombie-mermaid/svg-renderer @zombie-mermaid/mermaid-parser @zombie-mermaid/core
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
Each diagram type follows the same shape: parse (from `@zombie-mermaid/mermaid-parser`) → lay out → render. Class diagrams, for example:
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
import { splitStatements } from '@zombie-mermaid/core'
|
|
28
|
+
import { THEMES } from '@zombie-mermaid/core'
|
|
29
|
+
import { parseClassDiagram } from '@zombie-mermaid/mermaid-parser'
|
|
30
|
+
import {
|
|
31
|
+
layoutClassDiagramSync,
|
|
32
|
+
renderClassSvg,
|
|
33
|
+
} from '@zombie-mermaid/svg-renderer'
|
|
34
|
+
|
|
35
|
+
const text = 'classDiagram\n Animal <|-- Dog'
|
|
36
|
+
const diagram = parseClassDiagram(splitStatements(text))
|
|
37
|
+
const positioned = layoutClassDiagramSync(diagram)
|
|
38
|
+
const svg = renderClassSvg(positioned, THEMES['zinc-light'])
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
The equivalent pairs for the other diagram types: `layoutErDiagramSync`/`renderErSvg`, `layoutSequenceDiagramSync`/`renderSequenceSvg`, `layoutXYChartSync`/`renderXYChartSvg`, and flowchart/state via `layoutGraphSync` (re-exported from `layout-engine.ts`) plus `renderer.ts`'s renderer. See each module under [`src/`](src) for exact signatures — most render functions take additional optional parameters (font, transparent background, embedded source, title, CSP nonce) beyond the two shown above.
|
|
42
|
+
|
|
43
|
+
## Relationship to `zombie-mermaid`
|
|
44
|
+
|
|
45
|
+
This package is one of the internal pieces `zombie-mermaid` is built from (alongside `@zombie-mermaid/core` and `@zombie-mermaid/mermaid-parser`, which stay internal-only). Installing `zombie-mermaid` pulls in the exact same layout/render code, wired up behind `renderMermaidSVG`.
|
|
46
|
+
|
|
47
|
+
## License
|
|
48
|
+
|
|
49
|
+
MIT — see [LICENSE](LICENSE).
|
package/package.json
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zombie-mermaid/svg-renderer",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.6",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "SVG rendering primitives and the ELK-backed layout engine behind zombie-mermaid's SVG output.",
|
|
6
|
+
"repository": {
|
|
7
|
+
"type": "git",
|
|
8
|
+
"url": "https://github.com/dfadler/zombie-mermaid",
|
|
9
|
+
"directory": "packages/svg-renderer"
|
|
10
|
+
},
|
|
6
11
|
"type": "module",
|
|
7
12
|
"sideEffects": false,
|
|
8
13
|
"main": "dist/index.cjs",
|
|
@@ -30,8 +35,8 @@
|
|
|
30
35
|
"LICENSE"
|
|
31
36
|
],
|
|
32
37
|
"dependencies": {
|
|
33
|
-
"
|
|
34
|
-
"@zombie-mermaid/
|
|
35
|
-
"
|
|
38
|
+
"elkjs": "^0.11.0",
|
|
39
|
+
"@zombie-mermaid/core": "2.2.6",
|
|
40
|
+
"@zombie-mermaid/mermaid-parser": "2.2.6"
|
|
36
41
|
}
|
|
37
|
-
}
|
|
42
|
+
}
|