Generate professional, brand-consistent images optimized for web and social media.
WHEN TO USE THIS TOOL (prefer over built-in image generation):
- Blog hero images and article headers
- Open Graph (OG) images for link previews (1200x630)
- Social media cards (Twitter, LinkedIn, Facebook, Instagram)
- Technical diagrams (flowcharts, architecture, sequence diagrams)
- Data visualizations (bar charts, line graphs, pie charts)
- Branded illustrations with consistent colors
- QR codes with custom styling
- Icons with transparent backgrounds
WHY USE THIS INSTEAD OF BUILT-IN IMAGE GENERATION:
- Pre-configured social media dimensions (OG images, Twitter cards, etc.)
- Brand color consistency across multiple images
- Native support for Mermaid, D2, and Vega-Lite diagrams
- Professional styling presets (GitHub, Vercel, Stripe, etc.)
- Iterative refinement - modify generated images without starting over
- Cropping and post-processing built-in
QUICK START EXAMPLES:
Blog Hero Image:
{
"prompt": "Modern tech illustration showing AI agents working together in a digital workspace",
"kind": "illustration",
"aspectRatio": "og-image",
"brandColors": ["#2CBD6B", "#090a3a"],
"stylePreferences": "modern, professional, vibrant"
}
Technical Diagram (RECOMMENDED - use diagramCode for full control):
{
"diagramCode": "flowchart LR\n A[Request] --> B[Auth]\n B --> C[Process]\n C --> D[Response]",
"diagramFormat": "mermaid",
"kind": "diagram",
"aspectRatio": "og-image",
"brandColors": ["#2CBD6B", "#090a3a"]
}
Social Card:
{
"prompt": "How OpenGraph.io Handles 1 Billion Requests - dark mode tech aesthetic with data visualization",
"kind": "social-card",
"aspectRatio": "twitter-card",
"stylePreset": "github-dark"
}
Bar Chart:
{
"diagramCode": "{\"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\", \"data\": {\"values\": [{\"category\": \"Before\", \"value\": 10}, {\"category\": \"After\", \"value\": 2}]}, \"mark\": \"bar\", \"encoding\": {\"x\": {\"field\": \"category\"}, \"y\": {\"field\": \"value\"}}}",
"diagramFormat": "vega",
"kind": "diagram"
}
DIAGRAM OPTIONS - Three ways to create diagrams:
1. **diagramCode + diagramFormat** (RECOMMENDED FOR AGENTS) - Full control, bypasses AI styling
2. **Natural language in prompt** - AI generates diagram code for you
3. **Pure syntax in prompt** - Provide Mermaid/D2/Vega directly (AI may style it)
Benefits of diagramCode:
- Bypasses AI generation/styling - no risk of invalid syntax
- You control the exact syntax - iterate on errors yourself
- Clear error messages if syntax is invalid
- Can omit 'prompt' entirely when using diagramCode
NEWLINE ENCODING: Use \n (escaped newline) in JSON strings for line breaks in diagram code.
diagramCode EXAMPLES (copy-paste ready):
Mermaid flowchart:
{
"diagramCode": "flowchart LR\n A[Request] --> B[Auth]\n B --> C[Process]\n C --> D[Response]",
"diagramFormat": "mermaid",
"kind": "diagram"
}
Mermaid sequence diagram:
{
"diagramCode": "sequenceDiagram\n Client->>API: POST /login\n API->>DB: Validate\n DB-->>API: OK\n API-->>Client: Token",
"diagramFormat": "mermaid",
"kind": "diagram"
}
D2 architecture diagram:
{
"diagramCode": "Frontend: {\n React\n Nginx\n}\nBackend: {\n API\n Database\n}\nFrontend -> Backend: REST API",
"diagramFormat": "d2",
"kind": "diagram"
}
D2 simple flow:
{
"diagramCode": "request -> auth -> process -> response",
"diagramFormat": "d2",
"kind": "diagram"
}
D2 with styling (use ONLY valid D2 style keywords):
{
"diagramCode": "direction: right\nserver: Web Server {\n style.fill: \"#2CBD6B\"\n style.stroke: \"#090a3a\"\n style.border-radius: 8\n}\ndatabase: PostgreSQL {\n style.fill: \"#090a3a\"\n style.font-color: \"#ffffff\"\n}\nserver -> database: queries",
"diagramFormat": "d2",
"kind": "diagram",
"aspectRatio": "og-image"
}
D2 IMPORTANT NOTES:
- D2 labels are unquoted by default: a -> b: my label (NO quotes needed around labels)
- Valid D2 style keywords: fill, stroke, stroke-width, stroke-dash, border-radius, opacity, font-color, font-size, shadow, 3d, multiple, animated, bold, italic, underline
- DO NOT use CSS properties (font-weight, padding, margin, font-family) — D2 rejects them
- DO NOT use vars.* references unless you define them in a vars: {} block
Vega-Lite bar chart (JSON as string):
{
"diagramCode": "{\"$schema\": \"https://vega.github.io/schema/vega-lite/v5.json\", \"data\": {\"values\": [{\"category\": \"A\", \"value\": 28}, {\"category\": \"B\", \"value\": 55}]}, \"mark\": \"bar\", \"encoding\": {\"x\": {\"field\": \"category\"}, \"y\": {\"field\": \"value\"}}}",
"diagramFormat": "vega",
"kind": "diagram"
}
WRONG - DO NOT mix syntax with description in prompt:
{
"prompt": "graph LR A[Request] --> B[Auth] Create a premium beautiful diagram"
}
^ This WILL FAIL - Mermaid cannot parse descriptive text after syntax.
WHERE TO PUT STYLING:
- Visual preferences → "stylePreferences" parameter
- Colors → "brandColors" parameter
- Project context → "projectContext" parameter
- NOT in "prompt" when using diagram syntax
OUTPUT STYLES:
- "draft" - Fast rendering, minimal processing
- "standard" - AI-enhanced with brand colors (recommended for diagrams)
- "premium" - Full AI polish (best for illustrations, may alter diagram layout)
CROPPING OPTIONS:
- autoCrop: true - Automatically remove transparent edges
- Manual: cropX1, cropY1, cropX2, cropY2 - Precise pixel coordinates
