diagram-generation_skill

Overview

This skill generates Mermaid diagrams for architecture visualization, data flow diagrams, and component relationship mapping. It produces clear, shareable diagrams suitable for documentation, pull request descriptions, and architectural analysis. The output targets system architects, developers, and technical writers who need fast, consistent visualizations. Diagrams are optimized for clarity and integration into docs or PRs.

How this skill works

Provide a concise description of the system area you want visualized, including components, data sources, and interactions. The skill translates that input into Mermaid syntax for architecture, data flow, and sequence diagrams. It can highlight services, APIs, state flows, and error paths, producing labeled nodes and directed edges. You can ask for variations (high-level, detailed, or focused on a single flow) and request updates as the design evolves.

When to use it

• Documenting system architecture for onboarding or reference
• Explaining complex changes in pull requests or design proposals
• Visualizing request/response and data transformation pipelines
• Mapping component relationships and service dependencies
• Investigating or communicating architectural issues

Best practices

• Be specific about scope: list components, endpoints, and data stores to include
• Include context such as file names, modules, or service identifiers for accuracy
• Choose diagram type to match intent: architecture, data flow, or sequence
• Label edges and nodes clearly to show direction and data format
• Review and update diagrams whenever the code or design changes

Example use cases

• Generate a high-level system architecture diagram for a mobile app backend and third-party services
• Create a data flow diagram showing transcription data from wearable device to storage and NLP pipeline
• Produce a sequence diagram for the OAuth sign-in flow with token refresh and session management
• Visualize component dependencies for a Flutter app and its native plugins
• Embed Mermaid diagrams in PR descriptions to explain refactors or new integrations