Diagram Maker with PDDSL: Create Diagrams 90% Faster with AI-Optimized DSL
Today marks a significant milestone for Diagram Maker – we're launching PDDSL (Privacy Diagram DSL), a revolutionary domain-specific language designed specifically for AI-generated diagrams. Whether you're building flowcharts, architecture diagrams, org charts, or infographics, PDDSL makes it dramatically more efficient.
If you've ever tried to get an LLM to generate a diagram as JSON, you know the pain: massive token consumption, verbose syntax, and difficult-to-debug output. PDDSL solves all of this with an elegant, compact notation that both humans and AI can easily read and write.
What is PDDSL?
PDDSL (Privacy Diagram DSL) is a compact, line-based notation for describing diagrams. Instead of verbose JSON with nested objects and quoted keys, PDDSL uses a clean, readable syntax:
# PDDSL Example: Simple Flowchart
%pddsl 1.0
%canvas 800x600 #f5f5f5
# Start node
rect start 300,50 200x60 f=#4ade80 c=#166534 br=30
text t1 300,65 200x30 "Start" center c=#166534
# Process step
rect step1 275,150 250x80 f=#dbeafe c=#1e40af br=8
text t2 275,175 250x30 "Process Data" center c=#1e40af
# Connector
arrow a1 400,110 -> 400,150 c=#666 sw=2
This compact notation produces the same result as hundreds of lines of JSON, but is dramatically easier to read, write, and debug.
Why PDDSL Matters for AI
When using LLMs like Claude, GPT-4, or Gemini to generate diagrams, every token counts. PDDSL was designed with AI efficiency as a primary goal:
| Diagram Type | JSON Tokens | PDDSL Tokens | Savings |
|---|---|---|---|
| 5-node flowchart | ~1,500 | ~180 | 88% |
| 3-tier architecture | ~3,200 | ~400 | 87% |
| Org chart (10 nodes) | ~4,000 | ~500 | 87% |
| Complex infographic | ~8,000+ | ~900 | 89% |
If you're paying per token for API calls, PDDSL can reduce your diagram generation costs by up to 90%. More importantly, shorter outputs mean faster generation and fewer errors.
Complete Syntax Reference
PDDSL is built on three core concepts: directives, elements, and properties.
File Structure
%pddsl 1.0 # Version declaration (required)
%canvas 800x600 #f5f5f5 # Canvas: WIDTHxHEIGHT background
%theme rough=1.5 sw=2 # Optional global theme
# Elements go here...
Element Types
📦 rect
Rectangles and boxes with optional rounded corners. Perfect for process steps, containers, and cards.
rect box1 100,100 200x100 f=#dbeafe br=8
⭕ ellipse
Circles and ovals for start/end nodes, actors, or decorative elements.
ellipse node1 200,150 80x80 f=#dcfce7
◇ diamond
Decision diamonds for flowcharts and decision trees.
diamond dec1 150,200 100x100 f=#fef08a
📝 text
Text labels with formatting options. Supports centering, bold, italic.
text t1 100,50 200x30 "Label" center bold
➡️ arrow
Arrows with directional heads for showing flow and connections.
arrow a1 100,200 -> 300,200
➖ line
Simple lines for connections without arrows.
line l1 100,100 ~~ 300,100
Property Shortcuts
PDDSL uses short property codes to minimize token usage:
| Short | Full Name | Example |
|---|---|---|
c |
stroke (color) | c=#1e40af |
f |
fill | f=#dbeafe |
sw |
strokeWidth | sw=2 |
br |
borderRadius | br=8 |
fs |
fontSize | fs=16 |
22 Built-in Templates
PDDSL comes with 22 professionally designed templates that you can load with one click:
flowchart-basic
flowchart-decision
flowchart-swimlane
flowchart-horizontal
arch-3tier
arch-microservices
arch-cloud
arch-client-server
diagram-sequence
diagram-er
diagram-class
diagram-usecase
org-chart
org-matrix
mindmap
tree-structure
timeline-horizontal
timeline-vertical
comparison-table
kanban-board
infographic
roadmap
How to Use PDDSL with LLMs
Getting AI to generate PDDSL diagrams is simple. Here's a workflow that works with any LLM:
- Share the Reference: Point the LLM to our PDDSL Reference Guide or paste key syntax examples into your prompt.
- Describe Your Diagram: "Create a PDDSL diagram showing a 3-tier architecture with web, API, and database layers."
- Copy the Output: The LLM generates compact PDDSL code.
- Paste into Diagram Maker: Click PDDSL button, paste code, click Import.
- Fine-tune: Adjust positions, colors, or text visually if needed.
Include one or two PDDSL examples in your prompt. LLMs learn the syntax instantly and produce well-formatted output.
Complete Example: Gold Infographic
Here's a real-world example – a colorful infographic about gold created entirely with PDDSL:
%pddsl 1.0
%canvas 800x1200 #1a1a2e
# Header
rect header 0,0 800x180 f=#d4af37 c=#b8860b sw=0
text title 50,40 700x50 "THE GOLDEN ELEMENT" center bold c=#1a1a2e fs=36
# Stats row
rect stat1 30,210 230x120 f=#2d2d44 c=#d4af37 br=12
text s1 30,230 230x40 "197" center bold c=#d4af37 fs=32
text s1label 30,280 230x40 "Atomic Weight" center c=#fff fs=14
# Price history section
rect priceBox 30,360 740x180 f=#16213e c=#d4af37 br=16
text priceTitle 50,375 700x30 "📈 HISTORIC GOLD PRICES" bold c=#ffd700 fs=20
# ... more elements
This produces a stunning dark-themed infographic with gold accents, multiple sections, and professional typography – all in under 50 lines of code.
Diagram Maker Features
PDDSL is just one part of Diagram Maker. Here's what else you can do:
🎨 Fabric.js Canvas
Full-featured canvas with shapes, text, images, and freehand drawing. Pan, zoom, and select with intuitive controls.
📝 Mermaid.js Support
Paste Mermaid code to generate flowcharts, sequence diagrams, and more using text-based syntax.
📤 Multiple Exports
Export to PNG (2x resolution), SVG (vector), or PDF. All exports capture the full canvas regardless of zoom.
💾 Save & Load
Save your work as JSON files and load them anytime. Share diagrams with teammates or version control your work.
📱 Device Mockups
Add phone, tablet, and desktop frames for UI mockups and app screenshots.
🔒 100% Private
Everything runs in your browser. No uploads, no accounts, no tracking. Your diagrams stay on your device.
Getting Started
Ready to try PDDSL? Here's how to get started:
- Open Diagram Maker
- Click the PDDSL button in the toolbar
- Select a template from the dropdown, or paste your own PDDSL code
- Click Import Diagram to render
- Edit visually or export as PNG/SVG/PDF
For complete syntax reference, examples, and best practices, visit the PDDSL Documentation.
Conclusion
PDDSL represents a new approach to diagram generation – one that's optimized for the AI era. By reducing token usage by 90%, it makes AI-generated diagrams practical and cost-effective. Combined with 22 built-in templates and seamless integration with Diagram Maker, you have everything you need to create professional diagrams in seconds.
Whether you're documenting architecture, creating flowcharts, building org charts, or designing infographics, PDDSL and Diagram Maker give you the tools to work faster and smarter.
And as always, it's completely free and private.