Diagrams & Charts Agent Skills

Transform text plans into interactive visual documents with diagrams, code snippets, and review surfaces for coding agents.

Generates rich technical documentation pages with dark-mode Mermaid diagrams, source code citations, and first-principles depth.

Analyze Azure resource groups and generate detailed Mermaid architecture diagrams showing relationships between resources.

Creates C4 context-level system documentation including system descriptions, personas, user journeys, external dependencies, and Mermaid context diagrams.

Generate draw.io diagrams as .drawio files and export them to PNG, SVG, or PDF with embedded XML.

Generate ASCII art diagrams from PlantUML source files for use in terminals, documentation, and version-controlled environments.

Create annotated animated GIF demos and screen recordings for pull requests and documentation. Covers frame capture, timing, imageio-based GIF creation, and per-frame annotation workflows.

Add visual callouts like rectangles, arrows, and labels to screenshots, diagrams, and images using PIL/Pillow, with support for animated GIF annotations.

Generate breadboard circuit mockups and visual diagrams for retro computing and electronics projects using HTML5 Canvas.

Generate, edit, and validate draw.io diagram files (.drawio) with correct mxGraph XML structure for flowcharts, architecture, sequence, ER, and UML diagrams.

Generate Excalidraw diagrams from natural language descriptions, supporting flowcharts, relationship diagrams, mind maps, architecture diagrams, and more. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.

Analyzes codebases to generate comprehensive architectural documentation, including technology stack detection, visual diagrams, and implementation patterns.

Analyzes project folder structures, auto-detects technology stacks, and generates detailed blueprints with naming conventions, file placement patterns, and templates for consistent code organization.

Generates Mermaid diagrams from code graphs, including call graphs, class hierarchies, module dependency maps, and data flow visualizations.

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections for visual canvases, mind maps, and flowcharts.

Create professional, dark-themed SVG diagrams of any type — architecture, flowcharts, sequence, structural, mind maps, timelines, and more.

Generates professional infographics by combining 21 layout types with 22 visual styles, analyzing content to recommend optimal combinations, and producing publication-ready raster images.

Create professional research posters in LaTeX using beamerposter, tikzposter, or baposter with layout design, color schemes, multi-column formats, and figure integration.

Creates scientific documentation using markdown with embedded Mermaid diagrams as the default format, enforcing a text-based diagram standard with style guides, 24 diagram type references, and document templates.

Create user flow diagrams that map paths, decisions, branches, and error recovery through a product.

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections for Obsidian mind maps, flowcharts, and visual note structures.

Creates animated flow diagrams from articles, workflow notes, architecture sketches, or process descriptions using a JSON specification and a local Python/Pillow renderer.

Add captions or subtitles to a single-subject talking-head video without editing the footage, using a catalog of visual identities.

Creates a New York Times-style data chart frame with animated reveal, supporting line, bar, and range-band charts from CSV/JSON or a textual conclusion.

Draws a flowchart as a whiteboard-style sticky-note diagram with SVG curves, handwritten fonts, and hover interactions.

Transform a concept into an editorial-style visual narrative with six distinct layouts, four font families, and a magazine-like arc from problem to insight.

Generates Mermaid architecture diagrams from a codebase, including C4 context and container diagrams, sequence diagrams for key flows, ER diagrams from database schemas, and module dependency graphs.

Generates hand-drawn-style Excalidraw architecture diagrams from a codebase, including C4 context and container views, sequence diagrams for key flows, ER diagrams from database schemas, and module dependency graphs.

Create text-based diagrams and visualizations using Mermaid.js v11 syntax, covering flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, and more. Includes CLI conversion to SVG/PNG/PDF, JavaScript integration, theming, and configuration options.

Create text-based diagrams with Mermaid.js v11 syntax, covering flowcharts, sequence diagrams, class diagrams, and more. Convert to SVG, PNG, or PDF via CLI, or embed in web pages with JavaScript.

Designs strategic HTML presentations with data visualization, layout patterns, and copywriting formulas for marketing and pitch decks.

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections for visual canvases, mind maps, and flowcharts.

Creates, edits, and converts vector graphics and diagrams using LibreOffice Draw, supporting ODG, SVG, PDF, and PNG formats.

Create C4 architecture diagrams at context, container, and component levels with Mermaid syntax, including templates and styling tips.

Analyzes code directories to produce C4 code-level documentation with function signatures, dependencies, and structure diagrams.

Generate D2 database diagrams from Entity Framework Core models by analyzing DbContext, entities, Fluent API, and migrations.