Automatically transform diagram code blocks into inline Base64 images within Markdown files.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install markdown-diagram-renderer
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 markdown-diagram-renderer 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 Markdown Diagram Renderer?
The Markdown Diagram Renderer is a sophisticated utility designed to bridge the gap between text-based diagramming and visual documentation. By leveraging Openclaw Skills, this tool scans Markdown documents for Mermaid, Graphviz, or PlantUML syntax and replaces them with rendered images. It ensures that your technical documentation remains highly readable and portable by embedding images directly as Base64 strings.
This skill is built for developers who prioritize version control and document portability. It intelligently identifies diagram types even without explicit language tags, using keyword density and structural analysis. Whether you are working on complex architecture headers or simple flowcharts, this tool within the Openclaw Skills ecosystem provides a seamless bridge from code to visualization.
Markdown Diagram Renderer Use Cases
- Visualizing system architectures directly within GitHub or GitLab README files.
- Converting complex flowcharts in technical specs to portable Base64 images for offline distribution.
- Streamlining the creation of technical blog posts by rendering diagrams during the build process.
- Enhancing personal knowledge bases with Openclaw Skills to ensure diagrams are visible in any Markdown viewer.
How Markdown Diagram Renderer Works
- The skill processes an input Markdown file and identifies potential diagram code blocks using a multi-stage detection engine.
- It analyzes language tags, keyword declarations, and structural features to determine if a block is Mermaid, Graphviz, or PlantUML.
- Based on local availability, it triggers a local renderer (like mmdc or dot) or falls back to a secure online API.
- The resulting diagram is converted into the requested image format, such as PNG or SVG.
- The tool replaces the original code block with a Base64-encoded image string and optionally wraps the original source in a comment for future modifications.
Markdown Diagram Renderer Setup
To begin using this tool within your Openclaw Skills workflow, first install the required Python dependencies:
pip install -r script/requirements.txt
For enhanced privacy and local Mermaid rendering, install the mermaid-cli:
npm install -g @mermaid-js/mermaid-cli
If you require Graphviz support, install the binary for your operating system:
# macOS
brew install graphviz
# Linux
sudo apt-get install graphviz
For PlantUML, ensure Java is installed and set the jar path in your environment variables:
export PLANTUML_JAR=/path/to/plantuml.jar
Markdown Diagram Renderer Data Schema & Taxonomy
The Markdown Diagram Renderer organizes its processing logic and output as follows:
| Feature | Specification |
|---|---|
| Input Formats | Markdown (.md) containing Mermaid, Graphviz (dot/gv), or PlantUML (puml) blocks. |
| Output Formats | PNG or SVG rendered as Base64 strings. |
| Metadata Storage | Original source code is preserved within HTML comments <!-- ... --> directly below the image. |
| Identification Logic | Multi-stage: Tag Check -> Keyword Matching -> Density Analysis -> Structural Analysis. |
| Configuration | Controlled via CLI flags or a Python dictionary for module integration. |
Markdown Diagram Renderer Advanced Features
- Smart identification engine that detects diagram types without requiring explicit Markdown language identifiers.
- Multi-backend rendering support that prioritizes local binaries for security and falls back to APIs for convenience.
- Adjustable confidence thresholds to fine-tune how aggressively the tool identifies diagram code blocks.
- Base64 inlining to ensure that your Openclaw Skills generated documents are fully self-contained without external image dependencies.
- Support for multiple output formats including SVG for high-resolution scaling and PNG for broad compatibility.
SKILL.md
Loading
Related Openclaw Skills
Dedao Hot Trend Content Retriever
A specialized automation tool for extracting metadata and summarizing public course and column content from the Dedao (iGetGet) platform.
md2docx
A high-fidelity Markdown to Word (.docx) converter featuring a two-stage processing engine for superior formatting and Chinese font support.
Keevx Image-to-Video
A high-performance video generation tool that converts static images into dynamic, professional-grade videos via the Keevx API.
Marketing Ideas for SaaS
A comprehensive library of 139 proven marketing strategies and growth tactics tailored for SaaS and software products.
AI Coder Pro
An advanced AI-powered coding assistant designed to accelerate software development through automated code generation, debugging, and testing.
Xdoc Translation API
A professional-grade document and text translation skill that integrates the Xdoc API for high-fidelity multilingual processing.
Featured*
