Skill UI

Generates and edits draw.io (.drawio/.drawio.svg/.drawio.png) files via mxGraph XML, supporting templates, layout guidance, and the VS Code Draw.io extension so diagrams for flowcharts, architecture, UML, ER, sequences, and networks open without manual fixes.

This skill specializes in generating visual representations of complex logic flows, particularly within finance. It creates Draw.io XML compatible diagrams, making it ideal for visualizing investment theses, signal transmission chains, or complex financial models for clear communication and analysis.

The skill generates professional diagrams (flowcharts, architecture, UML, ERD) using the native draw.io desktop CLI. It creates editable .drawio XML files and exports them to common formats like PNG, SVG, PDF, and JPG. Ideal for visualizing complex systems, data flows, or component relationships.

Use this comprehensive skill to generate, manipulate, and export draw.io diagrams. It converts diagrams into native .drawio files and allows exporting to high-quality formats like PNG, SVG, and PDF. Crucially, it embeds the editable XML data, ensuring the resulting diagrams are professional, scalable, and easily integrated into documents.

This meta-skill scans a target codebase path, intelligently determines the most appropriate architectural diagram type (e.g., sequence, component, class), and concurrently generates the diagram in two standardized formats: PlantUML source code and draw.io XML. Finally, it composes these deliverables into a cohesive architecture document (DOCX). Ideal for creating comprehensive onboarding guides or technical RFCs that require both text-friendly and highly editable views of the system architecture.

Edit and manage draw.io diagrams via XML, convert to high-resolution PNGs, and adjust layouts. Supports AWS icons, font settings for slides, and follows design principles for clarity and accessibility. Ideal for system architecture and technical documentation.