📊 PDSL Documentation

Quick Start

Get started with PDSL in 30 seconds. Copy this code into the PDDSL editor:

@canvas 600x400
@background #f5f5f5
@theme light

# Create a stat card
box "revenue" 180x100 at 50,50 {
    fill #4299e1
    radius 12
    shadow 10 5 #000000
    text "$2,847" { size 2xl weight bold color #ffffff }
    text "Revenue" { size sm color #bee3f8 }
}

Canvas & Theme

@canvas

Define the canvas dimensions in pixels.

@canvas 800x600      # 800 pixels wide, 600 tall
@canvas 1080x1080    # Instagram square

@background

Set the background color using hex codes.

@background #ffffff    # White
@background #1a1a2e    # Dark navy

@theme

Choose a color theme for default element styling.

Text Element

Create styled text anywhere on the canvas.

text "Hello World" at 50,50 { size 2xl weight bold color #1a202c }

Text Sizes

Properties

Box Element

Create stat cards, containers, and panels with automatic text layout.

box "card" 200x150 at 50,50 {
    fill #ffffff
    radius 16
    shadow 15 8 #000000
    text "Title" { size xl weight bold color #333333 }
    text "Subtitle" { size sm color #666666 }
}

Properties

Chart Element

Create data visualizations with simple syntax.

Chart Types

Donut Chart Example

chart donut "sales" 300x250 at 50,50 {
    data [35, 28, 22, 15]
    labels ["Product A", "Product B", "Product C", "Other"]
    colors [#667eea, #48bb78, #ed8936, #e53e3e]
}

Horizontal Bar Chart Example

chart hbar "rankings" 400x200 at 50,50 {
    data [95, 82, 78, 65]
    labels ["USA", "China", "Japan", "Germany"]
    colors [#48bb78, #4299e1, #ed8936, #9f7aea]
}

Icon Element

Add any of 5000+ Tabler icons to your diagrams.

icon "home" 48 at 50,50 { color #4299e1 }
icon "heart" 48 at 120,50 { color #e53e3e filled }

Popular Icons

Browse all icons at tabler-icons.io

Shape Element

Draw geometric shapes for visual elements and decorations.

shape circle 80 at 100,100 { fill #4299e1 }
shape rect 120x60 at 200,80 { fill #48bb78 radius 8 }
shape star 50 at 300,100 { fill #ffd700 }

Available Shapes

Shape Properties

Positioning

Place elements using absolute coordinates or relative keywords.

Absolute Positioning

# Position at x=50, y=100 from top-left
text "Hello" at 50,100 { size xl }

Relative Keywords

Comments & Syntax

Comments

Use # for single-line comments. Comments are ignored by the parser.

# This is a comment
@canvas 600x400  # Inline comment

# Main title section
text "Welcome" at 50,50 { size hero }

Gradient Syntax

Apply linear gradients to boxes with direction control.

box "card" 200x100 at 50,50 {
    gradient #667eea #764ba2 vertical
}

Z-Index Layering

Control element stacking order with zindex.

box "back" 200x200 at 50,50 { fill #cccccc zindex 1 }
box "front" 100x100 at 75,75 { fill #4299e1 zindex 10 }

Complete Examples

Stats Dashboard

@canvas 700x300
@background #f7fafc

text "Dashboard" at 40,30 { size 2xl weight bold }

box "stat1" 180x100 at 40,70 {
    fill #4299e1
    radius 12
    shadow 10 5 #000000
    text "$48,250" { size 2xl weight bold color #ffffff }
    text "Revenue" { size sm color #bee3f8 }
}

box "stat2" 180x100 at 240,70 {
    fill #48bb78
    radius 12
    shadow 10 5 #000000
    text "12,847" { size 2xl weight bold color #ffffff }
    text "Users" { size sm color #c6f6d5 }
}

chart bar "sales" 400x100 at 40,190 {
    data [32, 45, 38, 52, 48, 65]
    labels ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
}

Dark Theme Infographic

@canvas 600x400
@background #1a1a2e
@theme dark

text "Annual Report" at 40,40 { size hero weight bold color #ffd700 }

chart donut "revenue" 300x250 at 150,100 {
    data [40, 30, 20, 10]
    labels ["Products", "Services", "Licensing", "Other"]
    colors [#667eea, #48bb78, #ed8936, #e53e3e]
}

LLM Generation Guide

Comprehensive guidelines for AI assistants generating PDSL code.

🔴 Must-Have Rules

1. Always start with @canvas WxH - Required first line
2. Use @background #hexcolor for custom backgrounds
3. Position all elements with at X,Y coordinates
4. Use 6-digit hex colors only - #4299e1 not "blue"
5. Match array lengths in charts - data, labels, colors must align
6. Quote all string values - "Title" not Title

⚠️ Common Mistakes

📐 Layout Patterns

🎨 Professional Colors

# Primary palette
#4299e1 # Blue     #48bb78 # Green
#ed8936 # Orange   #e53e3e # Red
#9f7aea # Purple   #667eea # Indigo

# Background colors
#ffffff # White    #f7fafc # Light gray
#1a202c # Dark     #2d3748 # Slate

📊 Complete Infographic Template

@canvas 800x500
@background #f7fafc

# Header
text "Q4 Performance Report" at 40,30 { size 2xl weight bold color #1a202c }
text "October - December 2024" at 40,65 { size sm color #718096 }

# Stat cards row
box "revenue" 170x100 at 40,100 {
    fill #4299e1
    radius 12
    shadow 12 6 #000000
    text "$1.2M" { size 2xl weight bold color #ffffff }
    text "Revenue" { size sm color #bee3f8 }
}

box "growth" 170x100 at 230,100 {
    fill #48bb78
    radius 12
    shadow 12 6 #000000
    text "+28%" { size 2xl weight bold color #ffffff }
    text "Growth" { size sm color #c6f6d5 }
}

box "users" 170x100 at 420,100 {
    fill #9f7aea
    radius 12
    shadow 12 6 #000000
    text "45.2K" { size 2xl weight bold color #ffffff }
    text "Active Users" { size sm color #e9d8fd }
}

# Charts section
chart bar "monthly" 350x150 at 40,230 {
    data [85, 92, 78, 105, 98, 120]
    labels ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    colors [#4299e1]
}

chart donut "sources" 200x180 at 450,220 {
    data [45, 30, 25]
    labels ["Organic", "Paid", "Referral"]
    colors [#48bb78, #4299e1, #ed8936]
}

# Footer
text "Generated by PDSL" at 40,460 { size xs color #a0aec0 }