Mermaid Diagram Generator Transform ideas into professional diagrams in seconds. No design skills needed. ## Features

Two Modes - AI Mode - Describe in plain English, AI generates the diagram - Code Mode - Paste Mermaid syntax for full control

Output Options - PNG, SVG, PDF formats - 5 visual themes - Custom background colors - Adjustable resolution (1-5x)

## Quick Start ### AI Mode (No coding required) 1. Select diagram type (e.g., "Flowchart") 2. Describe what you want in plain English 3. Add your OpenAI API key 4. Click Start json { "aiDiagramType": "flowchart", "aiDescription": "User login: validate credentials, if valid show dashboard, otherwise show error", "openaiApiKey": "sk-...", "outputFormat": "png" } ### Code Mode (Mermaid Syntax) json { "mermaidCode": "sequenceDiagram\n User->>API: Login\n API->>DB: Validate\n DB-->>API: OK\n API-->>User: Token", "outputFormat": "svg" } > Tip: Use Form view (not JSON) to paste multiline Mermaid code directly. ## Supported Diagram Types | Type | Value | Example Description | |------|-------|---------------------| | Flowchart | flowchart | "Login flow: if valid show dashboard, otherwise show error" | | Sequence Diagram | sequence | "User calls API, API queries database, returns response" | | ER Diagram | er | "Users have many orders, orders contain products" | | Gantt Chart | gantt | "Project: design Jan 1-15, development Jan 16-31" | | Pie Chart | pie | "Sales: Electronics 40%, Clothing 35%, Food 25%" | | State Diagram | state | "Order states: pending, processing, shipped, delivered" | | Class Diagram | class | "Animal parent of Dog and Cat, Dog has name and age" | | Mindmap | mindmap | "Web Development: Frontend (React, Vue), Backend (Node)" | | Timeline | timeline | "Company: 2020 founded, 2021 Series A, 2023 IPO" | | Quadrant Chart | quadrant | "Priority matrix: urgent+important quadrants" | | Git Graph | gitgraph | "Main branch, feature branch, merge back" | | Sankey Diagram | sankey | "Budget flow: Revenue to Costs to Operations" | | XY Chart | xy | "Monthly sales: Jan 100, Feb 150, Mar 200" | ## Input Parameters | Parameter | Type | Required | Description | |-----------|------|----------|-------------| | mermaidCode | string | No | Mermaid diagram syntax (Code Mode) | | aiDiagramType | enum | No | Diagram type for AI Mode | | aiDescription | string | No | Plain English description (AI Mode) | | openaiApiKey | string | AI Mode | Your OpenAI API key | | outputFormat | enum | No | png (default), svg, pdf | | theme | enum | No | default, forest, dark, neutral, base | | backgroundColor | string | No | CSS color (default: white) | | scale | integer | No | Quality 1-5 (default: 3) | | maxWidth | integer | No | Max width in pixels (all formats) | | maxHeight | integer | No | Max height in pixels (all formats) | | diagrams | array | No | Batch mode: [{code, name, theme?, outputFormat?, ...}] | Either mermaidCode OR (aiDiagramType + aiDescription) is required ## Output Each diagram produces: Image file in Key-Value Store with direct download URL Metadata in Dataset: json { "success": true, "diagramName": "diagram", "diagramType": "flowchart", "url": "https://api.apify.com/v2/key-value-stores/.../records/diagram.png", "generatedWithAi": true, "mermaidCode": "flowchart TD\n ..." } ## Integration Examples

Python

python from apify_client import ApifyClient client = ApifyClient("YOUR_APIFY_TOKEN") run = client.actor("lolletto/mermaid-diagram-actor").call(run_input={ "aiDiagramType": "flowchart", "aiDescription": "User registration with email verification", "openaiApiKey": "sk-..." }) items = client.dataset(run["defaultDatasetId"]).list_items().items print(items[0]["url"])

JavaScript

javascript import { ApifyClient } from 'apify-client'; const client = new ApifyClient({ token: 'YOUR_TOKEN' }); const run = await client.actor('lolletto/mermaid-diagram-actor').call({ mermaidCode: 'graph LR\n A-->B-->C', outputFormat: 'svg' }); const { items } = await client.dataset(run.defaultDatasetId).listItems(); console.log(items[0].url);

cURL / CI-CD

bash curl -X POST "https://api.apify.com/v2/acts/lolletto~mermaid-diagram-actor/runs?token=YOUR_TOKEN" \ -H "Content-Type: application/json" \ -d '{"mermaidCode": "graph TD\n A-->B-->C", "outputFormat": "svg"}'

Chatbot Integration

Works with: Slack, Discord, Google Chat, Microsoft Teams, Telegram, WhatsApp Business javascript const response = await fetch('https://api.apify.com/v2/acts/lolletto~mermaid-diagram-actor/runs?token=YOUR_TOKEN', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ aiDiagramType: 'flowchart', aiDescription: userMessage, openaiApiKey: process.env.OPENAI_API_KEY }) });

## Themes | Theme | Description | |-------|-------------| | default | Blue tones (professional) | | forest | Green tones (nature) | | dark | Dark background | | neutral | Gray tones (minimal) | | base | No styling | ## Pricing $0.005 per diagram (any mode) Platform compute: ~$0.01 per run AI Mode requires your own OpenAI API key (~$0.001 per diagram). ## FAQ What's the difference between AI Mode and Code Mode? AI Mode lets you describe diagrams in plain English - no syntax knowledge needed. Code Mode requires Mermaid syntax but gives you full control over the diagram structure. --- What happens if I fill multiple input fields? The Actor follows this priority: 1. Batch Mode (diagrams array) - if filled, ignores everything else 2. AI Mode (aiDiagramType + aiDescription) - if both filled, ignores mermaidCode 3. Code Mode (mermaidCode) - used only if batch and AI mode are empty You cannot combine modes in a single run. Choose one. --- Can I use different settings per diagram in Batch Mode? Yes! Each diagram in the batch can have its own settings. If not specified, global settings are used as fallback. json [ {"code": "flowchart TD\n A-->B", "name": "light", "theme": "default", "outputFormat": "png"}, {"code": "flowchart TD\n C-->D", "name": "dark", "theme": "dark", "backgroundColor": "#1a1a1a", "outputFormat": "svg"} ] Available per-diagram settings: outputFormat, theme, backgroundColor, scale, maxWidth, maxHeight. --- How do I enter Batch Mode in the Form view? The "Batch Mode" field requires valid JSON array format: json [ {"code": "flowchart TD\n A-->B", "name": "diagram1"}, {"code": "pie title X\n \"A\": 50", "name": "diagram2"} ] For easier input, use the JSON tab instead of Form view. --- Do maxWidth/maxHeight work with all formats? Yes! maxWidth/maxHeight work with all formats: - PNG: Resized with padding to exact dimensions - SVG: Width/height attributes modified, maintains aspect ratio - PDF: Page scaled, maintains aspect ratio Note: scale only affects PNG (pixel density). SVG and PDF are vector formats. --- How do I get a transparent background? Set backgroundColor to transparent. Works best with PNG format. Some diagram elements may still have their own background colors based on the theme. --- What's the maximum diagram complexity? No hard limit. Complex diagrams may take up to 2 minutes to render. --- Can I customize colors beyond themes? Use backgroundColor for diagram background. For more control, use Code Mode with Mermaid styling directives in your code. ## Resources - Mermaid Syntax Documentation - Mermaid Live Editor - Test diagrams before running ## Support Questions? Contact via Apify Store