@peter.prib/renderengine 0.12.0 → 0.14.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.
Files changed (67) hide show
  1. package/README.md +454 -296
  2. package/dist/renderengine-workspace.umd.js +4122 -1167
  3. package/dist/renderengine.umd.js +4103 -1164
  4. package/documentation/REFERENCE.md +96 -6
  5. package/package.json +8 -3
  6. package/src/chartCatalog.js +50 -3
  7. package/src/charting/Axis.js +47 -5
  8. package/src/charting/Chart3D.js +4 -2
  9. package/src/charting/DiagramEditor.js +239 -34
  10. package/src/charting/Hierarchy.js +28 -0
  11. package/src/charting/ModelFileFormat.js +47 -0
  12. package/src/charting/archimate/ArchimateCanvasEditor.js +1108 -1012
  13. package/src/charting/archimate/deleteFromModel.js +57 -0
  14. package/src/charting/archimate/elementMenuItems.js +3 -1
  15. package/src/charting/archimate/heatMaps.js +169 -0
  16. package/src/charting/archimate/index.js +1 -0
  17. package/src/charting/ask/AskBar.js +388 -0
  18. package/src/charting/ask/AskView.js +400 -0
  19. package/src/charting/charts/AreaChart.js +20 -3
  20. package/src/charting/charts/BarChart.js +5 -5
  21. package/src/charting/charts/BarChart3D.js +2 -2
  22. package/src/charting/charts/BarChart3DOrbit.js +3 -1
  23. package/src/charting/charts/BarChartBase.js +21 -3
  24. package/src/charting/charts/BoxPlotChart.js +2 -2
  25. package/src/charting/charts/BubbleChart.js +4 -1
  26. package/src/charting/charts/ChordDiagram.js +4 -4
  27. package/src/charting/charts/DensityChart.js +1 -1
  28. package/src/charting/charts/FunnelChart.js +1 -1
  29. package/src/charting/charts/GroupedBarChart.js +7 -9
  30. package/src/charting/charts/HeatmapChart.js +4 -1
  31. package/src/charting/charts/HistogramChart.js +2 -2
  32. package/src/charting/charts/IcicleChart.js +47 -0
  33. package/src/charting/charts/LollipopChart.js +104 -0
  34. package/src/charting/charts/MarimekkoChart.js +75 -0
  35. package/src/charting/charts/OutlineChart.js +10 -8
  36. package/src/charting/charts/ParallelCoordinatesChart.js +2 -2
  37. package/src/charting/charts/ParetoChart.js +92 -0
  38. package/src/charting/charts/PipeChart.js +5 -2
  39. package/src/charting/charts/PopulationPyramidChart.js +4 -4
  40. package/src/charting/charts/RadarChart.js +5 -4
  41. package/src/charting/charts/RadialBarChart.js +2 -2
  42. package/src/charting/charts/SankeyDiagram.js +4 -4
  43. package/src/charting/charts/ScatterChart.js +6 -3
  44. package/src/charting/charts/StackedBarChart.js +82 -11
  45. package/src/charting/charts/StackedBarChart3DOrbit.js +5 -2
  46. package/src/charting/charts/StreamGraphChart.js +8 -0
  47. package/src/charting/charts/SunburstChart.js +2 -2
  48. package/src/charting/charts/TableChart.js +18 -2
  49. package/src/charting/charts/TreemapChart.js +4 -4
  50. package/src/charting/charts/ViolinChart.js +2 -2
  51. package/src/charting/charts/WaterfallChart.js +2 -2
  52. package/src/charting/charts/WordCloudChart.js +2 -2
  53. package/src/charting/diagrams/ArchimateModel.js +33 -0
  54. package/src/charting/diagrams/DeleteFromModelCommand.js +81 -0
  55. package/src/charting/diagrams/EdgeGeometry.js +16 -0
  56. package/src/charting/edgeStyle/EdgeStyleSchema.js +6 -2
  57. package/src/charting/pivot/PivotChart.js +205 -13
  58. package/src/charting/pivot/PivotGridChart.js +1 -1
  59. package/src/charting/pivot/PivotView.js +555 -23
  60. package/src/charting/table/TableView.js +10 -1
  61. package/src/charting/table/TableViewChart.js +1 -1
  62. package/src/charting/templates/Template.js +10 -0
  63. package/src/exportImage.js +45 -18
  64. package/src/index.js +115 -6
  65. package/src/workspace/parts/ArchimateCanvasPart.js +3 -0
  66. package/src/workspace/parts/DiagramEditorPart.js +2 -0
  67. package/src/workspace/parts/ModelHosted.js +15 -4
package/README.md CHANGED
@@ -1,296 +1,454 @@
1
- # RenderEngine
2
-
3
- **An ArchiMate modeller, a data modeller, a requirements story map, a diagram editor and a chart library that run
4
- in any browser tab, with no install and no runtime dependencies.**
5
-
6
- Open an Archi model, edit it the way you would in Archi, and save it back to the same `.archimate` file, without
7
- installing anything. Model data at three levels, governed and checked the way DAMA-DMBOK2 has it, with banking at
8
- BIAN level built in. Or put the same editors in your own app: it's a JavaScript library and a set of workbench
9
- parts, not a desktop application.
10
-
11
- ![The ArchiMate modeller: a layered view of an online shop, the model tree by layer with each type's picture, and the palette](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/archimate-modeller.png)
12
-
13
- ---
14
-
15
- ## Try it
16
-
17
- ```bash
18
- git clone https://gitlab.com/peter.prib/renderengine.git
19
- cd renderengine
20
- npm start # the ArchiMate modeller
21
- npm run diagram # the diagram editor (flowcharts, UML and more)
22
- npm run datamodel # the data modeller: an enterprise ontology and a retail bank at BIAN level
23
- ```
24
-
25
- No server is needed, and nothing needs installing first, because the built bundles are in `dist/`. You can also
26
- open the pages directly:
27
-
28
- - `examples/archimate.html`: the ArchiMate modeller
29
- - `examples/diagram-editor.html`: the diagram editor
30
- - `examples/data-model.html`: the data modeller
31
-
32
- The models they open come from [modelengine](https://gitlab.com/peter.prib/modelengine), kept apart from the tools: with
33
- it checked out beside renderengine, the pages open on its models (File ▸ Open from ▸ modelengine lists them by domain);
34
- without it they start empty.
35
-
36
- All work in current Chrome, Edge, Firefox and Safari. Save writes back to the file you opened in Chrome and Edge;
37
- other browsers download the file instead.
38
-
39
- ---
40
-
41
- ## The ArchiMate modeller
42
-
43
- ### Works with Archi
44
-
45
- - **Open and save Archi files** (`.archimate`, and archives that include pictures). Save writes back to the file you
46
- opened; Save As picks a new one. Unsaved changes are marked (•), and the page asks before you leave or close them.
47
- - **Kept in the browser, backed up to the cloud.** Every model is kept in the browser as you edit it, and those open
48
- reopen next time, with no file saved. File ▸ This browser backs them all up to a folder you choose once: pick one
49
- that OneDrive, Google Drive or Dropbox syncs and the backups reach the cloud (each named with the date and time,
50
- plus one under its plain name); browsers that cannot write to a folder download them instead.
51
- - **Import a spreadsheet** into the open model: choose the name, type, id, documentation, property and "related
52
- to" columns; existing elements are updated, not duplicated (Archi's elements.csv imports as it is).
53
- - **draw.io export**: every view a page, in draw.io's ArchiMate shapes, with the elements' properties.
54
- - **Open Group Exchange Format** import and export, the standard way into Sparx, BiZZdesign and other tools.
55
- Checked with Archi 5.8, which validates and opens the files.
56
- - **Every element Archi receives is a valid ArchiMate 3.2 class.** A type Archi lacks is written as its nearest
57
- 3.2 type, and its own type is kept so it comes back on the next import.
58
- - **Canvases, sketches, notes, groups and Archi's canvas templates** come through import and export.
59
-
60
- ### Modelling
61
-
62
- - A **palette** of every element type, grouped by layer and limited by the view's viewpoint.
63
- - **Connecting two elements offers only the relationship kinds the ArchiMate rules allow** between them.
64
- - **Nesting**: drop an element inside another and choose what the nesting stands for (composition, aggregation,
65
- assignment, realization or specialization). It goes into the model, and the nesting shows it.
66
- - **Add from text**: paste a list of names, from a document or a spreadsheet's columns, and get an element for
67
- each.
68
- - **Copy and paste** within a model and between models, **Duplicate**, and **Generate View For** an element and
69
- what it relates to.
70
- - **Several models open at once**, a tab each. Each has its own file and its own undo history.
71
- - **Undo for everything**, one history per model as in Archi: edits on any view, and adding, renaming and deleting
72
- views. Undoing an edit made on another view takes you to that view.
73
- - **Specializations**, custom viewpoints, label expressions (`${name}` and `{name}`), and properties with types.
74
-
75
- ### Editing
76
-
77
- - **Align, distribute and match size**, to the shape you selected last, as in Archi; **automatic layouts** (grid,
78
- circle, tree, force-directed, by layer) and **Nest its parts inside**, following composition and aggregation.
79
- - **Properties of several shapes at once**: colours and text style, the elements' type and specialization, and a
80
- property to set on all of them.
81
- - **Format painter**: copy one shape's look onto others.
82
- - **Colour by** layer, type, specialization or any property (a heat map, e.g. by lifecycle: invest, maintain,
83
- retire), with a legend; or a legend of the element types on the view.
84
- - **Find and replace** across names, documentation and property values, with match case, whole words and
85
- regular expressions; **transform names** (Title Case, split camelCase, ...) and **rename a property** across the
86
- model; **fit a shape to its text**.
87
- - **Groups and locks on any view**, multi-select, a marquee, Archi's tabbed groups, bendpoints, pinned line ends,
88
- and orthogonal, curved or straight routing.
89
-
90
- ### Understanding and sharing a model
91
-
92
- - A **model tree** by layer, by type or flat, each element with its type's picture, with search and filters (type, specialization, property) that dim the
93
- diagram too.
94
- - An **analysis panel** for the selected element: which views it's on, and its incoming and outgoing relationships.
95
- - **Check model** finds relationships the rules don't allow, likely duplicates (by their words, so "System of
96
- Order Management" matches "order-management system"), unused elements and relationships, empty views, nested
97
- elements with no relationship, and unprintable characters. **Merge…** makes duplicates one element, keeping
98
- every relationship and appearance on a view.
99
- - **Derived relationships**, worked out and shown as dotted lines.
100
- - **Roadmaps**: generate a view of work packages, plateaus or anything with start and end dates, as bars under
101
- the months.
102
- - An **HTML report** in one self-contained file: a tree, search, a page per element, relationship and view, and
103
- diagrams whose elements link to their pages.
104
- - **Images**: export PNG or SVG, or copy to the clipboard.
105
-
106
- ### Beyond Archi
107
-
108
- It runs in the browser and embeds in other apps. It also has:
109
-
110
- - ArchiMate 4 types alongside 3.2;
111
- - derived relationships without scripts;
112
- - invalid relationships shown as you choose (highlight, tooltip or hidden), per view, per model or for the tool;
113
- - groups and locks on every view, not just canvases;
114
- - a canvas template library shared across models;
115
- - two drawing backends, SVG and Canvas.
116
-
117
- ---
118
-
119
- ## The data modeller
120
-
121
- One model at the conceptual, logical and physical levels, read by each stakeholder in their own terms, governed and
122
- checked the way DAMA-DMBOK2 has a model reviewed, and ready for banking at BIAN level. It shares the modeller's
123
- workbench: several models open at once, undo for everything, files saved back where they came from, models kept in
124
- the browser and backed up.
125
-
126
- ![The data modeller: a retail bank's logical model through its Sensitive data lens, each entity coloured by how sensitive its data is](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/data-model.png)
127
-
128
- ### One model, three levels
129
-
130
- - **Concepts, logical entities and tables, each a schema of its own**, mapped any number either way: a concept
131
- realised by several entities, several entities kept in one table. The **mapping view** draws the three side by
132
- side, and **lineage** shows, for anything, what it realises and what realises it, all the way up and down.
133
- - **Perspectives and contexts**: each stakeholder's names for the concepts, and what they mean in a context, with
134
- its rules and where and when it applies, drawn as notes.
135
- - **Chen, Crow's Foot and UML**, switched with one choice; **subtypes** (complete or not, disjoint or overlapping);
136
- **data types and enumerations** defined once, code sets with their source and version, each linked to its
137
- **ISO 20022** type.
138
- - **Edit it on the diagram**: double-click an entity for its attribute table (keys, required, what a foreign key
139
- references, classification), right-click for new and delete. Every edit is one undo step.
140
-
141
- ### Banking at BIAN level
142
-
143
- - **Service domains** with their control records, behaviour qualifiers and the service operations BIAN names for
144
- them, and the **service landscape**: every service domain in its business area and domain.
145
- - **Read BIAN's own published material instead of retyping it.** A BIAN semantic API (all 258 of release 14 read,
146
- plain or with ISO 20022) becomes a control record, its qualifiers, their data types and ISO 20022 types in one
147
- step. BIAN's service landscape in ArchiMate becomes service domains in their areas and domains: run over BIAN's
148
- v14 model, every one it places lands in the right place.
149
- - BIAN's vocabulary, its functional patterns, artifacts, action terms and qualifier types, is as BIAN's v14 model
150
- has it.
151
-
152
- ### Governed and checked (DAMA-DMBOK2)
153
-
154
- - **Stewardship**: a business owner, data steward and technical custodian on each entity.
155
- - **Classification**: sensitivity levels and categories (PII, PCI...) on entities and attributes, **checked down
156
- the mappings**, so a table is never classified lower than the data it holds; a **lens** colours the model by it.
157
- - **Check model** reviews it as DMBOK2 would: missing keys, foreign keys without relationships, repeating groups,
158
- unresolved many-to-many, one name with two types, concepts without definitions, names against the **naming
159
- standard** you set, **data quality rules** by dimension (completeness, validity, uniqueness...), and BIAN's one
160
- owner per business object.
161
- - **The Data Model Scorecard**: Steve Hoberman's ten categories, six measured from the model and four for a
162
- reviewer, weighted as you choose, in one total.
163
-
164
- ### To the database and the warehouse
165
-
166
- - **SQL DDL**: the physical level as `CREATE TABLE`s with keys, foreign keys and comments.
167
- - **A dimensional scheme**: facts at their grain with additive, semi-additive or non-additive measures, dimensions
168
- with their history type and conformed across facts, a **star schema** view, and checks as Kimball would make
169
- them.
170
- - **Bases** to start a model from, and **compare and merge** between models.
171
-
172
- ---
173
-
174
- ## Requirements and story maps
175
-
176
- Bring in the epics and stories your team already has: a Jira, Azure DevOps or GitLab export (CSV or JSON), or a
177
- storyboard written in Markdown. Read as a **story map** (epics across, releases down) or a **backlog**, each story
178
- carries its "As a … I want … so that …", its acceptance criteria (read from their own field, a list in the
179
- description, or Given/When/Then) and its **traces** to what realises it: an ArchiMate requirement or work package,
180
- a component, a data concept, entity or table. Drag a card to another epic or release; the toolbar says how many
181
- stories say when they are done and how many trace to something, and **Check model** lists what is missing.
182
-
183
- - **Every model alike**: kept, compared and merged as the ArchiMate and data models are, a newer tracker export
184
- brought in over the old one replacing what changed.
185
- - **Yours to extend**: a host says what can be traced to, what a story's live state is, and how to find stories by
186
- meaning (a vector store) — the SqlEngine workbench does all three.
187
-
188
- ## The diagram editor
189
-
190
- The ArchiMate modeller is built on a general diagram editor, and every editing feature above is part of that
191
- editor rather than of ArchiMate: align, format painter, properties of several shapes, find and replace, copy and
192
- paste, groups and locks, undo, HTML report, image export, several models at once. The diagram editor gives you all
193
- of them for its own palettes:
194
-
195
- - basic shapes
196
- - flowchart and BPMN
197
- - swimlanes
198
- - UML: class, sequence, activity, state machine, use case, component, deployment
199
- - entity-relationship
200
- - data flow
201
- - network
202
- - org chart
203
-
204
- Each model can hold several diagrams, with line styles inherited from the diagram, then the model, then the tool.
205
-
206
- ![The diagram editor: an order flowchart with a decision, labelled lines and the flowchart palette](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/diagram-editor.png)
207
-
208
- ## The chart library
209
-
210
- The engine underneath draws 24 chart types: bar, line, area, pie, scatter, bubble, heatmap, candlestick,
211
- waterfall, histogram, box plot, violin, radar, funnel, treemap, sunburst, gauges (dial, arc, ring, rings, bar, bullet, thermometer, KPI tiles; with bands, targets, LED segments and animation), 3D bars and others. It also
212
- draws graph and railroad diagrams, all to SVG or Canvas. `test/charts.html` is the full gallery, and
213
- `examples/csv-chart-builder.html` builds a chart from a CSV file without code.
214
-
215
- ![Gauges: a dial with bands, ticks and a target; arc, ring and nested rings; a two-needle dial; LED segments; a thermometer; KPI tiles with sparklines](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/gauges.png)
216
-
217
- ![Charts from the gallery: bar, grouped bar, line and line with error bars](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/charts.png)
218
-
219
- ---
220
-
221
- ## Put it in your own page
222
-
223
- ```bash
224
- npm install @peter.prib/renderengine
225
- ```
226
-
227
- The package is the ES module source and the built bundles:
228
-
229
- - `import { ArchimateModel, RenderEngine } from '@peter.prib/renderengine'`: the engine and the models (this also
230
- imports under Node).
231
- - `import '@peter.prib/renderengine/workspace'`: the workbench shell and its parts (browser only).
232
- - `@peter.prib/renderengine/dist/renderengine-workspace.umd.js`: the same as one classic script.
233
-
234
- The modeller is a part in the `<ws-workspace>` workbench shell. One script tag and a JSON spec is the whole host
235
- page:
236
-
237
- ```html
238
- <script src="dist/renderengine-workspace.umd.js"></script>
239
- <script>
240
- const { el, registerBuiltinParts, ArchimateCanvasPart } = RenderEngineWorkspace;
241
- const ws = document.body.appendChild(el({ tag: 'ws-workspace', attrs: { label: 'Modeller' } }));
242
- registerBuiltinParts(ws);
243
- ws.registerPart(ArchimateCanvasPart);
244
- ws.addParts([{
245
- id: 'models', type: 'models', editorType: 'archimate-canvas', // several models, a tab each
246
- models: [{
247
- id: 'shop', name: 'Shop',
248
- elements: [{ id: 'c', name: 'Customer', type: 'business-actor' }, { id: 'o', name: 'Order', type: 'business-process' }],
249
- relationships: [{ source: 'c', target: 'o', kind: 'assignment' }],
250
- views: [{ id: 'v', name: 'Main', elementIds: ['c', 'o'], layout: { c: { x: 100, y: 100 }, o: { x: 320, y: 100 } } }],
251
- }],
252
- }]);
253
- ws.registerPerspective('Modelling', { type: 'part', partId: 'models' });
254
- ws.activatePerspective('Modelling');
255
- </script>
256
- ```
257
-
258
- Use `editorType: 'diagram-editor'` with `DiagramEditorPart` for the diagram editor, `editorType: 'data-model'`
259
- with `DataModelPart` for the data modeller, and `editorType: 'requirements'` with `RequirementsPart` for the story
260
- map. The models are plain JavaScript APIs (`ArchimateModel`, `DiagramModel`, `DataModel`, `RequirementsModel`), so
261
- you can also build, check, score, search, report on and export models with no UI at all, under Node too:
262
- `new DataModel(spec).checker().run()`, `new SqlDdl().write(model)`,
263
- `new RequirementsModel(new TrackerExport().read(csv)).coverage()`.
264
-
265
- ---
266
-
267
- ## Documentation
268
-
269
- | Document | What it covers |
270
- |---|---|
271
- | `documentation/REFERENCE.md` | The API: chart methods and options, the editors, models, commands, file formats |
272
- | `documentation/WORKSPACE_ARCHITECTURE.md` | The `<ws-workspace>` shell: parts, layout, context bus, work area |
273
- | `documentation/ARCHITECTURE.md` | Module layout and the chart-type catalog |
274
- | `documentation/LLM_ARCHIMATE_GUIDE.md` | Generating valid ArchiMate model data, with a prompt template |
275
- | `documentation/tasks.md` | What's still to come |
276
-
277
- ## Build and test
278
-
279
- ```bash
280
- npm install # dev tools only: Rollup
281
- npm run build # dist/renderengine.umd.js and dist/renderengine-workspace.umd.js
282
- npm test # Node's built-in test runner, no browser needed
283
- npm run screenshots # this README's pictures, from the example pages (headless Chrome)
284
- ```
285
-
286
- There are two bundles:
287
-
288
- - `renderengine.umd.js` (global `RenderEngine`): the engine.
289
- - `renderengine-workspace.umd.js` (global `RenderEngineWorkspace`): the workbench shell and its parts, plus the
290
- whole engine API, so one script tag is enough.
291
-
292
- The source is plain ES modules. `src/index.js` imports under Node, which is how the tests run.
293
-
294
- ## Licence
295
-
296
- MIT. Contributions welcome.
1
+ # RenderEngine
2
+
3
+ **An ArchiMate modeller, a data modeller, a requirements story map, a diagram editor, an OLAP cube & predictive query studio, and a 50+ type chart library that run in any browser tab, with no install and no runtime dependencies.**
4
+
5
+ Open an Archi model, edit it the way you would in Archi, and save it back to the same `.archimate` file, without
6
+ installing anything. Model data at three levels, governed and checked the way DAMA-DMBOK2 has it, with banking at
7
+ BIAN level built in. Slice, drill and chart multi-dimensional OLAP cubes across 35+ linked chart types with live
8
+ statistical aggregations, derived formula measures and predictive natural-language querying. Or put the same editors
9
+ and charts in your own app: it's a JavaScript library and a set of workbench parts, not a desktop application.
10
+
11
+ ![The ArchiMate modeller: a layered view of an online shop, the model tree by layer with each type's picture, and the palette](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/archimate-modeller.png)
12
+
13
+ ---
14
+
15
+ ## Try it
16
+
17
+ ```bash
18
+ git clone https://gitlab.com/peter.prib/renderengine.git
19
+ cd renderengine
20
+ npm start # the ArchiMate modeller
21
+ npm run diagram # the diagram editor (flowcharts, UML and more)
22
+ npm run datamodel # the data modeller: an enterprise ontology and a retail bank at BIAN level
23
+ ```
24
+
25
+ No server is needed, and nothing needs installing first, because the built bundles are in `dist/`. You can also
26
+ open the pages directly:
27
+
28
+ - `examples/archimate.html`: the ArchiMate modeller
29
+ - `examples/diagram-editor.html`: the diagram editor
30
+ - `examples/data-model.html`: the data modeller
31
+ - `test/charts.html`: the full interactive chart, diagram and OLAP cubing gallery
32
+
33
+ The models they open come from [modelengine](https://gitlab.com/peter.prib/modelengine), kept apart from the tools: with
34
+ it checked out beside renderengine, the pages open on its models (File ▸ Open from ▸ modelengine lists them by domain);
35
+ without it they start empty.
36
+
37
+ All work in current Chrome, Edge, Firefox and Safari. Save writes back to the file you opened in Chrome and Edge;
38
+ other browsers download the file instead.
39
+
40
+ ---
41
+
42
+ ## The ArchiMate modeller
43
+
44
+ ### Works with Archi
45
+
46
+ - **Open and save Archi files** (`.archimate`, and archives that include pictures). Save writes back to the file you
47
+ opened; Save As picks a new one. Unsaved changes are marked (•), and the page asks before you leave or close them.
48
+ - **Kept in the browser, backed up to the cloud.** Every model is kept in the browser as you edit it, and those open
49
+ reopen next time, with no file saved. File ▸ This browser backs them all up to a folder you choose once: pick one
50
+ that OneDrive, Google Drive or Dropbox syncs and the backups reach the cloud (each named with the date and time,
51
+ plus one under its plain name); browsers that cannot write to a folder download them instead.
52
+ - **Import a spreadsheet** into the open model: choose the name, type, id, documentation, property and "related
53
+ to" columns; existing elements are updated, not duplicated (Archi's elements.csv imports as it is).
54
+ - **draw.io export**: every view a page, in draw.io's ArchiMate shapes, with the elements' properties.
55
+ - **Open Group Exchange Format** import and export, the standard way into Sparx, BiZZdesign and other tools.
56
+ Checked with Archi 5.8, which validates and opens the files.
57
+ - **Every element Archi receives is a valid ArchiMate 3.2 class.** A type Archi lacks is written as its nearest
58
+ 3.2 type, and its own type is kept so it comes back on the next import.
59
+ - **Canvases, sketches, notes, groups and Archi's canvas templates** come through import and export.
60
+
61
+ ### Modelling
62
+
63
+ - A **palette** of every element type, grouped by layer and limited by the view's viewpoint.
64
+ - **Connecting two elements offers only the relationship kinds the ArchiMate rules allow** between them.
65
+ - **Nesting**: drop an element inside another and choose what the nesting stands for (composition, aggregation,
66
+ assignment, realization or specialization). It goes into the model, and the nesting shows it.
67
+ - **Add from text**: paste a list of names, from a document or a spreadsheet's columns, and get an element for
68
+ each.
69
+ - **Copy and paste** within a model and between models, **Duplicate**, and **Generate View For** an element and
70
+ what it relates to.
71
+ - **Delete from model**, from the tree or a diagram, after a dialog listing the views it is on and the
72
+ relationships that go with it; one undo puts it all back.
73
+ - **Several models open at once**, a tab each. Each has its own file and its own undo history.
74
+ - **Undo for everything**, one history per model as in Archi: edits on any view, and adding, renaming and deleting
75
+ views. Undoing an edit made on another view takes you to that view.
76
+ - **Specializations**, custom viewpoints, label expressions (`${name}` and `{name}`), and properties with types.
77
+
78
+ ### Editing
79
+
80
+ - **Align, distribute and match size**, to the shape you selected last, as in Archi; **automatic layouts** (grid,
81
+ circle, tree, force-directed, by layer) and **Nest its parts inside**, following composition and aggregation.
82
+ - **Properties of several shapes at once**: colours and text style, the elements' type and specialization, and a
83
+ property to set on all of them.
84
+ - **Format painter**: copy one shape's look onto others.
85
+ - **Colour by** layer, type, specialization or any property (a heat map, e.g. by lifecycle: invest, maintain,
86
+ retire), by a formula over properties (`Cost * Risk_score`), or by the change work packages and deliverables make
87
+ (create, update, delete, boxes and lines), with a legend boxed round its entries; or a legend of the element types
88
+ on the view.
89
+ - **Find and replace** across names, documentation and property values, with match case, whole words and
90
+ regular expressions; **transform names** (Title Case, split camelCase, ...) and **rename a property** across the
91
+ model; **fit a shape to its text**.
92
+ - **Groups and locks on any view**, multi-select, a marquee, Archi's tabbed groups, bendpoints, pinned line ends,
93
+ and orthogonal, curved or straight routing. Lines take the shortest way between shapes, as in Archi.
94
+
95
+ ### Understanding and sharing a model
96
+
97
+ - A **model tree** by layer, by type or flat, each element with its type's picture, with search and filters (type, specialization, property) that dim the
98
+ diagram too.
99
+ - An **analysis panel** for the selected element: which views it's on, and its incoming and outgoing relationships.
100
+ - **Check model** finds relationships the rules don't allow, likely duplicates (by their words, so "System of
101
+ Order Management" matches "order-management system"), unused elements and relationships, empty views, nested
102
+ elements with no relationship, and unprintable characters. **Merge…** makes duplicates one element, keeping
103
+ every relationship and appearance on a view.
104
+ - **Derived relationships**, worked out and shown as dotted lines.
105
+ - **Roadmaps**: generate a view of work packages, plateaus or anything with start and end dates, as bars under
106
+ the months.
107
+ - An **HTML report** in one self-contained file: a tree, search, a page per element, relationship and view, and
108
+ diagrams whose elements link to their pages.
109
+ - **Images**: export PNG or SVG, or copy to the clipboard: the whole drawing with a margin (or only what is in
110
+ sight), at a scale you choose, from the File menu or a right-click; a setting shows where the picture will end.
111
+
112
+ ### Beyond Archi
113
+
114
+ It runs in the browser and embeds in other apps. It also has:
115
+
116
+ - ArchiMate 4 types alongside 3.2;
117
+ - derived relationships without scripts;
118
+ - invalid relationships shown as you choose (highlight, tooltip or hidden), per view, per model or for the tool;
119
+ - groups and locks on every view, not just canvases;
120
+ - a canvas template library shared across models;
121
+ - two drawing backends, SVG and Canvas.
122
+
123
+ ---
124
+
125
+ ## The data modeller
126
+
127
+ One model at the conceptual, logical and physical levels, read by each stakeholder in their own terms, governed and
128
+ checked the way DAMA-DMBOK2 has a model reviewed, and ready for banking at BIAN level. A model can be imported
129
+ from pasted JSON, an assistant's answer included. It shares the modeller's
130
+ workbench: several models open at once, undo for everything, files saved back where they came from, models kept in
131
+ the browser and backed up.
132
+
133
+ ![The data modeller: a retail bank's logical model through its Sensitive data lens, each entity coloured by how sensitive its data is](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/data-model.png)
134
+
135
+ ### One model, three levels
136
+
137
+ - **Concepts, logical entities and tables, each a schema of its own**, mapped any number either way: a concept
138
+ realised by several entities, several entities kept in one table. The **mapping view** draws the three side by
139
+ side, and **lineage** shows, for anything, what it realises and what realises it, all the way up and down.
140
+ - **Perspectives and contexts**: each stakeholder's names for the concepts, and what they mean in a context, with
141
+ its rules and where and when it applies, drawn as notes.
142
+ - **Chen, Crow's Foot and UML**, switched with one choice; **subtypes** (complete or not, disjoint or overlapping);
143
+ **data types and enumerations** defined once, code sets with their source and version, each linked to its
144
+ **ISO 20022** type.
145
+ - **Edit it on the diagram**: double-click an entity for its attribute table (keys, required, what a foreign key
146
+ references, classification), right-click for new and delete. Every edit is one undo step.
147
+
148
+ ### Banking at BIAN level
149
+
150
+ - **Service domains** with their control records, behaviour qualifiers and the service operations BIAN names for
151
+ them, and the **service landscape**: every service domain in its business area and domain.
152
+ - **Read BIAN's own published material instead of retyping it.** A BIAN semantic API (all 258 of release 14 read,
153
+ plain or with ISO 20022) becomes a control record, its qualifiers, their data types and ISO 20022 types in one
154
+ step. BIAN's service landscape in ArchiMate becomes service domains in their areas and domains: run over BIAN's
155
+ v14 model, every one it places lands in the right place.
156
+ - BIAN's vocabulary, its functional patterns, artifacts, action terms and qualifier types, is as BIAN's v14 model
157
+ has it.
158
+
159
+ ### Governed and checked (DAMA-DMBOK2)
160
+
161
+ - **Stewardship**: a business owner, data steward and technical custodian on each entity.
162
+ - **Classification**: sensitivity levels and categories (PII, PCI...) on entities and attributes, **checked down
163
+ the mappings**, so a table is never classified lower than the data it holds; a **lens** colours the model by it.
164
+ - **Check model** reviews it as DMBOK2 would: missing keys, foreign keys without relationships, repeating groups,
165
+ unresolved many-to-many, one name with two types, concepts without definitions, names against the **naming
166
+ standard** you set, **data quality rules** by dimension (completeness, validity, uniqueness...), and BIAN's one
167
+ owner per business object.
168
+ - **The Data Model Scorecard**: Steve Hoberman's ten categories, six measured from the model and four for a
169
+ reviewer, weighted as you choose, in one total.
170
+
171
+ ### To the database and the warehouse
172
+
173
+ - **SQL DDL**: the physical level as `CREATE TABLE`s with keys, foreign keys and comments.
174
+ - **A dimensional scheme**: facts at their grain with additive, semi-additive or non-additive measures, dimensions
175
+ with their history type and conformed across facts, a **star schema** view, and checks as Kimball would make
176
+ them.
177
+ - **Bases** to start a model from, and **compare and merge** between models.
178
+
179
+ ---
180
+
181
+ ## Requirements and story maps
182
+
183
+ Bring in the epics and stories your team already has: a Jira, Azure DevOps or GitLab export (CSV or JSON), or a
184
+ storyboard written in Markdown. Read as a **story map** (epics across, releases down) or a **backlog**, each story
185
+ carries its "As a … I want … so that …", its acceptance criteria (read from their own field, a list in the
186
+ description, or Given/When/Then) and its **traces** to what realises it: an ArchiMate requirement or work package,
187
+ a component, a data concept, entity or table. Drag a card to another epic or release; the toolbar says how many
188
+ stories say when they are done and how many trace to something, and **Check model** lists what is missing.
189
+
190
+ - **Every model alike**: kept, compared and merged as the ArchiMate and data models are, a newer tracker export
191
+ brought in over the old one replacing what changed.
192
+ - **Yours to extend**: a host says what can be traced to, what a story's live state is, and how to find stories by
193
+ meaning (a vector store) — the SqlEngine workbench does all three.
194
+
195
+ ---
196
+
197
+ ## The diagram editor
198
+
199
+ The ArchiMate modeller is built on a general diagram editor, and every editing feature above is part of that
200
+ editor rather than of ArchiMate: align, format painter, properties of several shapes, find and replace, copy and
201
+ paste, groups and locks, undo, HTML report, image export, several models at once. The diagram editor gives you all
202
+ of them for its own palettes:
203
+
204
+ - basic shapes
205
+ - flowchart and BPMN
206
+ - swimlanes
207
+ - UML: class, sequence, activity, state machine, use case, component, deployment
208
+ - entity-relationship
209
+ - data flow
210
+ - network
211
+ - org chart
212
+
213
+ Each model can hold several diagrams, with line styles inherited from the diagram, then the model, then the tool.
214
+
215
+ ![The diagram editor: an order flowchart with a decision, labelled lines and the flowchart palette](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/diagram-editor.png)
216
+
217
+ ---
218
+
219
+ ## OLAP cubing, linked pivot charts and predictive Ask
220
+
221
+ Turn any rolled-up query result (`GROUP BY ROLLUP`, `semanticengine`, or in-memory facts) into an interactive
222
+ multi-dimensional cube grid (`pivotView`), a synchronized chart (`pivotChart`) that follows every slice and drill,
223
+ and a natural-language query bar (`askBar`) with configurable next-word prediction.
224
+
225
+ ### The cube grid (`pivotView` / `PivotView`)
226
+
227
+ - **Interactive layout chips (PresentBlox)**: move dimensions between rows, columns, and page filters, reorder
228
+ hierarchy levels outward or inward, or keep/exclude individual dimension members.
229
+ - **Expand, collapse and drill**: collapse any member onto its rolled-up subtotal (`▾` / `▸`), expand to a chosen
230
+ hierarchy depth (`expandToLevel`), drill down/up along a dimension hierarchy (`onDrill`), or **drill through** any
231
+ cell to inspect the underlying fact rows (`onDrillThrough`).
232
+ - **7 summary & statistical aggregations**: switch cell and subtotal calculations on the fly between **Sum**,
233
+ **Count**, **Average**, **Median**, **Minimum**, **Maximum**, and **Std Dev** (`setAggregation`), computed over raw
234
+ underlying facts (`options.facts`) or descendant leaf cells.
235
+ - **Post-rollup derived formula measures**: define calculated measures such as `Margin = Revenue - Cost` or
236
+ `MarginPct = Revenue > 0 ? Margin / Revenue * 100 : 0` (`derivedMeasures`, `addDerivedMeasure`). Formulas are
237
+ compiled once via `compileFormula` and evaluated *after* rollup so ratios and percentages are always accurate on
238
+ subtotals and grand totals.
239
+ - **Ranking, sorting and % of total**: hierarchical sibling sorting (`sortRowsBy`), **Top-N / Bottom-N** filtering
240
+ within each parent group (`setTopN`), multi-measure visibility toggles (`toggleMeasure`), percentage-of-total
241
+ display modes (`% of row total`, `% of column total`, `% of grand total`), traffic-light conditional formatting
242
+ (custom rules or automatic tertiles), and serializable saved views (`displayState` / `restoreDisplay`).
243
+
244
+ ### Linked pivot chart (`pivotChart` / `PivotChart`)
245
+
246
+ - **Follows the cube automatically**: charts the finest visible members on both axes without double-counting totals,
247
+ and redraws whenever the cube is pivoted, collapsed, sorted, filtered, or switched to a different aggregation.
248
+ - **35+ cube chart types, switchable in one click**: switch live between **Line**, **Grouped Bar**, **Stacked Bar**,
249
+ **Bar**, **Area**, **Stacked Area**, **Stream Graph**, **Pareto (80/20)**, **Waterfall**, **Marimekko / Mekko Mosaic**,
250
+ **Lollipop**, **Pipe**, **Heatmap**, **Radar / Spider**, **Parallel Coordinates**, **Population Pyramid**,
251
+ **Sankey**, **Chord**, **Treemap**, **Sunburst**, **Icicle**, **Outline**, **Pie**, **Donut**, **Funnel**,
252
+ **Radial Bar**, **Word Cloud**, **Box Plot**, **Density**, **Violin**, **Histogram**, **Q-Q Plot**, **Lag Plot**,
253
+ **Scatter**, **Bubble**, **3D Bar**, **3D Orbit Bar**, and **3D Orbit Stacked Bar** (`pivotChartLink.setType(key)`
254
+ or via the in-chart `▾` menu).
255
+ - **Click any chart mark to drill the cube**: clicking a bar, line vertex, slice, treemap/icicle cell, Sankey node,
256
+ or scatter point expands a collapsed member or drills the cube down to the next hierarchy level on either axis.
257
+
258
+ ### Predictive natural-language query bar (`askBar` / `AskView`)
259
+
260
+ - **Scrollable next-word prediction**: predicts the next keyword, measure, dimension, operator, or member value as
261
+ you type, with semantic badges (`sense`, `reference`, `relation`, `kind`) and full keyboard navigation (`↑`/`↓`,
262
+ `Tab`/`Enter` to accept, `Escape` to dismiss).
263
+ - **User-configurable viewport**: built-in `Predict next word` selector lets users choose how many predicted items
264
+ are visible at once in the scrollable list (`Off`, `3`, `5`, `8`, `10`, or custom `predictChoices`).
265
+ - **Pluggable intelligence**: pass declarative `measures`, `dimensions`, `members` and `sampleQuestions` for the
266
+ built-in grammar/bigram predictor, or wire `suggest: (text) => semanticEngine.suggest(text)` to connect directly
267
+ to `semanticengine`.
268
+
269
+ ```javascript
270
+ import { RenderEngine } from '@peter.prib/renderengine';
271
+
272
+ // 1. Render an interactive OLAP cube with derived formulas and statistical aggregations
273
+ const gridEngine = new RenderEngine('#pivot-grid', { rendererType: 'svg' });
274
+ const cube = gridEngine.pivotView(rolledUpRows, {
275
+ title: 'Revenue & Margin Cube',
276
+ rowAxis: ['Year', 'Quarter'],
277
+ columnAxis: ['Region'],
278
+ facts: rawFactRows, // enables exact Count, Avg, Median, Min, Max, Std Dev
279
+ measures: ['Revenue', 'Cost'],
280
+ derivedMeasures: [
281
+ { name: 'Margin', formula: 'Revenue - Cost' },
282
+ { name: 'MarginPct', formula: 'Revenue > 0 ? Margin / Revenue * 100 : 0' },
283
+ ],
284
+ columns: [
285
+ { name: 'Year', kind: 'time' },
286
+ { name: 'Quarter', kind: 'time' },
287
+ { name: 'Region', kind: 'categorical' },
288
+ { name: 'Revenue', kind: 'numeric', measure: 'additive' },
289
+ { name: 'Cost', kind: 'numeric', measure: 'additive' },
290
+ { name: '_rollup', kind: 'rollup', dimensions: ['Year', 'Quarter', 'Region'] },
291
+ ],
292
+ });
293
+
294
+ // Switch aggregations, Top-N ranking, or % of total programmatically (or from the ⋮ menu):
295
+ cube.setAggregation('median'); // 'sum' | 'count' | 'avg' | 'median' | 'min' | 'max' | 'stddev'
296
+ cube.setTopN(5, { measure: 'Margin', direction: 'desc' });
297
+ cube.setValueMode('rowPercent'); // 'value' | 'rowPercent' | 'columnPercent' | 'totalPercent'
298
+
299
+ // 2. Link a Pivot Chart that follows the cube and drills on click across 35+ chart types
300
+ const chartEngine = new RenderEngine('#pivot-chart', { rendererType: 'svg' });
301
+ const pivotChart = chartEngine.pivotChart(cube, { type: 'stackedBar' });
302
+ pivotChart.setType('marimekko'); // switch to 'line', 'pareto', 'icicle', 'sankey', 'radar', ...
303
+
304
+ // 3. Mount a Predictive Ask Bar with configurable next-word prediction in a scrollable list
305
+ const askEngine = new RenderEngine('#ask-results', { rendererType: 'svg' });
306
+ askEngine.askBar('#ask-bar', {
307
+ value: 'Average Revenue by Quarter and Region',
308
+ measures: ['Revenue', 'Cost', 'Margin', 'MarginPct'],
309
+ dimensions: ['Region', 'Year', 'Quarter', 'Month'],
310
+ members: (dim) => [...new Set(rawFactRows.map(r => r[dim]))],
311
+ visibleCount: 5,
312
+ predictChoices: [0, 3, 5, 8, 10], // 0 = Off, or N visible items in scrollable list
313
+ onAsk: (question) => { /* update cube & resultView */ },
314
+ });
315
+ ```
316
+
317
+ ---
318
+
319
+ ## The chart library (50+ chart & diagram types)
320
+
321
+ The engine underneath draws **over 50 chart and diagram types** to interchangeable **SVG** or **Canvas** backends,
322
+ all driven by a single declarative catalog (`CHART_CATALOG`):
323
+
324
+ - **Categorical & comparison**: `barChart`, `groupedBarChart`, `stackedBarChart` (standard and **100% normalized**
325
+ `normalize: true`), `lollipopChart` (single and multi-series dot-and-stem), `marimekkoChart` (variable-width
326
+ 2D mosaic), `paretoChart` (descending bars + cumulative 0–100% curve + 80% threshold line), `waterfallChart`,
327
+ `funnelChart`, `populationPyramid`, `radialBarChart`, `wordCloud`.
328
+ - **Time-series & trend**: `lineChart` (with error bars and multi-series), `areaChart` (standard, stacked, and
329
+ **100% normalized** `normalize: true`), `stackedAreaChart`, `streamGraph`, `pipeChart` (variable-width flow),
330
+ `candlestick` (OHLC with event markers), `ganttChart`, `calendarHeatmap`.
331
+ - **Hierarchical & part-of-whole**: `pieChart`, `donutChart`, `treemapChart`, `sunburstChart`, `icicleChart`
332
+ (top-down rectangular partition), `outlineChart` (collapsible indented tree with inline proportion bars).
333
+ - **Statistical & distribution**: `histogram`, `boxPlot`, `densityChart` (kernel density estimation), `violinChart`,
334
+ `qqPlot` (normal quantile-quantile), `lagPlot` (lag-1 autocorrelation), `scatterChart` (with 2D error bars and
335
+ reference lines), `bubbleChart`.
336
+ - **Multivariate, matrix & network flow**: `heatmap` (correlation and matrix grids), `radarChart` (spider),
337
+ `parallelCoordinates`, `sankeyDiagram`, `chordDiagram`, `geoMap` (choropleth polygons + city bubbles).
338
+ - **3D & orbit camera**: `barChart3D`, `bubbleChart3D`, `lineChart3D`, and true 4×4 matrix perspective orbit charts
339
+ (`scatter3DOrbit`, `barChart3DOrbit`, `stackedBarChart3DOrbit`, `graphDiagram3D`).
340
+ - **Gauges & KPIs**: `dialGauge` (bands, ticks, multi-needle, targets), `arcGauge`, `ringGauge`, `ringsGauge`,
341
+ `barGauge`, `bulletChart`, `thermometerGauge`, `ledGauge`, `kpiTile` (with sparklines and delta badges).
342
+ - **Interactive tables & diagrams**: `tableChart`, `resultView` (sortable, filterable, pageable table that switches
343
+ into any fitting chart via `ChartChooser`), `pivotView`, `pivotChart`, `graphDiagram` (force-directed, hierarchical
344
+ Dewey keys, table nodes, orthogonal/polyline obstacle-avoiding routing, manual bendpoints), `archimateDiagram`,
345
+ `dataModelDiagram`, `railroadDiagram`, `ebnfDiagram`.
346
+
347
+ `test/charts.html` is the full interactive workspace gallery (including the dedicated **Cubing** perspective), and
348
+ `examples/csv-chart-builder.html` builds charts from a CSV file without code.
349
+
350
+ ```javascript
351
+ const engine = new RenderEngine('#chart', { rendererType: 'svg' });
352
+
353
+ // 80/20 Pareto Chart with cumulative percentage curve and 80% reference line
354
+ engine.paretoChart([
355
+ { label: 'Timeout', value: 142 },
356
+ { label: 'Auth Expired', value: 88 },
357
+ { label: 'Rate Limit', value: 54 },
358
+ { label: 'Schema Mismatch', value: 26 },
359
+ ], { title: 'Incident Root Causes', cutoffPercent: 80 });
360
+
361
+ // 100% Normalized Stacked Bar Chart
362
+ engine.stackedBarChart([
363
+ { label: 'Q1', values: [180, 90, 50] },
364
+ { label: 'Q2', values: [210, 110, 60] },
365
+ ], { title: 'Segment Share by Quarter', normalize: true, seriesLabels: ['Enterprise', 'Mid-Market', 'SMB'], legend: true });
366
+
367
+ // Marimekko (Mekko Mosaic), Lollipop, and Icicle Partition Charts
368
+ engine.marimekkoChart(seriesData, { title: 'Market Share by Region & Segment' });
369
+ engine.lollipopChart(seriesData, { title: 'Regional Revenue Comparison', legend: true });
370
+ engine.icicleChart(hierarchyTree, { title: 'Disk Usage by Category' });
371
+ ```
372
+
373
+ ![Gauges: a dial with bands, ticks and a target; arc, ring and nested rings; a two-needle dial; LED segments; a thermometer; KPI tiles with sparklines](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/gauges.png)
374
+
375
+ ![Charts from the gallery: bar, grouped bar, line and line with error bars](https://gitlab.com/peter.prib/renderengine/-/raw/master/docs/images/charts.png)
376
+
377
+ ---
378
+
379
+ ## Put it in your own page
380
+
381
+ ```bash
382
+ npm install @peter.prib/renderengine
383
+ ```
384
+
385
+ The package is the ES module source and the built bundles:
386
+
387
+ - `import { ArchimateModel, RenderEngine } from '@peter.prib/renderengine'`: the engine and the models (this also
388
+ imports under Node).
389
+ - `import '@peter.prib/renderengine/workspace'`: the workbench shell and its parts (browser only).
390
+ - `@peter.prib/renderengine/dist/renderengine-workspace.umd.js`: the same as one classic script.
391
+
392
+ The modeller is a part in the `<ws-workspace>` workbench shell. One script tag and a JSON spec is the whole host
393
+ page:
394
+
395
+ ```html
396
+ <script src="dist/renderengine-workspace.umd.js"></script>
397
+ <script>
398
+ const { el, registerBuiltinParts, ArchimateCanvasPart } = RenderEngineWorkspace;
399
+ const ws = document.body.appendChild(el({ tag: 'ws-workspace', attrs: { label: 'Modeller' } }));
400
+ registerBuiltinParts(ws);
401
+ ws.registerPart(ArchimateCanvasPart);
402
+ ws.addParts([{
403
+ id: 'models', type: 'models', editorType: 'archimate-canvas', // several models, a tab each
404
+ models: [{
405
+ id: 'shop', name: 'Shop',
406
+ elements: [{ id: 'c', name: 'Customer', type: 'business-actor' }, { id: 'o', name: 'Order', type: 'business-process' }],
407
+ relationships: [{ source: 'c', target: 'o', kind: 'assignment' }],
408
+ views: [{ id: 'v', name: 'Main', elementIds: ['c', 'o'], layout: { c: { x: 100, y: 100 }, o: { x: 320, y: 100 } } }],
409
+ }],
410
+ }]);
411
+ ws.registerPerspective('Modelling', { type: 'part', partId: 'models' });
412
+ ws.activatePerspective('Modelling');
413
+ </script>
414
+ ```
415
+
416
+ Use `editorType: 'diagram-editor'` with `DiagramEditorPart` for the diagram editor, `editorType: 'data-model'`
417
+ with `DataModelPart` for the data modeller, and `editorType: 'requirements'` with `RequirementsPart` for the story
418
+ map. The models are plain JavaScript APIs (`ArchimateModel`, `DiagramModel`, `DataModel`, `RequirementsModel`), so
419
+ you can also build, check, score, search, report on and export models with no UI at all, under Node too:
420
+ `new DataModel(spec).checker().run()`, `new SqlDdl().write(model)`,
421
+ `new RequirementsModel(new TrackerExport().read(csv)).coverage()`.
422
+
423
+ ---
424
+
425
+ ## Documentation
426
+
427
+ | Document | What it covers |
428
+ |---|---|
429
+ | `documentation/REFERENCE.md` | The API: chart methods and options, the editors, models, commands, file formats |
430
+ | `documentation/WORKSPACE_ARCHITECTURE.md` | The `<ws-workspace>` shell: parts, layout, context bus, work area |
431
+ | `documentation/ARCHITECTURE.md` | Module layout and the chart-type catalog |
432
+ | `documentation/LLM_ARCHIMATE_GUIDE.md` | Generating valid ArchiMate model data, with a prompt template |
433
+ | `documentation/tasks.md` | What's still to come |
434
+
435
+ ## Build and test
436
+
437
+ ```bash
438
+ npm install # dev tools only: Rollup
439
+ npm run build # dist/renderengine.umd.js and dist/renderengine-workspace.umd.js
440
+ npm test # Node's built-in test runner, no browser needed
441
+ npm run screenshots # this README's pictures, from the example pages (headless Chrome)
442
+ ```
443
+
444
+ There are two bundles:
445
+
446
+ - `renderengine.umd.js` (global `RenderEngine`): the engine.
447
+ - `renderengine-workspace.umd.js` (global `RenderEngineWorkspace`): the workbench shell and its parts, plus the
448
+ whole engine API, so one script tag is enough.
449
+
450
+ The source is plain ES modules. `src/index.js` imports under Node, which is how the tests run.
451
+
452
+ ## Licence
453
+
454
+ MIT. Contributions welcome.