Canvas

Visualize code and specifications into Mermaid, ASCII art, or draw.io diagrams.

68|14|Updated Jan 7, 2026

Search Tags:#architecture #mermaid #visualization #code #draw.io #reverse engineering #diagram

Ready to run

npx skills add https://github.com/simota/agent-skills --skill canvas-simota

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: Canvas
Source: https://github.com/simota/agent-skills/tree/main/canvas
Command: npx skills add https://github.com/simota/agent-skills --skill canvas-simota

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill transforms complex code, specifications, or contextual information into clear, understandable visual diagrams, making it easier to grasp architecture, flows, and relationships.

Core Features & Use Cases

Diagram Generation: Creates various diagrams like flowcharts, sequence diagrams, state diagrams, class diagrams, ER diagrams, and more from code or specifications.
Reverse Engineering: Derives diagrams directly from existing codebases, APIs, schemas, or test structures.
Visualization Formats: Supports Mermaid, ASCII art, and editable draw.io formats.
Use Case: Visualize the data flow of a specific API endpoint by providing the relevant code files to the Canvas skill.

Quick Start

Use the Canvas skill to generate a Mermaid flowchart from the provided code files.

Frequently Asked Questions about Canvas

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

FAQPage Schema

How do I generate architecture diagrams from existing code?▼

You can generate architecture diagrams from existing code by using reverse engineering to derive flowcharts, sequence diagrams, and class diagrams directly from codebases, APIs, or schemas.

Can I create a C4 model diagram from code and specifications?▼

Yes, you can create a C4 model diagram from code and specifications by transforming complex contextual information and structures into clear visual representations of software architecture.

Does this support exporting diagrams to Mermaid and draw.io formats?▼

Yes, this supports exporting diagrams to Mermaid, ASCII art, and editable draw.io formats, allowing you to visualize data flows, schemas, and specifications in your preferred diagram format.

What is the best way to visualize API endpoint data flows?▼

The best way to visualize API endpoint data flows is to provide the relevant code files to automatically reverse engineer the logic into a clear flowchart or sequence diagram.

How do I generate journey maps and persona profiles from specifications?▼

You can generate journey maps and persona profiles from specifications by integrating visualization with Echo, which supports mapping user flows and contextual profiles alongside architecture diagrams.

Can I visualize code diffs to understand architecture changes?▼

Yes, you can visualize code diffs to understand architecture changes, as the visualization process supports diff visualizations alongside reverse engineering of schemas, flows, and codebases.