moai-library-mermaid

Render Mermaid diagrams to SVG or PNG via MCP Playwright.

1.2k|214|Updated Sep 16, 2025
One-click install
npx skills add https://github.com/modu-ai/moai-adk --skill moai-library-mermaid
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: moai-library-mermaid
Source: https://github.com/modu-ai/moai-adk/tree/main/.claude/skills/moai-library-mermaid
Command: npx skills add https://github.com/modu-ai/moai-adk --skill moai-library-mermaid

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pure skill-based Mermaid rendering for Claude Code with MCP Playwright integration, enabling enterprise-grade diagram generation.

Core Features & Use Cases

  • Mermaid syntax for 21 diagram types
  • MCP Playwright rendering to SVG/PNG
  • Ready-to-use examples and documentation
  • Enterprise diagram patterns and best practices

Quick Start

Use Skill("moai-library-mermaid") to render a Mermaid diagram from code blocks and templates.

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 as SVG or PNG in Claude Code?

Render Mermaid diagrams using MCP Playwright integration by calling Skill("moai-library-mermaid") with Mermaid syntax. The Skill converts diagram code to SVG or PNG outputs via server-side or client-side rendering, supporting 21 diagram types for documentation, design reviews, and enterprise workflows.

Does Mermaid work with enterprise software documentation and onboarding?

Yes. Mermaid diagrams scale across enterprise use cases including software design, documentation, onboarding, and review workflows. This Skill provides ready-to-use examples, reference documentation, and best practices for implementing enterprise diagram patterns.

What diagram types can I create with Mermaid syntax?

Mermaid supports 21 diagram types including flowcharts, sequence diagrams, class diagrams, state machines, and more. This Skill covers the complete Mermaid syntax specification, enabling any diagram type in your documentation or design process.

Can I integrate Mermaid rendering into Claude Code workflows?

Yes. The Skill integrates Mermaid rendering directly into Claude Code through MCP Playwright configuration in .claude/mcp.json. This enables seamless diagram generation within your existing code analysis and documentation workflows.

What's the difference between server-side and client-side Mermaid rendering?

Server-side rendering processes diagrams on the backend for consistent output and reduced client load; client-side rendering generates diagrams in the browser for interactivity. This Skill supports both modes, letting you choose based on your performance and feature needs.