Skip to main content

glint-class-diagram

Component to render a diagram of class nodes connected by edges.

<glint-class-diagram
  [graph]="graph()"
  [direction]="direction"
  [lineType]="lineType"
  [showType]="showType"
  [showMembers]="showMembers"
  [showLabels]="showLabels"
  [focus]="search()"
  (classSelected)="select($event, 'Class')"
  (memberSelected)="select($event, 'Field')"
  (referenceSelected)="select($event, 'Reference')"
  (subgraphSelected)="select($event, 'SubGraph')"/>
  • [graph] (required): The graph object with nodes and edges.
  • [direction] (default=TOP_DOWN): Preferred direction in which in the edges flow.
  • [lineType] (default=ORTHOGONAL): How the edges should be rendered.
  • [showType]: Toggle the visibility of the stereotypes in nodes.
  • [showMembers]: Toggle the visibility of the class members in nodes.
  • [showLabels]: Toggle the visibility of edge labels.
  • [focus]: Input the id of a node to zoom in on that node.
  • (classSelected): Event that triggers when a class node is selected.
  • (memberSelected): Event that triggers when a member of a class node is selected.
  • (referenceSelected): Event that triggers when an edge is selected.
  • (subgraphSelected): Event that triggers when a subgraph container is selected.

Graph​

The graph object is an instance of Graph<ClassNode, ClassReference>, which has an API to add nodes and edges.

Graph setup with computed signal
class MyClassDiagramComponent {

  graph = computed(() => {
    const graph = createGraph<ClassNode, ClassReference>()
    // Build graph
    return graph
  })

}
Add a node
graph.node({
  data: {
    id: 'cities::City', // Unique id
    className: 'City', // Title for the node header
    stereotype: 'Primary', // Stereotype that appears above the class name
    source: cityModel, // (optional) The object this node represents. Use this to retrieve the actual target of a `classSelected` event.
    members: [ // Members shown in the body of the node 
      {
        id: 'cities::City::name', // Unique member id
        name: 'name', // Label
        type: 'String', // Type shown after the label
        source: cityModel.fields[0] // The object this member represents. 
      }, {
        id: 'cities::City::postcode',
        name: 'postcode',
        type: 'Postcode',
        source: cityModel.fields[1]
      }
    ]
  },
  layout: {
    style: STYLE_1 // Color of the node
  }
})
Add an edge
graph.edge({
  data: {
    id: 'cities::City::country', // Unique id
    label: 'country', // Edge label
    source: cityModel.fields[2] // The object this edge represents
  },
  type: EdgeType.AGGREGATION, // Edge type, defines the marker and stroke
  from: 'cities::City', // Id of the node where the edge starts
  to: 'cities::Country' // Id of the node where the edge ends
})
Add a subgraph
graph.subGraph(
  'net.demo', // Unique id
  'package net.demo', // Title
  subgraph => {
    subgraph
      .node({ /* ... */ })
      .edge({ /* ... */ })
  })

Node Layout Styles​

  • PRIMARY: blue
  • STYLE_1: green
  • STYLE_2: red
  • STYLE_3: cyan
  • STYLE_4: purple
  • STYLE_5: orange
  • STYLE_6: yellow
  • MUTED: gray

Edge Types​

  • CONNECTION: Solid line without markers
  • ASSOCIATION: Solid line with solid arrow-head
  • INHERITANCE: Solid line with hollow arrow-head
  • IMPLEMENTATION: Dashed line with hollow arrow-head. Runs in opposite direction.
  • DEPENDENCY: Dashed line with solid arrow-head.
  • AGGREGATION: Solid line with solid diamond.
  • COMPOSITION: Solid line with hollow diamond.