Skip to main content

ClassDiagram

ClassDiagram renders typed class, DTO, record, and enum relationship graphs from plain data objects. You describe your types as data — the component takes care of layout, navigation, and visual styling.

It supports three display modes: focus (one class at a time, navigate by clicking), full (the entire graph at once), and inline (a compact, non-interactive snapshot). The focus mode is particularly powerful for documenting large APIs where showing everything at once would be overwhelming.

Live demo​

Loading demo…

Click on any type name in a property row to navigate to that class.

Installation​

npm install docucraft

Usage​

import { ClassDiagram } from 'docucraft';

<ClassDiagram
  mode="focus"
  focus="order"
  data={{
    classes: [
      {
        id: 'order',
        name: 'OrderDto',
        kind: 'record',
        summary: 'Represents a customer order.',
        properties: [
          { name: 'id',       typeLabel: 'Guid',        isPrimitive: true, isRequired: true },
          { name: 'customer', typeLabel: 'CustomerDto',  typeId: 'customer' },
        ],
      },
      {
        id: 'customer',
        name: 'CustomerDto',
        properties: [
          { name: 'name', typeLabel: 'string', isPrimitive: true },
        ],
      },
    ],
  }}
/>

Display modes​

focus — starts with one class visible. Readers navigate by clicking on type names in property rows to re-focus the graph. Use this for large models or when you want to guide readers to a specific entry point. Set focus to the id of the starting class.

full — shows the entire graph at once with pan and zoom. Use this for smaller models where the full picture fits comfortably on screen.

inline — a compact, non-interactive snapshot. Useful for embedding a quick visual reference without taking over the full page width.

Best practices​

Put summary on every class. It shows up as a subtitle under the class name and helps readers understand the purpose of a type before diving into its properties.

Set typeId on non-primitive properties. Without a typeId, a property is just text — with one, it becomes a clickable link that navigates to the referenced class. This is what makes the focus mode useful.

Use maxDepth to control scope in focus mode. The default depth of 1 shows only the focused class and its immediate neighbours. Increase it to 2 or 3 for more context, but be careful — deep graphs can get cluttered quickly.

Mark isRequired, isCollection, isPrimitive, and isEnum. These flags control the visual decorators on each property row and help readers understand the shape of a type at a glance.

Props​

PropTypeDefaultDescription
dataClassDiagramModel—The full class model. Required.
focusstring—id of the class to show initially in focus mode.
mode'focus' | 'full' | 'inline''focus'How the graph is displayed.
heightnumber620Canvas height in pixels.
maxDepthnumber1How many hops from the focused class to show in focus mode.
showPrimitivesbooleantrueWhether to include properties with primitive types.
classNamestring—Additional CSS class on the root wrapper.

ClassDiagramModel​

type ClassDiagramModel = {
  classes: DtoClass[];
};

type DtoClass = {
  id: string;
  name: string;
  namespace?: string;
  kind?: 'class' | 'record' | 'enum';
  baseTypeId?: string;
  summary?: string;
  properties: DtoProperty[];
};

type DtoProperty = {
  name: string;
  typeLabel: string;
  typeId?: string;
  isNullable?: boolean;
  isCollection?: boolean;
  isEnum?: boolean;
  isPrimitive?: boolean;
  isRequired?: boolean;
  summary?: string;
};