An automated tool to transform Mermaid diagrams into hosted image URLs for seamless Markdown and content integration.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install mermaid-image-uploader
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install mermaid-image-uploader using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Mermaid Image Generation & Hosting?
This skill bridges the gap between text-based diagramming and visual content delivery by allowing developers and content creators to define diagrams using Mermaid syntax and automatically convert them into static image files. By leveraging Openclaw Skills, users can transform raw code into PNG, SVG, or JPG formats and autonomously upload these assets to various image hosting providers. This is particularly valuable for platforms like WeChat Official Accounts where direct Mermaid rendering is not supported.
Integrating this capability via Openclaw Skills ensures that your technical documentation and articles remain visually engaging without the manual overhead of exporting, saving, and manually hosting images. It streamlines the entire pipeline from diagram definition to public URL generation.
Mermaid Image Generation & Hosting Use Cases
- Converting Mermaid code blocks in Markdown files into hosted image links for WeChat Official Account articles.
- Automating documentation pipelines where diagrams need to be hosted externally for cross-platform compatibility.
- Generating high-resolution PNG or SVG diagrams via CLI for technical presentations or GitHub READMEs.
- Batch processing existing Markdown repositories to replace local Mermaid blocks with cloud-hosted image URLs for better portability.
How Mermaid Image Generation & Hosting Works
- The user provides a Mermaid source file (.mmd) or a Markdown file containing Mermaid code blocks as input to the Openclaw Skills environment.
- The skill utilizes the internal mermaid-cli wrapper to render the text-based syntax into a high-quality image file.
- The generated image is passed to the image host uploader module which supports multiple providers.
- The skill communicates with services such as Imgur, FreeImage, or Cloudinary to store the file securely.
- A public image URL is returned to the user or used to automatically update the original Markdown file.
Mermaid Image Generation & Hosting Setup
To begin using this tool within Openclaw Skills, install the necessary Python and Node.js dependencies:
# Install Python requirements
pip install mermaid-cli requests
# Install the Mermaid CLI via NPM
npm install -g @mermaid-js/mermaid-cli
Mermaid Image Generation & Hosting Data Schema & Taxonomy
The skill organizes its operations through a modular structure to ensure reliability:
| Component | Description |
|---|---|
mermaid_uploader.py |
The main execution engine for managing the workflow. |
mermaid_converter.py |
Logic for transforming Mermaid syntax into visual formats. |
image_host_uploader.py |
Interface for various image hosting APIs (Imgur, Postimages, etc.). |
examples/ |
Directory containing sample .mmd and .md files for testing. |
package.json |
Configuration file for skill metadata and environment settings. |
Mermaid Image Generation & Hosting Advanced Features
- Multi-host support allowing users to choose between Imgur, FreeImage.host, Postimages, and Cloudinary.
- Batch processing capabilities to scan and update entire Markdown documents in a single command.
- Flexible output formatting with support for PNG, SVG, and JPG to meet different quality and size requirements.
- API key management for secure uploads to premium or private image hosting accounts using Openclaw Skills.
SKILL.md
Loading
Related Openclaw Skills
Draw.io Flowchart Generator
An intelligent generator that creates professional Draw.io system architecture diagrams and flowcharts with automated local app integration.
Brutal Honesty Advisor
An unfiltered AI feedback engine designed to provide high-signal, objective reality checks for ideas and decisions.
Sentry (Read-only)
A diagnostic tool for reading Sentry issues, production errors, and events through a secure, read-only API connection.
Monday.com
A Python-powered interface to query Monday.com project data, boards, and team information directly via the official GraphQL API.
Unified Search Skill
A smart, multi-engine search skill that automatically routes queries to Baidu, DuckDuckGo, or CoinGecko based on language and context.
Moss Agent Skills
A high-performance semantic search runtime designed for real-time conversational AI and on-device agent retrieval with sub-10ms latency.
Featured*
