Visualize code and specifications into Mermaid, ASCII art, or draw.io diagrams.
npx skills add https://github.com/simota/agent-skills --skill canvas-simota
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
This Skill transforms complex code, specifications, or contextual information into clear, understandable visual diagrams, making it easier to grasp architecture, flows, and relationships.
Use the Canvas skill to generate a Mermaid flowchart from the provided code files.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
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.
GS1NedGenerate architecture, database, component, and sequence diagrams using Mermaid syntax.
nomifunConvert Mermaid diagram definitions into SVG or ASCII art.
MovchanetsCreate C4 system context documentation with Mermaid diagrams and dependency details.
claude-office-skillsGenerate flowcharts, sequence diagrams, and architecture diagrams from Mermaid and PlantUML text.
