Skill UI

This comprehensive tool generates high-quality Mermaid diagram code (including flowcharts, sequence diagrams, ER diagrams, etc.) directly from natural language user requirements. It handles complex structured output, mandatory syntax validation using dedicated CLI tools, and detailed visual review to ensure the accuracy of all components and connections.

A powerful tool for managing whiteboard content embedded in Lark cloud documents. It allows users to query the board, exporting content as a preview image, retrieving raw node structures, or updating the board using various formats (Mermaid, PlantUML). Ideal for generating, viewing, or modifying complex diagrams like architecture diagrams and flowcharts.

Create, update, and connect nodes/edges inside Obsidian .canvas files, enabling structured mind maps, flowcharts, and visual canvases by validating IDs, spacing, and JSON integrity.

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.

Generates Excalidraw diagrams from natural language prompts, covering flowcharts, relationship maps, mind maps, architecture, data flow, swimlane, class, sequence, and ER diagrams for communicating processes and systems.

Generate publication-quality scientific diagrams from natural-language descriptions using Nano Banana 2 AI, with Gemini quality review and smart iteration until your document-type threshold is met. Ideal for neural network architectures, flowcharts, pathways, and posters.

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.

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.

This comprehensive guide serves as a decision flowchart for developers using Claude Code. It details when to use specific slash commands (/plan, /compact, /loop), select specialized agents (planner, code-reviewer, build-error-resolver), or invoke workflow skills (e2e-testing, tdd-workflow). It helps users select the optimal tool combination for complex tasks across the entire software development lifecycle, including feature planning, bug fixing, testing, and architectural design.

Create engaging and intuitive process visualization using the whiteboard aesthetic. This template simulates a physical brainstorming session with sticky notes, hand-drawn SVG connections, and optional cursor interactions, perfect for onboarding, system architecture, or operational workflows.

The Diagram Generator converts complex, unstructured inputs—such as natural language, code snippets, schemas, and notes—into professional, editable visual diagrams. It supports diverse standards including Mermaid, PlantUML, and Graphviz, enabling the creation of flowcharts, sequence diagrams, UML models, ER diagrams, architecture maps, and more. Outputs are designed to be reviewable, version-controllable, and highly precise.