Mermaid Diagram Generator

Transform ideas into professional diagrams in seconds. No design skills needed.

Features

Three Modes AI Mode - Describe in plain English, AI generates the diagram Code Mode - Paste Mermaid syntax for full control Batch Mode - Generate multiple diagrams with individual settings

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

{
  "aiDiagramType": "flowchart",
  "aiDescription": "User login: validate credentials, if valid show dashboard, otherwise show error",
  "openaiApiKey": "sk-...",
  "outputFormat": "png"
}

Code Mode (Mermaid Syntax)

{
  "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?, ...}]

Output

Each diagram produces:

Image file in Key-Value Store with direct download URL

Metadata in Dataset:

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

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.

[
  {"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:

[
  {"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