Developer guide / Local preview
Start with the model.
Keep your graph, architecture semantics and changes explicit. Compose a view when you need one.
Use the existing packages.
Zloz is the product name. This checkout still uses the technical package names below; package naming and publication are separate release work.
Run bun install --frozen-lockfile from the repository root, then bun run dev:zloz-demo for the board or bun run dev:zloz-promo for this site. The board dev port is 4327; the reviewed preview link is separately configurable.
- @opsydyn/foldkit-zloz
- Graph model, immutable editor, geometry and C4 / DDD semantics.
- @opsydyn/foldkit-zloz/foldkit
- Optional native Foldkit views, policies, composable renderers and theme tokens.
- @opsydyn/foldkit-zloz-elk / -force
- Optional layout adapters, separate from the graph core.
- @opsydyn/foldkit-zloz-mermaid
- Mermaid export with identity mapping and conversion-loss reporting.
Meaning first.
Rendering second.
This example uses the actual public core contract. The core has no browser or renderer dependency. The optional Foldkit adapter keeps interaction in Model → view → Message → update.
Browse the API and type contracts ↗import { createArchitectureNode, serializeGraph } from '@opsydyn/foldkit-zloz';
const system = createArchitectureNode({
id: 'orders',
label: 'Order platform',
position: { x: 0, y: 0 },
size: { width: 240, height: 160 },
ports: [],
architecture: { family: 'c4', role: 'software-system' },
});
export const document = serializeGraph({ nodes: [system], edges: [] });
Your visual language.
Compose custom node bodies, edge labels, controls and layouts. Apply scoped theme tokens through ZlozTheme; keep application styling outside the headless graph model.
Portable, with honest losses.
Canonical JSON preserves the model. Mermaid carries diagram source plus a separate identity map and reports what cannot survive conversion, including layout and richer semantic details.