Code Canvas

简体中文

Code Canvas converts code control flow and call relationships into interactive flowcharts, helping developers quickly understand functions, components, hooks, event handlers, and cross-file call chains.

The project includes:

• @haydenull/code-canvas: Validates .logic.json artifacts and displays nodes, branches, call relationships, module groups, and source code snippets in a Web Viewer.
• code-canvas-generator Skill: Enables coding assistants that support Agent Skills to read real source code and generate flowchart artifacts for Code Canvas.

Preview

Install CLI

Install the CLI globally:

npm install -g @haydenull/code-canvas@latest

Use code-canvas stop to stop the viewer when you're done.

Install Skill

The code-canvas-generator Skill is located in the skills/code-canvas-generator directory.

Install via npx skills:

npx skills add haydenull/code-canvas --skill code-canvas-generator

Or install using haydenull/skills-manager.

Docs

• Development Guide
• Publishing to npm