@rotorsoft/esml NPM

ESML

ESML, which stands for Event Storming Modeling Language, aims to create a user-friendly JSON schema that accurately describes the components of Event Storming Models with a level of detail that enables precise rendering of diagrams.

Instructions

Start by specifying the system or domain you want to model (e.g., banking system, e-commerce platform, healthcare system).
Identify the key entities or aggregates in the system. For each aggregate:
- Specify the commands it can handle (e.g., CreateAccount, PlaceOrder).
- Specify the events it can emit (e.g., AccountCreated, OrderPlaced).
Define the actors or users interacting with the system. For each command:
- Specify the actors
- Specify the projectors they read for retrieving information (e.g., ViewAccountBalance, ViewOrderStatus).
Determine the contexts in the system. A context is a grouping of related aggregates, actors, and policies. Specify the artifacts included in each context.
Define the policies that govern the behavior of the system. For each policy:
- Specify the events it can handle (e.g., HandleOrderCancelled, HandlePaymentReceived).
- Specify the commands it can invoke (e.g., ProcessOrder, RefundPayment).

API

To render the SVG model

esml(code: string, scale: number) => { error?: Error; svg?: string; width?: number; height?: number };

To embed the canvas in your HTML document

type Options = {
    SCALE: number;
    WIDTH: number;
    HEIGHT: number;
    coordsSpan?: HTMLSpanElement;
    zoomSpan?: HTMLSpanElement;
    fitBtn?: HTMLButtonElement;
};

type State = {
    code: string;
    x?: number;
    y?: number;
    zoom?: number;
};

const canvas = new Canvas(document: Document, container: HTMLDivElement, options?: Options);

canvas.on("transformed", e => {
    console.log(e);
});

const error = canvas.render({ code, x, y, zoom });
if(error) console.log(error);