# Send Mermaid Image Generator to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - Download the package from Yavira. - Extract it into a folder your agent can access. - Paste one of the prompts below and point your agent at the extracted folder. ## Suggested prompts ### New install ```text I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete. ``` ### Upgrade existing ```text I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "mermaid-image-generator", "name": "Mermaid Image Generator", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/vincent-ng/mermaid-image-generator", "canonicalUrl": "https://clawhub.ai/vincent-ng/mermaid-image-generator", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/mermaid-image-generator", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=mermaid-image-generator", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md", "scripts/mermaid-to-image.js" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-04-30T16:55:25.780Z", "expiresAt": "2026-05-07T16:55:25.780Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network", "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/mermaid-image-generator" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/mermaid-image-generator", "downloadUrl": "https://openagent3.xyz/downloads/mermaid-image-generator", "agentUrl": "https://openagent3.xyz/skills/mermaid-image-generator/agent", "manifestUrl": "https://openagent3.xyz/skills/mermaid-image-generator/agent.json", "briefUrl": "https://openagent3.xyz/skills/mermaid-image-generator/agent.md" } } ``` ## Documentation ### Mermaid Image Generator Convert Mermaid diagram syntax to PNG/SVG images using the mermaid.ink online rendering API. Zero dependencies - uses only Node.js built-in modules and curl. ### Quick Start # From a .mmd file node scripts/mermaid-to-image.js diagram.mmd output.png # From stdin echo "flowchart LR; A --> B" | node scripts/mermaid-to-image.js - output.png # Generate SVG instead node scripts/mermaid-to-image.js diagram.mmd output.svg ### When to Use This Skill Use this skill when: User asks to "draw a diagram", "create a flowchart", "make a visual" User needs diagram images for PPTs, documentation, or presentations User wants to convert Mermaid code to shareable image files Local Mermaid CLI (mmdc) is unavailable or has dependency issues ### Basic Conversion node scripts/mermaid-to-image.js Input options: File path: diagram.mmd Stdin: - (pipe Mermaid code directly) Output format: Determined by file extension (.png or .svg) ### Examples Example 1: Convert file to PNG node scripts/mermaid-to-image.js flowchart.mmd flowchart.png Example 2: Pipe from stdin cat <>Bob: Hello Bob-->>Alice: Hi EOF Example 3: Generate SVG for web node scripts/mermaid-to-image.js architecture.mmd architecture.svg ### Mermaid Diagram Types This skill supports all Mermaid diagram types: TypeUse CaseflowchartProcesses, algorithms, user journeyssequenceDiagramAPI flows, interactions over timeclassDiagramOOP design, domain modelserDiagramDatabase schemasstateDiagramState machinesganttProject timelinespieProportional datagitGraphGit branching strategies ### Flowchart flowchart LR A[Start] --> B{Decision} B -->|Yes| C[Action 1] B -->|No| D[Action 2] C --> E[End] D --> E ### Sequence Diagram sequenceDiagram participant User participant API participant Database User->>API: POST /login API->>Database: Query Database-->>API: Result API-->>User: Response ### Class Diagram classDiagram Animal <|-- Duck Animal <|-- Fish Animal: +int age Animal: +String gender Animal: +isMammal() ### API Details Service: mermaid.ink Endpoints: PNG: https://mermaid.ink/img/{base64_code} SVG: https://mermaid.ink/svg/{base64_code} Advantages: ✅ No local dependencies (no Chrome/Puppeteer needed) ✅ Free and fast ✅ Returns high-quality PNG/SVG ✅ Works in headless environments Limitations: Requires internet connection Diagram code is sent to external service (don't use for sensitive data) ### Error Handling The script handles common errors: ❌ File not found: diagram.mmd ❌ API request failed: 400 Bad Request ❌ Failed to connect to mermaid.ink: Connection timeout Troubleshooting: Check internet connectivity Verify Mermaid syntax at https://mermaid.live Ensure output directory exists (script creates it automatically) ### Integration Pattern When creating diagrams for users: Write Mermaid code → Save to .mmd file or use stdin Run conversion script → Generate PNG/SVG Send/deliver image → Attach to response or save to specified location Example workflow: # 1. Create diagram cat > openclaw-flow.mmd < OpenClaw OpenClaw --> Tools EOF # 2. Convert to image node scripts/mermaid-to-image.js openclaw-flow.mmd openclaw-flow.png # 3. Use the image (send via message, save, etc.) ### Best Practices Keep diagrams simple - Under 15 nodes for readability Use meaningful labels - Self-documenting diagrams Test syntax first - Validate at mermaid.live before converting Choose format wisely - PNG for PPTs, SVG for web/docs Add comments - Use %% for in-diagram documentation ### Security Notes Diagram code is sent to mermaid.ink API Do not include sensitive information in diagrams For sensitive data, use local Mermaid CLI instead ## Trust - Source: tencent - Verification: Indexed source record - Publisher: vincent-ng - Version: 1.0.0 ## Source health - Status: healthy - Source download looks usable. - Yavira can redirect you to the upstream package for this source. - Health scope: source - Reason: direct_download_ok - Checked at: 2026-04-30T16:55:25.780Z - Expires at: 2026-05-07T16:55:25.780Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/mermaid-image-generator) - [Send to Agent page](https://openagent3.xyz/skills/mermaid-image-generator/agent) - [JSON manifest](https://openagent3.xyz/skills/mermaid-image-generator/agent.json) - [Markdown brief](https://openagent3.xyz/skills/mermaid-image-generator/agent.md) - [Download page](https://openagent3.xyz/downloads/mermaid-image-generator)