Article
· Feb 21 4m read

Modern and Easy-to-Use VSCode Plugin for InterSystems ObjectScript: Class Diagram Visualization with PlantUML

Motivation

I didn't know about ObjectScript until I started my new job. Objectscript isn't actually a young programming language. Compared to C++, Java and Python, the community isn't as active, but we're keen to make this place more vibrant, aren't we?

 

I've noticed that some of my colleagues are finding it tricky to get their heads around the class relationships in these huge projects. There aren't any easy-to-use modern class diagram tool for ObjectScript.

Related Work

I have tried relavant works:

- InterSystems class view:
1. https://github.com/intersystems-community/ClassExplorer
This is great work, and the class diagram looks really good and clean. But there's still an issue with the docker build: "#0 0.512 exec ./irissession.sh: no such file or directory". I'm guessing it's a support feature for the studio rather than VSCode. It seems to need to import your project manually. It seems like it needs some configuration to use this product.

2. https://github.com/gjsjohnmurray/vscode-objectscript-class-view
This is another great work which gives me inspiration. The class structure is clear and it supports not only class in project also class from library. But it looks like a enhanced version of vscode outline. 

- Other language VSCode class diagramm view plugins

1. https://github.com/OH318/J-Diagram
The readme shows the running results with draw.io really well. But when I tested it locally, I couldn't use it. So I won't use it as a reference.

2. https://github.com/pierre3/PlantUmlClassDiagramGenerator
It's relative good and it requires some configuration. I took the idea of generating uml first, then use PlantUML to generate class diagram.

- Best Implementation of class diagram:
1. Jetbrains products, like Intellij Idea and Pycharm, are amazing for class diagrams. Just drag and drop classes, click a hyperlink, and you're all set to generate a powerful class diagram.

2. VSCode typescript class diagram plugin
https://marketplace.visualstudio.com/items?itemName=AlexShen.classdiagra...
drag, drop, hyperlink click, support of folder class diagram generation.

I took the design idea from them. Unfortunately, they are closed source, so I'll have to design the project on my own.

InterSystems ObjectScript Class Diagram View

is a Visual Studio Code extension that generates UML class diagrams from InterSystems ObjectScript (.cls) files. It provides interactive visualization and navigation features, built on PlantUML for reliable diagram rendering.

Key Features

  • Generate UML class diagrams from .cls files
  • Support for both single class and folder-level diagram generation
  • Right-click context menu integration in both editor and explorer
  • Visualize class relationships, properties, and methods
  • Built on PlantUML for reliable diagram rendering
  • Generate diagrams using PlantUML Web Server (no Java required)
  • Interactive Class Diagram Browsing
    • Click on class names, properties, or methods to quickly jump to the corresponding code
    • SVG diagrams embedded in HTML for smooth interaction
    • Visual navigation of class relationships

I tested the plugin on another great objectscript project apiPub

I have offered two modes, generate class diagram based on parse local file system of the project or with iris integration.

Generating Class Diagrams


This mode parse class structure from local project, the inheritance structure of library class wont be generated and library class cannot be clicked to enter.

For a single class:

For a folder:

For the whole project. The class diagram is in SVG format, and it's always sharp and clear.

Generate Class Diagram with IRIS Integration

This feature is dependent on InterSystems plugins and it will generate all the class properties, parameters and methods from the chosen class. It is important to note that the feature generates the entire inheritance hierarchy, even for classes that are not present in the local project.

Configure your IRIS connection in VS Code settings:

  • Go to Settings > Extensions > InterSystems ObjectScript Class Diagram
  • Enter your IRIS server host, port, namespace, username, and password

Configure IRIS Settings

Open a .cls file in the editor

Right-click and select "Generate InterSystems Class Diagram"

The extension will connect to your IRIS server and generate a diagram using class information from the server

Click on class names, properties, or methods in the diagram to:

Open the class in IRIS Documatic

View property definitions in IRIS

Navigate to method implementations in IRIS

Generate InterSystems ObjectScript Class Diagram

Requirements

OS Required Optional (for local PlantUML generation)
Windows - VSCode 1.96.0+
- ObjectScript Class Files(.cls)
- Java 8+
Linux - VSCode 1.96.0+
- ObjectScript Class Files(.cls)
- Java 8+
- Graphviz

Usage

  • Open a .cls file and generate a class diagram using:
    • Ctrl+Alt+U shortcut
    • Right-click on a file or folder and select "Generate Class Diagram"
  • Click on elements in the diagram to jump to class definitions, properties, and methods

Known Issues

  • Subclass Generation: Missing functionality to generate subclass diagrams for the current class
  • Large Project Performance:
    • Generating diagrams for large folders via right-click may experience significant delays
    • Generated webview/SVG for large projects lacks smooth zoom functionality and proper scaling
  • IRIS Pwd Plaintext: Passwords shouldn't be shown as plain text. This will be fixed in the next version. I don't store the connection information and the code is open source, so you can check it to see if it's safe.

Please report any issues on the GitHub repository.

Contributing & License

  • Open for contributions via GitHub
  • Licensed under MIT

You can find this plugin on the marketplace, feel free to create issues at issue and contribute with PR.

Discussion (7)3
Log in or sign up to continue