diagram-generation

生成 Mermaid 图表，用于架构可视化、数据流图，以及组件间关系的呈现。适用于撰写文档、编写 PR 描述，或进行架构分析时调用。

SKILL.md

--- frontmatter

name: diagram-generation
description: "Mermaid diagram generation for architecture visualization, data flow diagrams, and component relationships. Use for documentation, PR descriptions, and architectural analysis."

Diagram Generation Skill

Generate Mermaid diagrams to visualize architecture, data flows, and component relationships.

When to Use

Use this skill when:

•Documenting architecture
•Explaining complex changes in PRs
•Visualizing data flows
•Understanding component relationships
•Revealing architectural issues

Capabilities

Architecture Diagrams

•System architecture
•Component relationships
•Service interactions
•Module dependencies

Data Flow Diagrams

•Request/response flows
•Data transformation pipelines
•State management flows
•Event flows

Sequence Diagrams

•API call sequences
•User interaction flows
•Process workflows
•Error handling flows

Usage

code

Create a Mermaid diagram showing the data flow for our authentication system,
including OAuth providers, session management, and token refresh.

Best Practices

•Be specific: Describe what you want to visualize
•Include context: Mention relevant files or components
•Review diagrams: Verify accuracy and completeness
•Use in docs: Add diagrams to documentation
•Update regularly: Keep diagrams current with code

Related Resources

•Rule: .cursor/rules/large-codebase-patterns.mdc
•Command: /diagram
•Agent: .cursor/skills/diagram-generation/agents/diagram-generator.md