skills.rest
GoosLab
GoosLabCOMMUNITY
Explore all skills by this author →
Website𝕏@G00S_KIMGitHub

moai-library-mermaid

Render Mermaid diagrams to SVG/PNG via MCP Playwright in Claude Code.

1|Updated Jan 10, 2026
Search Tags:#architecture#documentation#mermaid#rendering#mcp#playwright#diagrams
One-click install
npx skills add https://github.com/GoosLab/moai-rank --skill moai-library-mermaid-gooslab
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-library-mermaid
Source: https://github.com/GoosLab/moai-rank/tree/main/.claude/skills/moai-library-mermaid
Command: npx skills add https://github.com/GoosLab/moai-rank --skill moai-library-mermaid-gooslab

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Mermaid diagram rendering for Claude Code workflows is often manual and isolated; this skill provides enterprise-grade, MCP Playwright-powered rendering to produce ready-to-use SVG/PNG diagrams.

Core Features & Use Cases

  • 21 diagram types Mermaid syntax support for Flowchart, Sequence, Class, ER, Mindmap, Gantt, and more, with consistent rendering.
  • MCP Playwright integration server-based rendering for SVG and PNG outputs.
  • Ready-to-use examples & docs including architecture patterns and advanced diagrams for enterprise diagrams.
  • Use Case: Generate architecture diagrams and documentation visuals directly from Mermaid code within Claude Code.

Quick Start

Render a Mermaid diagram from the given code using MCP Playwright and return an SVG output.

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

You can render Mermaid diagrams in Claude Code by using an MCP Playwright server to process diagram syntax and generate SVG or PNG outputs. This skill automates that rendering pipeline for architecture and sequence visuals.

What do I need to set up MCP Playwright for Mermaid rendering?▼

To use MCP Playwright for Mermaid rendering, you need an MCP-enabled environment with Node.js installed and a configured mcp.json file. This setup connects Claude Code workflows to the server-based rendering engine.

Does this Mermaid rendering skill support sequence diagrams and flowcharts?▼

Yes, this Mermaid rendering skill supports sequence diagrams, flowcharts, and all 21 Mermaid diagram types including class, ER, and mindmap. It uses Mermaid v11.12.2 to ensure consistent syntax rendering.

Can I generate architecture diagrams directly from Mermaid code in Claude Code?▼

Yes, you can generate architecture diagrams directly from Mermaid code in Claude Code. The skill provides built-in enterprise architecture patterns and reference documentation to facilitate complex visual outputs.

What are the limitations of using MCP Playwright for Mermaid diagram rendering?▼

Using MCP Playwright for Mermaid rendering requires a strict MCP-enabled environment with Node.js and a properly configured mcp.json file. Rendering is server-based, so it cannot run in isolated or unsupported environments.

Related Skills

Explore More Software Engineering Skills→
mindmorassmindmorass
2

video-upload-patterns

Automate video uploads to YouTube, TikTok, and Vimeo with metadata and scheduling.

Community
Advanced
TrevorEdrisTrevorEdris
2

mermaid-diagrams

Create Mermaid diagrams from plain text in Markdown documents.

Community
Basic
KrystianYCSilvaKrystianYCSilva

markdown-expert

Create Markdown documentation with Mermaid diagrams and GFM tables.

Community
Intermediate
modu-aimodu-ai
1.2k

moai-library-mermaid

Render Mermaid diagrams to SVG or PNG via MCP Playwright.

Official
Advanced