Data Visualization Skill

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"
}

📋 Full Configuration Reference

Parameter	Type	Default	Description
`enable_flowchart`	boolean	true	Allow flowchart diagrams
`enable_sequence`	boolean	true	Allow sequence diagrams
`enable_class_diagram`	boolean	true	Allow class diagrams
`enable_state_diagram`	boolean	true	Allow state diagrams
`enable_er_diagram`	boolean	true	Allow ER diagrams
`enable_gantt`	boolean	true	Allow Gantt charts
`output_format`	string	”svg”	Output format (svg, png, pdf)
`max_diagram_size`	number	10000	Max characters in diagram
`theme`	string	”default”	Mermaid theme
`output_directory`	string	”/diagrams”	Where diagrams are saved

🎨 Available Themes

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

Limit Diagram Size

Set max_diagram_size to prevent resource exhaustion.

"max_diagram_size": 10000  # Limit to 10K characters

Restrict Output Directory

Specify output_directory to control where diagrams are saved.

"output_directory": "/docs/diagrams"  # Controlled location

Validate Diagram Syntax

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.

Diagram Rendering Fails

Solutions:

Verify Mermaid syntax using Mermaid Live Editor
Check diagram doesn’t exceed max_diagram_size
Ensure diagram type is enabled in configuration

Output File Not Created

Solutions:

Verify output_directory exists and is writable
Check disk space: df -h
Ensure worker user has write permissions

Complex Diagrams Too Slow

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

Introduction

Quick Start

Web Interface

Core Concepts

Infrastructure

Data Visualization Skill

Type

Engine

Supported Diagram Types

Configuration

Quick Start

View Complete Examples

Diagram Examples

Flowchart

Sequence Diagram

ER Diagram

Gantt Chart

Security Best Practices

File Generation

File System Skill

Python Skill

View All Skills

Additional Resources

Mermaid Documentation

Mermaid Live Editor

Type

Engine

​Supported Diagram Types

​Configuration

​Quick Start

View Complete Examples

​Diagram Examples

​Flowchart

​Sequence Diagram

​ER Diagram

​Gantt Chart

​Security Best Practices

​Troubleshooting & Related Skills

​Related Skills

File Generation

File System Skill

Python Skill

View All Skills

​Additional Resources

Mermaid Documentation

Mermaid Live Editor

Supported Diagram Types

Configuration

Quick Start

Diagram Examples

Flowchart

Sequence Diagram

ER Diagram

Gantt Chart

Security Best Practices

Troubleshooting & Related Skills

Related Skills

Additional Resources