AUTOSAR Classic Explorer

Introduction

This is a VS Code extension which is intended to make life easier for software developers/integrators in automotive area. Explore AUTOSAR Classic files(arxml) and projects easily with modern UI and visualization features.

Features

Currently, it supports exploring individual arxml files and Vector project workspace in READ-ONLY mode.

• Open a folder containing .arxml files in VS Code. If sub folders include Vector project (.dpa, .dcf), it will automatically find and parse .arxml files for whole workspace.

  • 

• To visualize individual ARXML file, right-click an .arxml file in Explorer

  • 

• Explore AUTOSAR Model with tree view, and SWC graph which shows port connections and other SWC instances

  • 

• View connections between SWCs, and nagivate between SWCs

  • 

• Search for port name and see connection points

  • 

• Right Click and go details of SWC internal behavior

  • 

• Explore SWCs in tree view, and view different SWC details

  • 

• Switch between tree view and package explorer. Filter/Search for anything on tree view easily

  • 

Install

npm install

To install the packaged extension locally:

code --install-extension .\autosar-model-view-1.0.0.vsix

Reload VS Code after installing.

Build

Create a production build for both the extension host and webview:

npm run compile

This runs:

• npm run compile:extension
• npm run compile:webview

Build output goes to:

• dist/
• media/

Create a local VSIX package:

npm run package

This creates:

autosar-model-view-0.0.1.vsix

Tech Stack

• VS Code Extension API for commands, tree views, file watching, and webviews
• React for the model webview UI
• React Flow for SWC/composition visualization
• TypeScript across extension host and webview code
• Node.js for extension-host model services
• Vite for webview development and production builds
• fast-xml-parser for ARXML model extraction

Prerequisites

• Node.js 22.x is recommended
• npm 10.x is recommended
• VS Code compatible with extension engine ^1.92.0