{
  "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": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/mermaid-image-generator",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=mermaid-image-generator",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "scripts/mermaid-to-image.js"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "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."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "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."
        },
        {
          "label": "Upgrade existing",
          "body": "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."
        }
      ]
    },
    "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."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/mermaid-image-generator",
    "agentPageUrl": "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"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "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."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "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."
      },
      {
        "label": "Upgrade existing",
        "body": "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."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Mermaid Image Generator",
        "body": "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."
      },
      {
        "title": "Quick Start",
        "body": "# From a .mmd file\nnode scripts/mermaid-to-image.js diagram.mmd output.png\n\n# From stdin\necho \"flowchart LR; A --> B\" | node scripts/mermaid-to-image.js - output.png\n\n# Generate SVG instead\nnode scripts/mermaid-to-image.js diagram.mmd output.svg"
      },
      {
        "title": "When to Use This Skill",
        "body": "Use this skill when:\n\nUser asks to \"draw a diagram\", \"create a flowchart\", \"make a visual\"\nUser needs diagram images for PPTs, documentation, or presentations\nUser wants to convert Mermaid code to shareable image files\nLocal Mermaid CLI (mmdc) is unavailable or has dependency issues"
      },
      {
        "title": "Basic Conversion",
        "body": "node scripts/mermaid-to-image.js <input> <output>\n\nInput options:\n\nFile path: diagram.mmd\nStdin: - (pipe Mermaid code directly)\n\nOutput format: Determined by file extension (.png or .svg)"
      },
      {
        "title": "Examples",
        "body": "Example 1: Convert file to PNG\n\nnode scripts/mermaid-to-image.js flowchart.mmd flowchart.png\n\nExample 2: Pipe from stdin\n\ncat <<EOF | node scripts/mermaid-to-image.js - sequence.png\nsequenceDiagram\n    Alice->>Bob: Hello\n    Bob-->>Alice: Hi\nEOF\n\nExample 3: Generate SVG for web\n\nnode scripts/mermaid-to-image.js architecture.mmd architecture.svg"
      },
      {
        "title": "Mermaid Diagram Types",
        "body": "This skill supports all Mermaid diagram types:\n\nTypeUse CaseflowchartProcesses, algorithms, user journeyssequenceDiagramAPI flows, interactions over timeclassDiagramOOP design, domain modelserDiagramDatabase schemasstateDiagramState machinesganttProject timelinespieProportional datagitGraphGit branching strategies"
      },
      {
        "title": "Flowchart",
        "body": "flowchart LR\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Action 1]\n    B -->|No| D[Action 2]\n    C --> E[End]\n    D --> E"
      },
      {
        "title": "Sequence Diagram",
        "body": "sequenceDiagram\n    participant User\n    participant API\n    participant Database\n    \n    User->>API: POST /login\n    API->>Database: Query\n    Database-->>API: Result\n    API-->>User: Response"
      },
      {
        "title": "Class Diagram",
        "body": "classDiagram\n    Animal <|-- Duck\n    Animal <|-- Fish\n    Animal: +int age\n    Animal: +String gender\n    Animal: +isMammal()"
      },
      {
        "title": "API Details",
        "body": "Service: mermaid.ink\nEndpoints:\n\nPNG: https://mermaid.ink/img/{base64_code}\nSVG: https://mermaid.ink/svg/{base64_code}\n\nAdvantages:\n\n✅ No local dependencies (no Chrome/Puppeteer needed)\n✅ Free and fast\n✅ Returns high-quality PNG/SVG\n✅ Works in headless environments\n\nLimitations:\n\nRequires internet connection\nDiagram code is sent to external service (don't use for sensitive data)"
      },
      {
        "title": "Error Handling",
        "body": "The script handles common errors:\n\n❌ File not found: diagram.mmd\n❌ API request failed: 400 Bad Request\n❌ Failed to connect to mermaid.ink: Connection timeout\n\nTroubleshooting:\n\nCheck internet connectivity\nVerify Mermaid syntax at https://mermaid.live\nEnsure output directory exists (script creates it automatically)"
      },
      {
        "title": "Integration Pattern",
        "body": "When creating diagrams for users:\n\nWrite Mermaid code → Save to .mmd file or use stdin\nRun conversion script → Generate PNG/SVG\nSend/deliver image → Attach to response or save to specified location\n\nExample workflow:\n\n# 1. Create diagram\ncat > openclaw-flow.mmd <<EOF\nflowchart LR\n    User --> OpenClaw\n    OpenClaw --> Tools\nEOF\n\n# 2. Convert to image\nnode scripts/mermaid-to-image.js openclaw-flow.mmd openclaw-flow.png\n\n# 3. Use the image (send via message, save, etc.)"
      },
      {
        "title": "Best Practices",
        "body": "Keep diagrams simple - Under 15 nodes for readability\nUse meaningful labels - Self-documenting diagrams\nTest syntax first - Validate at mermaid.live before converting\nChoose format wisely - PNG for PPTs, SVG for web/docs\nAdd comments - Use %% for in-diagram documentation"
      },
      {
        "title": "Security Notes",
        "body": "Diagram code is sent to mermaid.ink API\nDo not include sensitive information in diagrams\nFor sensitive data, use local Mermaid CLI instead"
      }
    ],
    "body": "Mermaid Image Generator\n\nConvert 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.\n\nQuick Start\n# From a .mmd file\nnode scripts/mermaid-to-image.js diagram.mmd output.png\n\n# From stdin\necho \"flowchart LR; A --> B\" | node scripts/mermaid-to-image.js - output.png\n\n# Generate SVG instead\nnode scripts/mermaid-to-image.js diagram.mmd output.svg\n\nWhen to Use This Skill\n\nUse this skill when:\n\nUser asks to \"draw a diagram\", \"create a flowchart\", \"make a visual\"\nUser needs diagram images for PPTs, documentation, or presentations\nUser wants to convert Mermaid code to shareable image files\nLocal Mermaid CLI (mmdc) is unavailable or has dependency issues\nScript Usage\nBasic Conversion\nnode scripts/mermaid-to-image.js <input> <output>\n\n\nInput options:\n\nFile path: diagram.mmd\nStdin: - (pipe Mermaid code directly)\n\nOutput format: Determined by file extension (.png or .svg)\n\nExamples\n\nExample 1: Convert file to PNG\n\nnode scripts/mermaid-to-image.js flowchart.mmd flowchart.png\n\n\nExample 2: Pipe from stdin\n\ncat <<EOF | node scripts/mermaid-to-image.js - sequence.png\nsequenceDiagram\n    Alice->>Bob: Hello\n    Bob-->>Alice: Hi\nEOF\n\n\nExample 3: Generate SVG for web\n\nnode scripts/mermaid-to-image.js architecture.mmd architecture.svg\n\nMermaid Diagram Types\n\nThis skill supports all Mermaid diagram types:\n\nType\tUse Case\nflowchart\tProcesses, algorithms, user journeys\nsequenceDiagram\tAPI flows, interactions over time\nclassDiagram\tOOP design, domain models\nerDiagram\tDatabase schemas\nstateDiagram\tState machines\ngantt\tProject timelines\npie\tProportional data\ngitGraph\tGit branching strategies\nExample Mermaid Code\nFlowchart\nflowchart LR\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Action 1]\n    B -->|No| D[Action 2]\n    C --> E[End]\n    D --> E\n\nSequence Diagram\nsequenceDiagram\n    participant User\n    participant API\n    participant Database\n    \n    User->>API: POST /login\n    API->>Database: Query\n    Database-->>API: Result\n    API-->>User: Response\n\nClass Diagram\nclassDiagram\n    Animal <|-- Duck\n    Animal <|-- Fish\n    Animal: +int age\n    Animal: +String gender\n    Animal: +isMammal()\n\nAPI Details\n\nService: mermaid.ink Endpoints:\n\nPNG: https://mermaid.ink/img/{base64_code}\nSVG: https://mermaid.ink/svg/{base64_code}\n\nAdvantages:\n\n✅ No local dependencies (no Chrome/Puppeteer needed)\n✅ Free and fast\n✅ Returns high-quality PNG/SVG\n✅ Works in headless environments\n\nLimitations:\n\nRequires internet connection\nDiagram code is sent to external service (don't use for sensitive data)\nError Handling\n\nThe script handles common errors:\n\n❌ File not found: diagram.mmd\n❌ API request failed: 400 Bad Request\n❌ Failed to connect to mermaid.ink: Connection timeout\n\n\nTroubleshooting:\n\nCheck internet connectivity\nVerify Mermaid syntax at https://mermaid.live\nEnsure output directory exists (script creates it automatically)\nIntegration Pattern\n\nWhen creating diagrams for users:\n\nWrite Mermaid code → Save to .mmd file or use stdin\nRun conversion script → Generate PNG/SVG\nSend/deliver image → Attach to response or save to specified location\n\nExample workflow:\n\n# 1. Create diagram\ncat > openclaw-flow.mmd <<EOF\nflowchart LR\n    User --> OpenClaw\n    OpenClaw --> Tools\nEOF\n\n# 2. Convert to image\nnode scripts/mermaid-to-image.js openclaw-flow.mmd openclaw-flow.png\n\n# 3. Use the image (send via message, save, etc.)\n\nBest Practices\nKeep diagrams simple - Under 15 nodes for readability\nUse meaningful labels - Self-documenting diagrams\nTest syntax first - Validate at mermaid.live before converting\nChoose format wisely - PNG for PPTs, SVG for web/docs\nAdd comments - Use %% for in-diagram documentation\nSecurity Notes\nDiagram code is sent to mermaid.ink API\nDo not include sensitive information in diagrams\nFor sensitive data, use local Mermaid CLI instead"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/vincent-ng/mermaid-image-generator",
    "publisherUrl": "https://clawhub.ai/vincent-ng/mermaid-image-generator",
    "owner": "vincent-ng",
    "version": "1.0.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "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"
  }
}