skills.rest
yarang
yarangCOMMUNITY
Explore all skills by this author →
GitHub

moai-library-mermaid

Render Mermaid diagrams to SVG or PNG via MCP Playwright.

Updated Jan 16, 2026
Search Tags:#documentation#mermaid#Claude Code#architecture-diagrams#diagram-rendering#MCP Playwright
One-click install
npx skills add https://github.com/yarang/fastapi-error-code --skill moai-library-mermaid-yarang
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-library-mermaid
Source: https://github.com/yarang/fastapi-error-code/tree/main/.claude/skills/moai-library-mermaid
Command: npx skills add https://github.com/yarang/fastapi-error-code --skill moai-library-mermaid-yarang

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Diagram authors often need to generate consistent Mermaid diagrams across Claude Code workflows, including architecture, sequence, and class diagrams, without leaving the editor or managing external tooling.

Core Features & Use Cases

  • 21 Mermaid diagram types supported with MCP Playwright rendering for SVG/PNG outputs.
  • Ready-to-use examples and reference materials to accelerate diagram generation in documentation and architecture tasks.
  • Enterprise-pattern diagrams and integration patterns for architectural visualization and design review.

Quick Start

To begin, invoke the moai-library-mermaid skill with a Mermaid code snippet in Claude Code to render a diagram using MCP Playwright and obtain an SVG or PNG 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 in Claude Code without external tooling?▼

To automate Mermaid diagram rendering in Claude Code, invoke the skill with a code snippet to generate SVG or PNG outputs using MCP Playwright, eliminating the need for external tooling.

What prerequisites are needed to automate Mermaid diagram rendering?▼

Automating Mermaid diagram rendering requires a Node.js runtime, Mermaid version 11.12.2, and an MCP Playwright setup configured within your project's mcp.json file to execute the rendering pipeline.

Which Mermaid diagram types are supported for architecture and documentation pipelines?▼

The skill supports 21 Mermaid diagram types, including architecture, sequence, class, and ER diagrams, providing ready-to-use examples and enterprise integration patterns for documentation pipelines.

Does MCP Playwright support exporting SVG and PNG outputs for Mermaid?▼

Yes, MCP Playwright supports rendering Mermaid diagrams and exporting them as SVG or PNG outputs, allowing seamless integration of visual architecture diagrams into your documentation workflows.

What is the best way to generate enterprise architecture diagrams using Mermaid?▼

The best way to generate enterprise architecture diagrams is by using the skill's built-in enterprise-pattern diagrams and integration patterns, which accelerate architectural visualization and design review processes.

Related Skills

Explore More Software Engineering Skills→
windyskywindysky

moai-library-mermaid

Render Mermaid diagrams to SVG and PNG via MCP Playwright.

Community
Advanced
odylithodylith
34

odylith-atlas-render

Render Atlas diagrams from Yardl or other sources into Minecraft's Yak? No, Yak is not involved. Actually, reprocess the request: convert Mermaid catalog data to Atlas diagrams and export them as SVG or PNG files for use in documentation and presentations.

Official
Intermediate
adriannoesadriannoes
46

technical-diagram-analyzer

Analyze and validate technical diagrams for standards compliance.

Community
Intermediate
GoosLabGoosLab

moai-library-mermaid

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

Community
Advanced