excalidraw
Generate hand-drawn style diagrams (architecture, flowcharts, system design) as .excalidraw.json files. Use when user wants diagrams, mentions Excalidraw, or needs Mermaid-to-visual conversion.
structure-figures
Generate or update schematic structure figures (SVGs) used in CLEED docs and example inputs.
ontology-generator
Generate comprehensive ontological knowledge graphs in [[wikilinks]] syntax for InfraNodus visualization. Use when the user requests to create an ontology, extract entities and relationships from text, or generate knowledge graph structures. Handles both topic-based ontology generation and entity extraction from existing text. Output is formatted for direct paste into InfraNodus.com for network visualization and AI-powered gap analysis.
react-flow
React Flow (@xyflow/react) for workflow visualization with custom nodes and edges. Use when building graph visualizations, creating custom workflow nodes, implementing edge labels, or controlling viewport. Triggers on ReactFlow, @xyflow/react, Handle, NodeProps, EdgeProps, useReactFlow, fitView.
dagre-react-flow
Automatic graph layout using dagre with React Flow (@xyflow/react). Use when implementing auto-layout, hierarchical layouts, tree structures, or arranging nodes programmatically. Triggers on dagre, auto-layout, automatic layout, getLayoutedElements, rankdir, hierarchical graph.
c3-alter
|
c3
|
mapping-visualization-scaffolds
Use when complex systems need visual documentation, mapping component relationships and dependencies, creating hierarchies or taxonomies, documenting process flows or decision trees, understanding system architectures, visualizing data lineage or knowledge structures, planning information architecture, or when user mentions concept maps, system diagrams, dependency mapping, relationship visualization, or architecture blueprints.
d3-visualization
Use when creating custom, interactive data visualizations with D3.js—building bar/line/scatter charts from scratch, creating network diagrams or geographic maps, binding changing data to visual elements, adding zoom/pan/brush interactions, animating chart transitions, or when chart libraries (Highcharts, Chart.js) don't support your specific visualization design and you need low-level control over data-driven DOM manipulation, scales, shapes, and layouts.
visualization-choice-reporting
Use when you need to choose the right visualization for your data and question, then create a narrated report that highlights insights and recommends actions. Invoke when analyzing data for patterns (trends, comparisons, distributions, relationships, compositions), building dashboards or reports, presenting metrics to stakeholders, monitoring KPIs, exploring datasets for insights, communicating findings from analysis, or when user mentions "visualize this", "what chart should I use", "create a dashboard", "analyze this data", "show trends", "compare these metrics", "report on", "what does this data tell us", or needs to turn data into actionable insights. Apply to business analytics (revenue, growth, churn, funnel, cohort, segmentation), product metrics (usage, adoption, retention, feature performance, A/B tests), marketing analytics (campaign ROI, attribution, funnel, customer acquisition), financial reporting (P&L, budget, forecast, variance), operational metrics (uptime, performance, capacity, SLA), sales analytics (pipeline, forecast, territory, quota attainment), HR metrics (headcount, turnover, engagement, DEI), and any scenario where data needs to become a clear, actionable story with the right visual form.
htmlcsstoimage
HTMLCSStoImage API via curl. Use this skill to generate images from HTML/CSS or capture screenshots of web pages.
chart-generator
Generate charts and visualizations from data using various charting libraries and formats.
obsidian-canvas
Create and manage Obsidian Canvas files with automatic layout generation. Use when creating visual knowledge maps, weekly reading summaries, or project timelines.
obsidian-mermaid
Create Obsidian-compatible Mermaid diagrams. Prefer square layouts (TB + subgraph LR), avoid markdown in labels. Use when creating flowcharts, sequence diagrams, or any Mermaid diagrams in markdown files.
mermaid-diagrams
Create diagrams and visualizations using Mermaid syntax. Use when generating flowcharts, sequence diagrams, class diagrams, entity-relationship diagrams, Gantt charts, or any visual documentation. Triggers on Mermaid, flowchart, sequence diagram, class diagram, ER diagram, Gantt chart, diagram, visualization.
sf-diagram
>
kpi-dashboard-design
Design and build dashboards that track key performance indicators. Select relevant metrics, visualize data effectively, and communicate insights to stakeholders.
Data Visualization
Create effective visualizations using matplotlib and seaborn for exploratory analysis, presenting insights, and communicating findings with business stakeholders
Page 3 of 4 · 63 results