DEV Community

Cover image for Arazzo Visualizer: Run API Workflows in VS Code
Himeth Walgampaya
Himeth Walgampaya

Posted on • Originally published at Medium

Arazzo Visualizer: Run API Workflows in VS Code

Most apps don't just call one API endpoint. They call a whole chain of them. For example, you might log in, get a token, and then pass that token to another service.

Tracking these multi-step chains can get messy quickly. To help fix this, the OpenAPI Initiative created the Arazzo Specification. It gives us a standard way to link different endpoints into clear workflows.

But writing these workflow files by hand in a regular text editor is tough. It is very easy to lose track of how data moves from one step to the next.

That is why I built Arazzo Visualizer for VS Code. It is a free, open-source extension that makes the Arazzo spec visual and easy to use.


Live Interactive Graphs

The extension reads your workflow files and turns them into interactive maps on the fly.

  • See Data Flow: Look at exactly how data moves between steps.
  • Catch Errors Early: Spot broken paths before you even run your code.
  • Clean Layouts: Navigate large workflows without getting lost in thousands of lines of text.

Interactive graph diagram mapping out the steps and data flow

Built-In Workflow Runner

Seeing the map is great, but testing it is even better. The tool has a step-by-step runner built right into your editor.

  • Run a single step or execute the whole chain.
  • See real-time data payloads and HTTP headers.
  • Watch requests happen live to pinpoint bugs fast.

Built-in workflow runner highlighting the step-by-step execution path


Give it a Try

The project is fully open source, and you can grab it or check out the code using the links below:

  • Download: Install it directly from the VS Code Marketplace.
  • Source Code: Check out the repository, report bugs, or contribute on GitHub.
  • Deep Dive: Read my full technical breakdown and design on Medium.

If you are working with API chains, I would love for you to try it out. Drop your feedback in the comments below!


Note: Arazzo v1.1.0 is out with official AsyncAPI support. I am currently updating the VS Code extension to support these new features. Stay tuned for future updates!

Top comments (1)

Collapse
 
nuwanhapuarachchi profile image
Nuwan Dhananjaya Hapuarachchi

Great work Himeth !!!