Skill UI

Create, modify, and validate Obsidian-compatible JSON Canvas (.canvas) files to build visual boards, mind maps, flowcharts, or note-link diagrams with nodes, edges, groups, and colors.

This skill acts as a specialized expert for generating professional and complex diagrams using Mermaid syntax. It specializes in creating flowcharts, sequence diagrams, ERDs, state charts, Gantt charts, and various system architectures. It adheres to best practices, ensuring readability, consistent styling, and providing complete, ready-to-use code for multiple diagram types.

A comprehensive architectural guide for building production-grade flowcharts using ReactFlow. This pattern set covers key challenges including hierarchical tree navigation (expandable/collapsible nodes), performance optimization via incremental rendering and memoization, and advanced state management using Redux-like reducer patterns with history tracking (undo/redo).

Render Mermaid diagrams to SVG or terminal-friendly ASCII with beautiful-mermaid, covering flowcharts, sequence, state, class, and ER diagrams with theme support and stdin/file input.

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 converts complex technical descriptions, such as system architectures, data flow diagrams, flowcharts, and sequence diagrams, into professional, production-quality SVG diagrams. It supports various technical models, including Agent and Memory architectures, and exports the final output as high-resolution PNG files for seamless documentation and presentation use.