@ddd-tool/domain-designer-ui-component

Vue 3 UI components for visualizing Domain-Driven Design models

@ddd-tool/domain-designer-ui-component provides interactive Vue 3 components for visualizing domain models created with @ddd-tool/domain-designer-core. Features event storming UML diagrams, user story displays, workflow animations, and completeness analysis.

Features

• Interactive UML Diagrams: Visualize event storming models with drag, zoom, and pan
• Workflow Animation: Animate domain workflows to understand business flow
• User Story Explorer: Browse and filter workflows by user stories
• Node Details Panel: Inspect domain elements with detailed information
• Multi-Design Support: Switch between multiple domain designs
• Export to SVG: Export diagrams for documentation
• Bilingual Support: English and Simplified Chinese (i18n)
• Customizable Rendering: Adjust layout, fonts, edges, and more

Installation

npm install @ddd-tool/domain-designer-ui-component

pnpm add @ddd-tool/domain-designer-ui-component

bun add @ddd-tool/domain-designer-ui-component

Peer Dependencies

This package requires Vue 3 and PrimeVue:

npm install vue@>=3.5.27 primevue

Quick Start

<script setup lang="ts">
import { Ui, PrimeVue, Aura, Tooltip } from '@ddd-tool/domain-designer-ui-component'
import { createDomainDesigner } from '@ddd-tool/domain-designer-core'

// Create your domain model
const d = createDomainDesigner()
const i = d.info

const orderId = i.id('OrderId')
const placeOrder = d.command('PlaceOrder', [orderId])
const order = d.agg('Order', [orderId])
const orderPlaced = d.event('OrderPlaced', [orderId])
const customer = d.actor('Customer')

const workflow = d.startWorkflow('Place Order')
customer.command(placeOrder).agg(order).event(orderPlaced)

d.defineUserStory('Customer places order', [workflow])

// Export as default for the UI component
export default d
</script>

<template>
  <PrimeVue :theme="Aura" :pt="{ tooltip: { modifiers: [Tooltip] } }">
    <Ui :designs="{ default: d }" />
  </PrimeVue>
</template>

Components

<Ui>

The main UI component that provides the complete visualization interface.

Props:

| Prop | Type | Required | Description | | :--- | :--- | :--- | :--- | | designs | Record<string, DomainDesigner> | Yes | Object containing one or more domain designer instances |

Example:

<template>
  <Ui :designs="{ 'Order Management': orderDesign, 'Inventory': inventoryDesign }" />
</template>

Features Overview

Interactive Diagram Navigation

• Pan: Click and drag to move around the diagram
• Zoom: Use mouse wheel or zoom controls to zoom in/out
• Reset: Reset position and zoom to default

Workflow Animation

Animate through your domain workflows step by step:

1. Select a user story from the user story panel
2. Choose a workflow within that story
3. Click the play button to start animation
4. Adjust animation speed with the slider

Node Details

Click on any node in the diagram to view detailed information:

• Node name and type (Actor, Command, Event, Aggregate, etc.)
• Type-specific information
• Associated notes and documentation

Settings Panel

Customize the visualization:

• Display Options: Toggle read models and external systems
• Language: Switch between English and Chinese
• Render Settings:
  • Layout algorithm (Network Simplex, Tight Tree, Longest Path)
  • Padding and font size
  • Edge style (hard or rounded)
  • Bend size for rounded edges
• Data Source: Switch between multiple domain designs

Render Settings

Layout Algorithms

| Algorithm | Description | | :--- | :--- | | NetworkSimplex | Best overall layout quality | | TightTree | Faster computation, good for large diagrams | | LongestPath | Simple layered approach |

Edge Styles

• Hard: Straight edges with sharp corners
• Rounded: Smooth curved edges with adjustable bend size

Keyboard Shortcuts

| Action | Shortcut | | :--- | :--- | | Zoom in | Ctrl + + or Mouse wheel up | | Zoom out | Ctrl + - or Mouse wheel down | | Reset view | Ctrl + 0 | | Pan | Click and drag |

Styling

The components use PrimeVue's Aura theme by default. You can customize the appearance by:

1. Using a different PrimeVue theme
2. Overriding CSS variables
3. Customizing component styles via PrimeVue's pt (pass through) system

<template>
  <PrimeVue :theme="{ preset: Aura, options: { prefix: 'p', darkModeSelector: '.my-app-dark' } }">
    <Ui :designs="designs" />
  </PrimeVue>
</template>

Export

Export your diagram as SVG for documentation or presentations:

1. Click the export button in the toolbar
2. The SVG file will be downloaded automatically

Type Safety

Full TypeScript support with proper type definitions:

import type { DomainDesigner } from '@ddd-tool/domain-designer-core'
import type { NonEmptyObject } from '@ddd-tool/domain-designer-ui-component'

interface Props {
  designs: NonEmptyObject<Record<string, DomainDesigner>>
}

License

Apache-2.0

Repository

https://github.com/ddd-tool/domain-designer-core-ts

Author

AlphaFoxz (https://github.com/AlphaFoxz)