Visualize COBOL Programs in VS Code
By: Pamela Deason
Tags: Vscode, Cobol, Mainframe, Zowe, DevOps

VS Code extension COBOL Control Flow

Making a change in a COBOL program can be complicated. Being able to visualize the interaction and program flow enhances your ability to estimate changes, make changes, and understand what is necessary to test a change. COBOL Control Flow is an extension for Visual Studio Code that provides this graphical visualization of programs written in the COBOL Language. The extension helps COBOL developers quickly understand the flow of any COBOL program.

The benefit of the COBOL Control Flow extension is the visual aid it provides in finding the location of a particular section of a COBOL program, eliminating the need to scroll and read through multiple lines of source code. There are many options to choose from once the flow is displayed. The developer can zoom in on a particular node, see the flow from the highlighted node to the end of the program, collapse and expand nodes and view the corresponding source code.

Getting Started

COBOL control flow is a new extension available in the VS Code marketplace. From here you can install the extension.

Once the extension is installed, COBOL Control flow is available as a menu item in the VS Code editor. Follow these steps :

Open a COBOL file. Right click inside the file editor. The context menu opens. Select View COBOL Control Flow.

The COBOL Control Flow is generated and displayed in a new window to the side of the COBOL file. Once the COBOL Control Flow is created you can navigate through the COBOL program via nodes in the graph or from the COBOL code.

The control flow can be created from a local COBOL file, a COBOL file in GIT, or directly from a mainframe dataset by using Zowe Explorer (a VS Code extension which is part of Code4z or separately as Zowe Explorer). From within Zowe Explorer you can access the mainframe and click on any COBOL dataset member. Note: As the program flow supports COBOL sources, VS Code must recognize the source as COBOL with the file extension of “.cbl”. Zowe Explorer handles this for you, but if the editor didn’t recognize it you can change this information bar at the bottom of the VS Code edit window.

Making sure the editor recognizes the source as COBOL

Create the control flow from a particular point in the source code

Interaction between the source and the control flow

The source in the edit window and the control flow are linked. If you click on a node in the control flow, the location in the code will be highlighted and the perspective in the edit window will move to that location. (Note: this is a great way to move around in the source quickly and easily… nicer than an outline view). As well, if you move in the source code to a location and want to see where you have navigated to in the control flow, you can create the flow from that point and the flow will highlight that node and the control flow to reach that node.

When you need to know the context of a label in the COBOL control flow means, you can hover over a node and it will display a snippet of the source without having to jump to that location in the source.

Linkage of source and the control flow diagram

Code snippet

Navigating around the COBOL Control Flow

The control flow can be quite large especially with a large program.

A large COBOL program

To focus on a particular section of the COBOL control flow, you can collapse and expand nodes and the children of the node.

Expand/Contract a section of the flow

In order to see more of the flow, simply click in the graph and drag the flow right, left, up or down.

Move the view around with click and drag

In order to zoom in and out, use the roll button on the mouse or scroll capability on a trackpad.

Zoom in/out with the mouse roll button or scroll on a trackpad

To zoom in on one node on the graph, double click on it.

Double click to zoom in on a node

To report issues or suggest enhancements, simply go to Github using the following link:

https://github.com/BroadcomMFD/COBOL-control-flow/issues

For more information about the other capabilities in Code4z including advanced COBOL edit highlighting, syntax check and intellisense see VS Code for mainframe development or LSP Magic — Mainframe Language Support in Modern IDEs . Learn more about Zowe and Zowe explorer visit Beginner’s Guide: COBOL Made Easy or Beginner’s Guide: COBOL Made Easy (Leveraging Open Source Tools)

COBOL Control Flow