CLASS.js

d3.jsを使用してUMLクラス図を描画するTypeScriptライブラリです。

インストール

npm install

使い方

基本的な使い方

import { ClassDiagram } from 'class.js';

const diagram = new ClassDiagram('#container', {
  width: 800,
  height: 600
});

// クラスを追加
const userClass = diagram.addClass({
  name: 'User',
  attributes: [
    { name: 'id', type: 'number', visibility: 'private' },
    { name: 'name', type: 'string', visibility: 'public' }
  ],
  methods: [
    { name: 'getName', returnType: 'string', visibility: 'public' }
  ],
  x: 100,
  y: 100
});

// 関係を追加
diagram.addRelationship({
  type: 'inheritance',  // association, inheritance, aggregation, composition, dependency
  from: { x: 200, y: 200 },
  to: { x: 200, y: 100 }
});

diagram.render();

JSONデータから読み込み

import { ClassDiagram, DiagramInput } from 'class.js';

const data: DiagramInput = {
  classes: [
    {
      name: 'Animal',
      stereotype: 'abstract',
      attributes: [{ name: 'name', type: 'string', visibility: 'protected' }],
      methods: [{ name: 'speak', returnType: 'void', visibility: 'public' }],
      x: 300,
      y: 50
    },
    {
      name: 'Dog',
      attributes: [{ name: 'breed', type: 'string', visibility: 'private' }],
      methods: [{ name: 'speak', returnType: 'void', visibility: 'public' }],
      x: 300,
      y: 200
    }
  ],
  relationships: [
    {
      type: 'inheritance',
      from: { x: 400, y: 200 },
      to: { x: 400, y: 130 }
    }
  ]
};

const diagram = new ClassDiagram('#container');
diagram.loadFromData(data).render();

開発

# 開発サーバー起動
npm run dev

# ビルド
npm run build

# テスト
npm test

# 型チェック
npm run typecheck