skills.rest
rdmptv
rdmptvCOMMUNITY
Explore all skills by this author →
GitHub

moai-library-mermaid

Render Mermaid diagrams to SVG or PNG via MCP Playwright.

1|Updated Dec 3, 2025
Search Tags:#documentation#mermaid#mcp#playwright#diagram
One-click install
npx skills add https://github.com/rdmptv/AdbAutoPlayer --skill moai-library-mermaid-rdmptv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-library-mermaid
Source: https://github.com/rdmptv/AdbAutoPlayer/tree/main/.moai/backups/.claude.backup.1764591304/skills/moai-library-mermaid
Command: npx skills add https://github.com/rdmptv/AdbAutoPlayer --skill moai-library-mermaid-rdmptv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides enterprise-ready Mermaid diagram rendering with MCP Playwright integration, offering pattern-rich diagram examples and a stable approach to generating SVG/PNG diagrams within automated docs and design systems.

Core Features & Use Cases

  • Full Mermaid diagram type coverage (21 types)
  • MCP Playwright integration for server-side rendering
  • Rich examples and reference documentation
  • Enterprise diagram patterns and best practices

Quick Start

Load moai-library-mermaid and start rendering diagrams via the MCP Playwright pipeline.

Frequently Asked Questions about moai-library-mermaid

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render Mermaid diagrams to SVG or PNG?▼

Mermaid diagram rendering converts diagram code into SVG or PNG output using MCP Playwright integration. Load moai-library-mermaid, provide Mermaid syntax, and configure rendering via .claude/mcp.json to generate vector or raster formats suitable for documentation and design systems.

Does Mermaid work with all diagram types?▼

Mermaid supports all 21 diagram types including flowcharts, sequence, state, class, and architecture diagrams. This Skill provides full coverage of every Mermaid diagram type with server-side rendering via MCP Playwright, plus ready-made examples for enterprise patterns.

Can I use Mermaid diagrams in automated documentation workflows?▼

Mermaid diagram rendering integrates into automated docs and design systems for architecture, design, and documentation workflows. MCP Playwright handles server-side rendering so diagrams generate programmatically without manual conversion steps.

What's the best way to set up Mermaid rendering for enterprise use?▼

Enterprise Mermaid rendering requires configuring MCP Playwright integration via .claude/mcp.json and selecting server-side or hybrid rendering strategies. This Skill provides pattern-rich examples and reference documentation for stable, scalable diagram generation across teams.

How do I handle Mermaid diagram configuration and output formats?▼

Mermaid diagram configuration uses .claude/mcp.json to set rendering parameters, output format (SVG or PNG), and server or client-side strategy. The Skill supports hybrid rendering approaches for flexible diagram generation across different automation contexts.

Related Skills

Explore More Software Engineering Skills→
rodmena-limitedrodmena-limited
3

moai-library-mermaid

Generate Mermaid diagrams and render them as SVG and PNG via MCP Playwright.

Official
Advanced
TrevorEdrisTrevorEdris
2

mermaid-diagrams

Create Mermaid diagrams from plain text in Markdown documents.

Community
Basic
yarangyarang

moai-library-mermaid

Render Mermaid diagrams to SVG or PNG via MCP Playwright.

Community
Advanced
walterfanwalterfan
1

Diagram Render Skill

Render PlantUML, Mermaid, and Graphviz code blocks into PNG or SVG images.

Community
Intermediate