canvas

仓库创建 2026年1月7日最近提交 1 天前SkillHot 收录 20 天前

▸ 精选理由

支持丰富图表类型并能从实际代码/轨迹生成，便于架构与文档呈现。

这个 Skill 做什么

从代码或规范反向生成流程图、类图、ER 等多种可视化图表。

把代码或规格反向生成各种可视化图：Mermaid、draw.io、流程图、时序/类图、ER、旅程图，甚至测试覆盖的热力图和追踪矩阵。适合需要把系统结构或业务流程快速可视化、做反向文档或给设计/产品展示时使用。支持多种图表格式和导出方式，能直接嵌进文档或交付给团队。

▸ 展开 SKILL.md 英文原文

Visualizing code/designs/context as Mermaid, ASCII, or draw.io diagrams. Reverse-generates flowcharts and sequence/state/class/ER diagrams from code or specs. Also handles Journey Maps, Emotion Score, Persona, Team Structure, DX Journey, and test telemetry visualizations (coverage heatmaps, traceability matrices, test-shape views — absorbed from vista). Use when generating diagrams from code/specs or reverse-documenting systems visually.

内容创作可视化Mermaid反向生成通用

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/simota/agent-skills/main/canvas/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/simota/agent-skills/main/canvas/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

<!--
CAPABILITIES_SUMMARY:
- standard_diagrams: Flowchart, sequence, state, class, ER, Gantt, mind map, journey, git graph, pie chart, architecture, block, kanban, sankey, xy chart, radar, treemap, wardley map, packet, venn (v11.12.3+), ishikawa (v11.12.3+), wardley (v11.14.0+), treeview (v11.14.0+) [Source: Mermaid v11.13.0 release blog](https://mermaid.ai/blog/posts/mermaid-v11-13-0-two-new-diagram-types-and-our-most-polished-release-yet) | [Wardley Maps (v11.14.0+)](https://mermaid.js.org/syntax/wardley.html)
- reverse_engineering: Code-to-diagram from app, API, schema, tests, auth flow, dependency structure
- c4_model: Context, Container, Component, Code views for architecture
- diff_vis

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有