@polygonschmied/stellar-diagrams

UML diagrams for Stellar DS, rendered through the shared @polygonschmied/stellar-viz-core look and feel so they match the charts and graphs. All take the generic VizGraph input.

• UseCaseDiagram — actors (stick figures), use cases (ellipses), a system boundary box, and the standard relationship notation: association (line), «include»/«extend» (dashed open arrows), generalization (hollow triangle). node.group = actor|usecase, edge.kind = association|include|extend|generalization. dagre left-to-right.
• Flowchart — terminator / process / decision / I/O shapes flowing top-to-bottom. node.group selects the shape; branch labels in edge.meta.label. dagre rankdir: TB.
• SequenceDiagram — participants as lifelines, messages stacked in input (time) order. nodes = participants (column order), edge.kind = sync|return|async, message text in edge.meta.label, source === target is a self-message. Deterministic positional layout (no dagre).
• ActivityDiagram — UML activity shapes flowing top-to-bottom: initial dot, bullseye final, rounded-rect action, diamond decision/merge, fork/join bar. node.group selects the shape; guards in edge.meta.label. dagre rankdir: TB.

UseCaseDiagram / Flowchart / ActivityDiagram are graph-laid-out with @dagrejs/dagre (MIT); all layouts are deterministic so visual snapshots stay stable. Interaction: pan/zoom everywhere, plus node dragging on the dagre-based diagrams (the sequence grid is fixed, so it is pan/zoom only).

import { UseCaseDiagram } from "@polygonschmied/stellar-diagrams";

<UseCaseDiagram
  systemName="Shop"
  data={{
    nodes: [
      { id: "customer", label: "Customer", group: "actor" },
      { id: "checkout", label: "Checkout", group: "usecase" },
      { id: "pay", label: "Pay", group: "usecase" },
    ],
    edges: [
      { source: "customer", target: "checkout", kind: "association" },
      { source: "checkout", target: "pay", kind: "include" },
    ],
  }}
/>;