Pricing
from $0.01 / 1,000 results
Convert Text description or Mermaid code to PNG, SVG, or PDF images. Flowcharts, sequence diagrams, Gantt charts, ER diagrams and more.
Pricing
from $0.01 / 1,000 results
Rating
0.0
(0)
Developer
Lorenzo De Martinis
Actor stats
0
Bookmarked
2
Total users
1
Monthly active users
2 hours ago
Last modified
Categories
Share
# Dependenciesnode_modules/
# Apify storageapify_storage/storage/
# Build outputsdist/
# IDE.idea/.vscode/*.swp*.swo
# OS.DS_StoreThumbs.db
# Logs*.lognpm-debug.log*
# Environment.env.env.local
# Temp files/tmp/*.tmp1const fs = require('fs');2let content = fs.readFileSync('src/main.js', 'utf8');3
4// Remove the specific lines that override text colors inside nodes5const linesToRemove = [6 /\s*primaryTextColor: textColor,\n/g,7 /\s*secondaryTextColor: textColor,\n/g,8 /\s*tertiaryTextColor: textColor,\n/g,9 /\s*textColor: textColor,\n/g,10 /\s*actorTextColor: textColor,\n/g11];12
13for (const regex of linesToRemove) {14 content = content.replace(regex, '\n');15}16
17// Update comments18content = content.replace(19 '// Only override text/line colors for readability\n // Keep theme\'s node colors (green for forest, blue for default, etc.)',20 '// Background + lines (NOT text inside nodes)\n // Theme handles text inside boxes for proper contrast'21);22
23content = content.replace(24 '// Sequence diagram - adjust text colors only',25 '// Sequence: lines + labels outside boxes'26);27
28fs.writeFileSync('src/main.js', content);29console.log('Done');{ "name": "mermaid-diagram-actor", "version": "1.0.0", "description": "Apify Actor that converts Mermaid diagram syntax into PNG, SVG, or PDF images", "type": "module", "main": "src/main.js", "scripts": { "start": "node src/main.js", "test": "echo \"No tests yet\" && exit 0" }, "author": "Your Name", "license": "ISC", "dependencies": { "@mermaid-js/mermaid-cli": "^11.4.0", "apify": "^3.2.0", "pdf-lib": "^1.17.1", "sharp": "^0.33.5" }, "engines": { "node": ">=18.0.0" }}1import { Actor, log } from 'apify';2import { exec } from 'child_process';3import { promisify } from 'util';4import { writeFile, readFile, unlink, mkdir, rm } from 'fs/promises';5import { existsSync } from 'fs';6import path from 'path';7import { randomUUID } from 'crypto';8import os from 'os';9import sharp from 'sharp';10import { PDFDocument } from 'pdf-lib';11
12const execAsync = promisify(exec);13
14// Diagram type configurations for AI prompts15const DIAGRAM_PROMPTS = {16 flowchart: {17 syntax: 'flowchart TD',18 instruction: 'Create a flowchart with nodes and arrows. Use decision diamonds {}, rectangular boxes [], and rounded boxes (). Connect with --> arrows.'19 },20 sequence: {21 syntax: 'sequenceDiagram',22 instruction: 'Create a sequence diagram showing interactions between participants. Use ->> for requests, -->> for responses, and Note over for annotations.'23 },24 er: {25 syntax: 'erDiagram',26 instruction: 'Create an ER diagram for database schema. Use ||--o{ for one-to-many, }|--|{ for many-to-many relationships. Define entity attributes.'27 },28 gantt: {29 syntax: 'gantt',30 instruction: 'Create a Gantt chart with dateFormat YYYY-MM-DD, title, sections, and tasks with durations like "task1 :a1, 2024-01-01, 30d".'31 },32 pie: {33 syntax: 'pie title Chart Title',34 instruction: 'Create a pie chart with "Label" : value format for each slice.'35 },36 state: {37 syntax: 'stateDiagram-v2',38 instruction: 'Create a state diagram with [*] for start/end states, --> for transitions, and state names in PascalCase.'39 },40 class: {41 syntax: 'classDiagram',42 instruction: 'Create a class diagram with class definitions, attributes (+public, -private), methods, and relationships (<|-- inheritance, *-- composition).'43 },44 mindmap: {45 syntax: 'mindmap',46 instruction: 'Create a mindmap with root node and indented child nodes. Use proper indentation for hierarchy.'47 },48 timeline: {49 syntax: 'timeline',50 instruction: 'Create a timeline with title and events. Format: "time period : event1 : event2".'51 },52 quadrant: {53 syntax: 'quadrantChart',54 instruction: 'Create a quadrant chart with title, x-axis, y-axis labels, and data points with [x, y] coordinates.'55 },56 gitgraph: {57 syntax: 'gitGraph',58 instruction: 'Create a git graph with commit, branch, checkout, and merge commands.'59 },60 sankey: {61 syntax: 'sankey-beta',62 instruction: 'Create a sankey diagram with source,target,value format for flows.'63 },64 xy: {65 syntax: 'xychart-beta',66 instruction: 'Create an XY chart with x-axis, y-axis, and line or bar data series.'67 }68};69
70/**71 * Convert natural language description to Mermaid code using OpenAI72 */73async function convertDescriptionToMermaid(description, diagramType, openaiApiKey) {74 const diagramConfig = DIAGRAM_PROMPTS[diagramType];75 if (!diagramConfig) {76 throw new Error(`Unknown diagram type: ${diagramType}`);77 }78
79 const prompt = `Convert this description into valid Mermaid ${diagramType} diagram code.80
81IMPORTANT RULES:82- Output ONLY raw Mermaid code, nothing else83- No markdown code blocks, no explanations, no comments84- Start with: ${diagramConfig.syntax}85- ${diagramConfig.instruction}86
87Description: ${description}88
89Mermaid code:`;90
91 const response = await fetch('https://api.openai.com/v1/chat/completions', {92 method: 'POST',93 headers: {94 'Content-Type': 'application/json',95 'Authorization': `Bearer ${openaiApiKey}`,96 },97 body: JSON.stringify({98 model: 'gpt-4o-mini',99 messages: [100 {101 role: 'system',102 content: 'You are a Mermaid diagram expert. You only output valid Mermaid code, nothing else. No markdown formatting, no explanations.'103 },104 {105 role: 'user',106 content: prompt107 }108 ],109 temperature: 0.3,110 max_tokens: 2000,111 }),112 });113
114 if (!response.ok) {115 const error = await response.text();116 throw new Error(`OpenAI API error: ${response.status} - ${error}`);117 }118
119 const data = await response.json();120 let mermaidCode = data.choices[0].message.content.trim();121
122 // Clean up any markdown code blocks if present123 mermaidCode = mermaidCode.replace(/^```mermaid\n?/i, '').replace(/^```\n?/i, '').replace(/\n?```$/i, '');124
125 return mermaidCode;126}127
128// Initialize the Actor129await Actor.init();130
131try {132 // Get input133 const input = await Actor.getInput() ?? {};134
135 const {136 aiDiagramType = '',137 aiDescription = '',138 openaiApiKey = '',139 diagrams = [],140 mermaidCode = '',141 outputFormat = 'png',142 theme = 'default',143 backgroundColor = 'white',144 maxWidth = 0,145 maxHeight = 0,146 scale = 3, // Higher scale for better quality147 } = input;148
149 // Track if AI mode was used150 let usedAiMode = false;151
152 // Handle AI mode (natural language description)153 let generatedMermaidCode = mermaidCode;154 if (aiDiagramType && aiDescription && aiDescription.trim()) {155 if (!openaiApiKey) {156 throw new Error('AI Mode requires an OpenAI API Key. Get yours at platform.openai.com/api-keys');157 }158 log.info(`AI Mode: Generating ${aiDiagramType} diagram from description...`);159 generatedMermaidCode = await convertDescriptionToMermaid(aiDescription.trim(), aiDiagramType, openaiApiKey);160 usedAiMode = true;161 log.info('Successfully generated Mermaid code from description');162 log.debug(`Generated code:\n${generatedMermaidCode}`);163 } else if (aiDiagramType && !aiDescription) {164 throw new Error('AI Mode requires both diagram type AND description. Please fill in the description field.');165 } else if (!aiDiagramType && aiDescription && aiDescription.trim()) {166 throw new Error('AI Mode requires selecting a diagram type. Please choose from the dropdown.');167 }168
169 // Validate outputFormat170 const validFormats = ['png', 'svg', 'pdf'];171 if (!validFormats.includes(outputFormat)) {172 throw new Error(`Invalid outputFormat "${outputFormat}". Must be one of: ${validFormats.join(', ')}`);173 }174
175 // Validate theme176 const validThemes = ['default', 'forest', 'dark', 'neutral', 'base'];177 if (!validThemes.includes(theme)) {178 throw new Error(`Invalid theme "${theme}". Must be one of: ${validThemes.join(', ')}`);179 }180
181 // Validate scale182 if (scale < 1 || scale > 5) {183 throw new Error(`Scale must be between 1 and 5. Got: ${scale}`);184 }185
186 // Build list of diagrams to process187 let diagramsToProcess = [];188
189 if (diagrams && diagrams.length > 0) {190 diagramsToProcess = diagrams191 .filter(d => d && d.code && d.code.trim()) // Filter out empty diagrams192 .map((d, i) => ({193 code: d.code.trim(),194 name: sanitizeFileName(d.name || `diagram-${i + 1}`),195 // Per-diagram settings (undefined = use global)196 outputFormat: d.outputFormat,197 theme: d.theme,198 backgroundColor: d.backgroundColor,199 scale: d.scale,200 maxWidth: d.maxWidth,201 maxHeight: d.maxHeight,202 }));203 } else if (generatedMermaidCode && generatedMermaidCode.trim()) {204 // Use generated code from AI or direct mermaidCode input205 diagramsToProcess = [{206 code: generatedMermaidCode.trim(),207 name: usedAiMode ? `ai-${aiDiagramType}-diagram` : 'diagram',208 }];209 }210
211 if (diagramsToProcess.length === 0) {212 throw new Error('No valid input provided. Use AI mode (select diagram type + description) or paste Mermaid code directly.');213 }214
215 log.info(`Processing ${diagramsToProcess.length} diagram(s)`);216
217 // Create temp directory (cross-platform)218 const tempDir = path.join(os.tmpdir(), 'mermaid-' + randomUUID());219 if (!existsSync(tempDir)) {220 await mkdir(tempDir, { recursive: true });221 }222
223 // Create puppeteer config for Apify environment (no-sandbox required)224 const puppeteerConfig = {225 executablePath: process.env.APIFY_CHROME_EXECUTABLE_PATH || undefined,226 args: ['--no-sandbox', '--disable-setuid-sandbox'],227 };228 const puppeteerConfigPath = path.join(tempDir, 'puppeteer-config.json');229 await writeFile(puppeteerConfigPath, JSON.stringify(puppeteerConfig));230
231 // Get Key-Value Store for output232 const kvStore = await Actor.openKeyValueStore();233 const dataset = await Actor.openDataset();234
235 // Process each diagram236 const results = [];237
238 for (const diagram of diagramsToProcess) {239 const diagramId = randomUUID().slice(0, 8);240
241 // Per-diagram settings with fallback to global242 const dOutputFormat = diagram.outputFormat || outputFormat;243 const dTheme = diagram.theme || theme;244 const dBackgroundColor = diagram.backgroundColor || backgroundColor;245 const dScale = diagram.scale || scale;246 const dMaxWidth = diagram.maxWidth !== undefined ? diagram.maxWidth : maxWidth;247 const dMaxHeight = diagram.maxHeight !== undefined ? diagram.maxHeight : maxHeight;248
249 const inputFile = path.join(tempDir, `input-${diagramId}.mmd`);250 const outputFile = path.join(tempDir, `output-${diagramId}.${dOutputFormat}`);251
252 try {253 log.info(`Processing diagram: ${diagram.name} (format: ${dOutputFormat}, theme: ${dTheme})`);254
255 // Write mermaid code to temp file256 await writeFile(inputFile, diagram.code);257
258 // Detect diagram type from code259 const diagramType = detectDiagramType(diagram.code);260
261 // Create per-diagram config and CSS262 const isDarkBg = isColorDark(dBackgroundColor);263 const txtColor = isDarkBg ? '#ffffff' : '#333333';264 const lnColor = isDarkBg ? '#ffffff' : '#333333';265
266 const mermaidConfig = {267 theme: dTheme,268 themeVariables: {269 background: dBackgroundColor,270 lineColor: lnColor,271 fontSize: '16px',272 fontFamily: 'arial, sans-serif',273 actorLineColor: lnColor,274 signalColor: lnColor,275 signalTextColor: txtColor,276 labelTextColor: txtColor,277 loopTextColor: txtColor,278 noteTextColor: txtColor,279 sequenceNumberColor: txtColor,280 },281 gantt: { titleTopMargin: 25, barHeight: 30, barGap: 8, topPadding: 75, leftPadding: 150, gridLineStartPadding: 50, fontSize: 14, sectionFontSize: 16, numberSectionStyles: 4, useWidth: 1400 },282 sequence: { diagramMarginX: 50, diagramMarginY: 30, actorMargin: 100, width: 200, height: 70, boxMargin: 10, noteMargin: 20, messageMargin: 50, mirrorActors: true, useMaxWidth: false },283 flowchart: { htmlLabels: true, curve: 'basis', padding: 25, nodeSpacing: 50, rankSpacing: 50, useMaxWidth: false },284 er: { diagramPadding: 30, layoutDirection: 'TB', minEntityWidth: 120, minEntityHeight: 80, entityPadding: 20, useMaxWidth: false },285 pie: { textPosition: 0.75, useMaxWidth: false },286 mindmap: { padding: 25, useMaxWidth: false },287 };288
289 const configPath = path.join(tempDir, `config-${diagramId}.json`);290 await writeFile(configPath, JSON.stringify(mermaidConfig));291
292 const cssContent = `293 body, html, #container, .mermaid, svg { background-color: ${dBackgroundColor} !important; }294 .messageText, .loopText, .loopText > tspan, .labelText, .labelText > tspan { fill: ${txtColor} !important; }295 .noteText, .noteText > tspan, .sequenceNumber { fill: ${txtColor} !important; }296 .messageLine0, .messageLine1, .loopLine { stroke: ${lnColor} !important; }297 .edgeLabel { background-color: ${dBackgroundColor} !important; }298 .edgeLabel rect { fill: ${dBackgroundColor} !important; }299 .edgePath .path { stroke: ${lnColor} !important; }300 marker path { fill: ${lnColor} !important; }301 .taskText, .taskTextOutsideRight, .sectionTitle, .titleText, .pieTitleText, .legend text { fill: ${txtColor} !important; }302 `;303 const cssPath = path.join(tempDir, `style-${diagramId}.css`);304 await writeFile(cssPath, cssContent);305
306 // Build mmdc command307 const mmdcArgs = [308 'npx', 'mmdc',309 '-i', inputFile,310 '-o', outputFile,311 '-c', configPath,312 '-p', puppeteerConfigPath,313 '-b', `"${dBackgroundColor}"`,314 '-C', cssPath,315 '-s', dScale.toString(),316 ];317
318 // maxWidth/maxHeight handled by post-processing with sharp319
320 // Execute mermaid-cli321 const command = mmdcArgs.join(' ');322 log.debug(`Executing: ${command}`);323
324 await execAsync(command, {325 timeout: 120000, // 2 minutes for complex diagrams326 env: { ...process.env, PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: 'true' }327 });328
329 // Read output file330 let outputBuffer = await readFile(outputFile);331
332 // Resize if maxWidth/maxHeight specified333 if (dMaxWidth > 0 || dMaxHeight > 0) {334 if (dOutputFormat === 'png') {335 // PNG resize with sharp336 const resizeOptions = {337 fit: 'contain',338 background: dBackgroundColor === 'transparent'339 ? { r: 0, g: 0, b: 0, alpha: 0 }340 : dBackgroundColor341 };342
343 if (dMaxWidth > 0 && dMaxHeight > 0) {344 outputBuffer = await sharp(outputBuffer)345 .resize(dMaxWidth, dMaxHeight, resizeOptions)346 .png()347 .toBuffer();348 log.info(`Resized PNG to ${dMaxWidth}x${dMaxHeight}`);349 } else if (dMaxWidth > 0) {350 outputBuffer = await sharp(outputBuffer)351 .resize(dMaxWidth, null, resizeOptions)352 .png()353 .toBuffer();354 log.info(`Resized PNG to max width ${dMaxWidth}`);355 } else if (dMaxHeight > 0) {356 outputBuffer = await sharp(outputBuffer)357 .resize(null, dMaxHeight, resizeOptions)358 .png()359 .toBuffer();360 log.info(`Resized PNG to max height ${dMaxHeight}`);361 }362 } else if (dOutputFormat === 'svg') {363 // SVG resize by modifying width/height attributes364 let svgContent = outputBuffer.toString('utf8');365
366 // Extract current dimensions from SVG367 const widthMatch = svgContent.match(/width="([^"]+)"/);368 const heightMatch = svgContent.match(/height="([^"]+)"/);369
370 if (widthMatch && heightMatch) {371 const currentWidth = parseFloat(widthMatch[1]);372 const currentHeight = parseFloat(heightMatch[1]);373
374 // Calculate new dimensions maintaining aspect ratio375 let newWidth = currentWidth;376 let newHeight = currentHeight;377
378 if (dMaxWidth > 0 && dMaxHeight > 0) {379 const scaleW = dMaxWidth / currentWidth;380 const scaleH = dMaxHeight / currentHeight;381 const scaleRatio = Math.min(scaleW, scaleH);382 newWidth = currentWidth * scaleRatio;383 newHeight = currentHeight * scaleRatio;384 } else if (dMaxWidth > 0) {385 const scaleRatio = dMaxWidth / currentWidth;386 newWidth = dMaxWidth;387 newHeight = currentHeight * scaleRatio;388 } else if (dMaxHeight > 0) {389 const scaleRatio = dMaxHeight / currentHeight;390 newHeight = dMaxHeight;391 newWidth = currentWidth * scaleRatio;392 }393
394 // Replace width and height attributes395 svgContent = svgContent.replace(/width="[^"]+"/, `width="${Math.round(newWidth)}"`);396 svgContent = svgContent.replace(/height="[^"]+"/, `height="${Math.round(newHeight)}"`);397
398 outputBuffer = Buffer.from(svgContent, 'utf8');399 log.info(`Resized SVG to ${Math.round(newWidth)}x${Math.round(newHeight)}`);400 } else {401 log.warning('Could not extract SVG dimensions, skipping resize');402 }403 } else if (dOutputFormat === 'pdf') {404 // PDF resize by scaling the page405 const pdfDoc = await PDFDocument.load(outputBuffer);406 const pages = pdfDoc.getPages();407
408 if (pages.length > 0) {409 const page = pages[0];410 const { width: currentWidth, height: currentHeight } = page.getSize();411
412 // Calculate new dimensions maintaining aspect ratio413 let newWidth = currentWidth;414 let newHeight = currentHeight;415
416 if (dMaxWidth > 0 && dMaxHeight > 0) {417 const scaleW = dMaxWidth / currentWidth;418 const scaleH = dMaxHeight / currentHeight;419 const scaleRatio = Math.min(scaleW, scaleH);420 newWidth = currentWidth * scaleRatio;421 newHeight = currentHeight * scaleRatio;422 } else if (dMaxWidth > 0) {423 const scaleRatio = dMaxWidth / currentWidth;424 newWidth = dMaxWidth;425 newHeight = currentHeight * scaleRatio;426 } else if (dMaxHeight > 0) {427 const scaleRatio = dMaxHeight / currentHeight;428 newHeight = dMaxHeight;429 newWidth = currentWidth * scaleRatio;430 }431
432 // Scale the page content and resize433 const scaleX = newWidth / currentWidth;434 const scaleY = newHeight / currentHeight;435
436 page.setSize(newWidth, newHeight);437 page.scaleContent(scaleX, scaleY);438
439 outputBuffer = Buffer.from(await pdfDoc.save());440 log.info(`Resized PDF to ${Math.round(newWidth)}x${Math.round(newHeight)}`);441 }442 }443 }444
445 // Generate file name446 const fileName = `${diagram.name}.${dOutputFormat}`;447
448 // Store in Key-Value Store449 const contentType = getContentType(dOutputFormat);450 await kvStore.setValue(fileName, outputBuffer, { contentType });451
452 // Get public URL (only available when running on Apify platform)453 const env = Actor.getEnv();454 let publicUrl = null;455 if (env.defaultKeyValueStoreId) {456 publicUrl = `https://api.apify.com/v2/key-value-stores/${env.defaultKeyValueStoreId}/records/${encodeURIComponent(fileName)}`;457 }458
459 const result = {460 success: true,461 diagramName: diagram.name,462 diagramType,463 outputFormat: dOutputFormat,464 fileName,465 url: publicUrl,466 size: outputBuffer.length,467 theme: dTheme,468 backgroundColor: dBackgroundColor,469 scale: dScale,470 maxWidth: dMaxWidth,471 maxHeight: dMaxHeight,472 generatedWithAi: usedAiMode,473 aiDiagramType: usedAiMode ? aiDiagramType : null,474 mermaidCode: diagram.code,475 };476
477 results.push(result);478 await dataset.pushData(result);479
480 log.info(`Successfully generated: ${fileName} (${formatBytes(outputBuffer.length)})`);481
482 // Charge for successful diagram generation (monetization)483 await Actor.charge({ eventName: 'diagram-generated', count: 1 });484
485 // Cleanup temp files486 await unlink(inputFile).catch(() => {});487 await unlink(outputFile).catch(() => {});488 await unlink(configPath).catch(() => {});489 await unlink(cssPath).catch(() => {});490
491 } catch (error) {492 const errorResult = {493 success: false,494 diagramName: diagram.name,495 error: error.message,496 };497 results.push(errorResult);498 await dataset.pushData(errorResult);499 log.error(`Failed to process diagram ${diagram.name}: ${error.message}`);500 }501 }502
503 // Summary504 const successful = results.filter(r => r.success).length;505 const failed = results.filter(r => !r.success).length;506
507 log.info(`Completed! ${successful} successful, ${failed} failed out of ${results.length} total.`);508
509 // Store summary510 await kvStore.setValue('OUTPUT', {511 success: failed === 0,512 totalDiagrams: results.length,513 successful,514 failed,515 results,516 });517
518 // Cleanup temp directory519 await rm(tempDir, { recursive: true, force: true }).catch(() => {});520
521} catch (error) {522 log.error(`Actor failed: ${error.message}`);523 throw error;524} finally {525 await Actor.exit();526}527
528/**529 * Detect the type of Mermaid diagram from its code530 */531function detectDiagramType(code) {532 const firstLine = code.trim().split('\n')[0].toLowerCase();533
534 if (firstLine.startsWith('graph') || firstLine.startsWith('flowchart')) {535 return 'flowchart';536 } else if (firstLine.startsWith('sequencediagram')) {537 return 'sequence';538 } else if (firstLine.startsWith('classdiagram')) {539 return 'class';540 } else if (firstLine.startsWith('statediagram')) {541 return 'state';542 } else if (firstLine.startsWith('erdiagram')) {543 return 'er';544 } else if (firstLine.startsWith('gantt')) {545 return 'gantt';546 } else if (firstLine.startsWith('pie')) {547 return 'pie';548 } else if (firstLine.startsWith('journey')) {549 return 'journey';550 } else if (firstLine.startsWith('gitgraph')) {551 return 'gitgraph';552 } else if (firstLine.startsWith('mindmap')) {553 return 'mindmap';554 } else if (firstLine.startsWith('timeline')) {555 return 'timeline';556 } else if (firstLine.startsWith('quadrantchart')) {557 return 'quadrant';558 } else if (firstLine.startsWith('requirementdiagram')) {559 return 'requirement';560 } else if (firstLine.startsWith('c4context') || firstLine.startsWith('c4container') || firstLine.startsWith('c4component')) {561 return 'c4';562 } else if (firstLine.startsWith('sankey')) {563 return 'sankey';564 } else if (firstLine.startsWith('xychart')) {565 return 'xychart';566 } else if (firstLine.startsWith('block')) {567 return 'block';568 }569
570 return 'unknown';571}572
573/**574 * Get content type for output format575 */576function getContentType(format) {577 switch (format) {578 case 'png': return 'image/png';579 case 'svg': return 'image/svg+xml';580 case 'pdf': return 'application/pdf';581 default: return 'application/octet-stream';582 }583}584
585/**586 * Format bytes to human readable string587 */588function formatBytes(bytes) {589 if (bytes === 0) return '0 Bytes';590 const k = 1024;591 const sizes = ['Bytes', 'KB', 'MB', 'GB'];592 const i = Math.floor(Math.log(bytes) / Math.log(k));593 return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];594}595
596/**597 * Sanitize file name to prevent issues with special characters598 */599function sanitizeFileName(name) {600 return name601 .replace(/[<>:"/\\|?*]/g, '-') // Replace invalid chars602 .replace(/\s+/g, '-') // Replace spaces with dashes603 .replace(/-+/g, '-') // Replace multiple dashes with single604 .replace(/^-|-$/g, '') // Remove leading/trailing dashes605 .substring(0, 100) // Limit length606 || 'diagram'; // Fallback if empty607}608
609/**610 * Determine if a color is dark (needs light text)611 */612function isColorDark(color) {613 // Handle common color names614 const darkColors = ['black', 'navy', 'darkblue', 'darkgreen', 'darkred', 'purple', 'maroon', 'indigo', 'darkslategray', 'darkslategrey', 'dimgray', 'dimgrey', 'brown', 'darkviolet', 'darkorchid', 'darkmagenta', 'darkgoldenrod', 'midnightblue', 'darkcyan', 'darkolivegreen', 'saddlebrown', 'sienna', 'teal', 'olive'];615 const lightColors = ['white', 'transparent', 'ivory', 'lightyellow', 'lightcyan', 'lightgray', 'lightgrey', 'whitesmoke', 'snow', 'ghostwhite', 'floralwhite', 'aliceblue', 'azure', 'mintcream', 'honeydew', 'seashell', 'oldlace', 'linen', 'lavenderblush', 'lavender', 'beige', 'cornsilk', 'lemonchiffon', 'papayawhip', 'blanchedalmond', 'bisque', 'moccasin', 'navajowhite', 'peachpuff', 'mistyrose', 'pink', 'lightpink', 'lightsalmon', 'lightcoral', 'khaki', 'palegoldenrod', 'yellow', 'gold', 'orange', 'wheat', 'antiquewhite'];616
617 const lowerColor = color.toLowerCase().trim();618
619 if (darkColors.includes(lowerColor)) return true;620 if (lightColors.includes(lowerColor)) return false;621
622 // Handle hex colors623 let hex = lowerColor;624 if (hex.startsWith('#')) {625 hex = hex.slice(1);626 // Handle shorthand hex (#rgb -> #rrggbb)627 if (hex.length === 3) {628 hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];629 }630 if (hex.length === 6) {631 const r = parseInt(hex.slice(0, 2), 16);632 const g = parseInt(hex.slice(2, 4), 16);633 const b = parseInt(hex.slice(4, 6), 16);634 // Calculate relative luminance635 const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;636 return luminance < 0.5;637 }638 }639
640 // Handle rgb/rgba641 const rgbMatch = lowerColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);642 if (rgbMatch) {643 const r = parseInt(rgbMatch[1], 10);644 const g = parseInt(rgbMatch[2], 10);645 const b = parseInt(rgbMatch[3], 10);646 const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;647 return luminance < 0.5;648 }649
650 // Default to light (assume light background)651 return false;652}{ "actorSpecification": 1, "name": "mermaid-diagram-actor", "title": "Mermaid Diagram Generator", "description": "Transform ideas into professional diagrams in seconds. Describe what you want in plain English (AI-powered) or use Mermaid code. Use cases: API documentation, database schemas, project timelines, CI/CD automation. Outputs PNG, SVG, PDF.", "version": "1.0", "buildTag": "latest", "meta": { "templateId": "js-start" }, "input": "./input_schema.json", "output": "./output_schema.json", "dockerfile": "./Dockerfile", "storages": { "dataset": { "actorSpecification": 1, "title": "Generated Diagrams", "views": { "overview": { "title": "Overview", "transformation": { "fields": ["diagramType", "outputFormat", "fileName", "url"] }, "display": { "component": "table", "properties": { "diagramType": { "label": "Diagram Type", "format": "text" }, "outputFormat": { "label": "Format", "format": "text" }, "fileName": { "label": "File Name", "format": "text" }, "url": { "label": "Download URL", "format": "link" } } } } } } }, "seoTitle": "Mermaid to Image Converter - AI-Powered Diagram Generator", "seoDescription": "Transform ideas into professional diagrams. Describe in plain English or use Mermaid code. Perfect for API docs, database schemas, Gantt charts, flowcharts. Batch processing, 5 themes, PNG/SVG/PDF output. No design skills needed.", "categories": [ "DEVELOPMENT", "UTILITIES" ]}# Use Apify's Node.js image with Playwright pre-installedFROM apify/actor-node-playwright-chrome:20
# Copy package filesCOPY package*.json ./
# Install dependenciesRUN npm install --omit=dev \ && echo "Installed NPM packages:" \ && npm list \ && echo "Node.js version:" \ && node --version \ && echo "NPM version:" \ && npm --version
# Copy source codeCOPY . ./
# Run the ActorCMD ["npm", "start"]{ "title": "Mermaid Diagram Generator Input", "description": "Generate professional diagrams from Mermaid code or plain English", "type": "object", "schemaVersion": 1, "properties": { "mermaidCode": { "title": "📝 Mermaid Code", "description": "Paste your Mermaid diagram code here. Copy from mermaid.live or write your own. Tip: Use Form view (not JSON) to paste multiline code directly.", "type": "string", "editor": "textarea", "prefill": "flowchart TD\n A[Start] --> B{Decision}\n B -->|Yes| C[Do something]\n B -->|No| D[Do something else]\n C --> E[End]\n D --> E" }, "aiDiagramType": { "title": "🤖 AI Mode: Diagram Type", "description": "Select the type of diagram you want AI to generate. Then describe it in the field below.", "type": "string", "editor": "select", "enum": [ "", "flowchart", "sequence", "er", "gantt", "pie", "state", "class", "mindmap", "timeline", "quadrant", "gitgraph", "sankey", "xy" ], "enumTitles": [ "-- Not using AI mode --", "Flowchart (processes, decisions)", "Sequence Diagram (API calls, interactions)", "ER Diagram (database schemas)", "Gantt Chart (project timelines)", "Pie Chart (data distribution)", "State Diagram (state machines)", "Class Diagram (OOP structures)", "Mindmap (brainstorming)", "Timeline (historical events)", "Quadrant Chart (priority matrix)", "Git Graph (branch visualization)", "Sankey Diagram (flow distribution)", "XY Chart (line/bar charts)" ], "default": "" }, "aiDescription": { "title": "🤖 AI Mode: Description", "description": "Describe your diagram in plain English. AI will generate the Mermaid code for you. Example: \"User logs in, if valid show dashboard, otherwise show error\"", "type": "string", "editor": "textarea" }, "openaiApiKey": { "title": "🔑 OpenAI API Key", "description": "Required for AI Mode. Get your key at platform.openai.com/api-keys", "type": "string", "editor": "textfield", "isSecret": true }, "outputFormat": { "title": "Output Format", "description": "The format of the generated diagram image", "type": "string", "editor": "select", "enum": [ "png", "svg", "pdf" ], "enumTitles": [ "PNG Image", "SVG Vector", "PDF Document" ], "default": "png" }, "theme": { "title": "Theme", "description": "Visual theme for the diagram", "type": "string", "editor": "select", "enum": [ "default", "forest", "dark", "neutral", "base" ], "enumTitles": [ "Default (Blue)", "Forest (Green)", "Dark Mode", "Neutral (Gray)", "Base (Minimal)" ], "default": "default" }, "backgroundColor": { "title": "Background Color", "description": "Background color: white, transparent, #ff0000, etc.", "type": "string", "editor": "textfield", "default": "white" }, "scale": { "title": "Scale (Quality)", "description": "Resolution multiplier 1-5 (PNG only). Scale 2 = 2x dimensions. Higher = sharper but larger file. Ignored for SVG/PDF.", "type": "integer", "editor": "number", "default": 3, "minimum": 1, "maximum": 5 }, "diagrams": { "title": "Batch Mode: Multiple Diagrams", "description": "Generate multiple diagrams. Each can have its own settings (theme, format, etc.) or use global defaults.", "type": "array", "editor": "json", "prefill": [ {"code": "flowchart TD\n A[Start] --> B[End]", "name": "diagram1"} ], "items": { "type": "object", "properties": { "code": { "title": "Mermaid Code", "type": "string", "description": "Mermaid diagram code" }, "name": { "title": "File Name", "type": "string", "description": "Output file name (without extension)" }, "outputFormat": { "title": "Output Format", "type": "string", "enum": ["png", "svg", "pdf"], "description": "Override global format for this diagram" }, "theme": { "title": "Theme", "type": "string", "enum": ["default", "forest", "dark", "neutral", "base"], "description": "Override global theme for this diagram" }, "backgroundColor": { "title": "Background Color", "type": "string", "description": "Override global background for this diagram" }, "scale": { "title": "Scale", "type": "integer", "minimum": 1, "maximum": 5, "description": "Override global scale for this diagram (PNG only)" }, "maxWidth": { "title": "Max Width", "type": "integer", "minimum": 0, "maximum": 4096, "description": "Override global maxWidth for this diagram" }, "maxHeight": { "title": "Max Height", "type": "integer", "minimum": 0, "maximum": 4096, "description": "Override global maxHeight for this diagram" } }, "required": ["code"] } }, "maxWidth": { "title": "Max Width (pixels)", "description": "Resize diagram to fit this width. Keeps aspect ratio. 0 = no limit. Works with PNG, SVG, and PDF.", "type": "integer", "default": 0, "minimum": 0, "maximum": 4096 }, "maxHeight": { "title": "Max Height (pixels)", "description": "Resize diagram to fit this height. Keeps aspect ratio. 0 = no limit. Works with PNG, SVG, and PDF.", "type": "integer", "default": 0, "minimum": 0, "maximum": 4096 } }, "required": []}{ "actorOutputSchemaVersion": 1, "title": "Mermaid Diagram Generator Output", "description": "Generated diagram images and metadata. Images are stored in key-value store, metadata in dataset.", "properties": { "overview": { "type": "string", "title": "Diagrams Overview", "description": "Table showing diagram type, format, filename and download URL for each generated diagram", "template": "{{links.apiDefaultDatasetUrl}}/items?view=overview" }, "allResults": { "type": "string", "title": "Full Results (JSON)", "description": "Complete metadata including mermaidCode, theme, dimensions, and AI generation info", "template": "{{links.apiDefaultDatasetUrl}}/items" }, "imageFiles": { "type": "string", "title": "Image Files", "description": "Generated diagram images in PNG, SVG, or PDF format", "template": "{{links.apiDefaultKeyValueStoreUrl}}/keys" } }}