Simplify Code Refactoring with UML Diagrams: Introducing @hvg24/umljs

Harsh Vardhan Gautam
2 min readOct 17, 2023

--

Introduction

Code refactoring is an essential part of maintaining and improving software projects. As developers, we often find ourselves deep in the trenches of source code, striving to make it more efficient, readable, and maintainable. In this endeavor, UML (Unified Modeling Language) diagrams can be incredibly powerful, offering a clear visual representation of our codebase. However, creating and maintaining these diagrams manually can be a daunting and time-consuming task.

But fear not, fellow developers, for a solution has arrived! Today, we’re thrilled to introduce you to a game-changing tool that will revolutionize the way you work with UML diagrams for your JavaScript ES6-based source code. Say hello to @hvg24/umljs, an npm package that simplifies the process of generating UML diagrams, making code refactoring a breeze.

Getting Started

Getting started with @hvg24/umljs is a straightforward process. You have two options:

Option 1: Using npx

npx @hvg24/umljs -i <your-source-code-directory-path> -o <your-desired-output-directory-path-for-uml-diagram>

Option 2: Installing Globally

npm install -g @hvg24/umljs

And then you can simply use @hvg24/umljs like this:

umljs -i <your-source-code-directory-path> -o <your-desired-output-directory-path-for-uml-diagram>

Once you’ve set up @hvg24/umljs, you can run the command with the appropriate input and output directory paths to generate UML diagrams for your codebase.

--

--