graphai-visualizer

GraphAI Visualizer is a VS Code extension for visualizing JSON and YAML graphs defined with GraphAI, as well as GraphAI objects in TypeScript files. Built using Reactive VS Code.

Features

• Automatically parses GraphAI JSON and YAML files
• Extracts and visualizes GraphAI objects from TypeScript files
• Visualizes graphs using Mermaid
• Intuitive zoom, pan, and reset functionality
• Auto-updates when files are saved
• Supports both dark and light modes

Usage

For JSON or YAML files

1. Open a JSON or YAML file containing GraphAI graph definition
2. Open the command palette (Ctrl+Shift+P or Cmd+Shift+P on Mac) and search for "GraphAI: Show Graph Visualization"
3. The graph will appear in a separate window
4. Drag within the graph to pan, use buttons to zoom in/out or reset
5. Edit and save your file to automatically update the graph

For TypeScript files

1. Open a TypeScript file containing GraphAI object definitions
2. Place your cursor inside a GraphAI object
3. Open the command palette (Ctrl+Shift+P or Cmd+Shift+P on Mac) and search for "GraphAI: Show Graph Visualization"
4. The extension will extract the object at the cursor position and visualize it

Directory Structure

• package.json - the manifest file in which you declare your extension and command
• src/extension.ts - the main file for the extension
• src/lib/codeToMermaid.ts - logic to convert GraphAI JSON or YAML to Mermaid format
• src/lib/objectParser.ts - extracts GraphAI objects from TypeScript files
• src/composables/useGraphAIParser.ts - handles parsing GraphAI objects from cursor position

Get started

• Open this repository in VS Code
• Run pnpm install to install the dependencies
• Run pnpm dev to compile the extension and watch for changes
• Press F5 to open a new window with your extension loaded
• Run your command from the command palette
• Set breakpoints in your code inside src/extension.ts to debug your extension
• Find output from your extension in the debug console

Make changes

• You can relaunch the extension from the debug toolbar after changing code in src/extension.ts
• You can also reload (Ctrl+R or Cmd+R on Mac) the VS Code window with your extension to load your changes