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.