Rule: View Draw.io Diagrams with Embedded Images

When you encounter a Draw.io file (.drawio extension) that contains embedded images or screenshots, automatically convert it to a viewable format to analyze the visual content and annotations.

Process

1. Detect Draw.io Files: When asked to analyze a .drawio file
2. Check for Embedded Content: Look for embedded images or screenshots
3. Convert to Viewable Format: Use one of these methods:
   - Export to PNG using Draw.io CLI: drawio -x -f png -o output.png input.drawio
   - Export to SVG using Draw.io CLI: drawio -x -f svg -o output.svg input.drawio
   - Open in browser and capture screenshot if CLI not available
4. Analyze Visual Content: View the converted image to understand:
   - Red annotation rectangles and their purpose
   - Embedded screenshots and UI mockups
   - Design patterns being highlighted
   - Implementation guidance provided

Tools to Use

• Draw.io CLI (if available): /Applications/draw.io.app/Contents/MacOS/draw.io
• Browser preview with screenshot capture
• File conversion utilities

Expected Outcome

• Ability to see and analyze embedded images within Draw.io files
• Understanding of red annotation system and design guidance
• Clear interpretation of UI patterns and implementation notes