Skip to main content

Type

data_visualization

Engine

Mermaid.js
Purpose: The Data Visualization skill enables agents to create professional diagrams and visualizations using Mermaid syntax, ideal for documentation, architecture diagrams, and data flows.

​
Supported Diagram Types

FlowchartsProcess flows, decision trees, algorithm diagrams

Sequence DiagramsAPI interactions, communication flows, protocols

Class DiagramsObject models, database schemas, UML diagrams

State DiagramsState machines, workflow states, transitions

ER DiagramsDatabase relationships, entity models

Gantt ChartsProject timelines, task schedules, milestones

​
Configuration

Example Configuration: 
{
  "enable_flowchart": true,
  "enable_sequence": true,
  "enable_er_diagram": true,
  "output_format": "svg",
  "theme": "default",
  "output_directory": "/opt/diagrams"
}
ParameterTypeDefaultDescription
enable_flowchartbooleantrueAllow flowchart diagrams
enable_sequencebooleantrueAllow sequence diagrams
enable_class_diagrambooleantrueAllow class diagrams
enable_state_diagrambooleantrueAllow state diagrams
enable_er_diagrambooleantrueAllow ER diagrams
enable_ganttbooleantrueAllow Gantt charts
output_formatstring”svg”Output format (svg, png, pdf)
max_diagram_sizenumber10000Max characters in diagram
themestring”default”Mermaid theme
output_directorystring”/diagrams”Where diagrams are saved
  • Default: Standard Mermaid theme with blue accents
  • Dark: Dark background for dark mode documentation
  • Forest: Green color scheme, professional look
  • Neutral: Minimal black and white design

​
Quick Start

# Create skill
kubiya skill create --name "Diagram Generator" --type data_visualization --enabled

# Associate with agent
kubiya skill associate agent <agent-id> <skill-id>

View Complete Examples

See full Mermaid examples, API flow diagrams, and database schema visualizations

​
Diagram Examples

​
Flowchart

Agent Usage: 
diagram = """
flowchart TD
    A[Start] --> B{Is user logged in?}
    B -->|Yes| C[Show Dashboard]
    B -->|No| D[Show Login Page]
"""

create_diagram(diagram, "authentication-flow.svg")

​
Sequence Diagram

Use Case: API interaction documentation, protocol design

​
ER Diagram

Use Case: Database schema design, data modeling

​
Gantt Chart

Use Case: Project planning, task scheduling

​
Security Best Practices

Set max_diagram_size to prevent resource exhaustion.
"max_diagram_size": 10000  # Limit to 10K characters
Specify output_directory to control where diagrams are saved.
"output_directory": "/docs/diagrams"  # Controlled location
Validate Mermaid syntax before rendering to prevent malformed diagrams.
Tip: Use SVG format for documentation - it scales perfectly and has smaller file sizes than PNG.
Solutions:
  • Verify Mermaid syntax using Mermaid Live Editor
  • Check diagram doesn’t exceed max_diagram_size
  • Ensure diagram type is enabled in configuration
Solutions:
  • Verify output_directory exists and is writable
  • Check disk space: df -h
  • Ensure worker user has write permissions
Solutions:
  • Simplify diagram by breaking into multiple smaller diagrams
  • Use PNG instead of SVG for faster rendering
  • Reduce max_diagram_size to enforce smaller diagrams

File Generation

Generate reports that include diagrams

File System Skill

Manage diagram files and assets

Python Skill

Process data before visualization

View All Skills

Return to built-in skills overview

​
Additional Resources

Mermaid Documentation

Official Mermaid.js documentation and examples

Mermaid Live Editor

Test and preview Mermaid diagrams online