heyayushh/visualize

Visualize - Generate Mermaid Diagram

Analyze input and generate clear, well-structured Mermaid diagrams.

Workflow

1. Analyze input - Understand what to visualize (code flow, architecture, data relationships, state machines, sequences, etc.)

2. Choose diagram type:

   • flowchart - Process flows, decision trees, algorithms
   • sequenceDiagram - API calls, message passing, request/response
   • classDiagram - Class structures, inheritance, interfaces
   • erDiagram - Database schemas, entity relationships
   • stateDiagram-v2 - State machines, lifecycle flows
   • graph TD/LR - Dependency graphs, module relationships
   • gitgraph - Git branching strategies
   • journey - User journeys
   • gantt - Timelines and schedules

3. Generate diagram with:

   • Clear, descriptive node labels
   • Logical grouping with subgraphs where appropriate
   • Consistent styling and direction
   • Meaningful relationship labels on edges
   • Manageable complexity (split if needed)

4. Output in mermaid code block:

   ```mermaid
   [diagram code]
   ```
   

Style Guidelines

• Use descriptive IDs: userService not a1
• Add labels to relationships when they add clarity
• Use subgraphs to group related components
• Keep readable: max ~15-20 nodes per diagram
• Arrow styles:
  • --> solid (main flow)
  • -.-> dotted (optional/async)
  • ==> thick (important path)
  • o--> circle end (aggregation)
  • *--> diamond end (composition)

After Generating

• Explain what the diagram shows
• Offer to refine or expand specific sections
• Suggest alternative diagram types if applicable