CxJS Diagrams

Getting Started

Install the package using npm or yarn:

npm install cx-diagrams

or

yarn add cx-diagrams

Note: This library requires CxJS as a peer dependency. If you haven’t already, set up a CxJS project first.

Basic Example

Here’s a simple example that creates two shapes connected by a line:

import { Diagram, Cell, Shape, Flow, StraightLine } from "cx-diagrams";

<Diagram unitSize={32} showGrid center>
  <Flow gap={1}>
    <Cell width={4} height={2}>
      <Shape text="Hello" fill="lightblue" id="hello" />
    </Cell>
    <Cell width={4} height={2}>
      <Shape text="World" fill="lightgreen" id="world" />
    </Cell>
  </Flow>
  <StraightLine from="hello" to="world" stroke="black" />
</Diagram>

Key Concepts

  • Diagram - The root container that provides zooming, panning, and the coordinate system
  • Cell - Defines a rectangular area that participates in layout flows
  • Shape - Visual elements like rectangles, circles, and rhombuses
  • Flow - Arranges cells in a directional layout (right, down, left, up)
  • Lines - Connect shapes by referencing their id attributes