ArchiMate Viewer

VS Code extension that opens Open Group ArchiMate Model Exchange files and draws the diagram on a canvas you can pan and zoom. The same viewer can be embedded in a web page.

bpmn.io inspired the plugin: a diagram you can grab, route, and read without turning the editor into a full modeler.

Features

• Open .archimate files in the viewer. Open .xml exchange files with Open With… → ArchiMate Viewer or the ArchiMate: Open Viewer command.
• Pan by dragging the canvas, zoom with the wheel, fit the diagram, and switch views when a file has more than one.
• Draw ArchiMate shapes and layer colours, with corner icons on plain rectangles. Rounded, folded, ellipse, bevel, circle, and 3D shapes stay distinct without a second icon.
• Center labels in elements. Group and nested-parent titles stay at the top so they do not cover their children.
• Drag an element. Nested children move with it, and the arrows stay attached.
• Drag the middle of an arrow to add a kink. A second drag adds another. Drag a kink point to move that corner. The kink circles hide when you grab a different object.
• Drag either end of an arrow onto another element to move that relationship. The change is written into the open file.
• Click a label to edit it.
• Select an element or arrow and press Backspace or Delete. It leaves the diagram. It is removed from the model only when nothing else in the file still uses it.
• Dragged positions, label edits, and kink routing last for the session. Relationship retargeting and deletion are written into the editor document; save the file to keep them on disk.

Run the extension locally (F5)

npm install
npm run compile

Open this folder in VS Code / Cursor and press F5. A new Extension Development Host window opens on the samples/ folder. Open archinsurance-claims.xml (or use Open With… → ArchiMate Viewer).

• .archimate files open in the viewer by default
• .xml files can be opened with Open With… → ArchiMate Viewer, the ArchiMate: Open Viewer command, or by setting:

"workbench.editorAssociations": {
  "*.xml": "archimate.viewer"
}

The F5 sample workspace already sets that association. The viewer toolbar fits the diagram and switches views.

Embed the JavaScript viewer

Attach to a container, call importXML, then zoom.

Script tag

<div id="canvas" style="height: 600px;"></div>
<script src="dist/archimate-viewer.js"></script>
<script>
  const viewer = new ArchiMateJS({ container: "#canvas" });
  const xml = "... ArchiMate Model Exchange XML ...";

  try {
    await viewer.importXML(xml);
    viewer.get("canvas").zoom("fit-viewport");
  } catch (err) {
    console.error("could not import ArchiMate diagram", err);
  }
</script>

ArchiMateJS is a NavigatedViewer (pan/zoom). Use new ArchiMateJS.Viewer({ container }) for display-only.

npm

npm install

import { NavigatedViewer } from "archimate-viewer/lib/NavigatedViewer";

const viewer = new NavigatedViewer({ container: "#canvas" });
await viewer.importXML(xml);
viewer.get("canvas").zoom("fit-viewport");

Viewer#importXML(xml, viewId?) returns { warnings }. viewer.get("model") exposes parsed elements, relationships, and views. viewer.openView(id) switches diagrams in a multi-view file.

Demo page

npm run demo

Then open http://localhost:4173/demo/ — load a sample, or open/drop an .xml exchange file.

ArchiMate coverage

Parses Open Group ArchiMate 3.x Model Exchange XML (http://www.opengroup.org/xsd/archimate/3.0/), including elements, relationships, diagram views, nested nodes, visual bounds, styles, and bendpoints. ArchiMate 2.x label text is also read.

Elements: Business, Application, Technology, Physical, Motivation, Strategy, Implementation & Migration, plus Grouping, Location, and Junctions. Shapes follow ArchiMate aspect conventions (square = active structure, rounded = behavior, folded corner = passive structure, ellipse/bevel = motivation, 3D box = nodes/devices). Layer colours match the usual Archi palette.

Relationships: Composition, Aggregation, Assignment, Realization, Serving, Access, Influence, Triggering, Flow, Specialization, Association — with the standard line styles and end markers.

Unknown types fall back to a labelled rectangle / solid connector.

Scripts