How kieler/elkjs works
1. This repository is the JavaScript distribution layer for Eclipse ELK, a graph layout engine. Its boundary is clear: it accepts an ELK JSON graph, runs layout algorithms, and returns the same graph enriched with coordinates, routing, logging, and timing. It does not render diagrams or provide editor UI.
2. The architecture has two main runtime artifacts: an API layer and a worker/engine layer. The API layer is the small JavaScript-facing entrypoint (src/js/elk-api.js, src/js/main-api.js, src/js/main-node.js) that constructs ELK, normalizes options, and orchestrates calls. The engine layer is generated from Java/GWT sources and contains the actual layout algorithms.
3. The layout engine is rooted in src/java and src/java-additional. The org.eclipse.elk.js package contains the GWT module definitions and Node-specific linker support (Elk.gwt.xml, ElkJs.gwt.xml, NodeJsModuleLinker.java). The additional Java sources include adapters/utilities such as JsonAdapter.xtend and SVGImage.java, which bridge ELK’s Java object model to the JSON representation used by JavaScript.
4. Data flows from the caller into the API as an ELK JSON graph. The API passes graph data and layout options to the worker or direct engine. The engine mutates/returns the graph with layout results, and optionally emits logging and executionTime metadata when requested. That output is the only product of the system.
5. There are two execution modes. In browser environments, the library can run entirely in-page via the bundled build or via a separate elk-worker.js loaded with Worker. In Node.js, it can run directly without a worker or use a worker-thread compatible implementation when provided. This split is important to the architecture because the same public API can target different runtimes.
6. The build is a hybrid Java/JavaScript pipeline. Gradle and GWT compile the ELK Java sources into worker-side JavaScript, while npm/browserify-style packaging assembles the consumable JS files. The repository expects a sibling checkout of the ELK Java repository, which is the source of the actual layout algorithms.
7. The published package exposes multiple distribution shapes. elk-api.js is the API-only entrypoint, elk-worker.js is the compiled engine, elk.bundled.js is a browser-ready combined artifact, and the Node module entry points in src/js/main-node.js and src/js/main-api.js provide require('elkjs') convenience. This packaging boundary is central to the repo.
8. Typings in typings/ provide the public TypeScript contract for the same API surface. They mirror the runtime entry points (elk-api, elk-worker, bundled variants) and are part of the consumer-facing boundary even though they do not affect execution.
9. The test/ tree serves two roles: example integrations and automated verification. The example files show browser, Node, and webworker usage patterns, while the Mocha tests validate API behavior, known algorithms/options, logging, IDs, error handling, and regression cases. This suggests the repo’s critical risks are compatibility and packaging rather than core algorithm correctness, which lives upstream in ELK.
10. Operationally, the project is published as an npm package and also has CI/CD via GitHub Actions. The release process builds the generated artifacts into lib/, publishes to npm, and relies on the ELK version alignment described in the README. For architecture diagrams, the important external dependency is the upstream Eclipse ELK codebase; this repository is primarily the JavaScript bridge, packaging, and runtime wrapper around it.
Main entry points: ElkJs.java ELK JS · build.gradle Gradle build · elk-api.js elk-api · package.json npm package
Components 19
Public API
Consumer entrypoints and distribution shapes.
- elk-api · Main JavaScript API constructor and orchestration entrypoint.
src/js/elk-api.js - main api · Node/browser-facing API wrapper for the package entrypoint.
src/js/main-api.js - main node · Node.js module entrypoint for direct consumption.
src/js/main-node.js - API bundle · API-only distribution exposed to consumers.
- Worker bundle · Compiled engine bundle loaded directly or in a worker.
- Bundled build · Browser-ready combined artifact.
Layout Engine
Generated GWT/Java sources that run layout.
- ELK JS · GWT module and Java bridge entrypoint.
src/java/org/eclipse/elk/js/ElkJs.java - ELK GWT · Top-level GWT module definition for the ELK Java sources.
src/java/org/eclipse/elk/Elk.gwt.xml - ELK JS GWT · JavaScript-targeted GWT module definition.
src/java/org/eclipse/elk/js/ElkJs.gwt.xml - Node linker · Node.js module linker for GWT output.
src/java/org/eclipse/elk/js/linker/NodeJsModuleLinker.java - JSON adapter · Bridges ELK graph objects to the JSON representation.
src/java-additional/org/eclipse/elk/graph/json/JsonAdapter.xtend - SVG image · Utility support for image handling in the layout model.
src/java-additional/org/eclipse/elk/alg/common/utils/SVGImage.java - ELK core · External Java repository providing the actual layout algorithms.
Build & Release
Compilation, packaging, and publishing pipeline.
- Gradle build · Java/GWT build orchestration and artifact generation.
build.gradle - npm package · Package metadata and consumer distribution configuration.
package.json - CI/CD · Continuous integration and release workflows.
.github/workflows/ci.yml
Validation
Examples, tests, and public typings.
- Typings · Public TypeScript contracts for the runtime entrypoints.
typings/elk-api.d.ts - Examples · Integration examples for browser, Node, and worker runtimes.
test/examples - Mocha tests · Behavioral and regression tests for API, options, logging, and errors.
test/mocha
Connections 23
- elk-api → ELK JS: invoke layout · API forwards graph and options into the engine.
- elk-api → main api: exported by · Main API wrapper exposes the constructor to consumers.
- main api → main node: node entry · Node entrypoint reuses the same public API surface.
- main api → API bundle: packages · API entrypoint becomes the published API artifact.
- main node → API bundle: consumes · Node module entrypoint resolves the packaged API surface.
- ELK JS → ELK JS GWT: configured by · GWT module definition drives JS-targeted compilation.
- ELK JS → ELK GWT: inherits from · Java/GWT build is rooted in the broader ELK module.
- ELK JS → Node linker: links for node · Node-specific linker shapes CommonJS output.
- ELK JS → JSON adapter: adapts graphs · JSON adapter maps ELK objects to the JS graph model.
- ELK JS → SVG image: uses · Additional utilities support engine-side data handling.
- ELK JS → ELK core: delegates to · Generated bridge depends on upstream algorithm implementations.
- JSON adapter → ELK core: bridges model · Adapter translates between the ELK Java model and JSON.
- Gradle build → ELK JS: compiles · Gradle/GWT build produces the JavaScript engine bundle.
- Gradle build → Worker bundle: emits · Build produces the worker-side compiled artifact.
- Gradle build → Bundled build: assembles · Build assembles the browser-ready combined distribution.
- npm package → API bundle: publishes · npm package exposes the API-only distribution.
- npm package → Worker bundle: publishes · npm package exposes the worker bundle.
- npm package → Bundled build: publishes · npm package exposes the browser bundled build.
- CI/CD → Gradle build: runs · CI and release workflows execute the build pipeline.
- Typings → API bundle: describes · Type definitions mirror the API entrypoint.
- Examples → elk-api: demonstrate · Examples exercise browser, Node, and worker usage.
- Mocha tests → elk-api: verify · Tests validate API behavior and distribution compatibility.
- Mocha tests → Worker bundle: verify · Tests cover worker-oriented runtime behavior.