archimate-diagram-engine

Archimate 3.x diagram renderer using JoinJS.

This engine can be used for server-side as well for client-side diagram rendering.

Installation

Using npm:

npm i --save @arktect-co/archimate-diagram-engine

Using Yarn:

yarn add @arktect-co/archimate-diagram-engine

Usage Example

const joint = require("jointjs");
const {ViewRenderer, ViewSettings} = require("@arktect-co/archimate-diagram-engine");

let outputGraph = new joint.dia.Graph({}, {cellNamespace: joint.shapes});
let viewNodes = [
  {
    "modelNodeId": "4ff521e69d724ae88c5a2324008613e7",
    "viewNodeId": "222f9942c68e47d5a7167e64cc435b8a",
    "name": "Node",
    "type": "node",
    "x": 240,
    "y": 180,
    "width": 145,
    "height": 85,
    "parent": null
  },
  {
    "modelNodeId": "c66f4f1de7ef4b28a5aafdbd497a2aff",
    "viewNodeId": "ea00a3ff03f541fabc96f78348b55955",
    "name": "Equipment",
    "type": "equipment",
    "x": 36,
    "y": 84,
    "width": 109,
    "height": 85,
    "parent": null
  }
];
let viewRelationships = [
  {
    "modelRelationshipId": "790f2145455347d089d7afc34f6fba45",
    "sourceId": "222f9942c68e47d5a7167e64cc435b8a",
    "targetId": "ea00a3ff03f541fabc96f78348b55955",
    "viewRelationshipId": "c8684fc5137444c09ce193268abfcb97",
    "type": "aggregation",
    "bendpoints": [
      {
        "x": 204,
        "y": 195
      }
    ]
  }
];

ViewRenderer.renderToGraph(
    outputGraph,
    viewNodes,
    viewRelationships,
    new ViewSettings({
        archimateVersion: '<=3.1',
        style: 'hybrid',
        darkColor: 'black',
        lightColor: 'white',
        textColor: 'black',
        textSize: 12,
        defaultWidth: 140,
        defaultHeight: 50,
        borderWidth: 0.8,
        edgeWidth: 0.8
    })
);

Options

• archimateVersion: Indicates the version of ArchiMate used to set default icons and colors. The default is '<=3.1'
• style: Color style for nodes. There are three available styles:
  • hybrid: This style combines active, behaviour and passive classification with layering.
  • layered: Differentiate only between layers.
  • element: Differentiate only between active, behaviour and passive elements.
• darkColor: Color used for strokes (Hex colours are accepted). The default is 'black'
• lightColor: Color used to fulfill relationship arrow shapes (Hex colours are accepted). The default is 'white'
• textColor: Color used to fill texts. The default is 'black'
• textSize: Text font size. The default is 12
• defaultWidth: Reference size for element's width. The default is 140px
• defaultHeight: Reference size for element's height. The default is 50px
• borderWidth: Border width for elements. The default is 0.8
• edgeWidth: Width of the relationship stroke. The default is 0.8