home / skills / basedhardware / omi / diagram-generation

diagram-generation skill

safe

This skill generates Mermaid diagrams to visualize architecture, data flows, and component relationships, helping documentation and architectural analysis.

npx playbooks add skill basedhardware/omi --skill diagram-generation

Review the files below or copy the command above to add this skill to your agents.

Files (3)

SKILL.md

1.5 KB

---
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

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

## Best Practices

1. **Be specific**: Describe what you want to visualize
2. **Include context**: Mention relevant files or components
3. **Review diagrams**: Verify accuracy and completeness
4. **Use in docs**: Add diagrams to documentation
5. **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`

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

FAQ

What input yields the best diagram?

A concise list of components, their roles, endpoints, and how data moves between them produces the most accurate diagrams.

Can I get different levels of detail?

Yes. Request high-level overviews or detailed flows for a specific feature, and the skill will adjust node granularity accordingly.