canvas-dev

Generate Obsidian Canvas architecture diagrams from source code via AST parsing.

Updated Feb 13, 2026
One-click install
npx skills add https://github.com/yongc2025/NovelFactory --skill canvas-dev-yongc2025
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: canvas-dev
Source: https://github.com/yongc2025/NovelFactory/tree/main/.skills/canvas-dev
Command: npx skills add https://github.com/yongc2025/NovelFactory --skill canvas-dev-yongc2025

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill solves the disconnect between complex codebases and human understanding by using Obsidian Canvas as a single source of truth, allowing AI to visualize architecture and drive development through diagrams.

Core Features & Use Cases

  • Architecture Visualization: Automatically generate Obsidian Canvas whiteboards from existing source code.
  • Diagram-Driven Development: Generate or refactor code based on visual nodes and connections in a canvas.
  • Use Case: When onboarding to a legacy project, use this skill to generate a service-level architecture map to instantly identify key dependencies and data flows.

Quick Start

Use the canvas-dev skill to analyze the current project directory and generate an architecture whiteboard at the service level.

Frequently Asked Questions about canvas-dev

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate architecture diagrams from source code?

Generate architecture diagrams from source code by using AST parsing and dependency network construction to map project structures into valid Obsidian Canvas JSON formats.

What is diagram-driven development for software refactoring?

Diagram-driven development uses visual nodes and connections within a canvas whiteboard to generate or refactor code, keeping the visual representation of system design synchronized.

How do I visualize legacy project architecture for team onboarding?

Visualize legacy project architecture for team onboarding by generating a service-level architecture map to instantly identify key dependencies and data flows within the codebase.

Does the canvas-dev skill require Obsidian to map project structures?

The skill requires Obsidian Canvas to map project structures, using the canvas as a single source of truth to visualize architecture and drive development through diagrams.

Can I use diagram visualization to analyze code dependencies?

Yes, you can analyze code dependencies by constructing a dependency network from the parsed AST and mapping those project structure relationships into valid canvas JSON formats.

What are the limitations of synchronizing code with canvas whiteboards?

Synchronizing code with canvas whiteboards requires maintaining valid canvas JSON formats, and limitations arise when AST parsing fails to accurately reflect complex system design and data flows.