Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
Renders Mermaid diagram code blocks as SVG images or ASCII art without a browser or DOM. Supports flowcharts, state machines, sequence diagrams, class diagrams, and ER diagrams. Includes 15 built-in themes and Shiki theme compatibility.
Runs without Puppeteer or a browser, so it renders 100+ diagrams in under 500ms and works in any Node/Bun environment where mmdc would be too heavy.
When to use it
- Rendering architecture diagrams sent in a Telegram chat
- Visualizing Mermaid blocks in terminal or CLI output
- Generating themed SVG diagrams for a web dashboard
- Converting Mermaid code blocks in AI responses to images
- Printing ASCII flowcharts in a headless server environment
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: Can you visualize this? ```mermaid graph TD User --> LB[Load Balancer] LB --> API API --> DB[(Database)] ```
- 1Detect the mermaid code block in the user message
- 2Call renderMermaid() with the extracted diagram code
- 3Apply a built-in theme such as tokyo-night
- 4Return the SVG string for display or send as an image
An SVG image of the load balancer architecture diagram rendered with the tokyo-night theme